// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
// ka-ui/stats/kacharts.tsx — kit de graphiques SVG du module Stats commun
// Groupe KA (zéro dépendance, React 18+). Style : design system ka-ui
// (bordures encre, accent de la plateforme via var(--accent)).
// v2 — composants : KpiCard (+sparkline), PeriodSelector, LineChart (ligne/
// aire, infobulle + légende cliquable + comparaison N-1), MultiLineChart
// (≤4 séries, pointillés distincts = jamais la couleur seule), VBarChart
// (barres verticales / histogrammes), StackedBarChart, BarChart (horizontal,
// deltas), Donut, GaugeCard, CalendarHeatmap, HourHeatmap (7×24),
// StatSummary (min/max/moy/méd/σ), DataTable (tri/recherche/pagination),
// RecordCard, PdfButton (menu de rapports), EmptyBlock, Fraicheur.
import { useEffect, useMemo, useRef, useState } from "react";

/* ---------- types (contrat SPEC.md v2) ---------- */
export type Kpi = {
  id: string; label: string; value: number | string; unit?: string;
  delta_pct?: number | null; direction?: "up" | "down";
  spark?: Point[]; help?: string;
};
export type Point = { t: string; v: number };
export type Serie = {
  id: string; title: string; unit?: string;
  kind?: "line" | "bar" | "area";
  points: Point[]; compare?: Point[];
};
export type MultiSerie = {
  id: string; title: string; unit?: string;
  series: { label: string; points: Point[] }[]; // ≤ 4 séries
};
export type StackedSerie = {
  id: string; title: string; unit?: string;
  keys: string[]; points: { t: string; values: number[] }[];
};
export type BreakItem = { label: string; value: number; delta_pct?: number | null };
export type Distribution = { id: string; title: string; unit?: string; bins: { label: string; value: number }[] };
export type Gauge = { id: string; label: string; value: number; max: number; unit?: string; help?: string };
export type HourCell = { dow: number; hour: number; value: number }; // dow 0=lun … 6=dim
export type TableSpec = { id: string; title: string; columns: string[]; rows: (string | number)[][] };
export type RecordFact = { label: string; value: string; date?: string };

export const PERIODS: { id: string; label: string }[] = [
  { id: "auj", label: "Today" },
  { id: "7j", label: "7 days" },
  { id: "30j", label: "30 days" },
  { id: "3m", label: "3 months" },
  { id: "6m", label: "6 months" },
  { id: "12m", label: "12 months" },
  { id: "annee", label: "Year to date" },
  { id: "tout", label: "All" },
];

export const REPORT_MODES: { id: string; label: string; desc: string }[] = [
  { id: "complet", label: "Full report", desc: "All sections — KPIs, trends, breakdowns, tables, records" },
  { id: "synthese", label: "Executive summary", desc: "2 pages — key indicators and highlights" },
  { id: "tendances", label: "Trends & evolution", desc: "Curves, year-over-year comparisons and series statistics" },
  { id: "repartitions", label: "Breakdowns & geography", desc: "Categories, distributions, regions and activity" },
  { id: "donnees", label: "Detailed data", desc: "All tables, in long form" },
];

export const fmtInt = (n: number) => n.toLocaleString("en-CA");
export const fmtNum = (n: number) =>
  Number.isInteger(n) ? fmtInt(n) : n.toLocaleString("en-CA", { maximumFractionDigits: 2 });
const fmtPct = (n: number) => `${n >= 0 ? "+" : ""}${fmtNum(n)} %`;

/* Styles des séries multiples : couleur + motif de trait (l'identité n'est
   jamais portée par la couleur seule — règle d'accessibilité). */
const MULTI_STYLES = [
  { stroke: "var(--accent)", dash: undefined, width: 2.4 },
  { stroke: "var(--ink)", dash: undefined, width: 1.6 },
  { stroke: "var(--accent-deep, var(--accent))", dash: "6 3", width: 2 },
  { stroke: "var(--ink-3)", dash: "2 3", width: 2 },
];

/* ---------- KPI (+ sparkline) ---------- */
export function KpiCard({ k }: { k: Kpi }) {
  const up = (k.direction ?? ((k.delta_pct ?? 0) >= 0 ? "up" : "down")) === "up";
  const sp = (k.spark ?? []).filter((p) => typeof p.v === "number");
  const spark = useMemo(() => {
    if (sp.length < 2) return null;
    const w = 120, h = 30;
    const vmax = Math.max(...sp.map((p) => p.v));
    const vmin = Math.min(...sp.map((p) => p.v));
    const rng = vmax - vmin || 1;
    const X = (i: number) => (w * i) / (sp.length - 1);
    const Y = (v: number) => 2 + (h - 4) * (1 - (v - vmin) / rng);
    const d = sp.map((p, i) => `${i ? "L" : "M"}${X(i).toFixed(1)},${Y(p.v).toFixed(1)}`).join("");
    return { w, h, d, area: `${d}L${w},${h}L0,${h}Z` };
  }, [k.spark]);
  return (
    <article className="card" style={{ padding: "14px 16px", minWidth: 0 }} title={k.help}>
      <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em" }}>
        {typeof k.value === "number" ? fmtNum(k.value) : k.value}
        {k.unit ? <span style={{ fontSize: "0.6em", color: "var(--ink-2)" }}> {k.unit}</span> : null}
      </p>
      <p className="klabel" style={{ margin: "6px 0 0" }}>{k.label}</p>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 8 }}>
        {k.delta_pct !== undefined && k.delta_pct !== null ? (
          <p style={{ margin: "8px 0 0", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: up ? "var(--green)" : "var(--danger)" }}>
            {up ? "▲" : "▼"} {fmtPct(k.delta_pct)} <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>vs previous period</span>
          </p>
        ) : <span />}
        {spark && (
          <svg viewBox={`0 0 ${spark.w} ${spark.h}`} style={{ width: 96, height: 24, flex: "none" }} aria-hidden="true">
            <path d={spark.area} fill="var(--accent)" opacity={0.14} />
            <path d={spark.d} fill="none" stroke="var(--accent)" strokeWidth={1.8} />
          </svg>
        )}
      </div>
    </article>
  );
}

