import { useEffect, useMemo, useRef, useState } from 'react';
import { useNavigate } from '@tanstack/react-router';
import { Search } from 'lucide-react';
import { teamFlag } from '@/lib/teams';
import { useFormat } from '@/lib/i18n';
import { useTournamentStore } from '@/stores/tournamentStore';

interface Hit {
  kind: 'team' | 'match';
  label: string;
  sub: string;
  flags: string[];
  go: () => void;
}

/** Cmd/Ctrl-K palette: jump to any team or match. */
export function SearchPalette({ open, onClose }: { open: boolean; onClose: () => void }) {
  const { t, kickoffDay } = useFormat();
  const navigate = useNavigate();
  const snapshot = useTournamentStore((s) => s.snapshot);
  const [q, setQ] = useState('');
  const [sel, setSel] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (open) {
      setQ('');
      setSel(0);
      setTimeout(() => inputRef.current?.focus(), 30);
    }
  }, [open]);

  const hits = useMemo<Hit[]>(() => {
    if (!snapshot || q.trim().length < 2) return [];
    const needle = q.trim().toLowerCase();
    const out: Hit[] = [];
    const teams = new Set<string>();
    for (const f of snapshot.fixtures) {
      for (const team of [f.home.team, f.away.team]) {
        if (team && !teams.has(team) && team.toLowerCase().includes(needle)) {
          teams.add(team);
          out.push({
            kind: 'team', label: team, sub: t.nav.teams, flags: [teamFlag(team)],
            go: () => void navigate({ to: '/team/$name', params: { name: team } }),
          });
        }
      }
    }
    for (const f of snapshot.fixtures) {
      const label = `${f.home.label} – ${f.away.label}`;
      if (label.toLowerCase().includes(needle)) {
        out.push({
          kind: 'match', label, sub: kickoffDay(f.kickoff),
          flags: [f.home.team ? teamFlag(f.home.team) : '', f.away.team ? teamFlag(f.away.team) : ''],
          go: () => void navigate({ to: '/match/$num', params: { num: String(f.num) } }),
        });
      }
      if (out.length > 14) break;
    }
    return out.slice(0, 12);
  }, [snapshot, q, navigate, t, kickoffDay]);

  useEffect(() => setSel(0), [q]);

  if (!open) return null;

  const pick = (h: Hit | undefined): void => {
    if (!h) return;
    h.go();
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 p-4 pt-[12vh]" onClick={onClose}>
      <div
        className="w-full max-w-lg overflow-hidden rounded-xl border border-line bg-surface shadow-2xl"
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-label={t.search.title}
      >
        <div className="flex items-center gap-2 border-b border-line px-3">
          <Search size={16} className="shrink-0 text-faint" />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Escape') onClose();
              else if (e.key === 'ArrowDown') { e.preventDefault(); setSel((s) => Math.min(hits.length - 1, s + 1)); }
              else if (e.key === 'ArrowUp') { e.preventDefault(); setSel((s) => Math.max(0, s - 1)); }
              else if (e.key === 'Enter') pick(hits[sel]);
            }}
            placeholder={t.search.placeholder}
            className="w-full bg-transparent py-3 text-sm text-ink outline-none placeholder:text-faint"
          />
          <kbd className="rounded border border-line px-1.5 py-0.5 text-[10px] text-faint">esc</kbd>
        </div>
        <ul className="max-h-80 overflow-y-auto py-1">
          {hits.map((h, i) => (
            <li key={`${h.kind}:${h.label}`}>
              <button
                type="button"
                onClick={() => pick(h)}
                onMouseEnter={() => setSel(i)}
                className={`flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm ${i === sel ? 'bg-accent-glow text-accent' : 'text-ink'}`}
              >
                <span aria-hidden className="w-9 shrink-0">{h.flags.join(' ')}</span>
                <span className="truncate font-medium">{h.label}</span>
                <span className="ml-auto shrink-0 text-[11px] text-faint">{h.sub}</span>
              </button>
            </li>
          ))}
          {q.trim().length >= 2 && hits.length === 0 && (
            <li className="px-3 py-6 text-center text-sm text-faint">{t.search.noResults}</li>
          )}
          {q.trim().length < 2 && (
            <li className="px-3 py-6 text-center text-sm text-faint">{t.search.hint}</li>
          )}
        </ul>
      </div>
    </div>
  );
}
