// -----------------------------------------------------------------------------
// Home-Ka — US real-estate aggregator (Groupe KA)
// Author: Simon-Pierre Boucher — contact@spboucher.ai
// pages/Stats.tsx : simple live dashboard — totals, by state, by type,
//   recent syncs (/api/stats).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Stats, fetchStats, sourceName } from "../api";

const n = (x: number | null | undefined) =>
  x == null ? "—" : Math.round(x).toLocaleString("en-US");
const usd = (x: number | null | undefined) =>
  x == null ? "—" : "$" + Math.round(x).toLocaleString("en-US");

function ago(ts: number): string {
  const s = Math.max(0, Math.floor(Date.now() / 1000 - (ts > 1e12 ? ts / 1000 : ts)));
  if (s < 3600) return `${Math.round(s / 60)} min ago`;
  if (s < 172800) return `${Math.round(s / 3600)} h ago`;
  return `${Math.round(s / 86400)} d ago`;
}

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

  useEffect(() => {
    fetchStats().then(setStats).catch((e) => setError(String(e)));
  }, []);

  return (
    <div className="container stats-page" style={{ display: "grid", gap: 22, minWidth: 0 }}>
      <header style={{ minWidth: 0 }}>
        <span className="kicker">The aggregated market</span>
        <h1 className="stats-title">Statistics</h1>
        <p className="sub" style={{ marginBottom: 14 }}>
          Live dashboard of the homes for sale aggregated by Home-Ka — volumes
          and prices computed on the platform's real data (source duplicates
          excluded, "price on request" excluded).
        </p>
      </header>

      {error && (
        <div className="notice">
          <h2>Statistics unavailable</h2>
          <p>{error}</p>
        </div>
      )}
      {!stats && !error && <div className="notice">Loading…</div>}

      {stats && (
        <>
          {/* --- totals row -------------------------------------------------- */}
          <section aria-label="Key totals" className="tiles">
            <div className="tile hero-tile">
              <div className="tile-v">{n(stats.total)}</div>
              <div className="tile-k">Homes for sale</div>
            </div>
            <div className="tile">
              <div className="tile-v">{n(stats.properties)}</div>
              <div className="tile-k">Physical properties tracked</div>
            </div>
            <div className="tile">
              <div className="tile-v">{n(stats.states)}</div>
              <div className="tile-k">States</div>
            </div>
            <div className="tile">
              <div className="tile-v">{n(stats.cities)}</div>
              <div className="tile-k">Cities</div>
            </div>
            <div className="tile">
              <div className="tile-v">{n(stats.sources)}</div>
              <div className="tile-k">Sources</div>
            </div>
            <div className="tile">
              <div className="tile-v">{usd(stats.avg_price)}</div>
              <div className="tile-k">Average price</div>
            </div>
            <div className="tile">
              <div className="tile-v">{usd(stats.min_price)}</div>
              <div className="tile-k">Lowest price</div>
            </div>
            <div className="tile">
              <div className="tile-v">{usd(stats.max_price)}</div>
              <div className="tile-k">Highest price</div>
            </div>
          </section>

          {/* --- by state ----------------------------------------------------- */}
          {stats.by_state.length > 0 && (
            <section aria-label="By state">
              <h2>By state</h2>
              <div className="q-table-wrap">
                <table className="q-table">
                  <thead>
                    <tr><th>State</th><th>Homes</th><th>Average price</th></tr>
                  </thead>
                  <tbody>
                    {stats.by_state.map((r) => (
                      <tr key={r.state}>
                        <td>{r.state}</td>
                        <td className="num">{n(r.n)}</td>
                        <td className="num">{usd(r.avg_price)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          )}

          {/* --- by property type ---------------------------------------------- */}
          {stats.by_type.length > 0 && (
            <section aria-label="By property type">
              <h2>By property type</h2>
              <div className="q-table-wrap">
                <table className="q-table">
                  <thead>
                    <tr><th>Type</th><th>Homes</th><th>Average price</th></tr>
                  </thead>
                  <tbody>
                    {stats.by_type.map((r) => (
                      <tr key={r.property_type}>
                        <td>{r.property_type}</td>
                        <td className="num">{n(r.n)}</td>
                        <td className="num">{usd(r.avg_price)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          )}

          {/* --- recent syncs --------------------------------------------------- */}
          {(stats.recent_syncs?.length ?? 0) > 0 && (
            <section aria-label="Recent syncs">
              <h2>Recent syncs</h2>
              <div className="q-table-wrap">
                <table className="q-table">
                  <thead>
                    <tr>
                      <th>Source</th><th>When</th><th>Found</th>
                      <th>Added</th><th>Removed</th><th>Status</th>
                    </tr>
                  </thead>
                  <tbody>
                    {stats.recent_syncs!.map((s, i) => (
                      <tr key={`${s.source}-${s.ts}-${i}`}>
                        <td>{sourceName(s.source)}</td>
                        <td>{ago(s.ts)}</td>
                        <td className="num">{n(s.found)}</td>
                        <td className="num">{n(s.added)}</td>
                        <td className="num">{n(s.removed)}</td>
                        <td>
                          {s.ok
                            ? <span className="adm-badge adm-ok">OK</span>
                            : <span className="adm-badge adm-err" title={s.message}>Error</span>}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </section>
          )}
        </>
      )}

      <p className="stats-foot">
        Updated automatically — statistics are computed on the aggregated
        listings. Every listing links back to the original announcement at
        the source.
      </p>
    </div>
  );
}