/* ---------- Sélecteur de période ---------- */
export function PeriodSelector({
  value, onChange, custom, onCustom,
}: {
  value: string; onChange: (p: string) => void;
  custom?: { from: string; to: string }; onCustom?: (from: string, to: string) => void;
}) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
      {PERIODS.map((p) => (
        <button key={p.id} type="button" onClick={() => onChange(p.id)}
          className="chip" aria-pressed={value === p.id}
          style={{ cursor: "pointer", minHeight: 44, background: value === p.id ? "var(--accent)" : "var(--surface)", color: value === p.id ? "var(--on-accent)" : "var(--ink)" }}>
          {p.label}
        </button>
      ))}
      {onCustom && (
        <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
          <input className="input" type="date" style={{ width: 150 }} value={custom?.from ?? ""} aria-label="Du"
            onChange={(e) => onCustom(e.target.value, custom?.to ?? "")} />
          <span className="klabel">au</span>
          <input className="input" type="date" style={{ width: 150 }} value={custom?.to ?? ""} aria-label="Au"
            onChange={(e) => onCustom(custom?.from ?? "", e.target.value)} />
        </span>
      )}
    </div>
  );
}

/* ---------- Courbe / aire ---------- */
export function LineChart({ serie, height = 240 }: { serie: Serie; height?: number }) {
  const [hide, setHide] = useState<{ cur: boolean; cmp: boolean }>({ cur: false, cmp: false });
  const [hover, setHover] = useState<number | null>(null);
  const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
  const pts = serie.points ?? [];
  if (serie.kind === "bar") return <VBarChart serie={serie} height={height} />;
  if (pts.length < 2) return <EmptyBlock title={serie.title} />;
  const all = [...(hide.cur ? [] : pts), ...(!hide.cmp && serie.compare ? serie.compare : [])];
  const vmax = Math.max(...all.map((p) => p.v), 1);
  const vmin = Math.min(0, ...all.map((p) => p.v));
  const X = (i: number, n: number) => PL + ((W - PL - PR) * i) / (n - 1);
  const Y = (v: number) => PT + (H - PT - PB) * (1 - (v - vmin) / (vmax - vmin || 1));
  const path = (s: Point[]) => s.map((p, i) => `${i ? "L" : "M"}${X(i, s.length)},${Y(p.v)}`).join("");
  const hi = hover !== null ? Math.min(pts.length - 1, Math.max(0, hover)) : null;
  return (
    <figure className="card" style={{ margin: 0, padding: 16 }}>
      <figcaption style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
        <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{serie.title}</b>
        <span style={{ display: "flex", gap: 10 }}>
          <LegendChip label="Current period" color="var(--accent)" off={hide.cur} onClick={() => setHide((h) => ({ ...h, cur: !h.cur }))} />
          {serie.compare && <LegendChip label="Compared period" color="var(--ink-3)" dashed off={hide.cmp} onClick={() => setHide((h) => ({ ...h, cmp: !h.cmp }))} />}
        </span>
      </figcaption>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10, touchAction: "pan-y" }} role="img" aria-label={serie.title}
        onMouseMove={(e) => {
          const r = (e.currentTarget as SVGSVGElement).getBoundingClientRect();
          const fx = ((e.clientX - r.left) / r.width) * W;
          setHover(Math.round(((fx - PL) / (W - PL - PR)) * (pts.length - 1)));
        }}
        onMouseLeave={() => setHover(null)}>
        {[0, 1, 2, 3, 4].map((g) => {
          const y = PT + ((H - PT - PB) * g) / 4;
          const v = vmax - ((vmax - vmin) * g) / 4;
          return (
            <g key={g}>
              <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} />
              <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(v))}</text>
            </g>
          );
        })}
        {[0, Math.floor(pts.length / 2), pts.length - 1].map((i) => (
          <text key={i} x={X(i, pts.length)} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text>
        ))}
        {serie.kind === "area" && !hide.cur && (
          <path d={`${path(pts)}L${X(pts.length - 1, pts.length)},${Y(0)}L${X(0, pts.length)},${Y(0)}Z`} fill="var(--accent)" opacity={0.13} />
        )}
        {!hide.cmp && serie.compare && serie.compare.length > 1 && (
          <path d={path(serie.compare)} fill="none" stroke="var(--ink-3)" strokeWidth={1.4} strokeDasharray="4 4" />
        )}
        {!hide.cur && <path d={path(pts)} fill="none" stroke="var(--accent)" strokeWidth={2.4} />}
        {hi !== null && (
          <g>
            <line x1={X(hi, pts.length)} x2={X(hi, pts.length)} y1={PT} y2={H - PB} stroke="var(--ink)" strokeWidth={1} strokeDasharray="2 3" />
            <circle cx={X(hi, pts.length)} cy={Y(pts[hi].v)} r={4} fill="var(--accent)" stroke="var(--ink)" strokeWidth={1.5} />
          </g>
        )}
      </svg>
      {hi !== null && (
        <p className="chip" style={{ marginTop: 8 }}>
          {pts[hi].t} — <b>{fmtNum(pts[hi].v)}{serie.unit ? ` ${serie.unit}` : ""}</b>
          {serie.compare?.[hi] && !hide.cmp ? <span style={{ color: "var(--ink-3)" }}> · N-1 : {fmtNum(serie.compare[hi].v)}</span> : null}
        </p>
      )}
    </figure>
  );
}

