"use client";
// Pédagogie : statistiques agrégées et anonymisées par cours — maîtrise par concept,
// questions les plus échouées, erreurs récurrentes, examens blancs, signalements,
// rétroactions 👍/👎 par jour.
import { useMemo, useState } from "react";
import { BookOpen, Flag, ThumbsDown, ThumbsUp } from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Badge, Card, EmptyState, Skeleton, Tabs, cn } from "@/components/ui";
import { ErrorBanner, HBarRow, SectionTitle, fmtDate, fmtInt, useFetchJson } from "./shared";

type Pedagogy = {
  course: string;
  minStudents: number;
  conceptStats: { id: number; name: string; week: number | null; students: number; avg_score: number | null; masked: boolean }[];
  hardestQuestions: { id: number; question: string; difficulty: number | string | null; concept: string | null; attempts: number; success_pct: number | null }[];
  commonErrors: { concept: string | null; n: number }[];
  examStats: { title: string; attempts: number; avg_pct: number | null }[];
  flagged: { id: number; reason: string | null; created_at: string; resolved: number; message_preview: string }[];
  feedback: { day: string; up: number; down: number }[];
};

const COURSES = [
  { key: "IMM1003", label: "IMM1003" },
  { key: "IMM1033", label: "IMM1033" },
];

function successTone(pct: number): string {
  if (pct < 50) return "bg-red-500";
  if (pct < 75) return "bg-amber-500";
  return "bg-emerald-500";
}

