// ==============================================================================
// Author: Simon-Pierre Boucher <contact@spboucher.ai>
// File:   pages/Stats.tsx
// Desc:   Tableau de bord analytique — module Stats commun Groupe KA v2
//         (ka-ui/stats/SPEC.md §1) : bandeau KPI avec sparklines, sélecteur
//         de période, jauges de complétude, courbes/aires/barres + stats de
//         séries, multi-courbes (prix par ville), barres empilées (ajouts par
//         source), répartitions, distributions, géographie, heatmaps
//         calendrier + horaire, tableaux, records, export PDF (5 rapports).
//         Données 100 % réelles servies par /api/stats/dashboard (cache 5 min).
// ==============================================================================
import { useCallback, useEffect, useState } from "react";
import {
  BarChart, BreakItem, CalendarHeatmap, DataTable, Distribution, Donut,
  EmptyBlock, Fraicheur, Gauge, GaugeCard, Histogram, HourCell, HourHeatmap,
  Kpi, KpiCard, LineChart, MultiLineChart, MultiSerie, PdfButton,
  PeriodSelector, RecordCard, RecordFact, Serie, StackedBarChart,
  StackedSerie, StatSummary, TableSpec,
} from "../ka/stats/kacharts";

/* ---------- contrat /api/stats/dashboard (SPEC.md v2 §2) ---------- */
type Breakdown = { id: string; title: string; kind?: "donut" | "bar"; items: BreakItem[] };
type Dashboard = {
  updated: string;
  period: { from: string; to: string; label: string };
  kpis?: Kpi[];
  gauges?: Gauge[];
  series?: Serie[];
  multiseries?: MultiSerie[];
  stacked?: StackedSerie[];
  breakdowns?: Breakdown[];
  distributions?: Distribution[];
  geo?: { title: string; items: BreakItem[] };
  heatmap?: { title: string; cells: { date: string; value: number }[] };
  hourly?: { title: string; cells: HourCell[] };
  tables?: TableSpec[];
  records?: RecordFact[];
};

