"use client";
// Tableau de progression : score global, série, statistiques, maîtrise par semaine,
// concepts groupés par niveau, recommandations justifiées, activité récente.
import Link from "next/link";
import { useEffect, useState } from "react";
import {
  Activity, AlertTriangle, ArrowRight, BellRing, CheckCircle2, Clock3, Flame,
  Layers, ListChecks, Target,
} from "lucide-react";
import { Badge, Card, EmptyState, Skeleton, cn } from "@/components/ui";
import { ErrorBanner, LEVELS, ProgressRing, fetchJson, fmtDateTime, levelInfo, type MasteryLevel } from "./shared";

type Concept = {
  conceptId: number; slug: string; name: string; week: number | null;
  importance: number; axis: string; score: number; level: MasteryLevel; observations: number;
};
type Recommendation = { kind: string; label: string; reason: string; href: string; courseCode: string; priority: number };
type Overview = {
  globalScore: number;
  levels: Record<string, string>;
  concepts: Concept[];
  practicedCount: number;
  weekScores: { week: number; score: number }[];
  streak: number;
  stats: {
    cardsReviewed: number; quizAnswered: number; quizAccuracy: number | null;
    examAttempts: number; studyMinutes: number; errorsToReview: number; cardsDue: number;
  };
  recent: { kind: string; meta: string | null; created_at: string }[];
  recommendations: Recommendation[];
};

const ACTIVITY_LABELS: Record<string, string> = {
  chat: "Conversation avec le tuteur",
  flashcards: "Révision de cartes mémoire",
  quiz: "Quiz adaptatif",
  exam: "Examen blanc",
  summary: "Génération d'un résumé",
  plan: "Plan d'étude",
};

const LEVEL_ORDER: MasteryLevel[] = ["maitrise", "solide", "en-construction", "a-decouvrir"];

