'use client';
import { Search, X } from 'lucide-react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';
import type { CountryLite } from '@/lib/types-compare';
import { BottomSheet } from '@/components/data/bottom-sheet';

/** Case/diacritic-insensitive prefix-then-substring match on name / ISO3 / slug. */
export function filterCountries(items: CountryLite[], q: string, exclude: ReadonlySet<string> = new Set()): CountryLite[] {
  const ql = q.trim().toLowerCase();
  const pool = items.filter((c) => !exclude.has(c.slug));
  if (!ql) return pool;
  const starts = pool.filter((c) => c.name.toLowerCase().startsWith(ql) || c.id.toLowerCase() === ql || c.slug.startsWith(ql));
  const contains = pool.filter((c) => !starts.includes(c) && (c.name.toLowerCase().includes(ql) || c.slug.includes(ql)));
  return [...starts, ...contains];
}

/**
 * Country typeahead list (used inline on desktop and inside the bottom sheet on phones). Arrow keys move,
 * Enter picks, Esc clears. Already-selected countries are excluded.
 */
export function CountryTypeahead({ countries, exclude, onPick, autoFocus, placeholder, max = 12, className, disabled }: { countries: CountryLite[]; exclude: ReadonlySet<string>; onPick: (c: CountryLite) => void; autoFocus?: boolean; placeholder?: string; max?: number; className?: string; disabled?: boolean }) {
  const [q, setQ] = useState('');
  const [open, setOpen] = useState(false);
  const [cursor, setCursor] = useState(0);
  const boxRef = useRef<HTMLDivElement>(null);
  const results = useMemo(() => filterCountries(countries, q, exclude).slice(0, max), [countries, q, exclude, max]);

  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      if (boxRef.current && !boxRef.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('mousedown', onDoc);
    return () => document.removeEventListener('mousedown', onDoc);
  }, [open]);

  const pick = (c: CountryLite) => {
    onPick(c);
    setQ('');
    setCursor(0);
  };

  return (
    <div ref={boxRef} className={cn('relative', className)}>
      <div className="relative">
        <Search size={15} aria-hidden className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-3" />
        <input
          type="search"
          role="combobox"
          aria-expanded={open && results.length > 0}
          aria-controls="country-typeahead-list"
          aria-autocomplete="list"
          autoFocus={autoFocus}
          disabled={disabled}
          value={q}
          onChange={(e) => {
            setQ(e.target.value);
            setOpen(true);
            setCursor(0);
          }}
          onFocus={() => setOpen(true)}
          onKeyDown={(e) => {
            if (e.key === 'ArrowDown') {
              e.preventDefault();
              setCursor((c) => Math.min(results.length - 1, c + 1));
              setOpen(true);
            } else if (e.key === 'ArrowUp') {
              e.preventDefault();
              setCursor((c) => Math.max(0, c - 1));
            } else if (e.key === 'Enter') {
              const r = results[cursor];
              if (r) {
                e.preventDefault();
                pick(r);
              }
            } else if (e.key === 'Escape') {
              setQ('');
              setOpen(false);
            }
          }}
          placeholder={placeholder ?? t('compare.builder.search')}
          aria-label={placeholder ?? t('compare.builder.search')}
          className="h-11 w-full rounded-sm border border-rule bg-surface pl-9 pr-9 text-sm text-ink outline-none placeholder:text-ink-3 focus:border-accent disabled:opacity-50 md:h-10"
        />
        {q ? (
          <button type="button" onClick={() => setQ('')} className="absolute right-1 top-1/2 grid h-9 w-9 -translate-y-1/2 place-items-center text-ink-3 hover:text-ink" aria-label={t('search.clear')}>
            <X size={14} aria-hidden />
          </button>
        ) : null}
      </div>
      {open && (q || results.length) ? (
        <ul id="country-typeahead-list" role="listbox" className="absolute left-0 right-0 top-full z-30 mt-1 max-h-72 overflow-y-auto rounded-sm border border-rule bg-surface py-1 shadow-pop">
          {results.length === 0 ? (
            <li className="px-3 py-2 text-sm text-ink-3">{t('compare.builder.noMatch', { q })}</li>
          ) : (
            results.map((c, i) => (
              <li key={c.id} role="option" aria-selected={i === cursor}>
                <button
                  type="button"
                  onMouseDown={(e) => e.preventDefault()}
                  onClick={() => pick(c)}
                  onMouseEnter={() => setCursor(i)}
                  className={cn('flex min-h-[44px] w-full items-center gap-2.5 px-3 text-left text-sm md:min-h-[36px]', i === cursor ? 'bg-surface-2 text-ink' : 'text-ink-2')}
                >
                  <span aria-hidden className="text-lg leading-none">
                    {c.flag}
                  </span>
                  <span className="truncate">{c.name}</span>
                  <span className="tnum ml-auto text-2xs text-ink-3">{c.id}</span>
                </button>
              </li>
            ))
          )}
        </ul>
      ) : null}
    </div>
  );
}

/** Country picker in a sheet (bottom sheet on phones, centred panel on desktop): search + tappable list. */
export function CountryPickerSheet({ open, onClose, countries, exclude, onPick, title, closeOnPick = true }: { open: boolean; onClose: () => void; countries: CountryLite[]; exclude: ReadonlySet<string>; onPick: (c: CountryLite) => void; title?: string; closeOnPick?: boolean }) {
  const [q, setQ] = useState('');
  const results = useMemo(() => filterCountries(countries, q, exclude), [countries, q, exclude]);
  useEffect(() => {
    if (!open) setQ('');
  }, [open]);
  return (
    <BottomSheet open={open} onClose={onClose} side="center" title={title ?? t('compare.addCountry')}>
      <div className="relative">
        <Search size={15} aria-hidden className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-3" />
        <input
          type="search"
          autoFocus
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder={t('compare.builder.search')}
          aria-label={t('compare.builder.search')}
          className="h-11 w-full rounded-sm border border-rule bg-surface pl-9 pr-3 text-sm text-ink outline-none placeholder:text-ink-3 focus:border-accent"
        />
      </div>
      {results.length === 0 ? (
        <p className="py-6 text-center text-sm text-ink-3">{t('compare.builder.noMatch', { q })}</p>
      ) : (
        <ul className="mt-2 divide-y divide-rule">
          {results.map((c) => (
            <li key={c.id}>
              <button
                type="button"
                onClick={() => {
                  onPick(c);
                  if (closeOnPick) onClose();
                }}
                className="flex min-h-[48px] w-full items-center gap-3 py-1 text-left text-sm text-ink hover:text-accent"
              >
                <span aria-hidden className="text-xl leading-none">
                  {c.flag}
                </span>
                <span className="truncate">{c.name}</span>
                <span className="tnum ml-auto text-2xs text-ink-3">{c.id}</span>
              </button>
            </li>
          ))}
        </ul>
      )}
    </BottomSheet>
  );
}