'use client';
import { ArrowRight, Building2, Clock, CornerDownLeft, Factory, Globe2, Search, Tag, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useRef, useState } from 'react';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { EXAMPLE_QUERIES, primaryNav, routes } from '@/lib/site';
import type { Suggestion } from '@/lib/types';
import { useSearch } from './search-context';

const RECENT_KEY = 'ca-recent';
const RECENT_MAX = 6;
function readRecent(): Suggestion[] {
  try {
    const arr = JSON.parse(localStorage.getItem(RECENT_KEY) ?? '[]') as unknown;
    return Array.isArray(arr) ? (arr.filter((x) => x && typeof (x as Suggestion).href === 'string') as Suggestion[]).slice(0, RECENT_MAX) : [];
  } catch {
    return [];
  }
}
function pushRecent(s: Suggestion) {
  try {
    localStorage.setItem(RECENT_KEY, JSON.stringify([s, ...readRecent().filter((r) => r.href !== s.href)].slice(0, RECENT_MAX)));
  } catch {
    /* ignore */
  }
}

const ICON = { company: Building2, industry: Factory, country: Globe2, event_type: Tag } as const;

type Row = { key: string; href: string; node: React.ReactNode; section: string; run?: () => void };

/**
 * ⌘K search: `/search/suggest` (debounced 120 ms) grouped by kind, recent picks, example natural-language queries and a
 * "Search everything" row. Keyboard: ↑↓ move · ↵ open · esc close. 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 [recent, setRecent] = useState<Suggestion[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const term = q.trim();

  useEffect(() => {
    listRef.current?.querySelector<HTMLElement>('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' });
  }, [active]);

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

  useEffect(() => {
    if (!open || 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();
    };
  }, [term, open]);

  const close = useCallback(() => setOpen(false), [setOpen]);
  const go = useCallback(
    (href: string) => {
      router.push(href);
      close();
    },
    [router, close],
  );

  if (!open) return null;

  const rows: Row[] = [];
  const node = (s: Suggestion, icon?: React.ReactNode) => {
    const I = ICON[s.kind] ?? Tag;
    return (
      <>
        {icon ?? <I className="size-4 shrink-0 text-ink-3" aria-hidden />}
        <span className="min-w-0 flex-1 truncate text-[15px] text-ink">{s.label}</span>
        {s.sublabel && <span className="hidden max-w-[40%] truncate text-xs text-ink-3 sm:block">{s.sublabel}</span>}
        <span className="text-[10px] uppercase tracking-wider text-ink-3">{s.kind.replace('_', ' ')}</span>
      </>
    );
  };
  const order: Suggestion['kind'][] = ['company', 'industry', 'country', 'event_type'];
  for (const k of order) for (const s of items.filter((i) => i.kind === k)) rows.push({ key: `s-${s.href}`, href: s.href, section: k === 'company' ? 'Companies' : k === 'industry' ? 'Industries' : k === 'country' ? 'Countries' : 'Event types', node: node(s), run: () => pushRecent(s) });
  if (!term && recent.length) for (const r of recent) rows.push({ key: `r-${r.href}`, href: r.href, section: 'Recent', node: node(r, <Clock className="size-4 shrink-0 text-ink-3" aria-hidden />) });
  if (term)
    rows.push({
      key: '__all',
      href: routes.search(term),
      section: 'Search',
      node: (
        <>
          <Search className="size-4 text-accent" aria-hidden />
          <span className="flex-1 text-sm text-accent">{/\s/.test(term) ? `Ask Company Atlas: “${term}”` : `Search everything for “${term}”`}</span>
          <CornerDownLeft className="size-3.5 text-ink-3" aria-hidden />
        </>
      ),
    });
  const clamp = Math.min(active, Math.max(0, rows.length - 1));
  const onKey = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      setActive((a) => Math.min(a + 1, rows.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 = rows[clamp];
      if (it) {
        it.run?.();
        go(it.href);
      } else if (term) go(routes.search(term));
    } else if (e.key === 'Escape') close();
  };
  let lastSection = '';
  return (
    <div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/50 backdrop-blur-[2px] md:pt-[10vh]" role="dialog" aria-modal="true" aria-label="Search" onClick={close} data-palette>
      <div className="panel flex h-[100dvh] w-full flex-col overflow-hidden rounded-none md:h-auto md:max-h-[72vh] md:w-[720px] 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);
              setActive(0);
            }}
            onKeyDown={onKey}
            placeholder="Search companies, industries, countries… or ask a question"
            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"
            role="combobox"
            aria-expanded={rows.length > 0}
            aria-controls="palette-list"
            aria-activedescendant={rows[clamp] ? `pal-${rows[clamp].key}` : undefined}
            data-palette-input
          />
          <button type="button" onClick={close} className="-mr-1 flex size-11 items-center justify-center rounded-sm text-ink-3 hover:bg-surface-2 hover:text-ink" aria-label="Close">
            <X className="size-5" aria-hidden />
          </button>
        </div>
        <div className="scrollbar-thin flex-1 overflow-y-auto">
          <ul id="palette-list" ref={listRef} className="py-1" role="listbox">
            {failed && <li className="px-4 py-2 text-xs text-warning">Suggestions unavailable — press Enter to search.</li>}
            {term && !loading && !failed && items.length === 0 && <li className="px-4 py-2 text-xs text-ink-3">No direct match — search everything below.</li>}
            {rows.map((r, i) => {
              const header = r.section !== lastSection;
              lastSection = r.section;
              return (
                <li key={r.key} id={`pal-${r.key}`} role="option" aria-selected={i === clamp} data-palette-row>
                  {header && <p className="eyebrow px-4 pb-1 pt-3">{r.section}</p>}
                  <Link
                    href={r.href}
                    onClick={() => {
                      r.run?.();
                      close();
                    }}
                    onMouseEnter={() => setActive(i)}
                    className={cn('flex min-h-[44px] w-full items-center gap-3 px-4 py-2 text-left', i === clamp ? 'bg-surface-3' : 'hover:bg-surface-2')}
                  >
                    {r.node}
                    {i === clamp && <kbd className="mono hidden text-[10px] text-ink-3 sm:block">↵</kbd>}
                  </Link>
                </li>
              );
            })}
          </ul>
          {!term && (
            <div className="border-t border-rule 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="min-h-11 border border-rule bg-surface px-2.5 py-1.5 text-sm text-ink-2 hover:border-rule-strong hover:text-ink md:min-h-9">
                      {ex}
                    </button>
                  </li>
                ))}
              </ul>
              <p className="eyebrow mt-5 mb-2">Browse</p>
              <ul className="grid grid-cols-2 gap-x-4 sm:grid-cols-4">
                {primaryNav
                  .filter((n) => n.href !== '/')
                  .map((n) => (
                    <li key={n.href}>
                      <Link href={n.href} onClick={close} className="flex h-11 items-center gap-2 text-sm text-ink-2 hover:text-accent md:h-10">
                        <ArrowRight className="size-3.5" aria-hidden /> {n.label}
                      </Link>
                    </li>
                  ))}
              </ul>
            </div>
          )}
        </div>
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 border-t border-rule px-4 py-2 text-[11px] text-ink-3">
          <span>
            <kbd className="mono border border-rule px-1">↵</kbd> open
          </span>
          <span>
            <kbd className="mono border border-rule px-1">↑↓</kbd> move
          </span>
          <span className="hidden sm:inline">Natural-language questions are routed to /ask and always link back to events and sources.</span>
          <span className="ml-auto">
            <kbd className="mono border border-rule px-1">esc</kbd> close
          </span>
        </div>
      </div>
    </div>
  );
}