'use client';
import { ArrowRight, Clock, CornerDownLeft, Search, Terminal, X } from 'lucide-react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { EntityBadge } from '@/components/ui/badges';
import { clientApi } from '@/lib/client-api';
import { cn } from '@/lib/cn';
import { DENSITY_LABELS, nextDensity, readDensity, setDensity } from '@/lib/density';
import { EXAMPLE_QUERIES, PALETTE_PREFIXES, primaryNav, routes } from '@/lib/site';
import type { Suggestion } from '@/lib/types';
import { useSearch } from './search-context';
import { useTheme } from './theme';

/* ------------------------------------------------------------------------------------------------------------ commands */
type Command = {
  id: string;
  label: string;
  hint?: string;
  keywords?: string;
  href?: string;
  /** Switch the palette into entity mode with this type prefix (e.g. "Open benchmark …" → `b:`). */
  prefix?: keyof typeof PALETTE_PREFIXES;
  /** What to do with the picked entity in prefix mode: open its page (default) or its graph. */
  then?: 'entity' | 'graph';
  action?: 'theme' | 'density';
};

const today = () => new Date().toISOString().slice(0, 10);
const COMMANDS: Command[] = [
  { id: 'compare', label: 'Compare models', hint: 'Side by side, 2–6 entities', keywords: 'compare matrix versus', href: routes.compare() },
  { id: 'local', label: 'Find a local model', hint: 'What fits your hardware', keywords: 'run locally hardware fit memory gpu apple', href: routes.runLocally() },
  { id: 'benchmark', label: 'Open benchmark …', hint: 'type to pick a benchmark', keywords: 'leaderboard score', prefix: 'b' },
  { id: 'today', label: "Show today's changes", hint: 'Daily digest', keywords: 'changes today digest new', href: routes.changesDay(today()) },
  { id: 'diff', label: 'Diff two dates', hint: 'What changed between A and B', keywords: 'diff compare dates history', href: routes.diff() },
  { id: 'provider', label: 'Find provider …', hint: 'type to pick a provider', keywords: 'api pricing host inference', prefix: 'p' },
  { id: 'lineage', label: 'Explore lineage of …', hint: 'type to pick a model → graph', keywords: 'lineage graph derived fine-tuned quantized family', prefix: 'm', then: 'graph' },
  { id: 'theme', label: 'Toggle theme', hint: 'system → light → dark', keywords: 'dark light mode appearance', action: 'theme' },
  { id: 'density', label: 'Toggle density', hint: 'comfortable → compact → dense', keywords: 'compact dense rows spacing', action: 'density' },
  { id: 'go-frontier', label: 'Go to Frontier', keywords: 'leaders best', href: routes.frontier() },
  { id: 'go-prices', label: 'Go to Prices', keywords: 'price index usd tokens cost', href: routes.prices() },
  { id: 'go-graph', label: 'Go to Graph', keywords: 'knowledge graph relations', href: routes.graph() },
  { id: 'go-timeline', label: 'Go to Timeline', keywords: 'history months events', href: routes.timeline() },
  { id: 'go-time-machine', label: 'Go to Time Machine', keywords: 'as of date past', href: routes.timeMachine() },
  { id: 'go-pulse', label: 'Go to Pulse', keywords: 'live activity connectors', href: routes.pulse() },
  { id: 'go-open', label: 'Go to Open models', keywords: 'open weights license', href: routes.open() },
  { id: 'go-calculator', label: 'Go to Calculator', keywords: 'cost workload tokens estimate', href: routes.calculator() },
  { id: 'go-watchlist', label: 'Go to Watchlist', keywords: 'follow star saved', href: routes.watchlist() },
  { id: 'go-find', label: 'Go to Find a model', keywords: 'finder requirements', href: routes.findAModel() },
];

/** Fuzzy score: exact prefix > word prefix > substring > subsequence; 0 = no match. */
function fuzzy(q: string, text: string): number {
  const t = text.toLowerCase();
  const s = q.toLowerCase().trim();
  if (!s) return 1;
  if (t.startsWith(s)) return 100 - t.length * 0.01;
  if (t.split(/[\s…]+/).some((w) => w.startsWith(s))) return 80;
  const idx = t.indexOf(s);
  if (idx >= 0) return 60 - idx * 0.1;
  let i = 0;
  for (const ch of t) if (ch === s[i]) i++;
  return i === s.length ? 30 - (t.length - s.length) * 0.05 : 0;
}

/* -------------------------------------------------------------------------------------------------------------- recent */
const RECENT_KEY = 'aia-recent';
const RECENT_MAX = 8;
type Recent = Pick<Suggestion, 'id' | 'slug' | 'name' | 'entity_type' | 'organization_name'>;
function readRecent(): Recent[] {
  try {
    const arr = JSON.parse(localStorage.getItem(RECENT_KEY) ?? '[]') as unknown;
    return Array.isArray(arr) ? (arr.filter((x) => x && typeof (x as Recent).slug === 'string') as Recent[]).slice(0, RECENT_MAX) : [];
  } catch {
    return [];
  }
}
function pushRecent(s: Recent) {
  try {
    const next = [{ id: s.id, slug: s.slug, name: s.name, entity_type: s.entity_type, organization_name: s.organization_name ?? null }, ...readRecent().filter((r) => r.slug !== s.slug)].slice(0, RECENT_MAX);
    localStorage.setItem(RECENT_KEY, JSON.stringify(next));
  } catch {
    /* ignore */
  }
}

