"use client";
// Cours & contenu : documents ingérés regroupés par cours puis espace,
// relance de l'ingestion (normale ou --force) et historique des exécutions.
import { useMemo, useState } from "react";
import { ChevronDown, ChevronRight, FileText, RefreshCw } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Badge, Button, Card, EmptyState, Skeleton, Spinner, cn } from "@/components/ui";
import { ErrorBanner, SectionTitle, fmtDate, fmtInt, postJson, useFetchJson } from "./shared";

type Doc = {
  id: number;
  course_code: string;
  space: string;
  filename: string;
  doc_type: string;
  title: string;
  week: number | null;
  status: string;
  error: string | null;
  visible_to_students: number;
  ingested_at: string | null;
  chunk_count: number;
};

type Run = {
  id: number;
  started_at: string;
  finished_at: string | null;
  triggered_by: string;
  files_scanned: number;
  files_ingested: number;
  files_skipped: number;
  chunks_created: number;
  status: string;
  report: string | null;
};

type IngestResult = {
  ok: boolean;
  runId: number;
  scanned: number;
  ingested: number;
  skipped: number;
  chunks: number;
  errors: { path: string; error: string }[];
  report: string;
};

const DOC_TYPE_LABEL: Record<string, string> = {
  slides: "Diapositives",
  plan: "Plan de cours",
  exam: "Examen",
  glossary: "Glossaire",
  "aide-memoire": "Aide-mémoire",
  markdown: "Document",
};

function SpaceBadge({ space }: { space: string }) {
  if (space === "instructor-private") return <Badge tone="red">Privé prof</Badge>;
  if (space.startsWith("official-")) return <Badge tone="brand">Officiel</Badge>;
  return <Badge>{space}</Badge>;
}

function statusTone(status: string): "green" | "red" | "amber" {
  const s = status.toLowerCase();
  if (s === "ok" || s.includes("success") || s.includes("succès") || s.includes("completed")) return "green";
  if (s.includes("error") || s.includes("fail") || s.includes("erreur") || s.includes("échec")) return "red";
  return "amber";
}

