/**
 * Trouve-KA — panneau client /stats (kit ka-ui/stats v2, contrat SPEC.md)
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 *
 * Ordre des sections (SPEC §1) : KPI → période → jauges → évolutions
 * (séries + stats, multi-courbes, empilées) → répartitions → distributions →
 * calendriers (heatmap 26 sem. + horaire 7×24) → tableaux → records →
 * fraîcheur. PdfButton v2 = menu des 5 rapports.
 */

"use client";

import { useCallback, useEffect, useState } from "react";
import {
  BarChart,
  CalendarHeatmap,
  DataTable,
  Donut,
  EmptyBlock,
  Fraicheur,
  GaugeCard,
  Histogram,
  HourHeatmap,
  KpiCard,
  LineChart,
  MultiLineChart,
  PdfButton,
  PeriodSelector,
  RecordCard,
  StackedBarChart,
  StatSummary,
  type BreakItem,
  type Distribution,
  type Gauge,
  type HourCell,
  type Kpi,
  type MultiSerie,
  type RecordFact,
  type Serie,
  type StackedSerie,
  type TableSpec,
} from "@/ka/stats/kacharts";

type Breakdown = { id: string; title: string; kind?: "donut" | "bar" | "bars"; 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[];
  heatmap?: { title: string; cells: { date: string; value: number }[] };
  hourly?: { title: string; cells: HourCell[] };
  tables: TableSpec[];
  records: RecordFact[];
};

