"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { MapView, type MapPoint } from "@/components/map-view";
import { SearchBar } from "@/components/search-bar";
import { ListingCardView } from "@/components/listing-card";
import type { ListingCard } from "@/lib/types";
import { IconClose } from "@/components/icons";

export function CarteView() {
  const [market, setMarket] = useState<"achat" | "location">("achat");
  const [cats, setCats] = useState<string[]>([]);
  const [points, setPoints] = useState<MapPoint[]>([]);
  const [sel, setSel] = useState<ListingCard | null>(null);
  const [center, setCenter] = useState<[number, number] | undefined>([45.55, -73.65]);
  const [zoom, setZoom] = useState(11);
  const [n, setN] = useState(0);
  const router = useRouter(); const bboxRef = useRef<[number, number, number, number] | null>(null); const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const load = useCallback((bbox: [number, number, number, number], z: number) => {
    bboxRef.current = bbox;
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(async () => {
      const q = new URLSearchParams({ marche: market, bbox: bbox.join(","), format: "points", tri: "recent" }); if (cats.length) q.set("type", cats.join(","));
      const r = await fetch(`/api/search?${q}`).then((r) => r.json()).catch(() => null);
      if (r?.points) { setN(r.points.length); setPoints(r.points); }
    }, 250);
  }, [market, cats]);
  useEffect(() => { if (bboxRef.current) load(bboxRef.current, zoom); }, [market, cats, load, zoom]);
  const pick = async (p: MapPoint) => { const r = await fetch(`/api/search?marche=${market}&q=&limit=1&bbox=${p.lng - 1e-6},${p.lat - 1e-6},${p.lng + 1e-6},${p.lat + 1e-6}`).then((r) => r.json()).catch(() => null); const item = r?.items?.find((i: ListingCard) => i.uid === p.uid) ?? r?.items?.[0]; setSel(item ?? null); };
  const CATS = market === "location" ? [["logement", "Logements"], ["condo", "Condos"], ["maison", "Maisons"]] : [["maison", "Maisons"], ["condo", "Condos"], ["plex", "Plex"], ["terrain", "Terrains"]];
  return (
    <div className="relative h-[calc(100dvh-56px-64px)] md:h-[calc(100dvh-64px)]">
      <MapView points={points} center={center} zoom={zoom} rent={market === "location"} activeUid={sel?.uid ?? null} onSelect={pick} onMove={(b, z) => { setZoom(z); load(b, z); }} />
      <div className="absolute top-3 left-3 right-3 md:right-auto md:w-[520px] flex flex-col gap-2">
        <div className="tv-card p-2 flex gap-2 items-center">
          <div className="inline-flex rounded-full border border-line p-0.5 bg-white shrink-0"><button type="button" onClick={() => { setMarket("achat"); setCats([]); }} className={`px-3 py-1.5 rounded-full text-xs font-semibold ${market === "achat" ? "bg-brand text-white" : "text-ink-2"}`}>Acheter</button><button type="button" onClick={() => { setMarket("location"); setCats([]); }} className={`px-3 py-1.5 rounded-full text-xs font-semibold ${market === "location" ? "bg-brand text-white" : "text-ink-2"}`}>Louer</button></div>
          <div className="flex-1 min-w-0"><SearchBar market={market} size="md" onPick={async (city) => { const r = await fetch(`/api/suggest?q=${encodeURIComponent(city)}`).then((r) => r.json()); const pl = r.places?.[0]; const c = await fetch(`/api/search?marche=${market}&ville=${encodeURIComponent(pl?.name ?? city)}&limit=1&format=points`).then((r) => r.json()); const p = c.points?.[0]; if (p) { setCenter([p.lat, p.lng]); setZoom(12); } }} /></div>
        </div>
        <div className="flex gap-2 overflow-x-auto no-scrollbar">{CATS.map(([v, l]) => <button key={v} type="button" className="tv-chip bg-white shrink-0" data-active={cats.includes(v)} onClick={() => setCats((c) => c.includes(v) ? c.filter((x) => x !== v) : [...c, v])}>{l}</button>)}<span className="tv-chip bg-white shrink-0 !text-ink-3">{n >= 2000 ? "2 000+" : n.toLocaleString("fr-CA")} dans la zone{n >= 2000 ? " · zoomez pour tout voir" : ""}</span></div>
      </div>
      {sel && (
        <div className="absolute bottom-3 left-3 right-3 md:left-auto md:w-96">
          <div className="relative"><ListingCardView c={sel} /><button type="button" onClick={() => setSel(null)} className="absolute -top-2 -right-2 p-1.5 rounded-full bg-white shadow border border-line" aria-label="Fermer"><IconClose width={14} height={14} /></button></div>
          <button type="button" onClick={() => router.push(`/annonce/${encodeURIComponent(sel.uid)}`)} className="tv-btn tv-btn-primary w-full mt-2">Voir la fiche</button>
        </div>
      )}
    </div>
  );
}