import { useMemo, useState } from 'react';
import { FIGHTERS, fighterInitials } from '@sbt/shared';

/**
 * Placeholder character picker — renders initial chips for the full SSBU roster.
 * Swap the chip for a real stock icon later by mapping the fighter id to an image.
 */
export function CharacterPicker({ value, onChange }: { value: string; onChange: (id: string) => void }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');

  const filtered = useMemo(
    () => FIGHTERS.filter((f) => f.toLowerCase().includes(q.toLowerCase())),
    [q],
  );

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        className="flex w-full items-center gap-2 rounded-md border border-edge bg-ink px-2 py-1.5 text-sm"
      >
        <span className="grid h-7 w-7 place-items-center rounded bg-red-500 text-xs font-bold">
          {fighterInitials(value)}
        </span>
        <span className="truncate">{value || 'Pick character'}</span>
      </button>

      {open && (
        <div className="absolute z-20 mt-1 w-72 rounded-md border border-edge bg-panel p-2 shadow-xl">
          <input
            autoFocus
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search fighters…"
            className="mb-2 w-full rounded border border-edge bg-ink px-2 py-1 text-sm outline-none"
          />
          <div className="grid max-h-64 grid-cols-5 gap-1 overflow-y-auto">
            <Chip label="None" id="" active={value === ''} onPick={(id) => { onChange(id); setOpen(false); }} />
            {filtered.map((f) => (
              <Chip key={f} label={f} id={f} active={value === f} onPick={(id) => { onChange(id); setOpen(false); }} />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

function Chip({ label, id, active, onPick }: { label: string; id: string; active: boolean; onPick: (id: string) => void }) {
  return (
    <button
      type="button"
      title={label}
      onClick={() => onPick(id)}
      className={`grid h-11 place-items-center rounded text-[11px] font-bold ${active ? 'bg-red-500 text-white' : 'bg-ink hover:bg-edge'}`}
    >
      {id ? fighterInitials(id) : '∅'}
    </button>
  );
}