'use client';

import { useRouter } from 'next/navigation';
import { Search } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

interface Suggestion {
  type: string;
  label: string;
  sublabel: string | null;
  href: string;
}

/** Header search with instant suggestions (/api/search/suggest); full results at /search. */
export function HeaderSearch() {
  const router = useRouter();
  const [q, setQ] = useState('');
  const [items, setItems] = useState<Suggestion[]>([]);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(-1);
  const box = useRef<HTMLFormElement>(null);

  useEffect(() => {
    if (q.trim().length < 2) return;
    const ctrl = new AbortController();
    const t = setTimeout(() => {
      fetch(`/api/search/suggest?q=${encodeURIComponent(q)}`, { signal: ctrl.signal })
        .then((r) => r.json())
        .then((d: { items: Suggestion[] }) => {
          setItems(d.items ?? []);
          setOpen(true);
          setActive(-1);
        })
        .catch(() => {});
    }, 120);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q]);

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

  const go = (href: string) => {
    setOpen(false);
    router.push(href);
  };

  return (
    <form
      ref={box}
      role="search"
      className="relative hidden items-center md:flex"
      onSubmit={(e) => {
        e.preventDefault();
        if (active >= 0 && items[active]) return go(items[active]!.href);
        const query = q.trim();
        if (query) go(`/search?q=${encodeURIComponent(query)}`);
      }}
    >
      <Search className="pointer-events-none absolute left-2.5 h-3.5 w-3.5 text-subtle" />
      <input
        type="search"
        value={q}
        onChange={(e) => {
          setQ(e.target.value);
          if (e.target.value.trim().length < 2) {
            setItems([]);
            setOpen(false);
          }
        }}
        role="combobox"
        aria-controls="header-search-listbox"
        onFocus={() => items.length && setOpen(true)}
        onKeyDown={(e) => {
          if (e.key === 'ArrowDown') {
            e.preventDefault();
            setActive((a) => Math.min(items.length - 1, a + 1));
          } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            setActive((a) => Math.max(-1, a - 1));
          } else if (e.key === 'Escape') setOpen(false);
        }}
        placeholder="Search cards, watches, games, sneakers, LEGO…"
        className="h-8 w-64 rounded-md border border-border bg-sunken pl-8 pr-2 text-[13px] text-fg placeholder:text-subtle transition-[width] focus:w-80 focus:border-border-strong focus:outline-none xl:w-80 xl:focus:w-96"
        aria-label="Search collectibles"
        aria-autocomplete="list"
        aria-expanded={open}
        autoComplete="off"
      />
      {open && items.length ? (
        <ul id="header-search-listbox" className="absolute left-0 top-full z-50 mt-1 w-[26rem] overflow-hidden rounded-md border border-border bg-elevated py-1 text-[13px] shadow-pop" role="listbox">
          {items.map((it, i) => (
            <li key={`${it.type}-${it.href}`} role="option" aria-selected={i === active}>
              <button type="button" onMouseDown={(e) => e.preventDefault()} onClick={() => go(it.href)} className={`flex w-full items-center justify-between gap-3 px-3 py-1.5 text-left ${i === active ? 'bg-inset' : 'hover:bg-sunken'}`}>
                <span className="truncate text-fg">{it.label}</span>
                <span className="shrink-0 text-[10px] uppercase tracking-wider text-subtle">{it.sublabel ?? it.type}</span>
              </button>
            </li>
          ))}
          <li>
            <button type="submit" className="w-full px-3 py-1.5 text-left text-[12px] text-muted hover:bg-sunken">
              Search all results for “{q}” →
            </button>
          </li>
        </ul>
      ) : null}
    </form>
  );
}