'use client';
import { Search } from 'lucide-react';
import { useEffect, useId, useRef, useState } from 'react';
import { EntityBadge } from '@/components/ui/badges';
import { cn } from '@/lib/cn';
import { clientApi } from '@/lib/client-api';
import type { Suggestion } from '@/lib/types';

/** Root picker: `/search/suggest` autocomplete (≤ 8 rows), keyboard navigable, calls `onPick(suggestion)`. */
export function NodeSearch({ onPick, placeholder = 'Pick a root: model, organization, benchmark…', className, autoFocus = false }: { onPick: (s: Suggestion) => void; placeholder?: string; className?: string; autoFocus?: boolean }) {
  const [q, setQ] = useState('');
  const [items, setItems] = useState<Suggestion[]>([]);
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState(0);
  const abort = useRef<AbortController | null>(null);
  const listId = useId();
  useEffect(() => {
    const term = q.trim();
    if (term.length < 2) {
      setItems([]);
      return;
    }
    abort.current?.abort();
    const ctl = new AbortController();
    abort.current = ctl;
    const t = setTimeout(() => {
      clientApi
        .suggest(term, ctl.signal)
        .then((r) => {
          setItems(r.items);
          setActive(0);
          setOpen(true);
        })
        .catch(() => undefined);
    }, 120);
    return () => clearTimeout(t);
  }, [q]);
  const pick = (s: Suggestion) => {
    onPick(s);
    setQ('');
    setItems([]);
    setOpen(false);
  };
  return (
    <div className={cn('relative', className)}>
      <div className="flex items-stretch border border-rule bg-surface focus-within:border-accent">
        <span className="flex items-center pl-2.5 text-ink-3">
          <Search className="size-4" aria-hidden />
        </span>
        <input
          type="search"
          value={q}
          onChange={(e) => setQ(e.target.value)}
          onFocus={() => items.length && setOpen(true)}
          onBlur={() => setTimeout(() => setOpen(false), 120)}
          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(0, a - 1));
            } else if (e.key === 'Enter' && items[active]) {
              e.preventDefault();
              pick(items[active]);
            } else if (e.key === 'Escape') setOpen(false);
          }}
          placeholder={placeholder}
          aria-label="Search a root entity"
          aria-autocomplete="list"
          aria-controls={listId}
          aria-expanded={open}
          autoComplete="off"
          autoFocus={autoFocus}
          className="h-11 min-w-0 flex-1 bg-transparent px-2 text-[15px] text-ink placeholder:text-ink-3 focus:outline-none"
          data-graph-search
        />
      </div>
      {open && items.length > 0 && (
        <ul id={listId} role="listbox" className="panel absolute left-0 right-0 top-full z-20 mt-1 max-h-72 overflow-auto py-1 text-sm shadow-lg">
          {items.map((s, i) => (
            <li key={s.id} role="option" aria-selected={i === active}>
              <button type="button" onMouseDown={(e) => e.preventDefault()} onClick={() => pick(s)} onMouseEnter={() => setActive(i)} className={cn('flex w-full items-center gap-2 px-2.5 py-2 text-left', i === active ? 'bg-surface-2 text-ink' : 'text-ink-2 hover:bg-surface-2')}>
                <EntityBadge type={s.entity_type} small />
                <span className="truncate">{s.name}</span>
                {s.organization_name && <span className="ml-auto shrink-0 text-xs text-ink-3">{s.organization_name}</span>}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}