function LegendChip({ label, color, off, dashed, onClick }: { label: string; color: string; off?: boolean; dashed?: boolean; onClick?: () => void }) {
  return (
    <button type="button" onClick={onClick} aria-pressed={!off} disabled={!onClick}
      style={{ display: "inline-flex", alignItems: "center", gap: 6, border: 0, background: "none", cursor: onClick ? "pointer" : "default", opacity: off ? 0.4 : 1, fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", minHeight: 44 }}>
      <span style={{ width: 18, height: 0, borderTop: `3px ${dashed ? "dashed" : "solid"} ${color}` }} />
      {label}
    </button>
  );
}

/* ---------- Multi-courbes (≤ 4 séries, motifs distincts) ---------- */
export function MultiLineChart({ ms, height = 260 }: { ms: MultiSerie; height?: number }) {
  const series = (ms.series ?? []).filter((s) => (s.points ?? []).length > 1).slice(0, 4);
  const [off, setOff] = useState<Record<string, boolean>>({});
  const [hover, setHover] = useState<number | null>(null);
  if (!series.length) return <EmptyBlock title={ms.title} />;
  const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
  const n = Math.max(...series.map((s) => s.points.length));
  const shown = series.filter((s) => !off[s.label]);
  const all = shown.flatMap((s) => s.points.map((p) => p.v));
  const vmax = Math.max(...(all.length ? all : [1]), 1);
  const vmin = Math.min(0, ...(all.length ? all : [0]));
  const X = (i: number, len: number) => PL + ((W - PL - PR) * i) / (len - 1);
  const Y = (v: number) => PT + (H - PT - PB) * (1 - (v - vmin) / (vmax - vmin || 1));
  const ref = series[0].points;
  const hi = hover !== null ? Math.min(n - 1, Math.max(0, hover)) : null;
  return (
    <figure className="card" style={{ margin: 0, padding: 16 }}>
      <figcaption style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
        <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{ms.title}</b>
        <span style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {series.map((s, i) => (
            <LegendChip key={s.label} label={s.label} color={MULTI_STYLES[i].stroke}
              dashed={!!MULTI_STYLES[i].dash} off={!!off[s.label]}
              onClick={() => setOff((o) => ({ ...o, [s.label]: !o[s.label] }))} />
          ))}
        </span>
      </figcaption>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10, touchAction: "pan-y" }} role="img" aria-label={ms.title}
        onMouseMove={(e) => {
          const r = (e.currentTarget as SVGSVGElement).getBoundingClientRect();
          const fx = ((e.clientX - r.left) / r.width) * W;
          setHover(Math.round(((fx - PL) / (W - PL - PR)) * (n - 1)));
        }}
        onMouseLeave={() => setHover(null)}>
        {[0, 1, 2, 3, 4].map((g) => {
          const y = PT + ((H - PT - PB) * g) / 4;
          const v = vmax - ((vmax - vmin) * g) / 4;
          return (
            <g key={g}>
              <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} />
              <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(v))}</text>
            </g>
          );
        })}
        {[0, Math.floor(ref.length / 2), ref.length - 1].map((i) => (
          <text key={i} x={X(i, ref.length)} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{ref[i]?.t}</text>
        ))}
        {series.map((s, i) => off[s.label] ? null : (
          <path key={s.label}
            d={s.points.map((p, j) => `${j ? "L" : "M"}${X(j, s.points.length)},${Y(p.v)}`).join("")}
            fill="none" stroke={MULTI_STYLES[i].stroke} strokeWidth={MULTI_STYLES[i].width}
            strokeDasharray={MULTI_STYLES[i].dash} />
        ))}
        {hi !== null && (
          <line x1={X(hi, n)} x2={X(hi, n)} y1={PT} y2={H - PB} stroke="var(--ink)" strokeWidth={1} strokeDasharray="2 3" />
        )}
      </svg>
      {hi !== null && (
        <p className="chip" style={{ marginTop: 8, display: "inline-flex", gap: 12, flexWrap: "wrap" }}>
          <b>{ref[hi]?.t}</b>
          {shown.map((s) => (
            <span key={s.label}>{s.label} : <b>{s.points[hi] ? fmtNum(s.points[hi].v) : "—"}{ms.unit ? ` ${ms.unit}` : ""}</b></span>
          ))}
        </p>
      )}
    </figure>
  );
}

/* ---------- Barres verticales (volumes quotidiens, histogrammes) ---------- */
export function VBarChart({ serie, height = 240 }: { serie: Serie; height?: number }) {
  const [hover, setHover] = useState<number | null>(null);
  const pts = serie.points ?? [];
  if (!pts.length) return <EmptyBlock title={serie.title} />;
  const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
  const vmax = Math.max(...pts.map((p) => p.v), 1);
  const bw = Math.max(2, (W - PL - PR) / pts.length - 2);
  return (
    <figure className="card" style={{ margin: 0, padding: 16 }}>
      <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{serie.title}</b></figcaption>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10 }} role="img" aria-label={serie.title}
        onMouseLeave={() => setHover(null)}>
        {[0, 1, 2, 3, 4].map((g) => {
          const y = PT + ((H - PT - PB) * g) / 4;
          const v = vmax - (vmax * g) / 4;
          return (
            <g key={g}>
              <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} />
              <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(v))}</text>
            </g>
          );
        })}
        {pts.map((p, i) => {
          const x = PL + ((W - PL - PR) * i) / pts.length;
          const h = (H - PT - PB) * (p.v / vmax);
          return (
            <rect key={i} x={x + 1} y={H - PB - h} width={bw} height={Math.max(h, p.v > 0 ? 1.5 : 0)} rx={2}
              fill="var(--accent)" opacity={hover === null || hover === i ? 1 : 0.45}
              stroke="var(--ink)" strokeWidth={0.5}
              onMouseEnter={() => setHover(i)}>
              <title>{`${p.t} — ${fmtNum(p.v)}${serie.unit ? ` ${serie.unit}` : ""}`}</title>
            </rect>
          );
        })}
        {[0, Math.floor(pts.length / 2), pts.length - 1].filter((v, i, a) => a.indexOf(v) === i).map((i) => (
          <text key={i} x={PL + ((W - PL - PR) * (i + 0.5)) / pts.length} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text>
        ))}
      </svg>
      {hover !== null && (
        <p className="chip" style={{ marginTop: 8 }}>{pts[hover].t} — <b>{fmtNum(pts[hover].v)}{serie.unit ? ` ${serie.unit}` : ""}</b></p>
      )}
    </figure>
  );
}

/* ---------- Histogramme (distribution) ---------- */
export function Histogram({ dist }: { dist: Distribution }) {
  const serie: Serie = {
    id: dist.id, title: dist.title, unit: dist.unit, kind: "bar",
    points: (dist.bins ?? []).map((b) => ({ t: b.label, v: b.value })),
  };
  return <VBarChart serie={serie} height={220} />;
}

