// -----------------------------------------------------------------------------
// Rent-Ka — Rental listings aggregator (Canada, outside Québec)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Home.tsx: home — hero, browse by province, advanced filters, grid
//   Filters: province, city, neighbourhood, size, rent min/max, availability,
//   pets, furnished, area, manager, search — with active-filter pills.
// -----------------------------------------------------------------------------
import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams } from "react-router-dom";
import {
  Facets, Listing, ListingFilters, PROVINCE_NAMES, Stats,
  fetchFacets, fetchListings, fetchSources, fetchStats, isoInDays,
  registerSourceNames, sourceName,
} from "../api";
import ListingCard from "../components/ListingCard";
import Pager from "../components/Pager";
import { useAgo, useCountUp } from "../live";
import {
  IcoAlert, IcoBolt, IcoList, IcoMap, IcoPaw,
  IcoSearch, IcoSliders, IcoSofa,
} from "../components/Icons";

// The synchronized list+map search (Mapbox, ~220 kB) is only loaded when the
// user opens the Map view — see search/MapSearch.tsx
const MapSearch = lazy(() => import("../search/MapSearch"));

const PAGE_SIZE = 12;                 // listings per page ("list" grid)

/** Debounced value: avoids one API request per keystroke in the search box. */
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;
}

// useCountUp / useAgo: shared "live data" hooks — see ../live.ts
const UNIT_TYPES = ["Studio", "1 bedroom", "2 bedrooms", "3 bedrooms", "4 bedrooms", "Loft", "Condo", "House", "Room"];
const PRICE_STEPS = [800, 1000, 1200, 1400, 1600, 1800, 2000, 2500, 3000, 3500, 4000];
const AREA_STEPS = [400, 600, 800, 1000, 1200];

/** "Availability" choice → API parameter available_by (ISO date) */
const DISPO_CHOICES: { key: string; label: string; days: number | null }[] = [
  { key: "", label: "Any", days: null },
  { key: "now", label: "Now", days: 0 },
  { key: "30", label: "Within 1 month", days: 30 },
  { key: "60", label: "Within 2 months", days: 60 },
  { key: "90", label: "Within 3 months", days: 90 },
];

