"use client";
// Vue générale : indicateurs clés, coût par jour (14 jours), modèles les plus
// utilisés (30 jours), état de la dernière ingestion.
import { Activity } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Badge, Card, EmptyState, ProgressBar, Skeleton } from "@/components/ui";
import {
  BarChart, ErrorBanner, SectionTitle, StatTile,
  fmtDate, fmtInt, fmtUSD, useFetchJson, type BarDatum,
} from "./shared";

type Overview = {
  users: number;
  students: number;
  activeWeek: number;
  conversations: number;
  messages: number;
  documents: number;
  chunks: number;
  flagsOpen: number;
  apiErrors7d: number;
  costMonth: number;
  costToday: number;
  budgets: { dailyPerUserUSD: number; monthlyPerUserUSD: number; monthlyGlobalUSD: number; dailyRequestsPerUser: number };
  lastIngestion: { id: number; started_at: string; finished_at: string | null; status: string; chunks_created: number; files_ingested: number } | null;
  costByDay: { day: string; cost: number; calls: number }[];
  topModels: { model: string; calls: number; cost: number; tin: number | null; tout: number | null }[];
  invalidCitations7d: number;
};

function ingestionTone(status: string): "green" | "red" | "amber" {
  const s = status.toLowerCase();
  if (["ok", "success", "succès", "completed", "done"].some((k) => s.includes(k))) return "green";
  if (["error", "fail", "échec", "erreur"].some((k) => s.includes(k))) return "red";
  return "amber";
}

