"use client";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { IconSearch, IconPin } from "./icons";

type Suggest = { places: { kind: string; name: string; region: string | null; nSale: number; nRent: number }[]; addresses: { uid: string; address: string; city: string; market: string }[] };

export function SearchBar({ market = "achat", placeholder = "Ville, quartier ou adresse", autoFocus = false, size = "lg", onPick }: { market?: "achat" | "location"; placeholder?: string; autoFocus?: boolean; size?: "lg" | "md"; onPick?: (city: string) => void }) {
  const [q, setQ] = useState(""); const [sug, setSug] = useState<Suggest | null>(null); const [open, setOpen] = useState(false); const [active, setActive] = useState(-1);
  const router = useRouter(); const box = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (q.trim().length < 2) { setSug(null); return; }
    const ctl = new AbortController(); const t = setTimeout(() => {
      fetch(`/api/suggest?q=${encodeURIComponent(q)}`, { signal: ctl.signal }).then((r) => r.json()).then((d) => { setSug(d); setOpen(true); setActive(-1); }).catch(() => {});
    }, 150);
    return () => { clearTimeout(t); ctl.abort(); };
  }, [q]);
  useEffect(() => { const h = (e: MouseEvent) => { if (!box.current?.contains(e.target as Node)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []);
  const items = [...(sug?.places ?? []).map((p) => ({ type: "place" as const, ...p })), ...(sug?.addresses ?? []).map((a) => ({ type: "address" as const, ...a }))];
  const go = (i: number) => {
    const it = items[i];
    if (!it) { if (q.trim()) router.push(`/recherche?marche=${market}&q=${encodeURIComponent(q.trim())}`); return; }
    setOpen(false);
    if (it.type === "place") { if (onPick) { onPick(it.name); return; } router.push(it.kind === "region" ? `/recherche?marche=${market}&region=${encodeURIComponent(it.name)}` : `/recherche?marche=${market}&ville=${encodeURIComponent(it.name)}`); }
    else router.push(`/annonce/${encodeURIComponent(it.uid)}`);
  };
  return (
    <div ref={box} className="relative w-full">
      <form role="search" onSubmit={(e) => { e.preventDefault(); go(active); }} className="relative">
        <IconSearch className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-3" />
        <input value={q} onChange={(e) => setQ(e.target.value)} onFocus={() => sug && setOpen(true)} autoFocus={autoFocus} placeholder={placeholder} aria-label="Rechercher une ville, un quartier ou une adresse" aria-expanded={open} aria-controls="tv-suggest" role="combobox" aria-autocomplete="list"
          onKeyDown={(e) => { if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(a + 1, items.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(a - 1, -1)); } else if (e.key === "Escape") setOpen(false); }}
          className={`tv-input ${size === "lg" ? "py-3.5 text-base pr-28" : "text-sm pr-24"}`} />
        <button type="submit" className={`tv-btn tv-btn-primary absolute right-1.5 top-1/2 -translate-y-1/2 ${size === "lg" ? "" : "!py-1.5 text-xs"}`}>Explorer</button>
      </form>
      {open && items.length > 0 && (
        <ul id="tv-suggest" role="listbox" className="absolute z-30 mt-2 w-full tv-card p-1.5 max-h-80 overflow-auto">
          {items.map((it, i) => (
            <li key={it.type === "place" ? `${it.kind}:${it.name}` : it.uid} role="option" aria-selected={i === active}>
              <button type="button" onMouseDown={() => go(i)} className={`w-full text-left flex items-center gap-3 px-3 py-2 rounded-lg text-sm ${i === active ? "bg-surface-2" : "hover:bg-surface-2"}`}>
                <IconPin className="text-ink-3 shrink-0" width={16} height={16} />
                {it.type === "place" ? (<span className="min-w-0"><span className="font-medium">{it.name}</span><span className="text-ink-3"> · {it.kind === "region" ? "Région" : it.region ?? "Municipalité"} · {market === "location" ? `${it.nRent} à louer` : `${it.nSale} à vendre`}</span></span>)
                  : (<span className="min-w-0 truncate"><span className="font-medium">{it.address}</span><span className="text-ink-3">, {it.city} · {it.market === "rent" ? "à louer" : "à vendre"}</span></span>)}
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}