export function AdminCourses() {
  const { data, error, loading, reload } = useFetchJson<{ runs: Run[]; documents: Doc[] }>("/api/admin/ingest");
  const [running, setRunning] = useState<null | "normal" | "force">(null);
  const [runError, setRunError] = useState<string | null>(null);
  const [result, setResult] = useState<IngestResult | null>(null);
  const [expandedRun, setExpandedRun] = useState<number | null>(null);
  const [showResultReport, setShowResultReport] = useState(false);

  const grouped = useMemo(() => {
    const byCourse = new Map<string, Map<string, Doc[]>>();
    for (const d of data?.documents ?? []) {
      if (!byCourse.has(d.course_code)) byCourse.set(d.course_code, new Map());
      const spaces = byCourse.get(d.course_code)!;
      if (!spaces.has(d.space)) spaces.set(d.space, []);
      spaces.get(d.space)!.push(d);
    }
    return byCourse;
  }, [data]);

  async function launch(force: boolean) {
    setRunning(force ? "force" : "normal");
    setRunError(null);
    setResult(null);
    setShowResultReport(false);
    try {
      const r = await postJson<IngestResult>(`/api/admin/ingest${force ? "?force=1" : ""}`);
      setResult(r);
      await reload();
    } catch (e) {
      setRunError(e instanceof Error ? e.message : "L'ingestion a échoué.");
    } finally {
      setRunning(null);
    }
  }

  const actions = (
    <div className="flex flex-wrap gap-2">
      <Button size="sm" onClick={() => launch(false)} disabled={running !== null}>
        {running === "normal" ? <Spinner /> : <RefreshCw size={15} />}
        Relancer l'ingestion
      </Button>
      <Button size="sm" variant="secondary" onClick={() => launch(true)} disabled={running !== null}>
        {running === "force" ? <Spinner /> : <RefreshCw size={15} />}
        Réindexation complète (--force)
      </Button>
    </div>
  );

  return (
    <div className="animate-fade-up">
      <PageHeader
        title="Cours & contenu"
        subtitle="Documents indexés pour la recherche et relance de l'ingestion"
        actions={actions}
      />

      {running && (
        <Card className="mb-4 flex items-center gap-3 border-brand-300 bg-brand-50 p-4 dark:border-brand-800 dark:bg-brand-900/30">
          <Spinner className="text-brand-600 dark:text-brand-300" />
          <p className="text-sm text-brand-800 dark:text-brand-200">
            {running === "force" ? "Réindexation complète en cours" : "Ingestion en cours"} — cela peut prendre de 1 à 3 minutes.
            Merci de patienter, ne quittez pas cette page.
          </p>
        </Card>
      )}

      {runError && <div className="mb-4"><ErrorBanner message={runError} /></div>}

      {result && (
        <Card className="mb-4 p-4">
          <div className="flex flex-wrap items-center gap-x-5 gap-y-2 text-[13px]">
            <Badge tone={result.errors.length > 0 ? "amber" : "green"}>
              {result.errors.length > 0 ? "Terminée avec avertissements" : "Ingestion terminée"}
            </Badge>
            <span className="text-muted">Fichiers examinés&nbsp;: <b className="tabular-nums text-fg">{fmtInt(result.scanned)}</b></span>
            <span className="text-muted">Ingérés&nbsp;: <b className="tabular-nums text-fg">{fmtInt(result.ingested)}</b></span>
            <span className="text-muted">Ignorés (inchangés)&nbsp;: <b className="tabular-nums text-fg">{fmtInt(result.skipped)}</b></span>
            <span className="text-muted">Fragments créés&nbsp;: <b className="tabular-nums text-fg">{fmtInt(result.chunks)}</b></span>
            <button
              type="button"
              onClick={() => setShowResultReport((v) => !v)}
              className="text-[13px] font-medium text-brand-600 hover:underline dark:text-brand-300"
            >
              {showResultReport ? "Masquer le rapport" : "Voir le rapport"}
            </button>
          </div>
          {result.errors.length > 0 && (
            <ul className="mt-2 list-disc space-y-0.5 pl-5 text-[12.5px] text-red-700 dark:text-red-400">
              {result.errors.map((e, i) => (
                <li key={i}><span className="font-mono">{e.path}</span> — {e.error}</li>
              ))}
            </ul>
          )}
          {showResultReport && (
            <pre className="mt-3 max-h-72 overflow-auto rounded-lg border border-app bg-surface-1 p-3 text-[12px] leading-relaxed text-fg dark:bg-brand-950">
              {result.report || "(rapport vide)"}
            </pre>
          )}
        </Card>
      )}

      {loading ? (
        <div className="space-y-3">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="h-40" />
          <Skeleton className="h-40" />
        </div>
      ) : error ? (
        <ErrorBanner message={error} onRetry={reload} />
      ) : grouped.size === 0 ? (
        <Card>
          <EmptyState
            icon={<FileText />}
            title="Aucun document indexé"
            description="Lancez l'ingestion pour indexer le matériel des cours (diapositives, plans, glossaires…)."
            action={<Button size="sm" onClick={() => launch(false)} disabled={running !== null}>Relancer l'ingestion</Button>}
          />
        </Card>
      ) : (
        <div className="space-y-6">
          {[...grouped.entries()].map(([course, spaces]) => (
            <section key={course}>
              <h2 className="mb-2 text-[15px] font-semibold text-fg">{course}</h2>
              <div className="space-y-4">
                {[...spaces.entries()].map(([space, docs]) => (
                  <Card key={space} className="overflow-hidden">
                    <div className="flex items-center gap-2.5 border-b border-app px-4 py-2.5">
                      <SpaceBadge space={space} />
                      <span className="text-[12px] text-muted">
                        {fmtInt(docs.length)} document{docs.length > 1 ? "s" : ""} ·{" "}
                        {fmtInt(docs.reduce((s, d) => s + d.chunk_count, 0))} fragments
                      </span>
                    </div>
                    <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="px-4 py-2 font-medium">Fichier</th>
                            <th className="px-3 py-2 font-medium">Type</th>
                            <th className="px-3 py-2 text-right font-medium">Semaine</th>
                            <th className="px-3 py-2 text-right font-medium">Fragments</th>
                            <th className="px-3 py-2 font-medium">Statut</th>
                            <th className="px-4 py-2 font-medium">Ingéré le</th>
                          </tr>
                        </thead>
                        <tbody>
                          {docs.map((d) => (
                            <tr key={d.id} className="border-b border-app last:border-0">
                              <td className="px-4 py-2">
                                <p className="font-medium text-fg">{d.title || d.filename}</p>
                                <p className="font-mono text-[11.5px] text-muted">{d.filename}</p>
                              </td>
                              <td className="px-3 py-2 text-muted">{DOC_TYPE_LABEL[d.doc_type] ?? d.doc_type}</td>
                              <td className="px-3 py-2 text-right tabular-nums text-muted">{d.week ?? "—"}</td>
                              <td className="px-3 py-2 text-right tabular-nums text-fg">{fmtInt(d.chunk_count)}</td>
                              <td className="px-3 py-2">
                                <Badge tone={statusTone(d.status)}>{d.status === "ok" ? "OK" : d.status}</Badge>
                                {d.error && <p className="mt-0.5 max-w-[220px] text-[11.5px] text-red-600 dark:text-red-400">{d.error}</p>}
                              </td>
                              <td className="whitespace-nowrap px-4 py-2 tabular-nums text-muted">{fmtDate(d.ingested_at)}</td>
                            </tr>
                          ))}
                        </tbody>
                      </table>
                    </div>
                  </Card>
                ))}
              </div>
            </section>
          ))}
        </div>
      )}

      {!loading && !error && (
        <section className="mt-8">
          <SectionTitle sub="10 dernières exécutions de l'ingestion">Historique des exécutions</SectionTitle>
          {(data?.runs.length ?? 0) === 0 ? (
            <Card className="p-5">
              <p className="text-sm text-muted">Aucune exécution enregistrée.</p>
            </Card>
          ) : (
            <Card className="overflow-hidden">
              <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="px-4 py-2 font-medium">#</th>
                      <th className="px-3 py-2 font-medium">Démarrée</th>
                      <th className="px-3 py-2 font-medium">Terminée</th>
                      <th className="px-3 py-2 font-medium">Déclenchée par</th>
                      <th className="px-3 py-2 text-right font-medium">Examinés</th>
                      <th className="px-3 py-2 text-right font-medium">Ingérés</th>
                      <th className="px-3 py-2 text-right font-medium">Ignorés</th>
                      <th className="px-3 py-2 text-right font-medium">Fragments</th>
                      <th className="px-3 py-2 font-medium">Statut</th>
                      <th className="px-4 py-2 font-medium">Rapport</th>
                    </tr>
                  </thead>
                  <tbody>
                    {(data?.runs ?? []).map((r) => (
                      <RunRow
                        key={r.id}
                        run={r}
                        expanded={expandedRun === r.id}
                        onToggle={() => setExpandedRun(expandedRun === r.id ? null : r.id)}
                      />
                    ))}
                  </tbody>
                </table>
              </div>
            </Card>
          )}
        </section>
      )}
    </div>
  );
}

function RunRow({ run, expanded, onToggle }: { run: Run; expanded: boolean; onToggle: () => void }) {
  return (
    <>
      <tr className={cn("border-b border-app", !expanded && "last:border-0")}>
        <td className="px-4 py-2 tabular-nums text-muted">{run.id}</td>
        <td className="whitespace-nowrap px-3 py-2 tabular-nums text-fg">{fmtDate(run.started_at)}</td>
        <td className="whitespace-nowrap px-3 py-2 tabular-nums text-muted">{run.finished_at ? fmtDate(run.finished_at) : "—"}</td>
        <td className="px-3 py-2 font-mono text-[12px] text-muted">{run.triggered_by}</td>
        <td className="px-3 py-2 text-right tabular-nums text-muted">{fmtInt(run.files_scanned)}</td>
        <td className="px-3 py-2 text-right tabular-nums text-fg">{fmtInt(run.files_ingested)}</td>
        <td className="px-3 py-2 text-right tabular-nums text-muted">{fmtInt(run.files_skipped)}</td>
        <td className="px-3 py-2 text-right tabular-nums text-fg">{fmtInt(run.chunks_created)}</td>
        <td className="px-3 py-2"><Badge tone={statusTone(run.status)}>{run.status}</Badge></td>
        <td className="px-4 py-2">
          <button
            type="button"
            onClick={onToggle}
            aria-expanded={expanded}
            className="inline-flex items-center gap-1 text-[12.5px] font-medium text-brand-600 hover:underline dark:text-brand-300"
          >
            {expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
            {expanded ? "Replier" : "Déplier"}
          </button>
        </td>
      </tr>
      {expanded && (
        <tr className="border-b border-app last:border-0">
          <td colSpan={10} className="bg-surface-1 px-4 py-3 dark:bg-brand-950/60">
            <pre className="max-h-80 overflow-auto whitespace-pre-wrap text-[12px] leading-relaxed text-fg">
              {run.report || "(aucun rapport)"}
            </pre>
          </td>
        </tr>
      )}
    </>
  );
}