'use client';
import { Search, X } from 'lucide-react';
import { useEffect, useId, useRef, useState } from 'react';
import { t } from '@/i18n';
import { clientExplore } from '@/lib/client-api-explore';
import { cn } from '@/lib/cn';
import type { SearchHit } from '@/lib/types';

export interface PickedEntity {
  type: 'country' | 'indicator';
  id: string;
  slug: string;
  name: string;
  flag?: string | null;
  hint?: string | null;
}

/**
 * Typeahead over `/api/v1/search?type=country|indicator`. Keyboard: ↑↓ ↵ esc. Emits a `PickedEntity`
 * and clears itself (`keepValue` to show the picked name instead). 44 px tall on phones.
 */
export function EntityPicker({
  type,
  placeholder,
  onPick,
  exclude = [],
  keepValue = false,
  autoFocus = false,
  className,
  size = 'md',
}: {
  type: 'country' | 'indicator';
  placeholder: string;
  onPick: (e: PickedEntity) => void;
  exclude?: string[];
  keepValue?: boolean;
  autoFocus?: boolean;
  className?: string;
  size?: 'sm' | 'md';
}) {
  const id = useId();
  const [q, setQ] = useState('');
  const [hits, setHits] = useState<SearchHit[]>([]);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const [loading, setLoading] = useState(false);
  const abortRef = useRef<AbortController | null>(null);
  const wrapRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const term = q.trim();
    abortRef.current?.abort();
    if (term.length < 1) {
      setHits([]);
      setLoading(false);
      return;
    }
    const ctrl = new AbortController();
    abortRef.current = ctrl;
    setLoading(true);
    const timer = setTimeout(async () => {
      try {
        const res = await clientExplore.search(term, type, 10, ctrl.signal);
        if (ctrl.signal.aborted) return;
        setHits(res.hits.filter((h) => h.type === type && !exclude.includes(h.id) && !exclude.includes(h.slug ?? '')));
        setActive(0);
        setOpen(true);
      } catch {
        if (!ctrl.signal.aborted) setHits([]);
      } finally {
        if (!ctrl.signal.aborted) setLoading(false);
      }
    }, 140);
    return () => clearTimeout(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [q, type, exclude.join(',')]);

  useEffect(() => {
    const onDoc = (e: PointerEvent) => {
      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener('pointerdown', onDoc);
    return () => document.removeEventListener('pointerdown', onDoc);
  }, []);

  const pick = (h: SearchHit) => {
    onPick({ type, id: h.id, slug: h.slug ?? h.id, name: h.name, flag: h.country?.flag ?? null, hint: h.hint });
    setQ(keepValue ? h.name : '');
    setHits([]);
    setOpen(false);
  };

  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setOpen(true);
      setActive((a) => Math.min(hits.length - 1, a + 1));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setActive((a) => Math.max(0, a - 1));
    } else if (e.key === 'Enter') {
      const h = hits[active];
      if (h) {
        e.preventDefault();
        pick(h);
      }
    } else if (e.key === 'Escape') {
      setOpen(false);
    }
  };

  const listId = `${id}-list`;
  return (
    <div ref={wrapRef} className={cn('relative min-w-0', className)}>
      <div className="relative flex items-center">
        <Search size={15} aria-hidden className="absolute left-2.5 text-ink-3" />
        <input
          type="search"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          onFocus={() => hits.length && setOpen(true)}
          onKeyDown={onKey}
          placeholder={placeholder}
          aria-label={placeholder}
          role="combobox"
          aria-expanded={open}
          aria-controls={listId}
          aria-autocomplete="list"
          aria-activedescendant={open && hits[active] ? `${id}-opt-${hits[active].id}` : undefined}
          autoComplete="off"
          autoFocus={autoFocus}
          enterKeyHint="go"
          className={cn('w-full rounded-sm border border-rule bg-surface pl-8 pr-8 text-sm outline-none placeholder:text-ink-3 focus:border-accent', size === 'sm' ? 'h-11 md:h-9' : 'h-11 md:h-10')}
        />
        {q ? (
          <button type="button" onClick={() => { setQ(''); setHits([]); }} className="absolute right-0 grid h-11 w-9 place-items-center text-ink-3 hover:text-ink md:h-9" aria-label={t('search.clear')}>
            <X size={14} aria-hidden />
          </button>
        ) : null}
      </div>
      {open && (hits.length > 0 || loading) ? (
        <ul id={listId} 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">
          {loading && hits.length === 0 ? <li className="px-3 py-2 text-xs text-ink-3">{t('search.loading')}</li> : null}
          {hits.map((h, i) => (
            <li key={h.id} id={`${id}-opt-${h.id}`} role="option" aria-selected={i === active}>
              <button
                type="button"
                onMouseEnter={() => setActive(i)}
                onClick={() => pick(h)}
                className={cn('flex min-h-[44px] w-full items-center gap-2.5 px-3 py-1.5 text-left text-sm md:min-h-[36px]', i === active ? 'bg-surface-2' : 'hover:bg-surface-2/60')}
              >
                {h.country?.flag ? <span aria-hidden className="w-5 text-center text-base leading-none">{h.country.flag}</span> : null}
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-ink">{h.name}</span>
                  {h.hint ? <span className="block truncate text-2xs text-ink-3">{h.hint}</span> : null}
                </span>
              </button>
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
}