"use client";

import { useEffect, useRef, useState } from "react";

import { useRouter } from "next/navigation";

import { api, OmniResults } from "@/lib/api";

export default function OmniSearch() {

  const [q, setQ] = useState("");

  const [res, setRes] = useState<OmniResults | null>(null);

  const [open, setOpen] = useState(false);

  const router = useRouter();

  const box = useRef<HTMLDivElement>(null);

  const timer = useRef<any>(null);

  useEffect(() => {

    function onClick(e: MouseEvent) {

      if (box.current && !box.current.contains(e.target as Node)) setOpen(false);

    }

    document.addEventListener("mousedown", onClick);

    return () => document.removeEventListener("mousedown", onClick);

  }, []);

  function onChange(v: string) {

    setQ(v);

    clearTimeout(timer.current);

    if (v.trim().length < 2) { setRes(null); return; }

    timer.current = setTimeout(() => {

      api.omniSearch(v.trim()).then((r) => { setRes(r); setOpen(true); }).catch(() => setRes(null));

    }, 220);

  }

  const hasResults = res && (res.plates.length || res.persons.length || res.vehicles.length || res.detections.length || res.cameras.length);

  return (

    <div className="omni" ref={box}>

      <span className="mag">⌕</span>

      <input value={q} placeholder="Search anything - plate, name, make/model, clothing, camera operator…"

             onChange={(e) => onChange(e.target.value)} onFocus={() => res && setOpen(true)} />

      {open && hasResults && (

        <div className="omni-results">

          {res!.plates.length > 0 && (

            <div className="omni-sec"><div className="lbl">Plates</div>

              {res!.plates.map((p) => (

                <div key={p.plate_norm} className="omni-row" onClick={() => { router.push(`/vehicles/${p.plate_norm}`); setOpen(false); }}>

                  <span className="badge accent mono">{p.plate_norm}</span>

                  <span className="muted">{p.state} · {p.reads} reads</span>

                </div>

              ))}

            </div>

          )}

          {res!.persons.length > 0 && (

            <div className="omni-sec"><div className="lbl">Persons</div>

              {res!.persons.map((p) => (

                <div key={p.id} className="omni-row" onClick={() => { router.push(`/persons/${p.id}`); setOpen(false); }}>

                  <span>{p.full_name}</span>

                  {p.wanted && <span className="badge danger">WANTED</span>}

                  <span className="muted">{p.associated_plate || ""}</span>

                </div>

              ))}

            </div>

          )}

          {res!.vehicles.length > 0 && (

            <div className="omni-sec"><div className="lbl">Vehicles</div>

              {res!.vehicles.map((v, i) => (

                <div key={i} className="omni-row" onClick={() => { if (v.plate_norm) router.push(`/vehicles/${v.plate_norm}`); setOpen(false); }}>

                  <span className="badge">{[v.color, v.make, v.model].filter(Boolean).join(" ")}</span>

                  <span className="muted mono">{v.plate_norm}</span>

                </div>

              ))}

            </div>

          )}

          {res!.detections.length > 0 && (

            <div className="omni-sec"><div className="lbl">Detections (clothing / articles)</div>

              {res!.detections.map((d) => (

                <div key={d.id} className="omni-row" onClick={() => { router.push(`/search?det=${d.id}`); setOpen(false); }}>

                  <span className="badge purple">{d.clothing_top}</span>

                  <span className="muted">{(d.articles || []).join(", ")} {d.plate_norm ? `· ${d.plate_norm}` : ""}</span>

                </div>

              ))}

            </div>

          )}

          {res!.cameras.length > 0 && (

            <div className="omni-sec"><div className="lbl">Cameras</div>

              {res!.cameras.map((c) => (

                <div key={c.id} className="omni-row" onClick={() => { router.push(`/cameras/${c.id}`); setOpen(false); }}>

                  <span>{c.name}</span><span className="muted">{c.operator}</span>

                </div>

              ))}

            </div>

          )}

        </div>

      )}

    </div>

  );

}