// -----------------------------------------------------------------------------
// House-Ka — Homes-for-sale aggregator (Canada outside Québec, Ontario first)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Stats.tsx : market & platform statistics — totals, per-source volumes,
//   data quality (completeness, quarantine), recent syncs.
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import {
  Stats, fetchSources, fetchStats, registerSourceNames, sourceName,
} from "../api";

const n = (v: number | null | undefined) =>
  v == null ? "—" : Math.round(v).toLocaleString("en-CA");

export default function StatsPage() {
  const [stats, setStats] = useState<Stats | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    document.title = "Canadian housing market statistics | House-Ka";
    fetchSources().then((r) => registerSourceNames(r.sources)).catch(() => {});
    fetchStats().then(setStats).catch((e) => setError(String(e)));
  }, []);

  if (error) return <div className="notice container"><h2>Could not load the stats</h2><p>{error}</p></div>;
  if (!stats) return <div className="notice container">Loading…</div>;

  const q = stats.qualite;
  const syncs = (stats.recent_syncs ?? []).slice(0, 20);

  return (
    <div className="container stats-page">
      <span className="kicker">Live data</span>
      <h1>Platform statistics</h1>

      <div className="mtg-resultat" style={{ marginTop: 18 }}>
        <div className="mtg-kpi">
          <span className="mtg-kpi-k">Homes for sale</span>
          <span className="mtg-kpi-v">{n(stats.total)}</span>
          <span className="mtg-kpi-sub">published, deduplicated</span>
        </div>
        <div className="mtg-kpi">
          <span className="mtg-kpi-k">Cities & towns</span>
          <span className="mtg-kpi-v">{n(stats.cities)}</span>
        </div>
        <div className="mtg-kpi">
          <span className="mtg-kpi-k">Average price</span>
          <span className="mtg-kpi-v">${n(stats.avg_price)}</span>
          <span className="mtg-kpi-sub">from ${n(stats.min_price)} to ${n(stats.max_price)}</span>
        </div>
        <div className="mtg-kpi">
          <span className="mtg-kpi-k">Sources</span>
          <span className="mtg-kpi-v">{n(stats.sources)}</span>
          <span className="mtg-kpi-sub">CREA DDF brokerage sites</span>
        </div>
      </div>

      {q && (
        <section className="f-bloc">
          <h2>Data quality</h2>
          <p className="sub">
            Every listing gets a completeness score (photos, description,
            specs, coordinates). Listings without a plausible price or a known
            city are quarantined until the next enrichment pass completes them.
          </p>
          <div className="mtg-resultat">
            <div className="mtg-kpi">
              <span className="mtg-kpi-k">Active listings</span>
              <span className="mtg-kpi-v">{n(q.actives)}</span>
            </div>
            <div className="mtg-kpi">
              <span className="mtg-kpi-k">Published</span>
              <span className="mtg-kpi-v">{n(q.publiees)}</span>
            </div>
            <div className="mtg-kpi">
              <span className="mtg-kpi-k">In quarantine</span>
              <span className="mtg-kpi-v">{n(q.quarantaine)}</span>
            </div>
            <div className="mtg-kpi">
              <span className="mtg-kpi-k">Avg. completeness</span>
              <span className="mtg-kpi-v">{q.completude_moyenne ?? "—"}</span>
              <span className="mtg-kpi-sub">score /100</span>
            </div>
          </div>

          {q.par_source.length > 0 && (
            <div className="rooms-wrap">
              <table className="rooms">
                <thead>
                  <tr><th>Source</th><th>Listings</th><th>Published</th><th>Completeness</th><th>Flags</th></tr>
                </thead>
                <tbody>
                  {q.par_source.map((s) => (
                    <tr key={s.source}>
                      <td>{sourceName(s.source)}</td>
                      <td>{n(s.n)}</td>
                      <td>{n(s.publiees)}</td>
                      <td>{s.completude ?? "—"}</td>
                      <td>{n(s.anomalies)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </section>
      )}

      {syncs.length > 0 && (
        <section className="f-bloc">
          <h2>Recent syncs</h2>
          <div className="rooms-wrap">
            <table className="rooms">
              <thead>
                <tr><th>Source</th><th>When</th><th>Found</th><th>Added</th><th>Updated</th><th>Removed</th></tr>
              </thead>
              <tbody>
                {syncs.map((s, i) => (
                  <tr key={i} className={s.ok ? "" : "mtg-stale"}>
                    <td>{sourceName(s.source)}</td>
                    <td>{new Date((s.ts > 1e12 ? s.ts : s.ts * 1000)).toLocaleString("en-CA")}</td>
                    <td>{n(s.found)}</td>
                    <td>{n(s.added)}</td>
                    <td>{n(s.updated)}</td>
                    <td>{n(s.removed)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="fine">
            The connectors re-sync on their own, around the clock. A failed
            sync never wipes data — the last valid state is kept.
          </p>
        </section>
      )}
    </div>
  );
}