// -----------------------------------------------------------------------------
// Lou-Ka — Location court terme
// pages/CourtTerme.tsx : agrégateur d'hébergements court terme (chalets,
//   séjours, hébergement insolite) — héro, filtres, grille + vue carte.
//   Section séparée du Lou-Ka standard (logements au mois) : API /api/ct/*.
// -----------------------------------------------------------------------------
import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams } from "react-router-dom";
import {
  CtFacets, CtFilters, CtListing, CtStats,
  ctSourceName, fetchCtFacets, fetchCtListings, fetchCtSources, fetchCtStats,
  registerCtSourceNames,
} from "../ctapi";
import CtListingCard from "../components/CtListingCard";
import Pager from "../components/Pager";
import { useAgo, useCountUp } from "../live";
import {
  IcoAlert, IcoList, IcoMap, IcoPaw, IcoSearch, IcoSliders,
} from "../components/Icons";

const CtMapView = lazy(() => import("../components/CtMapView"));

const PAGE_SIZE = 12;
const NIGHT_STEPS = [75, 100, 150, 200, 250, 300, 400, 500, 750, 1000];
const CAPACITY_STEPS = [2, 4, 6, 8, 10, 12];
const SORTS: { key: string; label: string }[] = [
  { key: "recent", label: "Plus récents" },
  { key: "prix", label: "Prix croissant" },
  { key: "prix_desc", label: "Prix décroissant" },
  { key: "note", label: "Mieux notés" },
];

function useDebounced<T>(value: T, delayMs = 300): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(t);
  }, [value, delayMs]);
  return debounced;
}

