/**
 * =============================================================================
 * Job·Ka — Groupe KA
 * Auteur  : Simon-Pierre Boucher
 * Contact : contact@spboucher.ai
 * Fichier : frontend/src/pages/Stats.tsx
 * Rôle    : Tableau de bord analytique — module Stats commun Groupe KA v2
 *           (contrat ../ka/stats/SPEC.md, composants ../ka/stats/kacharts.tsx).
 *           PDF (5 rapports) + fraîcheur, KPI + sparklines, jauges, courbes
 *           (N-1) + stats de séries, multi-courbes, barres empilées,
 *           répartitions, distributions, géographie, calendrier + heatmap
 *           horaire, tableaux, records.
 * Créé    : 2026-08-17   Modifié : 2026-08-19
 * =============================================================================
 */
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";

interface Dashboard {
  updated: string;
  period: { from: string | null; to: string | null; label: string };
  kpis: Kpi[];
  gauges?: Gauge[];
  series: Serie[];
  multiseries?: MultiSerie[];
  stacked?: StackedSerie[];
  breakdowns: { id: string; title: string; kind?: string; items: BreakItem[] }[];
  distributions?: Distribution[];
  geo?: { title: string; items: BreakItem[] };
  heatmap?: { title: string; cells: { date: string; value: number }[] };
  hourly?: { title: string; cells: HourCell[] };
  tables: TableSpec[];
  records: RecordFact[];
}