/** Les séries clés reçoivent un résumé min/max/moy/méd/σ sous la courbe. */
const STAT_SERIES = new Set(["cumul", "crawlees", "indexees", "recherches"]);

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

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

  const load = useCallback(async () => {
    setLoading(true);
    setError(false);
    try {
      const p = new URLSearchParams({ period });
      if (hasCustom) {
        p.set("from", custom.from);
        p.set("to", custom.to);
      }
      const res = await fetch(`/api/stats/dashboard?${p}`);
      if (!res.ok) throw new Error(`Erreur ${res.status}`);
      setData((await res.json()) as Dashboard);
    } catch {
      setError(true);
    } finally {
      setLoading(false);
    }
  }, [period, custom.from, custom.to, hasCustom]);

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

  const topQueries = data?.tables.find((t) => t.id === "topq");
  const otherTables = data?.tables.filter((t) => t.id !== "topq") ?? [];

  return (
    <div>
      <p className="kicker">Transparence</p>
      <div className="mt-3 flex flex-wrap items-start justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold tracking-[-0.03em] text-ink">
            Statistiques du moteur
          </h1>
          <p className="mt-2 max-w-xl text-sm text-ink-2">
            Le tableau de bord complet du moteur de recherche du Groupe KA :
            indexation des sites de l&apos;écosystème, crawl, erreurs et
            recherches — calculé sur les données réelles du moteur, rien d&apos;inventé.
          </p>
        </div>
        <div className="flex flex-col items-start gap-3 sm:items-end">
          <PdfButton period={period} from={hasCustom ? custom.from : undefined} to={hasCustom ? custom.to : undefined} />
          {data && <Fraicheur updated={data.updated} onRefresh={() => void load()} />}
        </div>
      </div>

      <div className="mt-8">
        <PeriodSelector
          value={period}
          onChange={(p) => {
            setCustom({ from: "", to: "" });
            setPeriod(p);
          }}
          custom={custom}
          onCustom={(from, to) => setCustom({ from, to })}
        />
      </div>

      {error && (
        <div className="card mt-8" style={{ padding: 20 }}>
          <b style={{ fontFamily: "var(--font-display)" }}>Statistiques indisponibles</b>
          <p className="klabel" style={{ margin: "6px 0 12px" }}>
            Le moteur n&apos;a pas pu répondre. Réessayez dans un instant.
          </p>
          <button type="button" className="btn btn-primary" onClick={() => void load()}>
            Réessayer
          </button>
        </div>
      )}

      {!error && !data && loading && (
        <p className="klabel mt-10" role="status">
          Chargement des statistiques…
        </p>
      )}

      {data && (
        <div style={{ opacity: loading ? 0.55 : 1, transition: "opacity 0.15s" }}>
          {/* 1. Bandeau KPI (+ sparklines) */}
          <section aria-label="Indicateurs clés" className="mt-6 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
            {data.kpis.map((k) => (
              <KpiCard key={k.id} k={k} />
            ))}
          </section>

          {/* 3. Jauges : taux & couvertures */}
          {data.gauges && data.gauges.length > 0 && (
            <section aria-label="Taux et couvertures" className="mt-8 grid grid-cols-2 gap-3 md:grid-cols-4">
              {data.gauges.map((g) => (
                <GaugeCard key={g.id} g={g} />
              ))}
            </section>
          )}

          {/* 4. Évolutions : séries, multi-courbes, empilées */}
          <section aria-label="Évolution" className="mt-8 grid grid-cols-1 gap-4 xl:grid-cols-2">
            {data.series.map((s, i) => (
              <div key={s.id} className={i === 0 ? "xl:col-span-2" : undefined}>
                <LineChart serie={s} />
                {STAT_SERIES.has(s.id) && <StatSummary serie={s} />}
              </div>
            ))}
            {(data.multiseries ?? []).map((ms) => (
              <div key={ms.id} className="xl:col-span-2">
                <MultiLineChart ms={ms} />
              </div>
            ))}
            {(data.stacked ?? []).map((st) => (
              <div key={st.id} className="xl:col-span-2">
                <StackedBarChart st={st} />
              </div>
            ))}
          </section>

          {/* 5. Répartitions */}
          <section aria-label="Répartitions" className="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2">
            {data.breakdowns.map((b) =>
              b.kind === "bar" || b.kind === "bars" ? (
                <BarChart key={b.id} title={b.title} items={b.items} unit="pages" />
              ) : (
                <Donut key={b.id} title={b.title} items={b.items} />
              ),
            )}
          </section>

          {/* Distributions / histogrammes */}
          {data.distributions && data.distributions.length > 0 && (
            <section aria-label="Distributions" className="mt-8 grid grid-cols-1 gap-4 xl:grid-cols-2">
              {data.distributions.map((d) => (
                <Histogram key={d.id} dist={d} />
              ))}
            </section>
          )}

          {/* 7. Calendriers : 26 semaines + activité horaire 7×24 */}
          {data.heatmap && (
            <section aria-label="Calendrier d'activité" className="mt-8">
              <CalendarHeatmap title={data.heatmap.title} cells={data.heatmap.cells} />
            </section>
          )}
          {data.hourly && (
            <section aria-label="Activité horaire" className="mt-4">
              <HourHeatmap title={data.hourly.title} cells={data.hourly.cells} />
            </section>
          )}

          {/* 8. Tableaux détaillés */}
          <section aria-label="Tableaux détaillés" className="mt-8 grid grid-cols-1 gap-4">
            {topQueries ? (
              <DataTable spec={topQueries} />
            ) : (
              <EmptyBlock title="Top requêtes de recherche" />
            )}
            {otherTables.map((t) => (
              <DataTable key={t.id} spec={t} />
            ))}
          </section>

          {/* 9. Records & faits marquants */}
          {data.records.length > 0 && (
            <section aria-label="Records et faits marquants" className="mt-8">
              <h2 className="text-lg font-bold tracking-[-0.02em] text-ink">
                Records &amp; faits marquants
              </h2>
              <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2">
                {data.records.map((r) => (
                  <RecordCard key={r.label} r={r} />
                ))}
              </div>
            </section>
          )}

          {/* 10. Fraîcheur (rappel en bas de page) */}
          <div className="mt-10">
            <Fraicheur updated={data.updated} onRefresh={() => void load()} />
          </div>
        </div>
      )}
    </div>
  );
}