/* ---------- Barres empilées (composition dans le temps) ---------- */
export function StackedBarChart({ st, height = 260 }: { st: StackedSerie; height?: number }) {
  const [hover, setHover] = useState<number | null>(null);
  const keys = (st.keys ?? []).slice(0, 6);
  const pts = st.points ?? [];
  if (!keys.length || !pts.length) return <EmptyBlock title={st.title} />;
  const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
  const totals = pts.map((p) => p.values.slice(0, keys.length).reduce((s, v) => s + (v || 0), 0));
  const vmax = Math.max(...totals, 1);
  const bw = Math.max(2, (W - PL - PR) / pts.length - 2);
  const shades = [1, 0.72, 0.5, 0.34, 0.22, 0.13];
  return (
    <figure className="card" style={{ margin: 0, padding: 16 }}>
      <figcaption style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
        <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{st.title}</b>
        <span style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {keys.map((k, i) => (
            <span key={k} style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em" }}>
              <span style={{ width: 11, height: 11, borderRadius: 3, border: "1px solid var(--ink)", background: "var(--accent)", opacity: shades[i] }} />
              {k}
            </span>
          ))}
        </span>
      </figcaption>
      <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10 }} role="img" aria-label={st.title}
        onMouseLeave={() => setHover(null)}>
        {[0, 1, 2, 3, 4].map((g) => {
          const y = PT + ((H - PT - PB) * g) / 4;
          return (
            <g key={g}>
              <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} />
              <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(vmax - (vmax * g) / 4))}</text>
            </g>
          );
        })}
        {pts.map((p, i) => {
          const x = PL + ((W - PL - PR) * i) / pts.length;
          let yAcc = H - PB;
          return (
            <g key={i} onMouseEnter={() => setHover(i)} opacity={hover === null || hover === i ? 1 : 0.5}>
              {keys.map((k, j) => {
                const v = p.values[j] || 0;
                const h = (H - PT - PB) * (v / vmax);
                yAcc -= h;
                return v > 0 ? (
                  <rect key={k} x={x + 1} y={yAcc} width={bw} height={Math.max(h - 1, 0.8)} rx={1.5}
                    fill="var(--accent)" opacity={shades[j]} stroke="var(--ink)" strokeWidth={0.4}>
                    <title>{`${p.t} · ${k} — ${fmtNum(v)}${st.unit ? ` ${st.unit}` : ""}`}</title>
                  </rect>
                ) : null;
              })}
            </g>
          );
        })}
        {[0, Math.floor(pts.length / 2), pts.length - 1].filter((v, i, a) => a.indexOf(v) === i).map((i) => (
          <text key={i} x={PL + ((W - PL - PR) * (i + 0.5)) / pts.length} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text>
        ))}
      </svg>
      {hover !== null && (
        <p className="chip" style={{ marginTop: 8, display: "inline-flex", gap: 12, flexWrap: "wrap" }}>
          <b>{pts[hover].t}</b>
          {keys.map((k, j) => <span key={k}>{k} : <b>{fmtNum(pts[hover].values[j] || 0)}</b></span>)}
          <span style={{ color: "var(--ink-3)" }}>total {fmtNum(totals[hover])}</span>
        </p>
      )}
    </figure>
  );
}

/* ---------- Barres horizontales (répartitions, géo) — deltas optionnels ---------- */
export function BarChart({ title, items, unit }: { title: string; items: BreakItem[]; unit?: string }) {
  const rows = (items ?? []).slice(0, 14);
  if (!rows.length) return <EmptyBlock title={title} />;
  const max = Math.max(...rows.map((r) => r.value), 1);
  return (
    <figure className="card" style={{ margin: 0, padding: 16 }}>
      <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b></figcaption>
      <div style={{ marginTop: 12, display: "grid", gap: 9 }}>
        {rows.map((r) => (
          <div key={r.label} title={`${r.label} — ${fmtNum(r.value)}${unit ? ` ${unit}` : ""}`}>
            <div style={{ display: "flex", justifyContent: "space-between", gap: 8, fontSize: 12.5 }}>
              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span>
              <span style={{ display: "inline-flex", gap: 8, alignItems: "baseline", flex: "none" }}>
                {r.delta_pct !== undefined && r.delta_pct !== null && (
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700, color: r.delta_pct >= 0 ? "var(--green)" : "var(--danger)" }}>
                    {r.delta_pct >= 0 ? "▲" : "▼"} {fmtPct(r.delta_pct)}
                  </span>
                )}
                <b style={{ fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{fmtNum(r.value)}{unit ? ` ${unit}` : ""}</b>
              </span>
            </div>
            <div style={{ marginTop: 3, height: 12, background: "rgba(20,24,20,0.06)", borderRadius: "0 3px 3px 0" }}>
              <div style={{ height: "100%", width: `${Math.max((r.value / max) * 100, 1)}%`, background: "var(--accent)", border: "1px solid var(--ink)", borderRadius: "0 3px 3px 0", boxSizing: "border-box" }} />
            </div>
          </div>
        ))}
      </div>
    </figure>
  );
}

/* ---------- Anneau ---------- */
export function Donut({ title, items }: { title: string; items: BreakItem[] }) {
  const rows = (items ?? []).filter((i) => i.value > 0).slice(0, 8);
  const total = rows.reduce((s, r) => s + r.value, 0);
  if (!total) return <EmptyBlock title={title} />;
  const R = 74, C = 2 * Math.PI * R;
  let acc = 0;
  const shades = [1, 0.78, 0.58, 0.42, 0.3, 0.22, 0.15, 0.1];
  return (
    <figure className="card" style={{ margin: 0, padding: 16 }}>
      <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b></figcaption>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 18, alignItems: "center", marginTop: 12 }}>
        <svg viewBox="0 0 200 200" style={{ width: 180, maxWidth: "100%" }} role="img" aria-label={title}>
          {rows.map((r, i) => {
            const frac = r.value / total;
            const off = acc; acc += frac;
            return (
              <circle key={r.label} cx={100} cy={100} r={R} fill="none"
                stroke="var(--accent)" strokeOpacity={shades[i % shades.length]}
                strokeWidth={30} strokeDasharray={`${frac * C} ${C}`} strokeDashoffset={-off * C}
                transform="rotate(-90 100 100)">
                <title>{`${r.label} — ${fmtNum(r.value)} (${((100 * r.value) / total).toFixed(1)} %)`}</title>
              </circle>
            );
          })}
          <circle cx={100} cy={100} r={R} fill="none" stroke="var(--ink)" strokeWidth={1} opacity={0.5} />
        </svg>
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "grid", gap: 6, minWidth: 200, flex: 1 }}>
          {rows.map((r, i) => (
            <li key={r.label} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12.5 }}>
              <span style={{ width: 11, height: 11, borderRadius: 3, border: "1px solid var(--ink)", background: "var(--accent)", opacity: shades[i % shades.length] }} />
              <span style={{ flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span>
              <b style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>{((100 * r.value) / total).toFixed(1)} %</b>
            </li>
          ))}
        </ul>
      </div>
    </figure>
  );
}