export default function Home() {
  const [listings, setListings] = useState<Listing[] | null>(null);
  const [total, setTotal] = useState(0);
  const [facets, setFacets] = useState<Facets | null>(null);
  const [sectors, setSectors] = useState<string[]>([]);
  const [stats, setStats] = useState<Stats | null>(null);
  const [error, setError] = useState<string | null>(null);

  // filters (pre-filled from the URL, e.g. /?city=Toronto — Stats page links)
  const [params] = useSearchParams();
  const [q, setQ] = useState(params.get("q") ?? "");
  const [province, setProvince] = useState(params.get("province") ?? "");
  const [city, setCity] = useState(params.get("city") ?? "");
  const [sector, setSector] = useState(params.get("sector") ?? "");
  const [source, setSource] = useState(params.get("source") ?? "");
  const [priceMin, setPriceMin] = useState(params.get("price_min") ?? "");
  const [priceMax, setPriceMax] = useState(params.get("price_max") ?? "");
  const [unitType, setUnitType] = useState(params.get("unit_type") ?? "");
  const [dispo, setDispo] = useState(params.get("dispo") ?? "");
  const [pets, setPets] = useState(params.get("pets") ?? "");
  const [furnished, setFurnished] = useState(params.get("furnished") ?? "");
  const [areaMin, setAreaMin] = useState(params.get("area_min") ?? "");
  const [deal, setDeal] = useState(params.get("deal") ?? "");   // fair value
  const [kaMin, setKaMin] = useState(params.get("kascore_min") ?? "");  // KA Score
  // mobile filter sheet (bottom sheet) + desktop advanced panel
  const [sheetOpen, setSheetOpen] = useState(false);
  const [advOpen, setAdvOpen] = useState(false);
  // sheet open: freeze background scroll + close on Escape
  // (same pattern as the App.tsx hamburger menu)
  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, province, city, sector, source, priceMin, priceMax, unitType,
    dispo, pets, furnished, areaMin, deal, kaMin].filter(Boolean).length;
  const advCount = [dispo, pets, furnished, areaMin, source, kaMin].filter(Boolean).length;
  // list or map view (remembered in the URL: /?view=map)
  const [view, setView] = useState<"liste" | "carte">(
    params.get("view") === "map" ? "carte" : "liste");
  useEffect(() => {
    // follow the URL when navigating via the menu ("Map" -> /?view=map)
    setView(params.get("view") === "map" ? "carte" : "liste");
  }, [params]);
  // map mode (Ka Map System v2): body class — the filter sheet becomes a modal
  // ABOVE the shell — and view remembered in the URL (reload, back from a
  // listing: we land back on the map, camera included).
  useEffect(() => {
    document.body.classList.toggle("ka-map-mode", view === "carte");
    const url = new URL(window.location.href);
    if (view === "carte") url.searchParams.set("view", "map");
    else url.searchParams.delete("view");
    window.history.replaceState(null, "", url);
    return () => document.body.classList.remove("ka-map-mode");
  }, [view]);

  const qDebounced = useDebounced(q);
  const filters: ListingFilters = useMemo(() => {
    const d = DISPO_CHOICES.find((c) => c.key === dispo);
    return {
      q: qDebounced, province, city, sector, source, unit_type: unitType,
      price_min: priceMin, price_max: priceMax,
      pets, furnished, area_min: areaMin,
      available_by: d?.days != null ? isoInDays(d.days) : "",
      deal, kascore_min: kaMin,
      sort: deal === "sous" ? "deal" : "",   // best deals first
    };
  }, [qDebounced, province, city, sector, source, unitType, priceMin, priceMax, pets, furnished, areaMin, dispo, deal, kaMin]);

  // shared counter of the map view (lifted by MapSearch: list = map)
  const [mapTotal, setMapTotal] = useState<number | null>(null);

  // hero live data: last real sync (max across connectors)
  const [lastSync, setLastSync] = useState<number | null>(null);
  useEffect(() => {
    fetchSources().then((r) => {
      registerSourceNames(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(() => {});
    fetchFacets().then(setFacets).catch(() => {});
    fetchStats().then(setStats).catch(() => {});
  }, []);
  const totalLive = useCountUp(stats?.total);
  const syncAgo = useAgo(lastSync);

  // Home geolocation: on arrival (bare URL, once per session), ask for the
  // position to directly show rentals around the user — Map view centred on
  // them. Shared link (filters/camera in the URL): respect the link, no
  // prompt. Denied: silent, the classic home stays as is.
  useEffect(() => {
    const url = new URL(window.location.href);
    const hasState = [...url.searchParams.keys()].length > 0;
    if (hasState) return;
    if (!("geolocation" in navigator)) return;
    if (sessionStorage.getItem("rentka_geo_session")) return;
    sessionStorage.setItem("rentka_geo_session", "1");
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        const { latitude, longitude } = pos.coords;
        // outside Canada (travel, VPN): don't centre on the ocean
        if (latitude < 41.6 || latitude > 83.2 || longitude < -141 || longitude > -52.5) return;
        const u = new URL(window.location.href);
        u.searchParams.set("lat", latitude.toFixed(5));
        u.searchParams.set("lng", longitude.toFixed(5));
        u.searchParams.set("zoom", "13.5");
        u.searchParams.set("view", "map");
        window.history.replaceState(null, "", u);
        // MapSearch already mounted (map view): recentre + list via event
        window.dispatchEvent(new CustomEvent("rentka:geolocate", {
          detail: { lat: latitude, lng: longitude },
        }));
        setView("carte");
      },
      () => { /* denied or unavailable: home unchanged */ },
      { enableHighAccuracy: false, timeout: 8000, maximumAge: 600000 },
    );
  }, []);

  // neighbourhoods depend on the chosen city
  useEffect(() => {
    fetchFacets(city || undefined)
      .then((f) => setSectors(f.sectors))
      .catch(() => setSectors([]));
  }, [city]);

  // pagination — 12 listings/page, page remembered in the URL (?page=N)
  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(() => {
    // any filter change goes back to page 1 (except on initial mount,
    // to honour a shared link /?city=…&page=3)
    if (firstRun.current) { firstRun.current = false; return; }
    setPage(1);
  }, [filtersKey]);
  useEffect(() => {
    // reflect the page in the URL without a router re-render
    // (in map view, pagination belongs to MapSearch)
    if (view === "carte") return;
    const url = new URL(window.location.href);
    if (page > 1) url.searchParams.set("page", String(page));
    else url.searchParams.delete("page");
    window.history.replaceState(null, "", url);
  }, [page, view]);

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

  useEffect(() => {
    if (view === "carte") return;   // the map view has its own unified request
    let cancelled = false;
    setListings(null);
    setError(null);
    fetchListings(filters, PAGE_SIZE, (page - 1) * PAGE_SIZE)
      .then((r) => {
        if (!cancelled) {
          setListings(r.listings);
          setTotal(r.total);
          // page now out of bounds (narrowed filter): go to the last one
          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 availableTypes = useMemo(() => {
    const set = new Set(facets?.unit_types ?? []);
    return UNIT_TYPES.filter((t) => set.size === 0 || set.has(t));
  }, [facets]);

  // "Browse by province" cards — provinces with at least one listing
  const provinceCards = useMemo(() => {
    const provs = stats?.provinces ?? {};
    return Object.entries(provs)
      .filter(([, n]) => (n as number) > 0)
      .sort((a, b) => (b[1] as number) - (a[1] as number))
      .map(([code, n]) => ({ code, name: PROVINCE_NAMES[code] || code, n: n as number }));
  }, [stats]);

  const resetAll = () => {
    setQ(""); setProvince(""); setCity(""); setSector(""); setSource("");
    setPriceMin(""); setPriceMax(""); setUnitType("");
    setDispo(""); setPets(""); setFurnished(""); setAreaMin(""); setDeal("");
    setKaMin("");
  };

  // "active filters" pills — label + removal action
  const pills: { label: string; clear: () => void }[] = [];
  if (q) pills.push({ label: `“${q}”`, clear: () => setQ("") });
  if (province) pills.push({
    label: PROVINCE_NAMES[province] || province,
    clear: () => setProvince(""),
  });
  if (city) pills.push({ label: city, clear: () => { setCity(""); setSector(""); } });
  if (sector) pills.push({ label: sector, clear: () => setSector("") });
  if (unitType) pills.push({ label: unitType, clear: () => setUnitType("") });
  if (priceMin) pills.push({ label: `≥ $${priceMin}`, clear: () => setPriceMin("") });
  if (priceMax) pills.push({ label: `≤ $${priceMax}`, clear: () => setPriceMax("") });
  if (dispo) pills.push({
    label: `Available: ${DISPO_CHOICES.find((c) => c.key === dispo)?.label ?? dispo}`,
    clear: () => setDispo(""),
  });
  if (pets) pills.push({ label: "Pets allowed", clear: () => setPets("") });
  if (furnished) pills.push({
    label: furnished === "1" ? "Furnished" : "Unfurnished",
    clear: () => setFurnished(""),
  });
  if (areaMin) pills.push({ label: `≥ ${areaMin} sq ft`, clear: () => setAreaMin("") });
  if (deal) pills.push({ label: "Below market", clear: () => setDeal("") });
  if (kaMin) pills.push({ label: `KA Score ${kaMin}+`, clear: () => setKaMin("") });
  if (source) pills.push({ label: sourceName(source), clear: () => setSource("") });

  return (
    <div className="container">
      <section className="hero">
        <span className="kicker">Rentals — all of Canada, one place</span>
        <h1 className="hero-display">
          Find your next<br />
          <span className="brush">home.</span>
        </h1>
        <p className="lede">
          Apartments and homes for rent across Canada, aggregated continuously —
          full photos, estimated fair value, direct link to the original listing.
        </p>
        <div className="live-line" aria-label="Live data">
          <span className="live-flag"><span className="live-dot" /> live</span>
          {totalLive && (
            <span className="live-item"><b>{totalLive}</b> rentals indexed</span>
          )}
          {stats && stats.sources > 0 && (
            <span className="live-item"><b>{stats.sources}</b> sources</span>
          )}
          {syncAgo && <span className="live-item">synced {syncAgo}</span>}
          {stats?.avg_price != null && (
            <span className="live-item">average rent <b>${Math.round(stats.avg_price).toLocaleString("en-CA")}</b></span>
          )}
        </div>
      </section>

      {/* — Browse by province: signature Rent-Ka section — */}
      {provinceCards.length > 0 && activeFilters === 0 && (
        <section className="prov-zone" aria-label="Browse by province">
          <div className="prov-head">
            <h2>Browse by province</h2>
            <span className="prov-sub">Every listing links back to the original ad.</span>
          </div>
          <div className="prov-grid">
            {provinceCards.map((p) => (
              <button
                key={p.code}
                className="prov-card"
                onClick={() => {
                  setProvince(p.code);
                  resultsRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
                }}
              >
                <span className="prov-code">{p.code}</span>
                <span className="prov-name">{p.name}</span>
                <span className="prov-n">{p.n.toLocaleString("en-CA")} rentals</span>
              </button>
            ))}
          </div>
        </section>
      )}

      {sheetOpen && (
        <div className="sheet-backdrop" onClick={() => setSheetOpen(false)} aria-hidden="true" />
      )}
      <section className={`search-zone ${sheetOpen ? "open" : ""}`} aria-label="Search and filters">
        <div className="sheet-handle" aria-hidden="true" />
        <div className="sheet-head">
          <span>Refine your search</span>
          <button className="sheet-close" onClick={() => setSheetOpen(false)} aria-label="Close filters">
            ✕
          </button>
        </div>

        {/* — search, the heart of the product: one big underlined field — */}
        <div className="q-big">
          <IcoSearch size={22} strokeWidth={2} />
          <input
            id="f-q" placeholder="Where do you want to live?" value={q}
            onChange={(e) => setQ(e.target.value)}
            aria-label="Search — city, neighbourhood or postal code"
          />
          {q && (
            <button className="f-clear" onClick={() => setQ("")} aria-label="Clear search">✕</button>
          )}
        </div>

        {/* — inline criteria, separated by rules (no boxes) — */}
        <div className="crit-line">
          <label className="crit">
            <span>Province</span>
            <select value={province} onChange={(e) => { setProvince(e.target.value); setCity(""); setSector(""); }}>
              <option value="">All</option>
              {(provinceCards.length > 0 ? provinceCards.map((p) => p.code) : Object.keys(PROVINCE_NAMES)).map((c) => (
                <option key={c} value={c}>{PROVINCE_NAMES[c] || c}</option>
              ))}
            </select>
          </label>
          <label className="crit">
            <span>City</span>
            <select value={city} onChange={(e) => { setCity(e.target.value); setSector(""); }}>
              <option value="">All</option>
              {(facets?.cities ?? ["Toronto", "Ottawa"]).map((c) => (
                <option key={c} value={c}>{c}</option>
              ))}
            </select>
          </label>
          <label className="crit">
            <span>Neighbourhood</span>
            <select value={sector} onChange={(e) => setSector(e.target.value)}>
              <option value="">All</option>
              {sectors.map((s) => (
                <option key={s} value={s}>{s}</option>
              ))}
            </select>
          </label>
          <div className="crit">
            <span>Rent</span>
            <div className="range-pair">
              <select aria-label="Minimum rent" value={priceMin}
                onChange={(e) => setPriceMin(e.target.value)}>
                <option value="">Min</option>
                {PRICE_STEPS.map((p) => (
                  <option key={p} value={p} disabled={!!priceMax && p >= Number(priceMax)}>
                    ${p}
                  </option>
                ))}
              </select>
              <span className="range-sep">—</span>
              <select aria-label="Maximum rent" value={priceMax}
                onChange={(e) => setPriceMax(e.target.value)}>
                <option value="">Max</option>
                {PRICE_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}
          >
            All criteria
            {advCount > 0 && <span className="crit-badge">{advCount}</span>}
            <span className={`f-chev${advOpen ? " up" : ""}`} aria-hidden="true" />
          </button>
        </div>

        {/* — advanced panel: segments & selectors — */}
        {(advOpen || sheetOpen) && (
          <div className="f-adv">
            <div className="f-group">
              <label>Availability</label>
              <div className="seg" role="group">
                {DISPO_CHOICES.map((c) => (
                  <button key={c.key} className={dispo === c.key ? "on" : ""}
                    onClick={() => setDispo(c.key)}>
                    {c.label}
                  </button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Furnished</label>
              <div className="seg" role="group">
                {[["", "Any"], ["1", "Yes"], ["0", "No"]].map(([v, l]) => (
                  <button key={v} className={furnished === v ? "on" : ""}
                    onClick={() => setFurnished(v)}>
                    {l}
                  </button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Pets</label>
              <div className="seg" role="group">
                {[["", "Any"], ["oui", "Allowed"]].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>Minimum area</label>
              <div className="seg" role="group">
                <button className={areaMin === "" ? "on" : ""} onClick={() => setAreaMin("")}>
                  Any
                </button>
                {AREA_STEPS.map((a) => (
                  <button key={a} className={areaMin === String(a) ? "on" : ""}
                    onClick={() => setAreaMin(String(a))}>
                    {a}+
                  </button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Minimum KA Score</label>
              <div className="seg" role="group">
                <button className={kaMin === "" ? "on" : ""} onClick={() => setKaMin("")}>
                  Any
                </button>
                {["60", "70", "80"].map((v) => (
                  <button key={v} className={kaMin === v ? "on" : ""}
                    onClick={() => setKaMin(v)}
                    title="Rent-Ka location score (walking, transit, biking, quiet, services) — methodology at /ka-scores">
                    {v}+
                  </button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Manager</label>
              <select className="f-native" value={source} onChange={(e) => setSource(e.target.value)}>
                <option value="">All</option>
                {(facets?.sources ?? []).map((s) => (
                  <option key={s.source} value={s.source}>
                    {sourceName(s.source)} ({s.n})
                  </option>
                ))}
              </select>
            </div>
            <div className="f-group f-group-end">
              <button className="btn btn-ghost" onClick={resetAll} disabled={activeFilters === 0}>
                Reset all{activeFilters > 0 ? ` (${activeFilters})` : ""}
              </button>
            </div>
          </div>
        )}

        <button className="btn btn-primary sheet-apply" onClick={() => setSheetOpen(false)}>
          {listings ? `See ${total.toLocaleString("en-CA")} rentals` : "See results"}
        </button>
      </section>

      {/* mobile: criteria summary — opens the sheet (search included, no 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}` : "")
            : "City, neighbourhood, budget, criteria…"}
        </span>
        <span className="f-chev" aria-hidden="true" />
      </button>

      <div className="chips" role="group" aria-label="Quick filters">
        {availableTypes.map((t) => (
          <button
            key={t}
            className={`chip ${unitType === t ? "on" : ""}`}
            onClick={() => setUnitType(unitType === t ? "" : t)}
          >
            {t}
          </button>
        ))}
        <span className="chip-sep" aria-hidden="true" />
        <button
          className={`chip chip-ico chip-deal ${deal === "sous" ? "on" : ""}`}
          onClick={() => setDeal(deal === "sous" ? "" : "sous")}
          title="Listings below estimated fair value, best deals first"
        >
          ▼ Below market
        </button>
        <button
          className={`chip chip-ico ${dispo === "now" ? "on" : ""}`}
          onClick={() => setDispo(dispo === "now" ? "" : "now")}
        >
          <IcoBolt size={13} /> Available now
        </button>
        <button
          className={`chip chip-ico ${pets === "oui" ? "on" : ""}`}
          onClick={() => setPets(pets === "oui" ? "" : "oui")}
        >
          <IcoPaw size={13} /> Pets ok
        </button>
        <button
          className={`chip chip-ico ${furnished === "1" ? "on" : ""}`}
          onClick={() => setFurnished(furnished === "1" ? "" : "1")}
        >
          <IcoSofa size={13} /> Furnished
        </button>
      </div>

      {pills.length > 0 && (
        <div className="pills" aria-label="Active filters">
          {pills.map((p) => (
            <button key={p.label} className="pill" onClick={p.clear}
              aria-label={`Remove filter ${p.label}`}>
              {p.label} <span className="pill-x">✕</span>
            </button>
          ))}
          <button className="pill pill-clear" onClick={resetAll}>
            Clear all
          </button>
        </div>
      )}

      <div className="results-bar" ref={resultsRef}>
        <h2 className="rb-count">
          {view === "carte"
            ? (mapTotal != null
                ? <><b>{mapTotal.toLocaleString("en-CA")}</b> rental{mapTotal > 1 ? "s" : ""}</>
                : "Rentals")
            : (listings
                ? <><b>{total.toLocaleString("en-CA")}</b> rental{total > 1 ? "s" : ""}</>
                : "Rentals")}
        </h2>
        <div className="rb-tools">
          <div className="rb-tabs" role="tablist" aria-label="Display mode">
            <button
              role="tab" aria-selected={view === "liste"}
              className={`rb-tab ${view === "liste" ? "on" : ""}`}
              onClick={() => setView("liste")}
            >
              <IcoList size={13} /> List
            </button>
            <button
              role="tab" aria-selected={view === "carte"}
              className={`rb-tab ${view === "carte" ? "on" : ""}`}
              onClick={() => setView("carte")}
            >
              <IcoMap size={13} /> Map
            </button>
          </div>
          <button className="rb-filters" onClick={() => setSheetOpen(true)}>
            <IcoSliders size={13} /> Filters
            {activeFilters > 0 && <span className="rb-badge">{activeFilters}</span>}
          </button>
        </div>
      </div>

      {error && (
        <div className="notice">
          <div className="big"><IcoAlert size={40} /></div>
          <h2>Could not load listings</h2>
          <p>{error}</p>
          <button className="btn btn-primary" onClick={() => window.location.reload()}>
            Try again
          </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>No rentals match</h2>
          <p>
            Try widening your criteria
            {activeFilters > 0 && (
              <> — or <button className="link-btn" onClick={resetAll}>remove the {activeFilters} active filters</button></>
            )}.
          </p>
        </div>
      )}

      {!error && view === "carte" && (
        <div className="view-pane" key="carte">
          <Suspense
            fallback={
              <div className="ka-shell-fallback">Loading the map…</div>
            }
          >
            <MapSearch
              filters={filters}
              onTotal={setMapTotal}
              onExit={() => setView("liste")}
              onOpenFilters={() => setSheetOpen(true)}
              filtersCount={activeFilters}
            />
          </Suspense>
        </div>
      )}

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