"use client";
import { useEffect, useMemo, useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import type { SearchParams, SearchResult } from "@/lib/types";
import { ListingCardView } from "@/components/listing-card";
import { FilterBar } from "@/components/filters";
import { SearchBar } from "@/components/search-bar";
import { MapView, type MapPoint } from "@/components/map-view";
import { Empty } from "@/components/ui";
import { IconList, IconMap, IconHeart } from "@/components/icons";
import { useSavedSearches } from "@/lib/favorites";

export function ResultsView({ initial, points, params, title }: { initial: SearchResult; points: MapPoint[]; params: SearchParams & { page: number }; title: string }) {
  const [mode, setMode] = useState<"list" | "map">("list");
  const [active, setActive] = useState<string | null>(null);
  const router = useRouter(); const sp = useSearchParams(); const saved = useSavedSearches();
  const rent = params.market === "rent";
  const pages = Math.max(1, Math.ceil(initial.total / initial.limit));
  const center = useMemo<[number, number] | undefined>(() => { if (!points.length) return undefined; const la = points.reduce((s, p) => s + p.lat, 0) / points.length, ln = points.reduce((s, p) => s + p.lng, 0) / points.length; return [la, ln]; }, [points]);
  const goPage = (n: number) => { const u = new URLSearchParams(sp.toString()); u.set("page", String(n)); router.push(`/recherche?${u}`); };
  useEffect(() => { setActive(null); }, [initial]);
  const href = `/recherche?${sp.toString()}`;
  return (
    <div className="mx-auto max-w-[1600px] px-4 py-4">
      <div className="flex flex-col md:flex-row md:items-center gap-3">
        <div className="md:w-96"><SearchBar market={rent ? "location" : "achat"} size="md" placeholder={params.city ?? params.region ?? "Ville, quartier ou adresse"} /></div>
        <div className="flex-1 min-w-0"><FilterBar /></div>
      </div>
      <div className="mt-3 flex flex-wrap items-center justify-between gap-2">
        <h1 className="text-base md:text-lg font-bold basis-full md:basis-auto">{title}</h1>
        <div className="flex items-center gap-2 shrink-0">
          <button type="button" onClick={() => saved.save(title, href)} className="tv-chip hidden sm:inline-flex" title="Sauvegarder cette recherche (local)"><IconHeart width={14} height={14} /> Sauvegarder</button>
          <div className="inline-flex md:hidden rounded-full border border-line p-0.5 bg-white">
            <button type="button" onClick={() => setMode("list")} className={`px-3 py-1 rounded-full text-xs font-semibold inline-flex items-center gap-1 ${mode === "list" ? "bg-ink text-white" : "text-ink-2"}`}><IconList width={14} height={14} /> Liste</button>
            <button type="button" onClick={() => setMode("map")} className={`px-3 py-1 rounded-full text-xs font-semibold inline-flex items-center gap-1 ${mode === "map" ? "bg-ink text-white" : "text-ink-2"}`}><IconMap width={14} height={14} /> Carte</button>
          </div>
        </div>
      </div>
      <div className="mt-3 grid md:grid-cols-[minmax(0,1fr)_minmax(360px,42%)] gap-4">
        <div className={mode === "map" ? "hidden md:block" : ""}>
          {initial.items.length === 0 ? (
            <Empty title="Aucune annonce ne correspond" hint="Élargissez la zone, retirez un filtre ou changez de marché." action={{ href: `/recherche?marche=${rent ? "location" : "achat"}`, label: "Réinitialiser" }} />
          ) : (
            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">{initial.items.map((c, i) => <div key={c.uid} onMouseEnter={() => setActive(c.uid)} className={active === c.uid ? "ring-2 ring-brand rounded-card" : ""}><ListingCardView c={c} priority={i < 4} /></div>)}</div>
          )}
          {pages > 1 && (
            <nav className="mt-6 flex items-center justify-center gap-2 text-sm" aria-label="Pagination">
              <button type="button" disabled={params.page <= 1} onClick={() => goPage(params.page - 1)} className="tv-btn tv-btn-ghost !py-1.5 disabled:opacity-40">Précédent</button>
              <span className="text-ink-2">Page {params.page} sur {pages}</span>
              <button type="button" disabled={params.page >= pages} onClick={() => goPage(params.page + 1)} className="tv-btn tv-btn-ghost !py-1.5 disabled:opacity-40">Suivant</button>
            </nav>
          )}
        </div>
        <div className={`${mode === "list" ? "hidden md:block" : ""} md:sticky md:top-[76px] h-[calc(100dvh-180px)] md:h-[calc(100dvh-110px)] rounded-card overflow-hidden border border-line`}>
          <MapView points={points} center={center} zoom={center ? (params.city ? 12 : params.region ? 9 : 6.5) : 5.4} rent={rent} activeUid={active} fitToPoints={!!(params.city || params.region || params.q)}
            onSelect={(p) => router.push(`/annonce/${encodeURIComponent(p.uid)}`)} />
        </div>
      </div>
      <p className="mt-6 text-xs text-ink-3">Les annonces proviennent de sites publics ; chaque fiche indique sa source et renvoie à l'annonce d'origine. Les écarts « estimation vs prix » sont statistiques et indicatifs.</p>
    </div>
  );
}