"use client";

import { useEffect, useRef, useState } from "react";
import { readApiResponse } from "../lib/chunked-upload";

export type AdminSearchResult = { kind: "customer" | "request" | "dtc" | "ecu"; id: string; title: string; subtitle: string; meta: string; query: string };

const kindLabel = { customer: "MÜŞTERİ", request: "DOSYA", dtc: "DTC", ecu: "ECU" } as const;

export function AdminGlobalSearch({ onSelect }: { onSelect: (result: AdminSearchResult) => void }) {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState<AdminSearchResult[]>([]);
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const input = useRef<HTMLInputElement>(null);

  useEffect(() => {
    function shortcut(event: KeyboardEvent) {
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") { event.preventDefault(); input.current?.focus(); setOpen(true); }
      if (event.key === "Escape") setOpen(false);
    }
    window.addEventListener("keydown", shortcut);
    return () => window.removeEventListener("keydown", shortcut);
  }, []);

  useEffect(() => {
    const clean = query.trim();
    if (clean.length < 2) { setResults([]); setLoading(false); return; }
    let active = true;
    const timer = window.setTimeout(async () => {
      setLoading(true);
      try {
        const response = await fetch(`/api/global-search?q=${encodeURIComponent(clean)}`, { cache: "no-store" });
        const payload = await readApiResponse<{ results: AdminSearchResult[] }>(response);
        if (active) { setResults(payload.results); setOpen(true); }
      } catch { if (active) setResults([]); }
      finally { if (active) setLoading(false); }
    }, 230);
    return () => { active = false; window.clearTimeout(timer); };
  }, [query]);

  function choose(result: AdminSearchResult) { onSelect(result); setQuery(""); setResults([]); setOpen(false); }

  return <div className="adminGlobalSearch">
    <span className="globalSearchIcon">⌕</span>
    <input ref={input} className="search" value={query} onFocus={() => setOpen(true)} onBlur={() => window.setTimeout(() => setOpen(false), 160)} onChange={event => setQuery(event.target.value)} placeholder="Müşteri, dosya, ECU veya DTC ara…" aria-label="Panelde genel arama" autoComplete="off"/>
    <kbd>Ctrl K</kbd>
    {open && query.trim().length >= 2 && <div className="globalSearchPanel">
      <div className="globalSearchTop"><span>{loading ? "VERİTABANI TARANIYOR" : `${results.length} SONUÇ`}</span><small>Müşteri · Dosya · ECU · DTC</small></div>
      {loading ? <div className="globalSearchLoading"><i/><i/><i/></div> : results.length ? <div className="globalSearchResults">{results.map(result => <button key={`${result.kind}-${result.id}`} onMouseDown={event => event.preventDefault()} onClick={() => choose(result)}><b className={`searchKind ${result.kind}`}>{kindLabel[result.kind]}</b><span><strong>{result.title}</strong><small>{result.subtitle}</small><em>{result.meta}</em></span><i>›</i></button>)}</div> : <div className="globalSearchEmpty"><span>⌕</span><strong>Sonuç bulunamadı</strong><small>Başka bir ad, e-posta, dosya, ECU veya arıza kodu deneyin.</small></div>}
    </div>}
  </div>;
}