// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
/**
 * Tableau de bord /stats v2 — module Stats commun Groupe KA (src/ka/stats/
 * SPEC.md §1), monté sur le kit kacharts : bandeau KPI (sparklines), jauges,
 * courbes + stats de séries, multi-courbes, barres empilées, répartitions,
 * distributions, géographie, calendrier d'activité, tableaux, records,
 * fraîcheur + PdfButton (5 rapports). Données : /api/stats/dashboard
 * (instantané du rôle 2026 + corpus de ventes réelles — period non applicable).
 */
"use client";
import { useCallback, useState } from "react";
import {
  KpiCard, GaugeCard, LineChart, MultiLineChart, StackedBarChart, BarChart,
  Donut, Histogram, CalendarHeatmap, StatSummary, DataTable, RecordCard,
  PdfButton, Fraicheur,
  type Kpi, type Serie, type MultiSerie, type StackedSerie, type BreakItem,
  type Distribution, type Gauge, type TableSpec, type RecordFact,
} from "@/ka/stats/kacharts";
import { useLang } from "./LangContext";

export interface DashboardPayload {
  updated: string;
  period: { label: string; applicable?: boolean };
  kpis: Kpi[];
  gauges?: Gauge[];
  series?: Serie[];
  multiseries?: MultiSerie[];
  stacked?: StackedSerie[];
  breakdowns?: { id: string; title: string; kind: "donut" | "bars"; items: BreakItem[] }[];
  distributions?: Distribution[];
  geo?: { title: string; items: BreakItem[] };
  heatmap?: { title: string; cells: { date: string; value: number }[] };
  tables?: TableSpec[];
  records?: RecordFact[];
}

function SectionTitle({ kicker, title }: { kicker: string; title: string }) {
  return (
    <div className="mb-4 mt-12">
      <span className="kicker">{kicker}</span>
      <h2 className="vp-display mt-2 text-[22px] font-bold uppercase tracking-[-0.02em]">{title}</h2>
    </div>
  );
}

export default function StatsDashboard({ initial }: { initial: DashboardPayload }) {
  const { lang } = useLang();
  const fr = lang === "fr";
  const [data, setData] = useState<DashboardPayload>(initial);
  const refresh = useCallback(async () => {
    try {
      const r = await fetch("/api/stats/dashboard?period=tout", { cache: "no-store" });
      if (r.ok) setData(await r.json());
    } catch {
      /* on garde les données courantes */
    }
  }, []);

  const keySeries = new Set(["valeur_millesime", "ventes_mois", "prix_median_mois"]);

  return (
    <div>
      {/* ---- fraîcheur + rapports PDF (5 modes) ---- */}
      <div className="mb-2 mt-10 flex flex-wrap items-center justify-between gap-3 border-y border-[var(--line)] px-1 py-3">
        <div>
          <p className="vp-mono text-[10px] font-bold uppercase tracking-[0.08em] text-ink-3">
            {fr
              ? `${data.period.label} · corpus de ventes 2021-2026 · périodes non applicables (instantané)`
              : `${data.period.label} · 2021-2026 sales corpus · periods not applicable (snapshot)`}
          </p>
          <div className="mt-1.5">
            <Fraicheur updated={data.updated} onRefresh={refresh} />
          </div>
        </div>
        <PdfButton period="tout" />
      </div>

      {/* ---- 1. bandeau KPI ---- */}
      <SectionTitle kicker={fr ? "Indicateurs" : "Indicators"} title={fr ? "Indicateurs clés" : "Key indicators"} />
      <div className="grid grid-cols-1 gap-3.5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {data.kpis.map((k) => <KpiCard key={k.id} k={k} />)}
      </div>

      {/* ---- 3. jauges ---- */}
      {!!data.gauges?.length && (
        <>
          <SectionTitle kicker={fr ? "Couverture" : "Coverage"} title={fr ? "Couverture & complétude du rôle" : "Roll coverage & completeness"} />
          <div className="grid grid-cols-2 gap-3.5 lg:grid-cols-4">
            {data.gauges.map((g) => <GaugeCard key={g.id} g={g} />)}
          </div>
        </>
      )}

      {/* ---- 4. évolutions ---- */}
      {!!data.series?.length && (
        <>
          <SectionTitle kicker="2021 → 2026" title={fr ? "Évolution — millésimes & ventes réelles" : "Trends — vintages & real sales"} />
          <div className="grid gap-4">
            {data.series.map((s) => (
              <div key={s.id}>
                <LineChart serie={s} />
                {keySeries.has(s.id) && <StatSummary serie={s} />}
              </div>
            ))}
          </div>
        </>
      )}
      {!!data.multiseries?.length && (
        <>
          <SectionTitle kicker={fr ? "Marché" : "Market"} title={fr ? "Indices de marché & prix au m²" : "Market indices & price per m²"} />
          <div className="grid gap-4">
            {data.multiseries.map((ms) => <MultiLineChart key={ms.id} ms={ms} />)}
          </div>
        </>
      )}
      {!!data.stacked?.length && (
        <div className="mt-4 grid gap-4">
          {data.stacked.map((st) => <StackedBarChart key={st.id} st={st} />)}
        </div>
      )}

      {/* ---- 5. répartitions & distributions ---- */}
      {(!!data.breakdowns?.length || !!data.distributions?.length) && (
        <>
          <SectionTitle kicker={fr ? "Répartitions" : "Breakdowns"} title={fr ? "Répartitions & distributions" : "Breakdowns & distributions"} />
          <div className="grid gap-4 lg:grid-cols-2">
            {data.breakdowns?.map((b) =>
              b.kind === "donut"
                ? <Donut key={b.id} title={b.title} items={b.items} />
                : <BarChart key={b.id} title={b.title} items={b.items} />
            )}
            {data.distributions?.map((d) => <Histogram key={d.id} dist={d} />)}
          </div>
        </>
      )}

      {/* ---- 6. géographie ---- */}
      {!!data.geo?.items?.length && (
        <>
          <SectionTitle kicker={fr ? "Géographie" : "Geography"} title={data.geo.title} />
          <BarChart title={data.geo.title} items={data.geo.items} />
        </>
      )}

      {/* ---- 7. calendrier d'activité ---- */}
      {!!data.heatmap?.cells?.length && (
        <>
          <SectionTitle kicker={fr ? "Activité" : "Activity"} title={fr ? "Ventes réelles au calendrier" : "Real sales calendar"} />
          <CalendarHeatmap title={data.heatmap.title} cells={data.heatmap.cells} />
        </>
      )}

      {/* ---- 8. tableaux détaillés ---- */}
      {!!data.tables?.length && (
        <>
          <SectionTitle kicker={fr ? "Détails" : "Details"} title={fr ? "Tableaux détaillés" : "Detailed tables"} />
          <div className="grid gap-5">
            {data.tables.map((t) => <DataTable key={t.id} spec={t as TableSpec} />)}
          </div>
        </>
      )}

      {/* ---- 9. records ---- */}
      {!!data.records?.length && (
        <>
          <SectionTitle kicker={fr ? "Faits marquants" : "Highlights"} title={fr ? "Records & faits marquants" : "Records & highlights"} />
          <div className="grid gap-3 sm:grid-cols-2">
            {data.records.map((r) => <RecordCard key={r.label} r={r} />)}
          </div>
        </>
      )}

      {/* ---- 10. fraîcheur (rappel de bas de page) ---- */}
      <div className="mt-10 flex justify-between gap-3">
        <Fraicheur updated={data.updated} onRefresh={refresh} />
        <PdfButton period="tout" />
      </div>
    </div>
  );
}