'use client';

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

export interface SearchHit {
  type: 'cancer' | 'gene' | 'variant' | 'drug' | 'trial' | 'publication' | 'source';
  id: string;
  title: string;
  subtitle?: string | null;
  href: string;
  match: 'exact' | 'alias' | 'prefix' | 'trigram' | 'identifier';
}

const TYPE_LABEL: Record<SearchHit['type'], string> = { cancer: 'Cancer', gene: 'Gene', variant: 'Variant', drug: 'Drug', trial: 'Trial', publication: 'Publication', source: 'Source' };

/**
 * ⌘K command palette. Queries /api/search (own route handler, database-backed) with debounce.
 * Keyboard: ↑/↓ to move, Enter to open, Esc to close. Announces result count for screen readers.
 */
export function CommandPalette({ variant = 'button' }: { variant?: 'button' | 'hero' }) {
  const [open, setOpen] = useState(false);
  const [q, setQ] = useState('');
  const [hits, setHits] = useState<SearchHit[]>([]);
  const [active, setActive] = useState(0);
  const [loading, setLoading] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);
  const router = useRouter();

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
        e.preventDefault();
        setOpen((o) => !o);
      } else if (e.key === 'Escape') setOpen(false);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  useEffect(() => {
    if (open) setTimeout(() => inputRef.current?.focus(), 10);
    else {
      setQ('');
      setHits([]);
      setActive(0);
    }
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const term = q.trim();
    if (term.length < 2) {
      setHits([]);
      return;
    }
    const ctrl = new AbortController();
    const t = setTimeout(async () => {
      setLoading(true);
      try {
        const r = await fetch(`/api/search?q=${encodeURIComponent(term)}&limit=12`, { signal: ctrl.signal });
        const j = (await r.json()) as { data: SearchHit[] };
        setHits(j.data ?? []);
        setActive(0);
      } catch {
        /* aborted */
      } finally {
        setLoading(false);
      }
    }, 120);
    return () => {
      clearTimeout(t);
      ctrl.abort();
    };
  }, [q, open]);

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

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'ArrowDown') {
      e.preventDefault();
      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') {
      e.preventDefault();
      const h = hits[active];
      if (h) go(h.href);
      else if (q.trim()) go(`/search?q=${encodeURIComponent(q.trim())}`);
    }
  };

  return (
    <>
      {variant === 'hero' ? (
        <button type="button" onClick={() => setOpen(true)} className="flex w-full items-center gap-3 border border-rule-strong bg-white px-4 py-3 text-left text-[15px] text-ink-3 hover:border-accent focus:border-accent">
          <Search className="h-4 w-4 shrink-0" aria-hidden />
          <span className="flex-1">Search a cancer, gene, variant, drug, trial or PMID…</span>
          <kbd className="ci-mono hidden rounded-sm border border-rule px-1.5 text-[11px] text-ink-3 sm:inline">⌘K</kbd>
        </button>
      ) : (
        <button type="button" onClick={() => setOpen(true)} className="inline-flex items-center gap-2 border border-rule px-2.5 py-1.5 text-[13px] text-ink-2 hover:border-accent hover:text-accent" aria-label="Search (Command K)">
          <Search className="h-3.5 w-3.5" aria-hidden />
          <span className="hidden sm:inline">Search</span>
          <kbd className="ci-mono hidden rounded-sm border border-rule px-1 text-[10.5px] text-ink-3 md:inline">⌘K</kbd>
        </button>
      )}
      {open ? (
        <div className="fixed inset-0 z-[100] bg-ink/30 p-3 sm:p-[10vh]" onMouseDown={(e) => e.target === e.currentTarget && setOpen(false)} role="presentation">
          <div role="dialog" aria-modal="true" aria-label="Search CancerIndex" className="mx-auto w-full max-w-2xl border border-rule-strong bg-paper shadow-2xl">
            <div className="flex items-center gap-2 border-b border-rule px-3">
              <Search className="h-4 w-4 text-ink-3" aria-hidden />
              <input
                ref={inputRef}
                value={q}
                onChange={(e) => setQ(e.target.value)}
                onKeyDown={onKeyDown}
                placeholder="Search cancers, genes, variants, drugs, trials, PMIDs…"
                className="w-full bg-transparent py-3 text-[15px] outline-none placeholder:text-ink-4"
                role="combobox"
                aria-expanded={hits.length > 0}
                aria-controls="ci-search-results"
                aria-activedescendant={hits[active] ? `ci-hit-${active}` : undefined}
                autoComplete="off"
                spellCheck={false}
              />
              <kbd className="ci-mono rounded-sm border border-rule px-1 text-[10.5px] text-ink-3">esc</kbd>
            </div>
            <ul id="ci-search-results" role="listbox" className="max-h-[60vh] overflow-y-auto">
              {hits.map((h, i) => (
                <li
                  key={`${h.type}-${h.id}`}
                  id={`ci-hit-${i}`}
                  role="option"
                  aria-selected={i === active}
                  onMouseEnter={() => setActive(i)}
                  onClick={() => go(h.href)}
                  className={`flex cursor-pointer items-center gap-3 border-b border-rule px-3 py-2 text-[14px] ${i === active ? 'bg-accent-soft' : ''}`}
                >
                  <span className="ci-kicker w-20 shrink-0">{TYPE_LABEL[h.type]}</span>
                  <span className="min-w-0 flex-1">
                    <span className="block truncate">{h.title}</span>
                    {h.subtitle ? <span className="block truncate text-[12px] text-ink-3">{h.subtitle}</span> : null}
                  </span>
                  <span className="ci-mono hidden text-[10.5px] text-ink-4 sm:inline">{h.match}</span>
                  {i === active ? <CornerDownLeft className="h-3.5 w-3.5 text-ink-3" aria-hidden /> : null}
                </li>
              ))}
              {q.trim().length >= 2 && !loading && hits.length === 0 ? <li className="px-3 py-4 text-[13.5px] text-ink-3">No matching entity. Press Enter for full-text search.</li> : null}
              {q.trim().length < 2 ? <li className="px-3 py-4 text-[13px] text-ink-3">Type at least two characters. Ordering: exact name, alias, prefix, then fuzzy match.</li> : null}
            </ul>
            <p className="sr-only" aria-live="polite">
              {hits.length} results
            </p>
          </div>
        </div>
      ) : null}
    </>
  );
}