// -----------------------------------------------------------------------------
// Author: Simon-Pierre Boucher
// Contact: contact@spboucher.ai
// Project: Toit-Ka
// pages/Stats.tsx : statistiques des deux univers — tuiles louer/acheter,
//   loyers et prix moyens par ville et par type (données /api/stats).
// -----------------------------------------------------------------------------
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { Stats, Tx, TxStats, fetchStats, slugify } from "../api";

const fmt = (n: number | null | undefined, suffix = "") =>
  n == null ? "…" : Math.round(n).toLocaleString("fr-CA") + suffix;

function Bars({ rows, tx, unit }: {
  rows: { key: string; n: number; avg: number | null; href?: string }[];
  tx: Tx; unit?: string;
}) {
  const max = Math.max(1, ...rows.map((r) => r.n));
  return (
    <div className="hbars">
      {rows.map((r) => (
        <div className="hbar-row" key={r.key}>
          <div className="hbar-label">{r.href ? <Link to={r.href}>{r.key}</Link> : r.key}</div>
          <div className="hbar-track"><span className="hbar-fill" style={{ width: `${(r.n / max) * 100}%` }} /></div>
          <div className="hbar-value">
            {r.n.toLocaleString("fr-CA")}
            {r.avg != null && <em> · {fmt(r.avg)} ${tx === "louer" ? "/mois" : ""}{unit ?? ""}</em>}
          </div>
        </div>
      ))}
    </div>
  );
}

function Univers({ tx, s }: { tx: Tx; s: TxStats }) {
  const louer = tx === "louer";
  return (
    <div className="stats-univers">
      <h2>
        <span className={`nav-dot ${tx}`} aria-hidden="true" />
        {louer ? "Louer" : "Acheter"}
      </h2>
      <div className="tiles" style={{ marginTop: 16 }}>
        <div className="tile hero-tile">
          <div className="tile-v">{fmt(s.total)}</div>
          <div className="tile-k">{louer ? "logements à louer" : "propriétés à vendre"}</div>
        </div>
        <div className="tile">
          <div className="tile-v">{fmt(s.avg_price, " $")}</div>
          <div className="tile-k">{louer ? "loyer moyen /mois" : "prix moyen demandé"}</div>
        </div>
        <div className="tile">
          <div className="tile-v">{fmt(s.cities)}</div>
          <div className="tile-k">villes couvertes</div>
        </div>
        <div className="tile">
          <div className="tile-v">{fmt(s.sources)}</div>
          <div className="tile-k">sources agrégées</div>
        </div>
      </div>
      <h3 style={{ fontSize: 15, margin: "8px 0 10px" }}>Top villes</h3>
      <Bars tx={tx} rows={s.top_cities.map((c) => ({
        key: c.city, n: c.n, avg: c.avg_price, href: `/${tx}/${slugify(c.city)}`,
      }))} />
      <h3 style={{ fontSize: 15, margin: "18px 0 10px" }}>Par type</h3>
      <Bars tx={tx} rows={s.top_types.map((t) => ({
        key: t.type, n: t.n, avg: t.avg_price, href: `/${tx}/type/${slugify(t.type)}`,
      }))} />
    </div>
  );
}

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

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

  return (
    <div className="container stats-page">
      <span className="kicker">Les deux marchés, côte à côte</span>
      <h1 className="stats-title">Statistiques</h1>
      <p className="sub">
        Portrait en direct des deux univers agrégés par Toit-Ka : la location
        (données Lou-Ka) et la vente (données Immo-Ka), mises à jour en continu.
      </p>

      {stats ? (
        <div className="stats-duo">
          <Univers tx="louer" s={stats.louer} />
          <Univers tx="acheter" s={stats.acheter} />
        </div>
      ) : (
        <div className="notice">Chargement…</div>
      )}

      <p className="stats-foot">
        Mise à jour automatique — chaque fiche renvoie à l'annonce originale de la source.
      </p>
    </div>
  );
}