disclosure-bureau/web/components/search-autocomplete.tsx

"use client";

/**
 * SearchAutocomplete — type-as-you-go dropdown on the /search input.
 *
 * Hits /api/search/autocomplete (Meilisearch) with debounced fetch and renders
 * a two-section dropdown: matching documents (jump targets) and matching
 * chunks (in-doc passages with excerpt). Sub-30ms target. Keyboard navigation
 * via Up/Down + Enter. Esc closes.
 *
 * Magazine palette (gold/cream on dark) to match the rest of the site; the
 * previous matrix-green/cyan styling was a leftover from the dev-tool era.
 */
import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { Zap } from "lucide-react";

interface DocSuggestion {
  doc_id: string;
  title: string;
  collection?: string;
  href: string;
}
interface ChunkSuggestion {
  chunk_id: string;
  doc_id: string;
  page: number;
  type: string;
  excerpt: string;
  ufo_anomaly: boolean;
  href: string;
}

interface ApiResponse {
  q: string;
  duration_ms?: number;
  documents: DocSuggestion[];
  chunks: ChunkSuggestion[];
}

const COPY = {
  "pt-br": {
    autocomplete: "Sugestões",
    documents: "Documentos",
    passages: "Trechos",
    docs_count: (n: number) => `${n} ${n === 1 ? "documento" : "documentos"}`,
    chunks_count: (n: number) => `${n} ${n === 1 ? "trecho" : "trechos"}`,
  },
  en: {
    autocomplete: "Suggestions",
    documents: "Documents",
    passages: "Passages",
    docs_count: (n: number) => `${n} ${n === 1 ? "document" : "documents"}`,
    chunks_count: (n: number) => `${n} ${n === 1 ? "passage" : "passages"}`,
  },
} as const;

export function SearchAutocomplete({
  query,
  onPick,
  locale = "pt-br",
}: {
  query: string;
  onPick?: () => void;
  locale?: "pt-br" | "en";
}) {
  const [data, setData] = useState<ApiResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const abort = useRef<AbortController | null>(null);
  const t = COPY[locale];

  useEffect(() => {
    const q = query.trim();
    if (q.length < 2) {
      setData(null); setOpen(false); return;
    }
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(async () => {
      abort.current?.abort();
      abort.current = new AbortController();
      setLoading(true);
      try {
        const r = await fetch(`/api/search/autocomplete?q=${encodeURIComponent(q)}`, {
          signal: abort.current.signal,
        });
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        const j = (await r.json()) as ApiResponse;
        setData(j);
        setOpen(j.documents.length + j.chunks.length > 0);
      } catch (e) {
        if ((e as Error).name === "AbortError") return;
        setData(null); setOpen(false);
      } finally {
        setLoading(false);
      }
    }, 150);
    return () => { if (timer.current) clearTimeout(timer.current); };
  }, [query]);

  if (!open || !data) return null;

  return (
    <div className="absolute z-30 left-0 right-0 mt-2 max-h-[60vh] overflow-y-auto bg-[#0d1220] border border-[rgba(224,192,128,0.30)] rounded-xl shadow-2xl">
      <div className="flex items-center justify-between px-3 py-2 text-[10px] font-mono uppercase tracking-widest text-[#9aa6b8] border-b border-[rgba(224,192,128,0.18)]">
        <span className="inline-flex items-center gap-1.5">
          <Zap size={11} className="text-[#e0c080]" aria-hidden="true" />
          <span className="text-[#e0c080]">{t.autocomplete}</span>
          <span aria-hidden="true">·</span>
          <span>{t.docs_count(data.documents.length)}</span>
          <span aria-hidden="true">·</span>
          <span>{t.chunks_count(data.chunks.length)}</span>
        </span>
        <span>{loading ? "…" : `${data.duration_ms ?? "?"}ms`}</span>
      </div>

      {data.documents.length > 0 && (
        <div>
          <div className="px-3 pt-2 pb-1 text-[10px] font-mono uppercase tracking-widest text-[#e0c080]">
            {t.documents}
          </div>
          <ul>
            {data.documents.map((d) => (
              <li key={d.doc_id}>
                <Link
                  href={d.href}
                  onClick={onPick}
                  className="block px-3 py-2 hover:bg-[rgba(224,192,128,0.06)] border-l-2 border-transparent hover:border-[#e0c080] transition-colors"
                >
                  <div className="font-display text-[15px] text-[#e7ecf3] truncate">{d.title}</div>
                  <div className="flex items-center gap-2 font-mono text-[10px] text-[#5a6678] mt-0.5">
                    <span className="truncate">{d.doc_id}</span>
                    {d.collection && <><span aria-hidden="true">·</span><span>{d.collection}</span></>}
                  </div>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}

      {data.chunks.length > 0 && (
        <div>
          <div className="px-3 pt-2 pb-1 text-[10px] font-mono uppercase tracking-widest text-[#e0c080]">
            {t.passages}
          </div>
          <ul>
            {data.chunks.map((c) => (
              <li key={`${c.doc_id}-${c.chunk_id}`}>
                <Link
                  href={c.href}
                  onClick={onPick}
                  className="block px-3 py-2 hover:bg-[rgba(224,192,128,0.06)] border-l-2 border-transparent hover:border-[#e0c080] transition-colors"
                >
                  <div className="flex items-center gap-2 font-mono text-[10px] mb-1">
                    <span className="text-[#e0c080]">p{c.page}</span>
                    <span className="text-[#5a6678]" aria-hidden="true">·</span>
                    <span className="text-[#9aa6b8]">{c.type}</span>
                    {c.ufo_anomaly && <span aria-label="UAP anomaly">🛸</span>}
                    <span className="text-[#5a6678] truncate ml-1">{c.doc_id}</span>
                  </div>
                  <div className="text-[13px] text-[#cbd2dd] line-clamp-2 leading-snug">{c.excerpt}</div>
                </Link>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}