function SectionTitle({ children }: { children: string }) {
  return (
    <h2 style={{ margin: "6px 0 0", fontFamily: "var(--font-display)", fontSize: 19 }}>
      {children}
    </h2>
  );
}

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 [loading, setLoading] = useState(true);
  const [err, setErr] = useState<string | null>(null);

  const customOk = Boolean(custom.from && custom.to);

  const load = useCallback(() => {
    setLoading(true);
    setErr(null);
    const p = new URLSearchParams({ period });
    if (customOk) {
      p.set("from", custom.from);
      p.set("to", custom.to);
    }
    fetch(`/api/stats/dashboard?${p}`)
      .then((r) => {
        if (!r.ok) throw new Error(`API ${r.status}`);
        return r.json();
      })
      .then((d: Dashboard) => setDash(d))
      .catch((e) => setErr(String(e?.message ?? e)))
      .finally(() => setLoading(false));
  }, [period, custom.from, custom.to, customOk]);

  useEffect(() => {
    document.title = "Statistiques de l'emploi — Job-Ka · Un service Groupe KA";
    load();
  }, [load]);

  const donuts = dash?.breakdowns?.filter((b) => b.kind === "donut") ?? [];
  const barBreaks = dash?.breakdowns?.filter((b) => b.kind !== "donut") ?? [];

  return (
    <div className="container" style={{ display: "grid", gap: 18, paddingBottom: 40 }}>
      {/* --- en-tête : titre + PDF (5 rapports) + fraîcheur ------------------ */}
      <header style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "flex-end", justifyContent: "space-between", marginTop: 24 }}>
        <div style={{ minWidth: 0 }}>
          <p className="klabel" style={{ margin: 0 }}>Groupe KA · Job·Ka</p>
          <h1 style={{ margin: "4px 0 0", fontFamily: "var(--font-display)", fontSize: "clamp(24px,3.4vw,34px)", letterSpacing: "-0.02em" }}>
            Statistiques du marché de l'emploi
          </h1>
          {dash && (
            <p className="klabel" style={{ margin: "6px 0 0" }}>
              Période : {dash.period.label}
              {dash.period.from ? ` (${dash.period.from} → ${dash.period.to})` : ""}
            </p>
          )}
        </div>
        <div style={{ display: "grid", gap: 8, justifyItems: "end" }}>
          <PdfButton period={period} from={customOk ? custom.from : undefined} to={customOk ? custom.to : undefined} />
          {dash && <Fraicheur updated={dash.updated} onRefresh={load} />}
        </div>
      </header>

      {err && (
        <div className="card" style={{ padding: 18, borderColor: "var(--danger)" }}>
          <b>Impossible de charger les statistiques.</b>
          <p className="klabel" style={{ margin: "6px 0 10px" }}>{err}</p>
          <button type="button" className="btn btn-primary" onClick={load}>Réessayer</button>
        </div>
      )}

      {/* --- bandeau KPI (sparklines) ---------------------------------------- */}
      {dash && dash.kpis.length > 0 && (
        <section aria-label="Indicateurs clés" style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(190px, 1fr))", opacity: loading ? 0.55 : 1, transition: "opacity .2s" }}>
          {dash.kpis.map((k) => <KpiCard key={k.id} k={k} />)}
        </section>
      )}
      {!dash && loading && (
        <div className="card" style={{ padding: 24, textAlign: "center" }}>
          <span className="klabel">Chargement des statistiques…</span>
        </div>
      )}

      {/* --- sélecteur de période --------------------------------------------- */}
      <section className="card" style={{ padding: "14px 16px" }} aria-label="Période">
        <PeriodSelector
          value={period}
          onChange={(p) => { setPeriod(p); setCustom({ from: "", to: "" }); }}
          custom={custom}
          onCustom={(from, to) => setCustom({ from, to })}
        />
      </section>

      {dash && (
        <div style={{ display: "grid", gap: 18, opacity: loading ? 0.55 : 1, transition: "opacity .2s" }}>
          {/* --- jauges (complétude des fiches) ------------------------------ */}
          {dash.gauges && dash.gauges.length > 0 && (
            <section aria-label="Complétude des fiches" style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(min(210px, 100%), 1fr))" }}>
              {dash.gauges.map((g) => <GaugeCard key={g.id} g={g} />)}
            </section>
          )}

          {/* --- évolutions : courbes / barres + stats de séries -------------- */}
          {dash.series?.length ? (
            dash.series.map((s) => (
              <div key={s.id}>
                <LineChart serie={s} />
                <StatSummary serie={s} />
              </div>
            ))
          ) : (
            <EmptyBlock title="Évolution quotidienne" />
          )}

          {/* --- multi-courbes (top secteurs) ---------------------------------- */}
          {dash.multiseries?.map((ms) => <MultiLineChart key={ms.id} ms={ms} />)}

          {/* --- barres empilées (ajouts par source) --------------------------- */}
          {dash.stacked?.map((st) => <StackedBarChart key={st.id} st={st} />)}

          {/* --- répartitions (anneaux + barres avec deltas) ------------------- */}
          {(donuts.length > 0 || barBreaks.length > 0) && (
            <div style={{ display: "grid", gap: 18, gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))" }}>
              {donuts.map((b) => <Donut key={b.id} title={b.title} items={b.items} />)}
              {barBreaks.map((b) => <BarChart key={b.id} title={b.title} items={b.items} unit="offres" />)}
            </div>
          )}

          {/* --- distributions (histogrammes) ---------------------------------- */}
          {dash.distributions && dash.distributions.length > 0 && (
            <div style={{ display: "grid", gap: 18, gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))" }}>
              {dash.distributions.map((d) => <Histogram key={d.id} dist={d} />)}
            </div>
          )}

          {/* --- géographie ------------------------------------------------------ */}
          {dash.geo && <BarChart title={dash.geo.title} items={dash.geo.items} unit="offres" />}

          {/* --- calendrier de chaleur + activité horaire ------------------------ */}
          {dash.heatmap && <CalendarHeatmap title={dash.heatmap.title} cells={dash.heatmap.cells} />}
          {dash.hourly && <HourHeatmap title={dash.hourly.title} cells={dash.hourly.cells} />}

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

          {/* --- records & faits marquants ---------------------------------------- */}
          {dash.records?.length > 0 && (
            <section aria-label="Records et faits marquants" style={{ display: "grid", gap: 10 }}>
              <SectionTitle>Records & faits marquants</SectionTitle>
              <div style={{ display: "grid", gap: 10, gridTemplateColumns: "repeat(auto-fit, minmax(min(280px, 100%), 1fr))" }}>
                {dash.records.map((r) => <RecordCard key={r.label} r={r} />)}
              </div>
            </section>
          )}
        </div>
      )}
    </div>
  );
}