// -----------------------------------------------------------------------------
// Home-Ka — US real-estate aggregator (Groupe KA)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Home.tsx : home — hero, live stats, advanced filters, grid + map view
// -----------------------------------------------------------------------------
import { Suspense, lazy, useEffect, useMemo, useRef, useState } from "react";
import { useSearchParams } from "react-router-dom";
import {
  Facets, Listing, ListingFilters, Stats,
  fetchFacets, fetchListings, fetchSources, fetchStats,
  registerSourceNames, sourceName,
} from "../api";
import ListingCard from "../components/ListingCard";
import { Ico } from "../components/Icons";

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

const PRICE_STEPS = [100000, 200000, 300000, 400000, 500000, 600000, 750000, 1000000, 1500000, 2000000, 3000000];
const SQFT_STEPS = [800, 1000, 1500, 2000, 3000];
const PAGE = 12;

const fmtK = (n: number) =>
  n >= 1_000_000 ? `$${n / 1_000_000}M` : `$${Math.round(n / 1000)}K`;

/** Animated hero counter (~0.9 s, cubic easing). Respects reduced-motion. */
function useCountUp(target: number | null | undefined, ms = 900): string | null {
  const [v, setV] = useState<number | null>(null);
  useEffect(() => {
    if (target == null) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setV(target); return; }
    let raf = 0;
    const t0 = performance.now();
    const step = (t: number) => {
      const p = Math.min(1, (t - t0) / ms);
      setV(Math.round(target * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, ms]);
  return v == null ? null : v.toLocaleString("en-US");
}

/** Live "X ago" — re-rendered every second while the ts exists. */
function useAgo(ts: number | null): string | null {
  const [, tick] = useState(0);
  useEffect(() => {
    if (ts == null) return;
    const id = setInterval(() => tick((x) => x + 1), 1000);
    return () => clearInterval(id);
  }, [ts]);
  if (ts == null) return null;
  const s = Math.max(0, Math.floor(Date.now() / 1000 - ts));
  if (s < 90) return `${s} s ago`;
  if (s < 5400) return `${Math.round(s / 60)} min ago`;
  return `${Math.round(s / 3600)} h ago`;
}

// pagination window: 1 … (p-1) p (p+1) … N
function pageNumbers(p: number, n: number): (number | "…")[] {
  if (n <= 7) return Array.from({ length: n }, (_, i) => i + 1);
  const out: (number | "…")[] = [1];
  const lo = Math.max(2, p - 1), hi = Math.min(n - 1, p + 1);
  if (lo > 2) out.push("…");
  for (let i = lo; i <= hi; i++) out.push(i);
  if (hi < n - 1) out.push("…");
  out.push(n);
  return out;
}

export default function Home() {
  const [listings, setListings] = useState<Listing[] | null>(null);
  const [total, setTotal] = useState(0);
  const [params, setParams] = useSearchParams();
  const [page, setPage] = useState(Number(params.get("page")) || 1);  // 12/page, in the URL
  const [facets, setFacets] = useState<Facets | null>(null);
  const [cities, setCities] = useState<{ city: string; n: number }[]>([]);
  const [stats, setStats] = useState<Stats | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [q, setQ] = useState(params.get("q") ?? "");
  const [usState, setUsState] = useState(params.get("state") ?? "");
  const [city, setCity] = useState(params.get("city") ?? "");
  const [ptype, setPtype] = useState(params.get("property_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 [bedsMin, setBedsMin] = useState(params.get("beds_min") ?? "");
  const [bathsMin, setBathsMin] = useState(params.get("baths_min") ?? "");
  const [sqftMin, setSqftMin] = useState(params.get("sqft_min") ?? "");
  const [sort, setSort] = useState(params.get("sort") ?? "recent");

  const [sheetOpen, setSheetOpen] = useState(false);
  const [advOpen, setAdvOpen] = useState(false);

  // Filters bottom-sheet: background scroll lock + Escape to close
  useEffect(() => {
    if (!sheetOpen) return;
    document.body.style.overflow = "hidden";
    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, usState, city, ptype, source, priceMin, priceMax, bedsMin, bathsMin, sqftMin].filter(Boolean).length;
  const advCount = [bedsMin, bathsMin, sqftMin, source].filter(Boolean).length;

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

  // map mode (Ka Map System v2): body class — the page's filter sheet becomes
  // a modal ABOVE the full-viewport shell.
  useEffect(() => {
    document.body.classList.toggle("ka-map-mode", view === "map");
    return () => document.body.classList.remove("ka-map-mode");
  }, [view]);

  const filters: ListingFilters = useMemo(() => ({
    q, city, state: usState, property_type: ptype, source,
    price_min: priceMin, price_max: priceMax,
    beds_min: bedsMin, baths_min: bathsMin, sqft_min: sqftMin, sort,
  }), [q, city, usState, ptype, source, priceMin, priceMax, bedsMin, bathsMin, sqftMin, sort]);

  useEffect(() => {
    fetchSources().then((r) => registerSourceNames(r.sources)).catch(() => {});
    fetchFacets().then(setFacets).catch(() => {});
    fetchStats().then(setStats).catch(() => {});
  }, []);

  // cities narrowed by the selected state
  useEffect(() => {
    fetchFacets(usState || undefined).then((f) => setCities(f.cities)).catch(() => setCities([]));
  }, [usState]);

  // back to page 1 when filters change
  const firstRender = useRef(true);
  useEffect(() => {
    if (firstRender.current) { firstRender.current = false; return; }
    setPage(1);
  }, [filters]);

  // sync filters + page + sort + view into the URL → going back from a
  // detail page returns to the SAME page/filters.
  useEffect(() => {
    const p = new URLSearchParams();
    const set = (k: string, v: string) => { if (v) p.set(k, v); };
    set("q", q); set("state", usState); set("city", city);
    set("property_type", ptype); set("source", source);
    set("price_min", priceMin); set("price_max", priceMax);
    set("beds_min", bedsMin); set("baths_min", bathsMin);
    set("sqft_min", sqftMin);
    if (sort && sort !== "recent") p.set("sort", sort);
    if (view === "map") p.set("view", "map");
    if (page > 1) p.set("page", String(page));
    setParams(p, { replace: true });
  }, [filters, page, view, q, usState, city, ptype, source, priceMin, priceMax,
      bedsMin, bathsMin, sqftMin, sort, setParams]);

  // load the current page (12 listings) — replaces the grid
  useEffect(() => {
    let cancelled = false;
    setListings(null); setError(null);
    fetchListings(filters, PAGE, (page - 1) * PAGE)
      .then((r) => { if (!cancelled) { setListings(r.listings); setTotal(r.total); } })
      .catch((e) => !cancelled && setError(String(e)));
    return () => { cancelled = true; };
  }, [filters, page]);

  const totalPages = Math.max(1, Math.ceil(total / PAGE));
  const gotoPage = (p: number) => {
    setPage(Math.min(Math.max(1, p), totalPages));
    if (view === "map") return;   // the map-mode panel manages its own scroll
    document.getElementById("results-top")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const resetAll = () => {
    setQ(""); setUsState(""); setCity(""); setPtype(""); setSource("");
    setPriceMin(""); setPriceMax(""); setBedsMin(""); setBathsMin(""); setSqftMin("");
  };

  // live hero data — real connector syncs (recent_syncs)
  const totalLive = useCountUp(stats?.total);
  const lastSync = useMemo(() => {
    const ss = stats?.recent_syncs ?? [];
    if (!ss.length) return null;
    const ts = Math.max(...ss.map((s) => s.ts));
    return ts > 1e12 ? Math.round(ts / 1000) : ts;
  }, [stats]);
  const syncAgo = useAgo(lastSync);
  const newToday = useMemo(() => {
    const ss = stats?.recent_syncs ?? [];
    const now = Date.now() / 1000;
    return ss
      .filter((s) => (s.ts > 1e12 ? s.ts / 1000 : s.ts) > now - 86400)
      .reduce((n, s) => n + (s.added || 0), 0);
  }, [stats]);

  const pills: { label: string; clear: () => void }[] = [];
  if (q) pills.push({ label: `“${q}”`, clear: () => setQ("") });
  if (usState) pills.push({ label: usState, clear: () => { setUsState(""); setCity(""); } });
  if (city) pills.push({ label: city, clear: () => setCity("") });
  if (ptype) pills.push({ label: ptype, clear: () => setPtype("") });
  if (priceMin) pills.push({ label: `≥ ${fmtK(Number(priceMin))}`, clear: () => setPriceMin("") });
  if (priceMax) pills.push({ label: `≤ ${fmtK(Number(priceMax))}`, clear: () => setPriceMax("") });
  if (bedsMin) pills.push({ label: `${bedsMin}+ bd`, clear: () => setBedsMin("") });
  if (bathsMin) pills.push({ label: `${bathsMin}+ ba`, clear: () => setBathsMin("") });
  if (sqftMin) pills.push({ label: `≥ ${sqftMin} sq ft`, clear: () => setSqftMin("") });
  if (source) pills.push({ label: sourceName(source), clear: () => setSource("") });

  const topTypes = (facets?.property_types ?? []).slice(0, 7);

  return (
    <div className="container">
      <section className="hero">
        <div className="hero-wrap">
          <div className="hero-main">
            <span className="kicker">Aggregator — every listing source in the U.S.</span>
            <h1 className="hero-display" aria-label="Every home for sale in America. One place.">
              <span className="hd-l1" aria-hidden="true">Every home</span>
              <span className="hd-l2" aria-hidden="true">for sale</span>
              <span className="hd-l3" aria-hidden="true">in America.</span>
              <span className="hd-l4" aria-hidden="true">One <em className="signal">place</em>.</span>
            </h1>
            <p className="lede">
              Brokerages, MLS feeds and listing platforms across the United States —
              aggregated in one place, always current, with full photos and details
              and a 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>
              {syncAgo && <span className="live-item">synced {syncAgo}</span>}
              {newToday > 0 && (
                <span className="live-item"><b>+{newToday.toLocaleString("en-US")}</b> today</span>
              )}
              {stats && stats.sources > 0 && (
                <span className="live-item"><b>{stats.sources}</b> sources</span>
              )}
            </div>
          </div>
          <aside className="hero-data" aria-label="The market in numbers">
            <div className="hd-row">
              <b>{totalLive ?? "—"}</b><span>homes indexed</span>
            </div>
            {stats && stats.states != null && stats.states > 0 && (
              <div className="hd-row">
                <b>{stats.states.toLocaleString("en-US")}</b><span>states</span>
              </div>
            )}
            {stats?.avg_price != null && (
              <div className="hd-row">
                <b>${Math.round(stats.avg_price).toLocaleString("en-US")}</b><span>average price</span>
              </div>
            )}
            {stats?.max_price != null && (
              <div className="hd-row">
                <b>{fmtK(stats.max_price)}</b><span>highest price</span>
              </div>
            )}
          </aside>
        </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 large underlined field — */}
        <div className="q-big">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
            <circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" />
          </svg>
          <input id="f-q" placeholder="Where do you want to live?" value={q}
            onChange={(e) => setQ(e.target.value)}
            aria-label="Search — address, city, ZIP or MLS number" />
          {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>State</span>
            <select value={usState} onChange={(e) => { setUsState(e.target.value); setCity(""); }}>
              <option value="">All</option>
              {(facets?.states ?? []).map((s) => (
                <option key={s.state} value={s.state}>{s.state} ({s.n.toLocaleString("en-US")})</option>
              ))}
            </select>
          </label>
          <label className="crit">
            <span>City</span>
            <select value={city} onChange={(e) => setCity(e.target.value)}>
              <option value="">All</option>
              {cities.map((c) => <option key={c.city} value={c.city}>{c.city}</option>)}
            </select>
          </label>
          <label className="crit">
            <span>Type</span>
            <select value={ptype} onChange={(e) => setPtype(e.target.value)}>
              <option value="">All</option>
              {(facets?.property_types ?? []).map((t) => <option key={t} value={t}>{t}</option>)}
            </select>
          </label>
          <div className="crit">
            <span>Price</span>
            <div className="range-pair">
              <select aria-label="Minimum price" 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)}>{fmtK(p)}</option>
                ))}
              </select>
              <span className="range-sep">—</span>
              <select aria-label="Maximum price" 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)}>{fmtK(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>

        {(advOpen || sheetOpen) && (
          <div className="f-adv">
            <div className="f-group">
              <label>Bedrooms (min.)</label>
              <div className="seg" role="group">
                <button className={bedsMin === "" ? "on" : ""} onClick={() => setBedsMin("")}>Any</button>
                {["1", "2", "3", "4", "5"].map((n) => (
                  <button key={n} className={bedsMin === n ? "on" : ""} onClick={() => setBedsMin(n)}>{n}+</button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Bathrooms (min.)</label>
              <div className="seg" role="group">
                <button className={bathsMin === "" ? "on" : ""} onClick={() => setBathsMin("")}>Any</button>
                {["1", "2", "3"].map((n) => (
                  <button key={n} className={bathsMin === n ? "on" : ""} onClick={() => setBathsMin(n)}>{n}+</button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Minimum living area</label>
              <div className="seg" role="group">
                <button className={sqftMin === "" ? "on" : ""} onClick={() => setSqftMin("")}>Any</button>
                {SQFT_STEPS.map((a) => (
                  <button key={a} className={sqftMin === String(a) ? "on" : ""} onClick={() => setSqftMin(String(a))}>{a}+</button>
                ))}
              </div>
            </div>
            <div className="f-group">
              <label>Source</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)}>
          Show {listings ? `${total.toLocaleString("en-US")} homes` : "results"}
        </button>
      </section>

      {/* mobile: criteria summary — opens the sheet (search included, no FAB) */}
      <button className="crit-summary" onClick={() => setSheetOpen(true)}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
          <path d="M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4" />
        </svg>
        <span className="cs-txt">
          {pills.length > 0
            ? pills.slice(0, 3).map((p) => p.label).join(" · ") + (pills.length > 3 ? ` · +${pills.length - 3}` : "")
            : "State, city, type, price, beds…"}
        </span>
        <span className="f-chev" aria-hidden="true" />
      </button>

      <div className="chips" role="group" aria-label="Quick filters">
        {topTypes.map((t) => (
          <button key={t} className={`chip ${ptype === t ? "on" : ""}`} onClick={() => setPtype(ptype === t ? "" : t)}>
            {t}
          </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" id="results-top">
        <h2 className="rb-count">
          {listings
            ? <><b>{total.toLocaleString("en-US")}</b> home{total !== 1 ? "s" : ""}</>
            : "Homes"}
        </h2>
        <div className="rb-tools">
          <label className="rb-sort">
            <select value={sort} onChange={(e) => setSort(e.target.value)} aria-label="Sort">
              <option value="recent">Newest</option>
              <option value="price_asc">Price: low to high</option>
              <option value="price_desc">Price: high to low</option>
            </select>
          </label>
          <div className="rb-tabs" role="tablist" aria-label="View mode">
            <button role="tab" aria-selected={view === "list"} className={`rb-tab ${view === "list" ? "on" : ""}`} onClick={() => setView("list")}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
                <path d="M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01" />
              </svg>
              List
            </button>
            <button role="tab" aria-selected={view === "map"} className={`rb-tab ${view === "map" ? "on" : ""}`} onClick={() => setView("map")}>
              <Ico name="map" size={13} /> Map
            </button>
          </div>
          <button className="rb-filters" onClick={() => setSheetOpen(true)}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden="true">
              <path d="M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4" />
            </svg>
            Filters
            {activeFilters > 0 && <span className="rb-badge">{activeFilters}</span>}
          </button>
        </div>
      </div>

      {error && (
        <div className="notice">
          <div className="big"><Ico name="alert" size={40} /></div>
          <h2>Could not load listings</h2>
          <p>{error}</p>
          <button className="btn btn-primary" onClick={() => window.location.reload()}>Retry</button>
        </div>
      )}

      {!error && view === "list" && 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 === "list" && listings !== null && listings.length === 0 && (
        <div className="notice">
          <div className="big"><Ico name="search" size={40} /></div>
          <h2>No homes match your criteria</h2>
          <p>Try widening your search
            {activeFilters > 0 && <> — or <button className="link-btn" onClick={resetAll}>remove the {activeFilters} active filters</button></>}.</p>
        </div>
      )}

      {!error && view === "map" && (
        <div className="view-pane" key="map">
          <Suspense fallback={<div className="ka-shell-fallback">Loading the map…</div>}>
            <MapView
              filters={filters}
              listings={listings}
              total={total}
              page={page}
              totalPages={totalPages}
              onPage={gotoPage}
              sort={sort}
              onSort={setSort}
              onExit={() => setView("list")}
              onOpenFilters={() => setSheetOpen(true)}
              filtersCount={activeFilters}
            />
          </Suspense>
        </div>
      )}

      {!error && view === "list" && listings !== null && listings.length > 0 && (
        <div className="view-pane">
          <div className="grid grid-edito">
            {listings.map((l) => <ListingCard key={l.uid} l={l} />)}
          </div>
          {totalPages > 1 && (
            <nav className="pager" aria-label="Pagination">
              <button className="pager-btn" onClick={() => gotoPage(page - 1)} disabled={page <= 1}>‹ Prev</button>
              {pageNumbers(page, totalPages).map((p, i) =>
                p === "…"
                  ? <span key={`e${i}`} className="pager-gap">…</span>
                  : <button key={p} className={`pager-btn ${p === page ? "on" : ""}`}
                            onClick={() => gotoPage(p as number)}>{p}</button>
              )}
              <button className="pager-btn" onClick={() => gotoPage(page + 1)} disabled={page >= totalPages}>Next ›</button>
              <span className="pager-info">Page {page} / {totalPages}</span>
            </nav>
          )}
        </div>
      )}
    </div>
  );
}