/* ---------- Jauge (taux, complétude, couverture) ---------- */
export function GaugeCard({ g }: { g: Gauge }) {
  const frac = Math.max(0, Math.min(1, g.max ? g.value / g.max : 0));
  const R = 60, C = Math.PI * R;
  return (
    <article className="card" style={{ padding: "14px 16px", minWidth: 0 }} title={g.help}>
      <svg viewBox="0 0 150 84" style={{ width: "100%", maxWidth: 190, display: "block", margin: "0 auto" }} role="img" aria-label={`${g.label} : ${fmtNum(g.value)}${g.unit ?? ""} sur ${fmtNum(g.max)}`}>
        <path d={`M15,75 A${R},${R} 0 0 1 135,75`} fill="none" stroke="rgba(20,24,20,0.08)" strokeWidth={13} strokeLinecap="round" />
        <path d={`M15,75 A${R},${R} 0 0 1 135,75`} fill="none" stroke="var(--accent)" strokeWidth={13} strokeLinecap="round"
          strokeDasharray={`${frac * C} ${C}`} />
        <text x={75} y={66} textAnchor="middle" fontFamily="var(--font-display)" fontWeight={700} fontSize={22} fill="var(--ink)">
          {fmtNum(g.value)}{g.unit ? <tspan fontSize={12} fill="var(--ink-2)"> {g.unit}</tspan> : null}
        </text>
        <text x={75} y={80} textAnchor="middle" fontSize={9} fill="var(--ink-3)" fontFamily="var(--font-mono)">{(frac * 100).toFixed(0)} % de {fmtNum(g.max)}{g.unit ? ` ${g.unit}` : ""}</text>
      </svg>
      <p className="klabel" style={{ margin: "8px 0 0", textAlign: "center" }}>{g.label}</p>
    </article>
  );
}

/* ---------- Calendrier de chaleur ---------- */
export function CalendarHeatmap({ title, cells }: { title: string; cells: { date: string; value: number }[] }) {
  if (!cells?.length) return <EmptyBlock title={title} />;
  const byDate = new Map(cells.map((c) => [c.date, c.value]));
  const dates = cells.map((c) => c.date).sort();
  const end = new Date(dates[dates.length - 1] + "T12:00:00");
  const max = Math.max(...cells.map((c) => c.value), 1);
  const weeks = 26, cols: { date: string; v: number }[][] = [];
  const cur = new Date(end);
  cur.setDate(cur.getDate() - (weeks * 7 - 1));
  for (let w = 0; w < weeks; w++) {
    const col: { date: string; v: number }[] = [];
    for (let d = 0; d < 7; d++) {
      const iso = cur.toISOString().slice(0, 10);
      col.push({ date: iso, v: byDate.get(iso) ?? 0 });
      cur.setDate(cur.getDate() + 1);
    }
    cols.push(col);
  }
  return (
    <figure className="card" style={{ margin: 0, padding: 16 }}>
      <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b> <span className="klabel">last 26 weeks</span></figcaption>
      <div className="tbl-wrap" style={{ marginTop: 12 }}>
        <svg viewBox={`0 0 ${weeks * 14} ${7 * 14}`} style={{ minWidth: 480, width: "100%", height: "auto" }} role="img" aria-label={title}>
          {cols.map((col, w) => col.map((c, d) => (
            <rect key={c.date} x={w * 14} y={d * 14} width={12} height={12} rx={2.5}
              fill={c.v ? "var(--accent)" : "rgba(20,24,20,0.07)"} fillOpacity={c.v ? 0.25 + 0.75 * (c.v / max) : 1}
              stroke="rgba(20,24,20,0.15)" strokeWidth={0.5}>
              <title>{`${c.date} — ${fmtNum(c.v)}`}</title>
            </rect>
          )))}
        </svg>
      </div>
    </figure>
  );
}

/* ---------- Heatmap horaire 7 × 24 (activité par heure) ---------- */
const DOW = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
export function HourHeatmap({ title, cells }: { title: string; cells: HourCell[] }) {
  if (!cells?.length) return <EmptyBlock title={title} />;
  const grid = new Map(cells.map((c) => [`${c.dow}-${c.hour}`, c.value]));
  const max = Math.max(...cells.map((c) => c.value), 1);
  const CW = 24, CH = 20, LX = 34, LY = 16;
  return (
    <figure className="card" style={{ margin: 0, padding: 16 }}>
      <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b> <span className="klabel">jour × heure</span></figcaption>
      <div className="tbl-wrap" style={{ marginTop: 12 }}>
        <svg viewBox={`0 0 ${LX + 24 * CW} ${LY + 7 * CH}`} style={{ minWidth: 520, width: "100%", height: "auto" }} role="img" aria-label={title}>
          {[0, 6, 12, 18, 23].map((h) => (
            <text key={h} x={LX + h * CW + CW / 2} y={11} textAnchor="middle" fontSize={9} fill="var(--ink-3)" fontFamily="var(--font-mono)">{h} h</text>
          ))}
          {DOW.map((d, i) => (
            <text key={d} x={LX - 6} y={LY + i * CH + CH / 2 + 3} textAnchor="end" fontSize={9} fill="var(--ink-3)" fontFamily="var(--font-mono)">{d}</text>
          ))}
          {Array.from({ length: 7 }, (_, d) => Array.from({ length: 24 }, (_, h) => {
            const v = grid.get(`${d}-${h}`) ?? 0;
            return (
              <rect key={`${d}-${h}`} x={LX + h * CW} y={LY + d * CH} width={CW - 2} height={CH - 2} rx={2.5}
                fill={v ? "var(--accent)" : "rgba(20,24,20,0.07)"} fillOpacity={v ? 0.22 + 0.78 * (v / max) : 1}
                stroke="rgba(20,24,20,0.15)" strokeWidth={0.5}>
                <title>{`${DOW[d]} ${h} h — ${fmtNum(v)}`}</title>
              </rect>
            );
          }))}
        </svg>
      </div>
    </figure>
  );
}

/* ---------- Statistiques de série (min/max/moy/méd/σ) ---------- */
export function StatSummary({ serie }: { serie: Serie }) {
  const vs = (serie.points ?? []).map((p) => p.v).filter((v) => typeof v === "number");
  if (vs.length < 2) return null;
  const sorted = [...vs].sort((a, b) => a - b);
  const mean = vs.reduce((s, v) => s + v, 0) / vs.length;
  const med = sorted[Math.floor(sorted.length / 2)];
  const sd = Math.sqrt(vs.reduce((s, v) => s + (v - mean) ** 2, 0) / vs.length);
  const items: [string, number][] = [
    ["Min", sorted[0]], ["Max", sorted[sorted.length - 1]],
    ["Average", Math.round(mean * 100) / 100], ["Median", med],
    ["Écart-type", Math.round(sd * 100) / 100],
  ];
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 8 }}>
      {items.map(([l, v]) => (
        <span key={l} className="chip" style={{ fontSize: 11 }}>
          <span style={{ color: "var(--ink-3)" }}>{l}</span> <b style={{ fontFamily: "var(--font-mono)" }}>{fmtNum(v)}</b>
        </span>
      ))}
    </div>
  );
}

