'use client';

export interface Counter {
  id: number;
  name: string;
  value: number;
  image_path: string | null;
  group_id: number | null;
  order_index: number;
}

interface Props {
  counter: Counter;
  onIncrement: (id: number) => void;
  onDecrement: (id: number) => void;
  onEdit: (counter: Counter) => void;
  onHistory: (id: number) => void;
  onPrefetch?: (id: number) => void;
  editMode?: boolean;
  dragHandleProps?: Record<string, unknown>;
}

export default function CounterCard({ counter, onIncrement, onDecrement, onEdit, onHistory, onPrefetch, editMode, dragHandleProps }: Props) {

  return (
    <div
      {...dragHandleProps}
      className={`bg-ctp-surface0 rounded-2xl shadow-sm ring-1 ring-ctp-surface1 overflow-hidden flex flex-col select-none transition-shadow hover:shadow-lg hover:shadow-ctp-crust${dragHandleProps ? ' cursor-grab active:cursor-grabbing' : ''}`}
    >

      {/* Title area — click opens edit modal */}
      <button
        onClick={() => !editMode && onEdit(counter)}
        className={`w-full flex items-center justify-center px-4 pt-3 pb-2 h-16 transition-colors ${!editMode ? 'hover:bg-ctp-surface1' : ''}`}
        title={editMode ? undefined : 'Edit counter'}
      >
        <h3 className="font-bold text-ctp-text text-lg leading-tight line-clamp-2 text-center">
          {counter.name}
        </h3>
      </button>

      {/* Middle: image — click opens history modal */}
      <button
        onClick={() => !editMode && onHistory(counter.id)}
        onMouseEnter={() => !editMode && onPrefetch?.(counter.id)}
        className={`w-full flex-1 flex items-center justify-center transition-colors ${!editMode ? 'hover:bg-ctp-surface1' : ''}`}
        title={editMode ? undefined : 'View history'}
      >
        {counter.image_path ? (
          <div className="w-full bg-ctp-surface0 flex items-center justify-center overflow-hidden" style={{ minHeight: '6rem', maxHeight: '9rem' }}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              src={`/api/uploads/${counter.image_path}`}
              alt={counter.name}
              className="max-w-full max-h-36 object-contain py-2"
            />
          </div>
        ) : (
          <div className="w-full flex items-center justify-center" style={{ minHeight: '4rem' }}>
            <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-ctp-overlay0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <line x1="18" y1="20" x2="18" y2="10" /><line x1="12" y1="20" x2="12" y2="4" /><line x1="6" y1="20" x2="6" y2="14" />
            </svg>
          </div>
        )}
      </button>

      {/* Counter controls */}
      <div className="flex items-center justify-center px-3 py-3 mt-auto">
        <div className="flex items-center bg-ctp-surface1 rounded-2xl overflow-hidden">
          <button
            onClick={() => onDecrement(counter.id)}
            disabled={counter.value <= 0}
            aria-label="Decrement"
            className="w-11 h-11 flex items-center justify-center text-ctp-red hover:bg-ctp-red/20 active:bg-ctp-red/30 active:scale-95 transition-all disabled:opacity-25 disabled:pointer-events-none"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
          </button>
          <span className="text-2xl font-extrabold w-14 text-center tabular-nums text-ctp-text tracking-tight select-none">
            {counter.value}
          </span>
          <button
            onClick={() => onIncrement(counter.id)}
            aria-label="Increment"
            className="w-11 h-11 flex items-center justify-center text-ctp-green hover:bg-ctp-green/20 active:bg-ctp-green/30 active:scale-95 transition-all"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
              <line x1="12" y1="5" x2="12" y2="19" />
              <line x1="5" y1="12" x2="19" y2="12" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  );
}