export function AdminOverview() {
  const { data, error, loading, reload } = useFetchJson<Overview>("/api/admin/overview");

  if (loading) {
    return (
      <div className="animate-fade-up">
        <PageHeader title="Vue générale" subtitle="État de la plateforme en un coup d'œil" />
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
          {Array.from({ length: 10 }).map((_, i) => (
            <Skeleton key={i} className="h-24" />
          ))}
        </div>
        <div className="mt-4 grid gap-4 lg:grid-cols-2">
          <Skeleton className="h-64" />
          <Skeleton className="h-64" />
        </div>
      </div>
    );
  }

  if (error || !data) {
    return (
      <div>
        <PageHeader title="Vue générale" />
        <ErrorBanner message={error ?? "Données indisponibles."} onRetry={reload} />
      </div>
    );
  }

  // Série des 14 derniers jours, jours sans usage inclus (valeur 0).
  const days: BarDatum[] = [];
  for (let i = 13; i >= 0; i--) {
    const d = new Date();
    d.setDate(d.getDate() - i);
    const key = d.toISOString().slice(0, 10);
    const row = data.costByDay.find((r) => r.day === key);
    days.push({ label: key.slice(5), value: row?.cost ?? 0, hint: `${fmtInt(row?.calls ?? 0)} appels` });
  }

  const budgetRatio = data.budgets.monthlyGlobalUSD > 0 ? data.costMonth / data.budgets.monthlyGlobalUSD : 0;
  const ingest = data.lastIngestion;

  return (
    <div className="animate-fade-up">
      <PageHeader title="Vue générale" subtitle="État de la plateforme en un coup d'œil" />

      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
        <StatTile label="Utilisateurs" value={fmtInt(data.users)} sub={`${fmtInt(data.students)} étudiant·e·s`} />
        <StatTile label="Actifs (7 jours)" value={fmtInt(data.activeWeek)} />
        <StatTile label="Conversations" value={fmtInt(data.conversations)} />
        <StatTile label="Messages" value={fmtInt(data.messages)} />
        <StatTile label="Documents" value={fmtInt(data.documents)} sub={`${fmtInt(data.chunks)} fragments`} />
        <StatTile label="Coût du jour" value={fmtUSD(data.costToday)} />
        <StatTile
          label="Signalements ouverts"
          value={fmtInt(data.flagsOpen)}
          tone={data.flagsOpen > 0 ? "amber" : "default"}
        />
        <StatTile
          label="Erreurs API (7 j)"
          value={fmtInt(data.apiErrors7d)}
          tone={data.apiErrors7d > 0 ? "red" : "default"}
        />
        <StatTile
          label="Citations invalides (7 j)"
          value={fmtInt(data.invalidCitations7d)}
          tone={data.invalidCitations7d > 0 ? "amber" : "default"}
        />
        <Card className="p-4">
          <p className="text-[12px] font-medium text-muted">Coût du mois</p>
          <p className="mt-1 text-xl font-bold tabular-nums leading-tight text-fg">{fmtUSD(data.costMonth)}</p>
          <ProgressBar value={budgetRatio} tone={budgetRatio >= 0.9 ? "gold" : "brand"} className="mt-2" />
          <p className="mt-1 text-[12px] tabular-nums text-muted">
            {Math.round(budgetRatio * 100)} % du budget global ({fmtUSD(data.budgets.monthlyGlobalUSD, 0)}/mois)
          </p>
        </Card>
      </div>

      <div className="mt-5 grid gap-4 lg:grid-cols-2">
        <Card className="p-5">
          <SectionTitle sub="Dépense quotidienne, tous modèles confondus">Coût par jour — 14 derniers jours</SectionTitle>
          <BarChart data={days} formatValue={(v) => fmtUSD(v, 4)} emptyLabel="Aucune dépense sur les 14 derniers jours." />
        </Card>

        <Card className="p-5">
          <SectionTitle sub="Sur les 30 derniers jours">Modèles les plus utilisés</SectionTitle>
          {data.topModels.length === 0 ? (
            <EmptyState icon={<Activity />} title="Aucun appel de modèle" description="Les statistiques d'usage apparaîtront après les premières conversations." />
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full text-[13px]">
                <thead>
                  <tr className="border-b border-app text-left text-[12px] text-muted">
                    <th className="py-2 pr-3 font-medium">Modèle</th>
                    <th className="py-2 pr-3 text-right font-medium">Appels</th>
                    <th className="py-2 pr-3 text-right font-medium">Coût</th>
                    <th className="py-2 text-right font-medium">Jetons (entrée / sortie)</th>
                  </tr>
                </thead>
                <tbody>
                  {data.topModels.map((m) => (
                    <tr key={m.model} className="border-b border-app last:border-0">
                      <td className="max-w-[220px] truncate py-2 pr-3 font-mono text-[12px] text-fg" title={m.model}>{m.model}</td>
                      <td className="py-2 pr-3 text-right tabular-nums text-fg">{fmtInt(m.calls)}</td>
                      <td className="py-2 pr-3 text-right tabular-nums text-fg">{fmtUSD(m.cost, 4)}</td>
                      <td className="py-2 text-right tabular-nums text-muted">
                        {fmtInt(m.tin ?? 0)} / {fmtInt(m.tout ?? 0)}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </Card>
      </div>

      <Card className="mt-4 p-5">
        <SectionTitle>Dernière ingestion du contenu</SectionTitle>
        {!ingest ? (
          <p className="text-sm text-muted">Aucune ingestion n'a encore été exécutée. Lancez-la depuis l'onglet « Cours &amp; contenu ».</p>
        ) : (
          <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-[13px]">
            <Badge tone={ingestionTone(ingest.status)}>{ingest.status}</Badge>
            <span className="text-muted">
              Démarrée&nbsp;: <span className="tabular-nums text-fg">{fmtDate(ingest.started_at)}</span>
            </span>
            <span className="text-muted">
              Terminée&nbsp;: <span className="tabular-nums text-fg">{ingest.finished_at ? fmtDate(ingest.finished_at) : "en cours…"}</span>
            </span>
            <span className="text-muted">
              Fichiers ingérés&nbsp;: <span className="tabular-nums text-fg">{fmtInt(ingest.files_ingested)}</span>
            </span>
            <span className="text-muted">
              Fragments créés&nbsp;: <span className="tabular-nums text-fg">{fmtInt(ingest.chunks_created)}</span>
            </span>
          </div>
        )}
      </Card>
    </div>
  );
}