"use client";
// Hub d'apprentissage : annonces actives, carte par cours (progression, série,
// éléments dus) et « prochaines meilleures activités » recommandées.
import Link from "next/link";
import { useEffect, useState } from "react";
import {
  ArrowRight, BellRing, BookOpenCheck, Flame, GraduationCap, Layers, Megaphone, Pin,
} from "lucide-react";
import { PageHeader } from "@/components/app-shell";
import { Badge, Card, EmptyState, ProgressBar, Skeleton } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";
import { ErrorBanner, fetchJson, fmtDate } from "./shared";

type Course = { code: string; title: string; color: string };
type Announcement = { id: number; title: string; body: string; course_code: string | null; pinned: number; created_at: string };
type Recommendation = { kind: string; label: string; reason: string; href: string; courseCode: string; priority: number };
type Overview = {
  globalScore: number;
  streak: number;
  practicedCount: number;
  concepts: unknown[];
  stats: { cardsDue: number; errorsToReview: number; quizAccuracy: number | null; studyMinutes: number };
  recommendations: Recommendation[];
};

export function LearnHub({ courses, displayName }: { courses: Course[]; displayName: string }) {
  const [announcements, setAnnouncements] = useState<Announcement[] | null>(null);
  const [overviews, setOverviews] = useState<Record<string, Overview | null>>({});
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    fetchJson<{ announcements: Announcement[] }>("/api/announcements")
      .then((d) => setAnnouncements(d.announcements))
      .catch((e) => { setAnnouncements([]); setError(e instanceof Error ? e.message : "Erreur de chargement."); });
    for (const c of courses) {
      fetchJson<Overview>(`/api/learning/${c.code.toLowerCase()}/overview`)
        .then((d) => setOverviews((o) => ({ ...o, [c.code]: d })))
        .catch(() => setOverviews((o) => ({ ...o, [c.code]: null })));
    }
  }, [courses]);

  const recommendations = courses
    .flatMap((c) => overviews[c.code]?.recommendations ?? [])
    .sort((a, b) => b.priority - a.priority)
    .slice(0, 5);
  const overviewsLoaded = courses.every((c) => c.code in overviews);

  return (
    <main className="px-4 sm:px-6 py-6 max-w-5xl mx-auto w-full">
      <PageHeader
        title="Apprendre"
        subtitle={`Bonjour ${displayName} — voici où concentrer vos efforts aujourd'hui.`}
      />

      {error && <ErrorBanner message={error} className="mb-5" />}

      {/* Annonces */}
      {announcements === null ? (
        <div className="space-y-2 mb-7">
          <Skeleton className="h-16 w-full" />
        </div>
      ) : announcements.length > 0 ? (
        <section className="space-y-2.5 mb-7" aria-label="Annonces">
          {announcements.map((a) => (
            <Card key={a.id} className="p-4 animate-fade-up">
              <div className="flex flex-wrap items-center gap-2 mb-1.5">
                <Megaphone size={15} className="text-brand-500 shrink-0" />
                <h2 className="font-semibold text-sm text-fg">{a.title}</h2>
                {!!a.pinned && <Badge tone="gold"><Pin size={10} /> Épinglée</Badge>}
                {a.course_code && <Badge tone="brand">{a.course_code}</Badge>}
                <span className="text-[11px] text-muted ml-auto">{fmtDate(a.created_at)}</span>
              </div>
              <div className="text-sm">
                <Markdown content={a.body} />
              </div>
            </Card>
          ))}
        </section>
      ) : null}

      {/* Cours */}
      <section aria-label="Mes cours" className="mb-8">
        <h2 className="text-[13px] font-semibold text-muted uppercase tracking-wide mb-3">Mes cours</h2>
        {courses.length === 0 ? (
          <EmptyState
            icon={<GraduationCap />}
            title="Aucun cours inscrit"
            description="Votre compte n'est associé à aucun cours actif. Contactez votre professeur pour l'inscription."
          />
        ) : (
          <div className="grid sm:grid-cols-2 gap-4">
            {courses.map((c) => {
              const ov = overviews[c.code];
              const loading = !(c.code in overviews);
              return (
                <Card key={c.code} className="p-5 animate-fade-up hover:border-brand-300 transition-colors">
                  <Link href={`/apprendre/${c.code.toLowerCase()}`} className="block group">
                    <div className="flex items-center gap-2.5 mb-1">
                      <span className="w-3 h-3 rounded-full shrink-0" style={{ background: c.color }} aria-hidden />
                      <h3 className="font-bold text-fg group-hover:text-brand-600 dark:group-hover:text-brand-300 transition-colors">
                        {c.code}
                      </h3>
                      <ArrowRight size={15} className="text-muted ml-auto group-hover:translate-x-0.5 transition-transform" />
                    </div>
                    <p className="text-[13px] text-muted line-clamp-1 mb-4">{c.title}</p>
                  </Link>
                  {loading ? (
                    <div className="space-y-2.5">
                      <Skeleton className="h-2.5 w-full" />
                      <Skeleton className="h-4 w-2/3" />
                    </div>
                  ) : ov ? (
                    <>
                      <div className="flex items-center justify-between text-[12px] mb-1.5">
                        <span className="text-muted">Maîtrise globale estimée</span>
                        <span className="font-semibold text-fg">{Math.round(ov.globalScore * 100)} %</span>
                      </div>
                      <ProgressBar value={ov.globalScore} tone={ov.globalScore >= 0.6 ? "green" : "brand"} />
                      <div className="flex flex-wrap gap-1.5 mt-3.5">
                        {ov.streak > 0 && (
                          <Badge tone="gold"><Flame size={11} /> {ov.streak} jour{ov.streak > 1 ? "s" : ""}</Badge>
                        )}
                        <Badge tone={ov.stats.cardsDue > 0 ? "amber" : "neutral"}>
                          <Layers size={11} /> {ov.stats.cardsDue} carte{ov.stats.cardsDue > 1 ? "s" : ""} due{ov.stats.cardsDue > 1 ? "s" : ""}
                        </Badge>
                        {ov.stats.errorsToReview > 0 && (
                          <Badge tone="red">{ov.stats.errorsToReview} erreur{ov.stats.errorsToReview > 1 ? "s" : ""} à revoir</Badge>
                        )}
                      </div>
                    </>
                  ) : (
                    <p className="text-[12.5px] text-muted">Progression indisponible pour le moment.</p>
                  )}
                </Card>
              );
            })}
          </div>
        )}
      </section>

      {/* Recommandations */}
      <section aria-label="Recommandations">
        <h2 className="text-[13px] font-semibold text-muted uppercase tracking-wide mb-3">Recommandé pour vous</h2>
        {!overviewsLoaded ? (
          <div className="space-y-2">
            <Skeleton className="h-14 w-full" />
            <Skeleton className="h-14 w-full" />
          </div>
        ) : recommendations.length === 0 ? (
          <EmptyState
            icon={<BookOpenCheck />}
            title="Rien d'urgent"
            description="Commencez une activité — flashcards, quiz ou une question au chat — pour obtenir des recommandations personnalisées."
          />
        ) : (
          <div className="space-y-2.5">
            {recommendations.map((r, i) => (
              <Link key={`${r.courseCode}-${r.kind}-${i}`} href={r.href} className="block group">
                <Card className="p-4 flex items-start gap-3 hover:border-brand-300 transition-colors animate-fade-up">
                  <div className="w-8 h-8 rounded-lg bg-brand-100 dark:bg-brand-900/60 text-brand-600 dark:text-brand-300 flex items-center justify-center shrink-0">
                    <BellRing size={15} />
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <p className="text-sm font-semibold text-fg group-hover:text-brand-600 dark:group-hover:text-brand-300 transition-colors truncate">
                        {r.label}
                      </p>
                      <Badge tone="brand" className="shrink-0">{r.courseCode}</Badge>
                    </div>
                    <p className="text-[12.5px] text-muted mt-0.5">
                      <span className="font-medium">Pourquoi :</span> {r.reason}
                    </p>
                  </div>
                  <ArrowRight size={15} className="text-muted shrink-0 mt-1 group-hover:translate-x-0.5 transition-transform" />
                </Card>
              </Link>
            ))}
          </div>
        )}
      </section>
    </main>
  );
}