/* ---------- Tableau : tri, recherche, pagination ---------- */
export function DataTable({ spec, pageSize = 25 }: { spec: TableSpec; pageSize?: number }) {
  const [q, setQ] = useState("");
  const [sort, setSort] = useState<{ col: number; dir: 1 | -1 } | null>(null);
  const [page, setPage] = useState(0);
  const rows = useMemo(() => {
    let r = spec.rows ?? [];
    if (q) r = r.filter((row) => row.some((c) => String(c).toLowerCase().includes(q.toLowerCase())));
    if (sort) r = [...r].sort((a, b) => {
      const x = a[sort.col], y = b[sort.col];
      const nx = typeof x === "number" ? x : parseFloat(String(x).replace(/[^\d.,-]/g, "").replace(",", "."));
      const ny = typeof y === "number" ? y : parseFloat(String(y).replace(/[^\d.,-]/g, "").replace(",", "."));
      if (!Number.isNaN(nx) && !Number.isNaN(ny)) return (nx - ny) * sort.dir;
      return String(x).localeCompare(String(y), "fr") * sort.dir;
    });
    return r;
  }, [spec.rows, q, sort]);
  const pages = Math.max(1, Math.ceil(rows.length / pageSize));
  const cur = Math.min(page, pages - 1);
  return (
    <section className="card" style={{ padding: 16 }}>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "space-between", alignItems: "center" }}>
        <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{spec.title}</b>
        <input className="input" style={{ maxWidth: 240 }} placeholder="Search…" value={q}
          onChange={(e) => { setQ(e.target.value); setPage(0); }} aria-label={`Search in ${spec.title}`} />
      </div>
      <div className="tbl-wrap" style={{ marginTop: 10 }}>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13 }}>
          <thead>
            <tr>
              {spec.columns.map((c, i) => (
                <th key={c} onClick={() => setSort((s) => ({ col: i, dir: s?.col === i && s.dir === 1 ? -1 : 1 }))}
                  style={{ cursor: "pointer", textAlign: "left", padding: "8px 10px", background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.06em", whiteSpace: "nowrap", userSelect: "none" }}
                  aria-sort={sort?.col === i ? (sort.dir === 1 ? "ascending" : "descending") : "none"}>
                  {c} {sort?.col === i ? (sort.dir === 1 ? "▲" : "▼") : "↕"}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.slice(cur * pageSize, (cur + 1) * pageSize).map((row, ri) => (
              <tr key={ri} style={{ background: ri % 2 ? "var(--surface-2)" : "var(--surface)" }}>
                {row.map((c, ci) => (
                  <td key={ci} style={{ padding: "7px 10px", borderBottom: "1px solid var(--line)", whiteSpace: "nowrap" }}>
                    {typeof c === "number" ? fmtNum(c) : c}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 10, flexWrap: "wrap", gap: 8 }}>
        <span className="klabel">{fmtInt(rows.length)} rows</span>
        <span style={{ display: "flex", gap: 6 }}>
          <button type="button" className="btn btn-ghost" disabled={cur === 0} onClick={() => setPage(cur - 1)}>←</button>
          <span className="chip">{cur + 1} / {pages}</span>
          <button type="button" className="btn btn-ghost" disabled={cur >= pages - 1} onClick={() => setPage(cur + 1)}>→</button>
        </span>
      </div>
    </section>
  );
}

/* ---------- Records / faits marquants ---------- */
export function RecordCard({ r }: { r: RecordFact }) {
  return (
    <article className="card" style={{ padding: "12px 16px", display: "flex", justifyContent: "space-between", gap: 12, alignItems: "baseline", background: "var(--surface-2)" }}>
      <span style={{ fontSize: 13, color: "var(--ink-2)" }}>{r.label}</span>
      <span style={{ textAlign: "right" }}>
        <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{r.value}</b>
        {r.date && <span className="klabel" style={{ display: "block" }}>{r.date}</span>}
      </span>
    </article>
  );
}

/* ---------- Menu de rapports PDF (5 rapports + personnalisé v3) ---------- */
export function PdfButton({ period, from, to, endpoint = "/api/stats/report" }: { period: string; from?: string; to?: string; endpoint?: string }) {
  const [open, setOpen] = useState(false);
  const [busy, setBusy] = useState<string | null>(null);
  const [builder, setBuilder] = useState(false);
  const box = useRef<HTMLSpanElement>(null);
  useEffect(() => {
    if (!open) return;
    const close = (e: MouseEvent) => {
      if (box.current && !box.current.contains(e.target as Node)) setOpen(false);
    };
    document.addEventListener("mousedown", close);
    return () => document.removeEventListener("mousedown", close);
  }, [open]);
  const url = (mode: string) => {
    const p = new URLSearchParams({ period, mode });
    if (from) p.set("from", from);
    if (to) p.set("to", to);
    return `${endpoint}?${p}`;
  };
  const dl = (mode: string) => {
    setBusy(mode);
    setOpen(false);
    const a = document.createElement("a");
    a.href = url(mode);
    a.download = "";
    document.body.appendChild(a);
    a.click();
    a.remove();
    setTimeout(() => setBusy(null), 3000);
  };
  return (
    <span ref={box} style={{ position: "relative", display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
      <button type="button" className="btn btn-primary" onClick={() => dl("complet")} disabled={!!busy}>
        {busy ? "Generating…" : "⬇ Full PDF report"}
      </button>
      <button type="button" className="btn btn-ghost" onClick={() => setOpen((o) => !o)} disabled={!!busy}
        aria-haspopup="menu" aria-expanded={open}>
        Autres rapports ▾
      </button>
      <button type="button" className="btn btn-ghost" onClick={() => setBuilder(true)} disabled={!!busy}>
        🛠 Custom report
      </button>
      {builder && (
        <ReportBuilder period={period} from={from} to={to} endpoint={endpoint}
          onClose={() => setBuilder(false)} />
      )}
      {open && (
        <div role="menu" className="card" style={{ position: "absolute", top: "calc(100% + 6px)", right: 0, zIndex: 50, minWidth: 300, padding: 6, background: "var(--surface)", boxShadow: "0 10px 28px rgba(20,24,20,0.18)" }}>
          {REPORT_MODES.map((m) => (
            <button key={m.id} type="button" role="menuitem" onClick={() => dl(m.id)}
              style={{ display: "block", width: "100%", textAlign: "left", border: 0, background: "none", cursor: "pointer", padding: "9px 10px", borderRadius: 6 }}
              onMouseEnter={(e) => (e.currentTarget.style.background = "var(--surface-2)")}
              onMouseLeave={(e) => (e.currentTarget.style.background = "none")}>
              <b style={{ display: "block", fontSize: 13, fontFamily: "var(--font-display)" }}>{m.label}</b>
              <span className="klabel" style={{ fontSize: 11 }}>{m.desc}</span>
            </button>
          ))}
        </div>
      )}
    </span>
  );
}

/* ---------- v3 : constructeur de rapports personnalisés ----------
   Compose un PDF bloc par bloc : catalogue dérivé du dashboard
   (GET /api/stats/catalog), rendu au choix par bloc, ordre libre, modèles
   sauvegardés en localStorage (clé ka-stats-rapports, propre au site).
   Contrat : SPEC.md §3bis. Rendu dans PdfButton — aucune modif des pages. */
export type CatalogBlock = {
  key: string; section: string; title: string;
  renders: string[]; default_render: string; count?: number;
};
type BuilderSel = { key: string; render: string };
type BuilderTpl = { name: string; title: string; blocks: BuilderSel[] };

const RENDER_LABELS: Record<string, string> = {
  line: "Courbe", area: "Aire", bar: "Barres verticales",
  bars: "Barres horizontales", donut: "Anneau", lines: "Multi-courbes",
  stacked: "Stacked bars", histogram: "Histogram", heatmap: "Heatmap",
  cards: "Cartes", gauges: "Jauges", table: "Tableau",
};
const SECTION_LABELS: Record<string, string> = {
  kpis: "Indicateurs", gauges: "Jauges", series: "Évolution",
  multiseries: "Multi-courbes", stacked: "Compositions",
  breakdowns: "Breakdowns", distributions: "Distributions",
  geo: "Geography", heatmap: "Calendar", hourly: "Hourly activity",
  tables: "Tableaux", records: "Records",
};
const TPL_KEY = "ka-stats-rapports";

function loadTemplates(): BuilderTpl[] {
  try { return JSON.parse(localStorage.getItem(TPL_KEY) ?? "[]"); }
  catch { return []; }
}
function saveTemplates(t: BuilderTpl[]) {
  try { localStorage.setItem(TPL_KEY, JSON.stringify(t)); } catch { /* plein/privé */ }
}

export function ReportBuilder({
  period, from, to, endpoint = "/api/stats/report", onClose,
}: {
  period: string; from?: string; to?: string; endpoint?: string; onClose: () => void;
}) {
  const [cat, setCat] = useState<CatalogBlock[] | null>(null);
  const [err, setErr] = useState("");
  const [sel, setSel] = useState<BuilderSel[]>([]);
  const [title, setTitle] = useState("");
  const [busy, setBusy] = useState(false);
  const [tpls, setTpls] = useState<BuilderTpl[]>(loadTemplates);
  const catalogUrl = endpoint.replace(/\/report$/, "/catalog");

  useEffect(() => {
    const p = new URLSearchParams({ period });
    if (from) p.set("from", from);
    if (to) p.set("to", to);
    fetch(`${catalogUrl}?${p}`)
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((d) => setCat(d.blocks ?? []))
      .catch(() => setErr("Catalog unavailable — try again later."));
  }, [period, from, to, catalogUrl]);

  useEffect(() => {
    const esc = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", esc);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", esc); document.body.style.overflow = prev; };
  }, [onClose]);

  const add = (b: CatalogBlock) =>
    setSel((s) => s.some((x) => x.key === b.key && x.render === b.default_render)
      ? s : [...s, { key: b.key, render: b.default_render }]);
  const move = (i: number, d: number) => setSel((s) => {
    const j = i + d;
    if (j < 0 || j >= s.length) return s;
    const n = [...s]; [n[i], n[j]] = [n[j], n[i]]; return n;
  });

  const generate = async () => {
    if (busy || !sel.length) return;
    setBusy(true); setErr("");
    try {
      const body: Record<string, unknown> = { title, period, blocks: sel };
      if (from && to) { body.from = from; body.to = to; }
      const r = await fetch(`${endpoint}/custom`, {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      if (!r.ok) throw new Error(String(r.status));
      const blob = await r.blob();
      const m = (r.headers.get("Content-Disposition") ?? "").match(/filename="?([^";]+)/);
      const a = document.createElement("a");
      a.href = URL.createObjectURL(blob);
      a.download = m ? m[1] : "rapport-personnalise.pdf";
      document.body.appendChild(a); a.click(); a.remove();
      setTimeout(() => URL.revokeObjectURL(a.href), 4000);
    } catch {
      setErr("Generation failed — try again.");
    }
    setBusy(false);
  };

  const groups: [string, CatalogBlock[]][] = [];
  for (const b of cat ?? []) {
    const g = groups.find(([s]) => s === b.section);
    if (g) g[1].push(b); else groups.push([b.section, [b]]);
  }
  const selKeys = new Set(sel.map((s) => s.key));
  const mono: React.CSSProperties = { fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em" };

  return (
    <div role="dialog" aria-modal="true" aria-label="Custom report"
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      style={{ position: "fixed", inset: 0, zIndex: "var(--z-modal, 900)" as never, background: "rgba(20,24,20,0.45)", display: "flex", alignItems: "flex-start", justifyContent: "center", padding: "4vh 14px", overflow: "auto" }}>
      <div className="card" style={{ width: "min(980px,100%)", maxHeight: "92vh", display: "flex", flexDirection: "column", background: "var(--surface)", padding: 0, textAlign: "left", cursor: "default" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, padding: "16px 20px", borderBottom: "1px solid var(--line)" }}>
          <b style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>
            Custom report <span className="klabel">· period: {from && to ? `${from} → ${to}` : (PERIODS.find((p) => p.id === period)?.label ?? period)}</span>
          </b>
          <button type="button" className="btn btn-ghost" onClick={onClose}>✕ Fermer</button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", overflow: "auto", flex: 1 }}>
          <div style={{ padding: "14px 20px", minWidth: 0, borderRight: "1px solid var(--line)" }}>
            <h3 style={{ ...mono, color: "var(--ink-3)", margin: "4px 0 10px" }}>Blocs disponibles ({cat?.length ?? "…"})</h3>
            {!cat && !err && <p className="klabel">Chargement du catalogue…</p>}
            {groups.map(([secId, bs]) => (
              <div key={secId}>
                <p style={{ ...mono, color: "var(--ink-2)", margin: "12px 0 6px" }}>{SECTION_LABELS[secId] ?? secId}</p>
                {bs.map((b) => (
                  <div key={b.key} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, padding: "7px 10px", border: "1px solid var(--line)", borderRadius: 8, marginBottom: 6, fontSize: 13, opacity: selKeys.has(b.key) ? 0.45 : 1 }}>
                    <span style={{ minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={b.title}>{b.title}</span>
                    <button type="button" className="btn btn-ghost" onClick={() => add(b)} aria-label={`Ajouter ${b.title}`} style={{ flex: "none" }}>+</button>
                  </div>
                ))}
              </div>
            ))}
          </div>
          <div style={{ padding: "14px 20px", minWidth: 0 }}>
            <h3 style={{ ...mono, color: "var(--ink-3)", margin: "4px 0 10px" }}>Composition du rapport ({sel.length})</h3>
            <label className="klabel" htmlFor="rb-title">Titre du rapport</label>
            <input id="rb-title" className="input" style={{ width: "100%", margin: "4px 0 12px", boxSizing: "border-box" }}
              maxLength={80} placeholder="Ex. : Revue mensuelle" value={title} onChange={(e) => setTitle(e.target.value)} />
            {sel.length ? sel.map((s, i) => {
              const b = (cat ?? []).find((x) => x.key === s.key) ?? { title: s.key, renders: [s.render] } as CatalogBlock;
              return (
                <div key={`${s.key}:${s.render}:${i}`} style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", border: "1px solid var(--ink)", borderRadius: 8, marginBottom: 6, background: "var(--surface-2)", fontSize: 13 }}>
                  <button type="button" onClick={() => move(i, -1)} disabled={i === 0} aria-label="Monter" style={{ border: 0, background: "none", cursor: "pointer", opacity: i === 0 ? 0.25 : 1 }}>▲</button>
                  <button type="button" onClick={() => move(i, 1)} disabled={i === sel.length - 1} aria-label="Descendre" style={{ border: 0, background: "none", cursor: "pointer", opacity: i === sel.length - 1 ? 0.25 : 1 }}>▼</button>
                  <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }} title={b.title}><b>{i + 1}.</b> {b.title}</span>
                  {b.renders.length > 1 ? (
                    <select className="input" value={s.render} aria-label="Rendu" style={{ maxWidth: 150, padding: "4px 6px", fontSize: 12 }}
                      onChange={(e) => setSel((xs) => xs.map((x, j) => j === i ? { ...x, render: e.target.value } : x))}>
                      {b.renders.map((r) => <option key={r} value={r}>{RENDER_LABELS[r] ?? r}</option>)}
                    </select>
                  ) : <span className="klabel">{RENDER_LABELS[s.render] ?? s.render}</span>}
                  <button type="button" onClick={() => setSel((xs) => xs.filter((_, j) => j !== i))} aria-label="Retirer" style={{ border: 0, background: "none", cursor: "pointer" }}>✕</button>
                </div>
              );
            }) : (
              <div style={{ border: "1px dashed var(--line)", borderRadius: 8, padding: 16, color: "var(--ink-3)", fontSize: 13, textAlign: "center" }}>
                No blocks yet — add blocks from the left column, or load a template below.
              </div>
            )}
            <p style={{ display: "flex", gap: 8, margin: "10px 0 0" }}>
              <button type="button" className="btn btn-ghost" disabled={!cat?.length}
                onClick={() => setSel((cat ?? []).map((b) => ({ key: b.key, render: b.default_render })))}>Add all</button>
              <button type="button" className="btn btn-ghost" disabled={!sel.length} onClick={() => setSel([])}>Vider</button>
            </p>
            {err && <p style={{ color: "var(--danger)", fontSize: 12.5, margin: "6px 0 0" }}>{err}</p>}
          </div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10, flexWrap: "wrap", padding: "14px 20px", borderTop: "1px solid var(--line)" }}>
          <span style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap" }}>
            <select className="input" aria-label="Saved templates" style={{ maxWidth: 210 }} value=""
              onChange={(e) => {
                const t = tpls[Number(e.target.value)];
                if (!t) return;
                setTitle(t.title || t.name);
                setSel((t.blocks ?? []).filter((s) => (cat ?? []).some((b) => b.key === s.key)).map((s) => ({ ...s })));
              }}>
              <option value="">Templates ({tpls.length})…</option>
              {tpls.map((t, i) => <option key={t.name} value={i}>{t.name}</option>)}
            </select>
            <button type="button" className="btn btn-ghost" disabled={!sel.length}
              onClick={() => {
                const name = window.prompt("Template name:", title || "My report");
                if (!name) return;
                const next = [...tpls.filter((t) => t.name !== name), { name, title, blocks: sel.map((s) => ({ ...s })) }];
                setTpls(next); saveTemplates(next);
              }}>💾 Sauvegarder</button>
            <button type="button" className="btn btn-ghost" disabled={!tpls.length}
              onClick={() => {
                const name = window.prompt(`Name of the template to delete:\n${tpls.map((t) => `· ${t.name}`).join("\n")}`);
                if (!name) return;
                const next = tpls.filter((t) => t.name !== name);
                setTpls(next); saveTemplates(next);
              }}>🗑 Supprimer</button>
          </span>
          <button type="button" className="btn btn-primary" disabled={!sel.length || busy} onClick={generate}>
            {busy ? "Generating…" : "⬇ Generate the PDF"}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ---------- États ---------- */
export function EmptyBlock({ title }: { title: string }) {
  return (
    <div className="card" style={{ padding: 20, background: "var(--surface-2)", borderStyle: "dashed" }}>
      <b style={{ fontFamily: "var(--font-display)", fontSize: 14 }}>{title}</b>
      <p className="klabel" style={{ margin: "6px 0 0" }}>Not measured yet — no data available for this period.</p>
    </div>
  );
}

export function Fraicheur({ updated, onRefresh }: { updated: string; onRefresh: () => void }) {
  return (
    <p style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", margin: 0 }}>
      <span className="klabel">Updated {new Date(updated).toLocaleString("en-CA", { dateStyle: "medium", timeStyle: "short" })}</span>
      <button type="button" className="btn btn-ghost" onClick={onRefresh}>↻ Refresh</button>
    </p>
  );
}