export default function CourtTermePage() {
  const [listings, setListings] = useState<CtListing[] | null>(null);
  const [total, setTotal] = useState(0);
  const [facets, setFacets] = useState<CtFacets | null>(null);
  const [stats, setStats] = useState<CtStats | null>(null);
  const [error, setError] = useState<string | null>(null);

  const [params] = useSearchParams();
  const [q, setQ] = useState(params.get("q") ?? "");
  const [region, setRegion] = useState(params.get("region") ??  "");
  const [type, setType] = useState(params.get("type") ?? "");
  const [source, setSource] = useState(params.get("source") ?? "");
  const [priceMin, setPriceMin] = useState(params.get("price_min") ?? "");
  const [priceMax, setPriceMax] = useState(params.get("price_max") ?? "");
  const [capMin, setCapMin] = useState(params.get("capacity_min") ?? "");
  const [pets, setPets] = useState(params.get("pets") ?? "");
  const [spa, setSpa] = useState(params.get("spa") ?? "");
  const [waterfront, setWaterfront] = useState(params.get("waterfront") ?? "");
  const [sort, setSort] = useState(params.get("sort") ?? "recent");

  const [sheetOpen, setSheetOpen] = useState(false);
  const [advOpen, setAdvOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = sheetOpen ? "hidden" : "";
    if (!sheetOpen) return () => { document.body.style.overflow = ""; };
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") setSheetOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = "";
      window.removeEventListener("keydown", onKey);
    };
  }, [sheetOpen]);

  const activeFilters = [q, region, type, source, priceMin, priceMax, capMin,
    pets, spa, waterfront].filter(Boolean).length;
  const advCount = [capMin, pets, source].filter(Boolean).length;

  const [view, setView] = useState<"liste" | "carte">(
    params.get("view") === "carte" ? "carte" : "liste");
  useEffect(() => {
    setView(params.get("view") === "carte" ? "carte" : "liste");
  }, [params]);

  const qDebounced = useDebounced(q);
  const filters: CtFilters = useMemo(() => ({
    q: qDebounced, region, type, source,
    price_min: priceMin, price_max: priceMax,
    capacity_min: capMin, pets, spa, waterfront, sort,
  }), [qDebounced, region, type, source, priceMin, priceMax, capMin, pets,
       spa, waterfront, sort]);

  // données vivantes du héro : dernière synchro réelle (max des connecteurs)
  const [lastSync, setLastSync] = useState<number | null>(null);
  useEffect(() => {
    fetchCtSources().then((r) => {
      registerCtSourceNames(r.sources);
      const ts = Math.max(0, ...r.sources.map((s) => s.last_sync ?? 0));
      if (ts > 0) setLastSync(ts > 1e12 ? Math.round(ts / 1000) : ts);
    }).catch(() => {});
    fetchCtFacets().then(setFacets).catch(() => {});
    fetchCtStats().then(setStats).catch(() => {});
  }, []);
  const totalLive = useCountUp(stats && stats.total > 0 ? stats.total : null);
  const syncAgo = useAgo(lastSync);

  // pagination
  const [page, setPage] = useState(() => {
    const p = Number(params.get("page"));
    return Number.isFinite(p) && p >= 1 ? Math.floor(p) : 1;
  });
  const resultsRef = useRef<HTMLDivElement | null>(null);
  const filtersKey = useMemo(() => JSON.stringify(filters), [filters]);
  const firstRun = useRef(true);
  useEffect(() => {
    if (firstRun.current) { firstRun.current = false; return; }
    setPage(1);
  }, [filtersKey]);

  const goToPage = (p: number) => {
    setPage(p);
    resultsRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  useEffect(() => {
    if (view === "carte") return;
    let cancelled = false;
    setListings(null);
    setError(null);
    fetchCtListings(filters, PAGE_SIZE, (page - 1) * PAGE_SIZE)
      .then((r) => {
        if (!cancelled) {
          setListings(r.listings);
          setTotal(r.total);
          const last = Math.max(1, Math.ceil(r.total / PAGE_SIZE));
          if (page > last) setPage(last);
        }
      })
      .catch((e) => !cancelled && setError(String(e)));
    return () => { cancelled = true; };
  }, [filters, page, view]);

  const resetAll = () => {
    setQ(""); setRegion(""); setType(""); setSource("");
    setPriceMin(""); setPriceMax(""); setCapMin("");
    setPets(""); setSpa(""); setWaterfront(""); setSort("recent");
  };

  const pills: { label: string; clear: () => void }[] = [];
  if (q) pills.push({ label: `« ${q} »`, clear: () => setQ("") });
  if (region) pills.push({ label: region, clear: () => setRegion("") });
  if (type) pills.push({ label: type, clear: () => setType("") });
  if (priceMin) pills.push({ label: `≥ ${priceMin} $/nuit`, clear: () => setPriceMin("") });
  if (priceMax) pills.push({ label: `≤ ${priceMax} $/nuit`, clear: () => setPriceMax("") });
  if (capMin) pills.push({ label: `${capMin}+ personnes`, clear: () => setCapMin("") });
  if (pets) pills.push({ label: "Animaux acceptés", clear: () => setPets("") });
  if (spa) pills.push({ label: "Spa", clear: () => setSpa("") });
  if (waterfront) pills.push({ label: "Bord de l'eau", clear: () => setWaterfront("") });
  if (source) pills.push({ label: ctSourceName(source), clear: () => setSource("") });

  return (
    <div className="container">
      <section className="hero">
        <span className="kicker">Court terme — chalets et séjours, partout au Québec</span>
        <h1 className="hero-display">
          Trouvez votre prochaine<br />
          <span className="brush">escapade.</span>
        </h1>
        <p className="lede">
          Chalets, condos et hébergements insolites en location court terme, agrégés
          depuis les plateformes québécoises et internationales — lien direct pour réserver.
        </p>
        <div className="live-line" aria-label="Données en direct">
          <span className="live-flag"><span className="live-dot" /> live</span>
          {totalLive && (
            <span className="live-item"><b>{totalLive}</b> hébergements indexés</span>
          )}
          {stats && stats.regions > 0 && (
            <span className="live-item"><b>{stats.regions}</b> régions</span>
          )}
          {syncAgo && <span className="live-item">synchro {syncAgo}</span>}
          {stats?.avg_night != null && (
            <span className="live-item">prix moyen <b>{Math.round(stats.avg_night)} $ / nuit</b></span>
          )}
        </div>
      </section>

      {sheetOpen && (
        <div className="sheet-backdrop" onClick={() => setSheetOpen(false)} aria-hidden="true" />
      )}
      <section className={`search-zone ${sheetOpen ? "open" : ""}`} aria-label="Recherche et filtres">
        <div className="sheet-handle" aria-hidden="true" />
        <div className="sheet-head">
          <span>Affiner la recherche</span>
          <button className="sheet-close" onClick={() => setSheetOpen(false)} aria-label="Fermer les filtres">
            ✕
          </button>
        </div>

        {/* — la recherche, au cœur du produit : un grand champ souligné — */}
        <div className="q-big">
          <IcoSearch size={22} strokeWidth={2} />
          <input
            id="ctf-q" placeholder="Où voulez-vous vous évader ?" value={q}
            onChange={(e) => setQ(e.target.value)}
            aria-label="Recherche — ville, région ou mot-clé"
          />
          {q && (
            <button className="f-clear" onClick={() => setQ("")} aria-label="Effacer la recherche">✕</button>
          )}
        </div>

        {/* — critères inline, séparés par filets (pas de boîtes) — */}
        <div className="crit-line">
          <label className="crit">
            <span>Région</span>
            <select value={region} onChange={(e) => setRegion(e.target.value)}>
              <option value="">Toutes</option>
              {(facets?.regions ?? []).map((r) => (
                <option key={r.region} value={r.region}>{r.region} ({r.n})</option>
              ))}
            </select>
          </label>
          <label className="crit">
            <span>Type</span>
            <select value={type} onChange={(e) => setType(e.target.value)}>
              <option value="">Tous</option>
              {(facets?.types ?? []).map((t) => (
                <option key={t.type} value={t.type}>{t.type} ({t.n})</option>
              ))}
            </select>
          </label>
          <div className="crit">
            <span>Prix / nuit</span>
            <div className="range-pair">
              <select aria-label="Prix minimum par nuit" value={priceMin}
                onChange={(e) => setPriceMin(e.target.value)}>
                <option value="">Min</option>
                {NIGHT_STEPS.map((p) => (
                  <option key={p} value={p} disabled={!!priceMax && p >= Number(priceMax)}>
                    {p} $
                  </option>
                ))}
              </select>
              <span className="range-sep">—</span>
              <select aria-label="Prix maximum par nuit" value={priceMax}
                onChange={(e) => setPriceMax(e.target.value)}>
                <option value="">Max</option>
                {NIGHT_STEPS.map((p) => (
                  <option key={p} value={p} disabled={!!priceMin && p <= Number(priceMin)}>
                    {p} $
                  </option>
                ))}
              </select>
            </div>
          </div>
          <button
            className={`crit-more ${advOpen || advCount > 0 ? "on" : ""}`}
            onClick={() => setAdvOpen(!advOpen)}
            aria-expanded={advOpen}
          >
            Tous les critères
            {advCount > 0 && <span className="crit-badge">{advCount}</span>}
            <span className={`f-chev${advOpen ? " up" : ""}`} aria-hidden="true" />
          </button>
        </div>

        {(advOpen || sheetOpen) && (
          <div className="f-adv">
            <div className="f-group">
              <label>Capacité minimale</label>
              <div className="seg" role="group">
                <button className={capMin === "" ? "on" : ""} onClick={() => setCapMin("")}>
                  Peu importe
                </button>
                {CAPACITY_STEPS.map((c) => (
                  <button key={c} className={capMin === String(c) ? "on" : ""}
                    onClick={() => setCapMin(String(c))}>
                    {c}+
                  </button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Animaux</label>
              <div className="seg" role="group">
                {[["", "Peu importe"], ["oui", "Acceptés"]].map(([v, l]) => (
                  <button key={v} className={pets === v ? "on" : ""}
                    onClick={() => setPets(v)}>
                    {v === "oui" && <IcoPaw size={13} />} {l}
                  </button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Tri</label>
              <div className="seg" role="group">
                {SORTS.map((s) => (
                  <button key={s.key} className={sort === s.key ? "on" : ""}
                    onClick={() => setSort(s.key)}>
                    {s.label}
                  </button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Plateforme</label>
              <select className="f-native" value={source} onChange={(e) => setSource(e.target.value)}>
                <option value="">Toutes</option>
                {(facets?.sources ?? []).map((s) => (
                  <option key={s.source} value={s.source}>
                    {ctSourceName(s.source)} ({s.n})
                  </option>
                ))}
              </select>
            </div>
            <div className="f-group f-group-end">
              <button className="btn btn-ghost" onClick={resetAll} disabled={activeFilters === 0}>
                Tout réinitialiser{activeFilters > 0 ? ` (${activeFilters})` : ""}
              </button>
            </div>
          </div>
        )}

        <button className="btn btn-primary sheet-apply" onClick={() => setSheetOpen(false)}>
          Voir {listings ? `les ${total.toLocaleString("fr-CA")} hébergements` : "les résultats"}
        </button>
      </section>

      {/* mobile : résumé des critères — ouvre la feuille (recherche intégrée, pas de FAB) */}
      <button className="crit-summary" onClick={() => setSheetOpen(true)}>
        <IcoSliders size={14} />
        <span className="cs-txt">
          {pills.length > 0
            ? pills.slice(0, 3).map((p) => p.label).join(" · ") + (pills.length > 3 ? ` · +${pills.length - 3}` : "")
            : "Région, type, prix, capacité…"}
        </span>
        <span className="f-chev" aria-hidden="true" />
      </button>

      <div className="chips" role="group" aria-label="Filtres rapides">
        <button
          className={`chip chip-ico ${spa === "1" ? "on" : ""}`}
          onClick={() => setSpa(spa === "1" ? "" : "1")}
        >
          ♨ Spa
        </button>
        <button
          className={`chip chip-ico ${waterfront === "1" ? "on" : ""}`}
          onClick={() => setWaterfront(waterfront === "1" ? "" : "1")}
        >
          ≈ Bord de l'eau
        </button>
        <button
          className={`chip chip-ico ${pets === "oui" ? "on" : ""}`}
          onClick={() => setPets(pets === "oui" ? "" : "oui")}
        >
          <IcoPaw size={13} /> Animaux ok
        </button>
        <span className="chip-sep" aria-hidden="true" />
        {(facets?.types ?? []).slice(0, 5).map((t) => (
          <button
            key={t.type}
            className={`chip ${type === t.type ? "on" : ""}`}
            onClick={() => setType(type === t.type ? "" : t.type)}
          >
            {t.type}
          </button>
        ))}
      </div>

      {pills.length > 0 && (
        <div className="pills" aria-label="Filtres actifs">
          {pills.map((p) => (
            <button key={p.label} className="pill" onClick={p.clear}
              aria-label={`Retirer le filtre ${p.label}`}>
              {p.label} <span className="pill-x">✕</span>
            </button>
          ))}
          <button className="pill pill-clear" onClick={resetAll}>
            Tout effacer
          </button>
        </div>
      )}

      <div className="results-bar" ref={resultsRef}>
        <h2 className="rb-count">
          {view === "liste" && listings
            ? <><b>{total.toLocaleString("fr-CA")}</b> hébergement{total > 1 ? "s" : ""}</>
            : "Hébergements"}
        </h2>
        <div className="rb-tools">
          <div className="rb-tabs" role="tablist" aria-label="Mode d'affichage">
            <button
              role="tab" aria-selected={view === "liste"}
              className={`rb-tab ${view === "liste" ? "on" : ""}`}
              onClick={() => setView("liste")}
            >
              <IcoList size={13} /> Liste
            </button>
            <button
              role="tab" aria-selected={view === "carte"}
              className={`rb-tab ${view === "carte" ? "on" : ""}`}
              onClick={() => setView("carte")}
            >
              <IcoMap size={13} /> Carte
            </button>
          </div>
          <button className="rb-filters" onClick={() => setSheetOpen(true)}>
            <IcoSliders size={13} /> Filtres
            {activeFilters > 0 && <span className="rb-badge">{activeFilters}</span>}
          </button>
        </div>
      </div>

      {error && (
        <div className="notice">
          <div className="big"><IcoAlert size={40} /></div>
          <h2>Impossible de charger les hébergements</h2>
          <p>{error}</p>
          <button className="btn btn-primary" onClick={() => window.location.reload()}>
            Réessayer
          </button>
        </div>
      )}

      {!error && view === "liste" && listings === null && (
        <div className="grid grid-edito" aria-busy="true">
          {Array.from({ length: 8 }).map((_, i) => (
            <div className="skel" key={i}>
              <div className="sk-img" />
              <div className="sk-line" />
              <div className="sk-line short" />
            </div>
          ))}
        </div>
      )}

      {!error && view === "liste" && listings !== null && listings.length === 0 && (
        <div className="notice">
          <div className="big"><IcoSearch size={40} /></div>
          <h2>Aucun hébergement ne correspond</h2>
          <p>
            {stats && stats.total === 0
              ? "La section court terme démarre : les premières synchronisations sont en cours."
              : "Essayez d'élargir vos critères"}
            {activeFilters > 0 && (
              <> — ou <button className="link-btn" onClick={resetAll}>retirez les {activeFilters} filtres actifs</button></>
            )}.
          </p>
        </div>
      )}

      {!error && view === "carte" && (
        <div className="view-pane" key="carte">
          <Suspense
            fallback={
              <div className="map-split">
                <div className="mapview map-loading">Chargement de la carte…</div>
              </div>
            }
          >
            <CtMapView filters={filters} />
          </Suspense>
        </div>
      )}

      {!error && view === "liste" && listings !== null && listings.length > 0 && (
        <div className="view-pane" key="liste">
          <div className="grid grid-edito">
            {listings.map((l) => (
              <CtListingCard key={l.uid} l={l} />
            ))}
          </div>
          <Pager page={page} pageSize={PAGE_SIZE} total={total} onPage={goToPage} />
        </div>
      )}
    </div>
  );
}