/* -------------------------------------------------------------------------------------------------------------- parse */
type Parsed = { mode: 'all' | 'commands' | 'entities'; term: string; types: string[] | null; prefixLabel: string | null };
function parse(input: string): Parsed {
  const s = input.replace(/^\s+/, '');
  if (s.startsWith('>')) return { mode: 'commands', term: s.slice(1).trim(), types: null, prefixLabel: 'Commands' };
  const m = /^([a-z]):\s*(.*)$/i.exec(s);
  if (m && PALETTE_PREFIXES[(m[1] as string).toLowerCase()]) {
    const p = PALETTE_PREFIXES[(m[1] as string).toLowerCase()] as { types: string[]; label: string };
    return { mode: 'entities', term: (m[2] ?? '').trim(), types: p.types, prefixLabel: p.label };
  }
  return { mode: 'all', term: s.trim(), types: null, prefixLabel: null };
}

type Row = { key: string; kind: 'entity' | 'command' | 'search' | 'recent'; href?: string; run?: () => void; node: React.ReactNode; section: string };

/**
 * Command palette (⌘K / Ctrl+K / "/"): entity suggestions + commands with fuzzy match, recent entities (last 8),
 * type prefixes (`m:` models · `b:` benchmarks · `o:` orgs · `p:` providers · `h:` hardware) and `>` for commands only.
 * Keyboard: ↑↓ move · ↵ run · esc close · ⌫ on an empty prefixed input clears the prefix. Mobile: full-screen sheet.
 */