async function fetchDashboard(period: string, from?: string, to?: string): Promise<Dashboard> {
  const p = new URLSearchParams({ period });
  if (from && to) { p.set("from", from); p.set("to", to); }
  const res = await fetch(`/api/stats/dashboard?${p}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

export default function StatsPage() {
  const [period, setPeriod] = useState("30j");
  const [custom, setCustom] = useState<{ from: string; to: string }>({ from: "", to: "" });
  const [dash, setDash] = useState<Dashboard | null>(null);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(true);

  const load = useCallback(() => {
    setLoading(true);
    const useCustom = custom.from && custom.to;
    fetchDashboard(period, useCustom ? custom.from : undefined, useCustom ? custom.to : undefined)
      .then((d) => { setDash(d); setError(false); })
      .catch(() => setError(true))
      .finally(() => setLoading(false));
  }, [period, custom]);

  useEffect(() => { load(); }, [load]);

  if (error) {
    return (
      <div className="notice container">
        <h2>Stats indisponibles</h2>
        <p>Le tableau de bord n'a pas pu être chargé. Réessayez dans un instant.</p>
      </div>
    );
  }
  if (!dash) return <div className="notice container"><p>Chargement…</p></div>;

  const donuts = (dash.breakdowns ?? []).filter((b) => b.kind === "donut");
  const bars = (dash.breakdowns ?? []).filter((b) => b.kind !== "donut");
  // séries clés (volumes quotidiens) : stats min/max/moy/méd/σ dessous
  const withStats = new Set(["new_restos", "releves"]);

  return (
    <div className="container stats-page" style={{ opacity: loading ? 0.55 : 1, transition: "opacity 0.15s" }}>
      {/* ---- en-tête : titre + PDF (5 rapports) + fraîcheur (SPEC §1.10-11) ---- */}
      <div className="stats-head">
        <div>
          <span className="kicker">Statistiques · {dash.period.label}</span>
          <h1 className="stats-title">La table du Québec, en chiffres</h1>
          <p className="sub">
            Tableau de bord analytique en direct — restos référencés, menus,
            plats & prix suivis. Données réelles, rien d'inventé.
          </p>
        </div>
        <div className="stats-actions">
          <PdfButton period={period}
            from={custom.from && custom.to ? custom.from : undefined}
            to={custom.from && custom.to ? custom.to : undefined} />
          <Fraicheur updated={dash.updated} onRefresh={load} />
        </div>
      </div>

      {/* ---- 1. bandeau KPI (sparklines incluses) ---- */}
      {dash.kpis?.length ? (
        <div className="kpi-grid">
          {dash.kpis.map((k) => <KpiCard key={k.id} k={k} />)}
        </div>
      ) : <EmptyBlock title="Indicateurs" />}

      {/* ---- 2. sélecteur de période global ---- */}
      <div className="card period-bar">
        <PeriodSelector
          value={period}
          onChange={(p) => { setPeriod(p); setCustom({ from: "", to: "" }); }}
          custom={custom}
          onCustom={(from, to) => setCustom({ from, to })}
        />
      </div>

      {/* ---- 3. jauges : couverture & complétude des fiches ---- */}
      {dash.gauges?.length ? (
        <section>
          <span className="kicker">Couverture & complétude</span>
          <div className="kpi-grid">
            {dash.gauges.map((g) => <GaugeCard key={g.id} g={g} />)}
          </div>
        </section>
      ) : null}

      {/* ---- 4. évolution : courbes / aires / barres + stats de séries ---- */}
      <div className="stats-grid2">
        {(dash.series ?? []).map((s) => (
          <div key={s.id}>
            <LineChart serie={s} />
            {withStats.has(s.id) && <StatSummary serie={s} />}
          </div>
        ))}
      </div>

      {/* ---- 4b. multi-courbes (≤ 4 séries, motifs distincts) + empilées ---- */}
      {(dash.multiseries?.length || dash.stacked?.length) ? (
        <div className="stats-grid2">
          {(dash.multiseries ?? []).map((ms) => <MultiLineChart key={ms.id} ms={ms} />)}
          {(dash.stacked ?? []).map((st) => <StackedBarChart key={st.id} st={st} />)}
        </div>
      ) : null}

      {/* ---- 5. répartitions : anneaux + barres + distributions ---- */}
      <div className="stats-grid2">
        {donuts.map((b) => <Donut key={b.id} title={b.title} items={b.items} />)}
        {bars.map((b) => <BarChart key={b.id} title={b.title} items={b.items} />)}
        {(dash.distributions ?? []).map((d) => <Histogram key={d.id} dist={d} />)}
        {/* ---- 6. répartition géographique ---- */}
        {dash.geo ? <BarChart title={dash.geo.title} items={dash.geo.items} unit="restos" />
          : <EmptyBlock title="Répartition géographique" />}
      </div>

      {/* ---- 7. calendriers : chaleur 26 semaines + activité horaire 7×24 ---- */}
      {dash.heatmap && <CalendarHeatmap title={dash.heatmap.title} cells={dash.heatmap.cells} />}
      {dash.hourly && <HourHeatmap title={dash.hourly.title} cells={dash.hourly.cells} />}

      {/* ---- 8. tableaux détaillés ---- */}
      {(dash.tables ?? []).map((t) => <DataTable key={t.id} spec={t} />)}

      {/* ---- 9. records & faits marquants ---- */}
      {dash.records?.length ? (
        <section>
          <span className="kicker">Records & faits marquants</span>
          <div className="records-grid">
            {dash.records.map((r) => <RecordCard key={r.label} r={r} />)}
          </div>
        </section>
      ) : null}

      <div className="stats-foot">
        Les prix appartiennent aux restaurants et à leurs plateformes ;
        Resto-Ka les agrège pour la découverte et renvoie toujours à la source.
        Rapports PDF estampillés Groupe-KA (complet, synthèse, tendances,
        répartitions, données) disponibles en haut de page.
      </div>
    </div>
  );
}