export function AdminPedagogy() {
  const [course, setCourse] = useState("IMM1003");
  const { data, error, loading, reload } = useFetchJson<Pedagogy>(`/api/admin/pedagogy?course=${course}`);

  const maxErrors = useMemo(() => Math.max(...(data?.commonErrors ?? []).map((e) => e.n), 1), [data]);

  return (
    <div className="animate-fade-up">
      <PageHeader
        title="Pédagogie"
        subtitle={`Statistiques agrégées et anonymisées — seuil de confidentialité : ${data?.minStudents ?? 3} étudiant·e·s`}
        actions={<Tabs tabs={COURSES} active={course} onChange={setCourse} />}
      />

      {loading ? (
        <div className="grid gap-4 lg:grid-cols-2">
          {Array.from({ length: 4 }).map((_, i) => (
            <Skeleton key={i} className="h-64" />
          ))}
        </div>
      ) : error || !data ? (
        <ErrorBanner message={error ?? "Données indisponibles."} onRetry={reload} />
      ) : (
        <div className="grid gap-4 lg:grid-cols-2">
          {/* Maîtrise par concept */}
          <Card className="p-5">
            <SectionTitle sub="Score moyen de maîtrise (0 à 100 %) — masqué sous le seuil de confidentialité">
              Maîtrise moyenne par concept
            </SectionTitle>
            {data.conceptStats.length === 0 ? (
              <EmptyState icon={<BookOpen />} title="Aucun concept" description="Les concepts du cours n'ont pas encore été définis." />
            ) : (
              <div className="max-h-96 overflow-y-auto pr-1">
                {data.conceptStats.map((c) => (
                  <HBarRow
                    key={c.id}
                    label={
                      <>
                        {c.week != null && <span className="mr-1.5 text-[11px] text-muted">S{c.week}</span>}
                        {c.name}
                      </>
                    }
                    value={c.masked ? 1 : c.avg_score ?? 0}
                    muted={c.masked || c.avg_score == null}
                    display={
                      c.masked
                        ? "— moins de 3 étudiants"
                        : c.avg_score == null
                          ? "aucune donnée"
                          : `${Math.round(c.avg_score * 100)} %`
                    }
                  />
                ))}
              </div>
            )}
          </Card>

          {/* Questions les plus échouées */}
          <Card className="p-5">
            <SectionTitle sub="Taux de réussite le plus faible en premier (minimum 3 tentatives)">
              Questions de quiz les plus échouées
            </SectionTitle>
            {data.hardestQuestions.length === 0 ? (
              <EmptyState icon={<BookOpen />} title="Pas encore assez de tentatives" description="Les statistiques apparaîtront quand au moins 3 étudiant·e·s auront répondu aux quiz." />
            ) : (
              <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">Question</th>
                      <th className="py-2 pr-3 font-medium">Concept</th>
                      <th className="py-2 pr-3 text-right font-medium">Tentatives</th>
                      <th className="py-2 text-right font-medium">Réussite</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.hardestQuestions.map((q) => {
                      const pct = q.success_pct ?? 0;
                      return (
                        <tr key={q.id} className="border-b border-app last:border-0 align-top">
                          <td className="max-w-[280px] py-2 pr-3 text-fg">
                            <span className="line-clamp-2" title={q.question}>{q.question}</span>
                          </td>
                          <td className="py-2 pr-3 text-muted">{q.concept ?? "—"}</td>
                          <td className="py-2 pr-3 text-right tabular-nums text-muted">{fmtInt(q.attempts)}</td>
                          <td className="py-2 text-right">
                            <span className="inline-flex items-center gap-2">
                              <span className="h-1.5 w-14 overflow-hidden rounded-full bg-surface-2 dark:bg-brand-900/60">
                                <span className={cn("block h-full rounded-full", successTone(pct))} style={{ width: `${pct}%` }} />
                              </span>
                              <span className="w-10 text-right tabular-nums text-fg">{Math.round(pct)} %</span>
                            </span>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            )}
          </Card>

          {/* Erreurs récurrentes */}
          <Card className="p-5">
            <SectionTitle sub="Entrées du carnet d'erreurs, regroupées par concept">Erreurs récurrentes par concept</SectionTitle>
            {data.commonErrors.length === 0 ? (
              <EmptyState icon={<BookOpen />} title="Aucune erreur récurrente" description="Le carnet d'erreurs ne contient pas encore de tendances significatives." />
            ) : (
              <div>
                {data.commonErrors.map((e, i) => (
                  <HBarRow
                    key={i}
                    label={e.concept ?? "Concept non associé"}
                    value={e.n / maxErrors}
                    display={`${fmtInt(e.n)} erreur${e.n > 1 ? "s" : ""}`}
                    barClass="bg-amber-500"
                  />
                ))}
              </div>
            )}
          </Card>

          {/* Examens blancs */}
          <Card className="p-5">
            <SectionTitle sub="Tentatives complétées seulement — moyenne masquée sous le seuil">Examens blancs</SectionTitle>
            {data.examStats.length === 0 ? (
              <EmptyState icon={<BookOpen />} title="Aucun examen blanc" description="Aucun examen blanc n'a été créé pour ce cours." />
            ) : (
              <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">Examen</th>
                      <th className="py-2 pr-3 text-right font-medium">Tentatives</th>
                      <th className="py-2 text-right font-medium">Moyenne</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.examStats.map((e, i) => (
                      <tr key={i} className="border-b border-app last:border-0">
                        <td className="py-2 pr-3 font-medium text-fg">{e.title}</td>
                        <td className="py-2 pr-3 text-right tabular-nums text-muted">{fmtInt(e.attempts)}</td>
                        <td className="py-2 text-right tabular-nums">
                          {e.avg_pct == null ? (
                            <span className="italic text-muted">— moins de 3 étudiants</span>
                          ) : (
                            <span className="text-fg">{e.avg_pct.toLocaleString("fr-CA")} %</span>
                          )}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </Card>

          {/* Rétroactions par jour */}
          <Card className="p-5 lg:col-span-2">
            <SectionTitle sub="Rétroactions sur les réponses de l'assistant, 30 derniers jours">Rétroactions 👍 / 👎 par jour</SectionTitle>
            <FeedbackChart feedback={data.feedback} />
          </Card>

          {/* Signalements */}
          <Card className="p-5 lg:col-span-2">
            <SectionTitle sub="Réponses signalées par les étudiant·e·s (30 plus récentes, tous cours confondus)">
              Signalements
            </SectionTitle>
            {data.flagged.length === 0 ? (
              <EmptyState icon={<Flag />} title="Aucun signalement" description="Aucune réponse n'a été signalée." />
            ) : (
              <>
                <ul className="space-y-2.5">
                  {data.flagged.map((f) => (
                    <li key={f.id} className="rounded-xl border border-app p-3.5">
                      <div className="mb-1.5 flex flex-wrap items-center gap-2">
                        <Badge tone={f.resolved ? "green" : "amber"}>{f.resolved ? "Résolu" : "Ouvert"}</Badge>
                        {f.reason && <Badge tone="neutral">{f.reason}</Badge>}
                        <span className="text-[11.5px] tabular-nums text-muted">{fmtDate(f.created_at)}</span>
                      </div>
                      <p className="text-[13px] leading-relaxed text-muted">{f.message_preview}…</p>
                    </li>
                  ))}
                </ul>
                <p className="mt-3 text-[12px] italic text-muted">
                  La résolution des signalements depuis cette interface n'est pas encore offerte par l'API — marquez-les résolus
                  directement en base de données pour l'instant.
                </p>
              </>
            )}
          </Card>
        </div>
      )}
    </div>
  );
}

// Graphique divergent : 👍 au-dessus de la ligne de base (bleu), 👎 en dessous (rouge).
function FeedbackChart({ feedback }: { feedback: { day: string; up: number; down: number }[] }) {
  const days = useMemo(() => {
    const out: { day: string; up: number; down: number }[] = [];
    for (let i = 29; i >= 0; i--) {
      const d = new Date();
      d.setDate(d.getDate() - i);
      const key = d.toISOString().slice(0, 10);
      const row = feedback.find((r) => r.day === key);
      out.push({ day: key, up: row?.up ?? 0, down: row?.down ?? 0 });
    }
    return out;
  }, [feedback]);

  const max = Math.max(...days.map((d) => Math.max(d.up, d.down)), 0);
  if (max === 0) {
    return <p className="py-8 text-center text-sm text-muted">Aucune rétroaction sur les 30 derniers jours.</p>;
  }

  return (
    <div>
      <div className="mb-2 flex items-center gap-4 text-[12px] text-muted">
        <span className="inline-flex items-center gap-1.5">
          <span className="h-2.5 w-2.5 rounded-sm bg-brand-500" />
          <ThumbsUp size={12} /> Positives
        </span>
        <span className="inline-flex items-center gap-1.5">
          <span className="h-2.5 w-2.5 rounded-sm bg-red-600" />
          <ThumbsDown size={12} /> Négatives
        </span>
      </div>
      <div className="flex items-stretch gap-[3px]" style={{ height: 160 }} role="img" aria-label="Rétroactions positives et négatives par jour">
        {days.map((d) => (
          <div key={d.day} className="group relative flex min-w-0 flex-1 flex-col">
            <div className="flex flex-1 flex-col justify-end">
              <div
                className="w-full rounded-t-[4px] bg-brand-500 transition-opacity group-hover:opacity-75"
                style={{ height: `${(d.up / max) * 100}%` }}
              />
            </div>
            <div className="my-[1px] h-px w-full" style={{ background: "var(--border)" }} />
            <div className="flex flex-1 flex-col justify-start">
              <div
                className="w-full rounded-b-[4px] bg-red-600 transition-opacity group-hover:opacity-75"
                style={{ height: `${(d.down / max) * 100}%` }}
              />
            </div>
            <div className="pointer-events-none absolute bottom-full left-1/2 z-10 mb-1 hidden -translate-x-1/2 whitespace-nowrap rounded-lg border border-app bg-card px-2.5 py-1.5 text-[12px] shadow-lg group-hover:block">
              <span className="text-muted">{d.day.slice(5)}</span>{" "}
              <span className="font-semibold tabular-nums text-fg">👍 {d.up}</span>{" "}
              <span className="font-semibold tabular-nums text-fg">👎 {d.down}</span>
            </div>
          </div>
        ))}
      </div>
      <div className="mt-1.5 flex justify-between text-[11px] text-muted">
        <span>{days[0]?.day.slice(5)}</span>
        <span>{days[days.length - 1]?.day.slice(5)}</span>
      </div>
    </div>
  );
}