export function ProgressDashboard({ course }: { course: string }) {
  const [data, setData] = useState<Overview | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchJson<Overview>(`/api/learning/${course}/overview`)
      .then(setData)
      .catch((e) => setError(e instanceof Error ? e.message : "Erreur de chargement."));
  }, [course]);

  if (error) {
    return <main className="px-4 sm:px-6 py-6 max-w-5xl mx-auto w-full"><ErrorBanner message={error} /></main>;
  }
  if (!data) {
    return (
      <main className="px-4 sm:px-6 py-6 max-w-5xl mx-auto w-full space-y-4">
        <div className="grid sm:grid-cols-3 gap-4">
          <Skeleton className="h-44" /><Skeleton className="h-44" /><Skeleton className="h-44" />
        </div>
        <Skeleton className="h-40 w-full" />
        <Skeleton className="h-64 w-full" />
      </main>
    );
  }

  const stats = [
    { icon: Layers, label: "Cartes révisées", value: String(data.stats.cardsReviewed) },
    { icon: ListChecks, label: "Questions de quiz", value: String(data.stats.quizAnswered) },
    { icon: Target, label: "Précision aux quiz", value: data.stats.quizAccuracy == null ? "—" : `${data.stats.quizAccuracy} %` },
    { icon: CheckCircle2, label: "Examens blancs", value: String(data.stats.examAttempts) },
    { icon: Clock3, label: "Minutes d'étude", value: String(data.stats.studyMinutes) },
    { icon: AlertTriangle, label: "Erreurs à revoir", value: String(data.stats.errorsToReview) },
  ];

  return (
    <main className="px-4 sm:px-6 py-6 max-w-5xl mx-auto w-full space-y-7">
      {/* Rangée d'entête compacte : score global + série + cartes dues */}
      <div className="grid grid-cols-3 gap-2.5 sm:gap-4">
        <Card className="p-3 sm:p-5 flex flex-col items-center justify-center animate-fade-up">
          <ProgressRing value={data.globalScore} />
          <p className="hidden sm:block text-[12px] text-muted mt-2 text-center">
            Estimation pondérée ({data.practicedCount}/{data.concepts.length} notions pratiquées)
          </p>
          <p className="sm:hidden text-[11px] text-muted mt-1.5 text-center leading-tight">maîtrise estimée</p>
        </Card>
        <Card className="p-3 sm:p-5 flex flex-col items-center justify-center animate-fade-up">
          <div className={cn("flex items-center gap-1.5", data.streak > 0 ? "text-amber-500" : "text-muted")}>
            <Flame size={26} className={data.streak > 0 ? "fill-amber-500/25" : ""} />
            <span className="text-3xl sm:text-4xl font-bold text-fg tracking-tight">{data.streak}</span>
          </div>
          <p className="text-[11px] sm:text-sm font-medium text-fg mt-1 sm:mt-1.5 text-center leading-tight">
            jour{data.streak > 1 ? "s" : ""} de suite
          </p>
          <p className="hidden sm:block text-[12px] text-muted mt-0.5 text-center">
            {data.streak > 0 ? "La régularité bat l'intensité — continuez !" : "Une activité aujourd'hui démarre votre série."}
          </p>
        </Card>
        <Link href={`/apprendre/${course}/flashcards`} className="block group">
          <Card className="h-full p-3 sm:p-5 flex flex-col items-center justify-center animate-fade-up group-hover:border-brand-400 transition-colors">
            <span className={cn("text-3xl sm:text-4xl font-bold tracking-tight", data.stats.cardsDue > 0 ? "text-brand-600 dark:text-brand-300" : "text-fg")}>
              {data.stats.cardsDue}
            </span>
            <p className="text-[11px] sm:text-sm font-medium text-fg mt-1 sm:mt-1.5 text-center leading-tight">
              carte{data.stats.cardsDue > 1 ? "s" : ""} due{data.stats.cardsDue > 1 ? "s" : ""}
            </p>
            <span className="mt-1 sm:mt-2 text-[11px] sm:text-[13px] font-semibold text-brand-600 dark:text-brand-300 inline-flex items-center gap-1">
              Réviser <ArrowRight size={12} />
            </span>
          </Card>
        </Link>
      </div>

      {/* Statistiques */}
      <section aria-label="Statistiques">
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
          {stats.map((s) => (
            <Card key={s.label} className="p-3.5 animate-fade-up">
              <s.icon size={15} className="text-muted mb-1.5" />
              <p className="text-xl font-bold text-fg leading-none">{s.value}</p>
              <p className="text-[11.5px] text-muted mt-1">{s.label}</p>
            </Card>
          ))}
        </div>
      </section>

      {/* Maîtrise par semaine */}
      <section aria-label="Maîtrise par semaine">
        <h2 className="text-[13px] font-semibold text-muted uppercase tracking-wide mb-3">Maîtrise par semaine</h2>
        <Card className="p-5">
          {data.weekScores.length === 0 ? (
            <p className="text-sm text-muted">Aucune donnée encore — les barres apparaîtront après vos premières activités.</p>
          ) : (
            <div className="flex items-end gap-1.5 sm:gap-2.5 h-36" role="img" aria-label="Barres de maîtrise par semaine de cours">
              {data.weekScores.map((w) => {
                const pct = Math.round(w.score * 100);
                const lv = levelInfo(w.score >= 0.85 ? "maitrise" : w.score >= 0.6 ? "solide" : w.score >= 0.3 ? "en-construction" : "a-decouvrir");
                return (
                  <div key={w.week} className="flex-1 flex flex-col items-center gap-1.5 min-w-0 h-full justify-end" title={`Semaine ${w.week} : ${pct} %`}>
                    <span className="text-[10.5px] text-muted tabular-nums">{pct}</span>
                    <div className="w-full max-w-8 bg-surface-2 dark:bg-brand-900/50 rounded-t-md flex flex-col justify-end" style={{ height: "78%" }}>
                      <div className={cn("w-full rounded-t-md transition-all duration-700", lv.bg)} style={{ height: `${Math.max(3, pct)}%` }} />
                    </div>
                    <span className="text-[10.5px] text-muted">S{w.week}</span>
                  </div>
                );
              })}
            </div>
          )}
        </Card>
      </section>

      <div className="grid lg:grid-cols-5 gap-6 items-start">
        {/* Concepts par niveau */}
        <section aria-label="Concepts par niveau" className="lg:col-span-3">
          <h2 className="text-[13px] font-semibold text-muted uppercase tracking-wide mb-3">Concepts par niveau de maîtrise</h2>
          <div className="space-y-4">
            {LEVEL_ORDER.map((lvl) => {
              const items = data.concepts.filter((c) => c.level === lvl);
              if (!items.length) return null;
              const info = LEVELS[lvl];
              return (
                <Card key={lvl} className="p-4">
                  <div className="flex items-center gap-2 mb-2.5">
                    <span className={cn("w-2.5 h-2.5 rounded-full", info.bg)} aria-hidden />
                    <h3 className="text-sm font-semibold text-fg">{info.label}</h3>
                    <span className="text-[12px] text-muted">({items.length})</span>
                  </div>
                  <div className="flex flex-wrap gap-1.5">
                    {items.map((c) => (
                      <Link
                        key={c.conceptId}
                        href={`/apprendre/${course}/concepts?focus=${encodeURIComponent(c.slug)}`}
                        title={`${c.name} — semaine ${c.week ?? "?"} · maîtrise estimée ${Math.round(c.score * 100)} %`}
                        className={cn(
                          "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg border border-app bg-card text-[12.5px] text-fg",
                          "hover:border-brand-400 hover:bg-brand-50 dark:hover:bg-brand-900/30 transition-colors"
                        )}
                      >
                        <span className={cn("font-semibold tabular-nums", info.text)}>{Math.round(c.score * 100)}</span>
                        <span className="truncate max-w-52">{c.name}</span>
                        {c.week != null && <span className="text-[10.5px] text-muted">S{c.week}</span>}
                      </Link>
                    ))}
                  </div>
                </Card>
              );
            })}
            {data.concepts.length === 0 && (
              <EmptyState icon={<Target />} title="Aucun concept" description="La carte des concepts de ce cours n'est pas encore chargée." />
            )}
          </div>
        </section>

        {/* Recommandations + activité récente */}
        <div className="lg:col-span-2 space-y-6">
          <section aria-label="Recommandations">
            <h2 className="text-[13px] font-semibold text-muted uppercase tracking-wide mb-3">Recommandé maintenant</h2>
            {data.recommendations.length === 0 ? (
              <Card className="p-4"><p className="text-sm text-muted">Rien d'urgent — poursuivez votre plan ou explorez la carte des concepts.</p></Card>
            ) : (
              <div className="space-y-2.5">
                {data.recommendations.map((r, i) => (
                  <Link key={`${r.kind}-${i}`} href={r.href} className="block group">
                    <Card className="p-3.5 hover:border-brand-300 transition-colors">
                      <div className="flex items-center gap-2">
                        <BellRing size={14} className="text-brand-500 shrink-0" />
                        <p className="text-[13.5px] font-semibold text-fg group-hover:text-brand-600 dark:group-hover:text-brand-300 transition-colors">
                          {r.label}
                        </p>
                      </div>
                      <p className="text-[12px] text-muted mt-1">
                        <span className="font-medium">Pourquoi :</span> {r.reason}
                      </p>
                    </Card>
                  </Link>
                ))}
              </div>
            )}
          </section>

          <section aria-label="Activité récente">
            <h2 className="text-[13px] font-semibold text-muted uppercase tracking-wide mb-3">Activité récente</h2>
            <Card className="p-4">
              {data.recent.length === 0 ? (
                <p className="text-sm text-muted">Aucune activité enregistrée pour ce cours.</p>
              ) : (
                <ol className="space-y-2.5">
                  {data.recent.map((a, i) => (
                    <li key={i} className="flex items-center gap-2.5 text-[13px]">
                      <Activity size={13} className="text-muted shrink-0" />
                      <span className="text-fg flex-1 min-w-0 truncate">{ACTIVITY_LABELS[a.kind] ?? a.kind}</span>
                      <span className="text-[11.5px] text-muted shrink-0">{fmtDateTime(a.created_at)}</span>
                    </li>
                  ))}
                </ol>
              )}
            </Card>
          </section>
        </div>
      </div>

      {/* Légende des niveaux */}
      <div className="flex flex-wrap gap-3 text-[12px] text-muted">
        {LEVEL_ORDER.map((lvl) => (
          <span key={lvl} className="inline-flex items-center gap-1.5">
            <span className={cn("w-2 h-2 rounded-full", LEVELS[lvl].bg)} /> {LEVELS[lvl].label}
          </span>
        ))}
        <span className="ml-auto">La maîtrise est une estimation : elle décroît doucement sans pratique.</span>
      </div>
    </main>
  );
}