export function SearchDialog() {
  const { open, setOpen } = useSearch();
  const router = useRouter();
  const [, setTheme] = useTheme();
  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<Recent[]>([]);
  const [then, setThen] = useState<'entity' | 'graph'>('entity');
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLUListElement>(null);
  const parsed = useMemo(() => parse(q), [q]);
  // keep the active row visible while navigating with the keyboard
  useEffect(() => {
    listRef.current?.querySelector<HTMLElement>('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' });
  }, [active]);

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

  useEffect(() => {
    if (!open || parsed.mode === 'commands') {
      setItems([]);
      return;
    }
    const term = parsed.term;
    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();
    };
  }, [parsed.term, parsed.mode, open]);

  const close = useCallback(() => setOpen(false), [setOpen]);
  const go = useCallback(
    (href: string) => {
      router.push(href);
      close();
    },
    [router, close],
  );
  const runCommand = useCallback(
    (c: Command) => {
      if (c.action === 'theme') {
        const cur = (localStorage.getItem('aia-theme') as 'light' | 'dark' | null) ?? 'system';
        setTheme(cur === 'system' ? 'light' : cur === 'light' ? 'dark' : 'system');
        close();
        return;
      }
      if (c.action === 'density') {
        setDensity(nextDensity(readDensity()));
        close();
        return;
      }
      if (c.prefix) {
        setQ(`${c.prefix}:`);
        setThen(c.then ?? 'entity');
        setActive(0);
        inputRef.current?.focus();
        return;
      }
      if (c.href) go(c.href);
    },
    [close, go, setTheme],
  );

  if (!open) return null;

  /* ------------------------------------------------------------------------------------------------------ build rows */
  const term = parsed.term;
  const rows: Row[] = [];
  const entityNode = (s: Recent | Suggestion, icon?: React.ReactNode) => (
    <>
      {icon ?? <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>}
      {then === 'graph' && <span className="text-[11px] text-ink-3">→ graph</span>}
    </>
  );
  const entityHref = (s: { entity_type: string; slug: string }) => (then === 'graph' ? routes.graph(s.slug) : routes.entity(s));

  if (parsed.mode !== 'entities') {
    const scored = COMMANDS.map((c) => ({ c, score: parsed.mode === 'commands' && !term ? 1 : Math.max(fuzzy(term, c.label), fuzzy(term, c.keywords ?? '') * 0.8) }))
      .filter((x) => x.score > 0)
      .sort((a, b) => b.score - a.score)
      .slice(0, parsed.mode === 'commands' ? COMMANDS.length : term ? 4 : 6);
    for (const { c } of scored)
      rows.push({
        key: `cmd-${c.id}`,
        kind: 'command',
        section: 'Commands',
        run: () => runCommand(c),
        node: (
          <>
            <Terminal className="size-4 shrink-0 text-ink-3" aria-hidden />
            <span className="min-w-0 flex-1 truncate text-[15px] text-ink">{c.label}</span>
            {c.hint && <span className="hidden truncate text-xs text-ink-3 sm:block">{c.hint}</span>}
            {c.action === 'density' && <span className="mono text-[10px] text-ink-3">{DENSITY_LABELS[readDensity()]}</span>}
          </>
        ),
      });
  }
  if (parsed.mode !== 'commands') {
    const filtered = parsed.types ? items.filter((s) => (parsed.types as string[]).includes(s.entity_type)) : items;
    for (const s of filtered)
      rows.push({
        key: `ent-${s.id}`,
        kind: 'entity',
        section: parsed.prefixLabel ?? 'Entities',
        href: entityHref(s),
        run: () => pushRecent(s),
        node: entityNode(s),
      });
    if (!term && recent.length)
      for (const r of recent)
        rows.push({ key: `rec-${r.slug}`, kind: 'recent', section: 'Recent', href: entityHref(r), run: () => pushRecent(r), node: entityNode(r, <Clock className="size-4 shrink-0 text-ink-3" aria-hidden />) });
    if (term)
      rows.push({
        key: '__all',
        kind: 'search',
        section: 'Search',
        href: routes.search(term, parsed.types?.[0]),
        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 />
          </>
        ),
      });
  }
  const clampActive = Math.min(active, Math.max(0, rows.length - 1));

  const pick = (r: Row) => {
    r.run?.();
    if (r.href) go(r.href);
  };
  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[clampActive];
      if (it) pick(it);
      else if (term) go(routes.search(term));
    } else if (e.key === 'Escape') close();
    else if (e.key === 'Backspace' && /^[a-z]:$/i.test(q)) {
      e.preventDefault();
      setQ('');
      setThen('entity');
    }
  };
  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 and commands" 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">
          {parsed.mode === 'commands' ? <Terminal className="size-5 shrink-0 text-accent" aria-hidden /> : <Search className="size-5 shrink-0 text-ink-3" aria-hidden />}
          {parsed.prefixLabel && parsed.mode === 'entities' && <span className="mono shrink-0 rounded-[3px] bg-accent-soft px-1.5 py-0.5 text-[11px] text-accent">{parsed.prefixLabel}</span>}
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              setActive(0);
            }}
            onKeyDown={onKey}
            placeholder={parsed.mode === 'commands' ? 'Type a command…' : 'Search models, orgs, papers, benchmarks… or type > for commands'}
            className="h-11 min-w-0 flex-1 bg-transparent text-[16px] text-ink placeholder:text-ink-3 focus:outline-none"
            autoComplete="off"
            autoFocus
            spellCheck={false}
            aria-label="Search or command"
            role="combobox"
            aria-expanded={rows.length > 0}
            aria-controls="palette-list"
            aria-activedescendant={rows[clampActive] ? `pal-${rows[clampActive].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 && parsed.mode !== 'commands' && <li className="px-4 py-2 text-xs text-warning">Suggestions unavailable — press Enter to search.</li>}
            {term && parsed.mode !== 'commands' && !loading && !failed && rows.filter((r) => r.kind === 'entity').length === 0 && <li className="px-4 py-2 text-xs text-ink-3">No direct {parsed.prefixLabel?.toLowerCase() ?? 'entity'} match — search everything below.</li>}
            {rows.map((r, i) => {
              const header = r.section !== lastSection;
              lastSection = r.section;
              const inner = (
                <>
                  {r.node}
                  {i === clampActive && <kbd className="mono hidden text-[10px] text-ink-3 sm:block">↵</kbd>}
                </>
              );
              const cls = cn('flex min-h-[44px] w-full items-center gap-3 px-4 py-2 text-left', i === clampActive ? 'bg-surface-3' : 'hover:bg-surface-2');
              return (
                <li key={r.key} id={`pal-${r.key}`} role="option" aria-selected={i === clampActive} data-palette-row={r.kind}>
                  {header && <p className="eyebrow px-4 pb-1 pt-3">{r.section}</p>}
                  {r.href ? (
                    <Link href={r.href} onClick={() => { r.run?.(); close(); }} onMouseEnter={() => setActive(i)} className={cls}>
                      {inner}
                    </Link>
                  ) : (
                    <button type="button" onClick={() => pick(r)} onMouseEnter={() => setActive(i)} className={cls}>
                      {inner}
                    </button>
                  )}
                </li>
              );
            })}
          </ul>
          {!term && parsed.mode === 'all' && (
            <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.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>
            <kbd className="mono border border-rule px-1">&gt;</kbd> commands
          </span>
          <span className="hidden sm:inline">
            <kbd className="mono border border-rule px-1">m:</kbd> models · <kbd className="mono border border-rule px-1">b:</kbd> benchmarks · <kbd className="mono border border-rule px-1">o:</kbd> orgs · <kbd className="mono border border-rule px-1">p:</kbd> providers · <kbd className="mono border border-rule px-1">h:</kbd> hardware
          </span>
          <span className="ml-auto">
            <kbd className="mono border border-rule px-1">esc</kbd> close
          </span>
        </div>
      </div>
    </div>
  );
}