'use client';
import { ArrowRight, CornerDownLeft, Search, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
import { EntityBadge } from '@/components/ui/badges';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { EXAMPLE_QUERIES, exploreNav, routes } from '@/lib/site';
import type { Suggestion } from '@/lib/types';
import { useSearch } from './search-context';

/** Command-palette global search (⌘K or /): prefix suggestions from /search/suggest; Enter → /search?q=. Mobile: full-screen sheet. */
export function SearchDialog() {
  const { open, setOpen } = useSearch();
  const router = useRouter();
  const [q, setQ] = useState('');
  const [items, setItems] = useState<Suggestion[]>([]);
  const [active, setActive] = useState(0);
  const [loading, setLoading] = useState(false);
  const [failed, setFailed] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (open) {
      setTimeout(() => inputRef.current?.focus(), 20);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
      setQ('');
      setItems([]);
      setFailed(false);
    }
    return () => {
      document.body.style.overflow = '';
    };
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const term = q.trim();
    if (term.length < 1) {
      setItems([]);
      return;
    }
    const ctrl = new AbortController();
    const t = setTimeout(async () => {
      setLoading(true);
      try {
        const res = await clientApi.suggest(term, ctrl.signal);
        setItems(res.items ?? []);
        setFailed(false);
        setActive(0);
      } catch (e) {
        if ((e as Error).name !== 'AbortError') setFailed(true);
      } finally {
        setLoading(false);
      }
    }, 120);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q, open]);

  if (!open) return null;
  const rows: { key: string; href: string; node: React.ReactNode }[] = items.map((s) => ({
    key: s.id,
    href: routes.entity(s),
    node: (
      <>
        <EntityBadge type={s.entity_type} small />
        <span className="min-w-0 flex-1 truncate text-[15px] text-ink">{s.name}</span>
        {s.organization_name && <span className="hidden truncate text-xs text-ink-3 sm:block">{s.organization_name}</span>}
      </>
    ),
  }));
  const term = q.trim();
  const allRows = term ? [...rows, { key: '__all', href: routes.search(term), node: (<><Search className="size-4 text-accent" aria-hidden /><span className="flex-1 text-sm text-accent">Search everything for “{term}”</span><CornerDownLeft className="size-3.5 text-ink-3" aria-hidden /></>) }] : rows;

  const go = (href: string) => {
    router.push(href);
    setOpen(false);
  };
  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setActive((a) => Math.min(a + 1, allRows.length - 1));
    } else if (e.key === 'ArrowUp') {
      e.preventDefault();
      setActive((a) => Math.max(a - 1, 0));
    } else if (e.key === 'Enter') {
      e.preventDefault();
      const it = allRows[active];
      if (it) go(it.href);
      else if (term) go(routes.search(term));
    } else if (e.key === 'Escape') setOpen(false);
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/50 backdrop-blur-[2px] md:pt-[12vh]" role="dialog" aria-modal="true" aria-label="Search AI Atlas" onClick={() => setOpen(false)}>
      <div className="panel flex h-[100dvh] w-full flex-col overflow-hidden rounded-none md:h-auto md:max-h-[70vh] md:w-[680px] md:rounded-lg" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center gap-3 border-b border-rule px-4 py-2.5">
          <Search className="size-5 shrink-0 text-ink-3" aria-hidden />
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            onKeyDown={onKey}
            placeholder="Search models, companies, papers, benchmarks… or ask in plain English"
            className="h-11 min-w-0 flex-1 bg-transparent text-[16px] text-ink placeholder:text-ink-3 focus:outline-none"
            autoComplete="off"
            spellCheck={false}
            aria-label="Search"
            aria-activedescendant={allRows[active] ? `sugg-${allRows[active].key}` : undefined}
          />
          <button type="button" onClick={() => setOpen(false)} className="flex size-10 items-center justify-center rounded-sm text-ink-3 hover:bg-surface-2 hover:text-ink" aria-label="Close search">
            <X className="size-5" aria-hidden />
          </button>
        </div>
        <div className="scrollbar-thin flex-1 overflow-y-auto">
          {term === '' ? (
            <div className="px-4 py-4">
              <p className="eyebrow mb-2">Try asking</p>
              <ul className="flex flex-wrap gap-2">
                {EXAMPLE_QUERIES.map((ex) => (
                  <li key={ex}>
                    <button type="button" onClick={() => setQ(ex)} className="border border-rule bg-surface px-2.5 py-1.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink">
                      {ex}
                    </button>
                  </li>
                ))}
              </ul>
              <p className="eyebrow mt-6 mb-2">Browse</p>
              <ul className="grid grid-cols-2 gap-x-4 sm:grid-cols-3">
                {exploreNav.map((n) => (
                  <li key={n.href}>
                    <Link href={n.href} onClick={() => setOpen(false)} className="flex h-10 items-center gap-2 text-sm text-ink-2 hover:text-accent">
                      <ArrowRight className="size-3.5" aria-hidden /> {n.label}
                    </Link>
                  </li>
                ))}
              </ul>
              <p className="mt-6 text-xs text-ink-3">
                <kbd className="mono border border-rule px-1">↵</kbd> full results · <kbd className="mono border border-rule px-1">esc</kbd> close · <kbd className="mono border border-rule px-1">⌘K</kbd> anywhere
              </p>
            </div>
          ) : (
            <ul className="py-1" role="listbox">
              {failed && <li className="px-4 py-2 text-xs text-warning">Suggestions unavailable — press Enter to search.</li>}
              {!loading && !failed && rows.length === 0 && <li className="px-4 py-3 text-sm text-ink-3">No direct match — search everything below.</li>}
              {allRows.map((r, i) => (
                <li key={r.key} id={`sugg-${r.key}`} role="option" aria-selected={i === active}>
                  <Link href={r.href} onClick={() => setOpen(false)} onMouseEnter={() => setActive(i)} className={cn('flex min-h-[46px] items-center gap-3 px-4 py-2', i === active ? 'bg-surface-3' : 'hover:bg-surface-2')}>
                    {r.node}
                  </Link>
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
}