"use client";
// Plan d'étude : formulaire de création (date d'examen, jours disponibles,
// minutes par séance, portée des semaines) puis calendrier vertical cochable.
import { useCallback, useEffect, useMemo, useState } from "react";
import { CalendarDays, Check, RefreshCw } from "lucide-react";
import { Badge, Button, Card, Label, ProgressBar, Skeleton, Spinner, cn } from "@/components/ui";
import { ErrorBanner, fetchJson, fmtDate, postJson } from "./shared";

type PlanItem = { kind: "review" | "flashcards" | "quiz" | "exam" | "reading"; conceptSlug: string | null; label: string; minutes: number; done?: boolean };
type PlanDay = { date: string; items: PlanItem[] };
type Plan = {
  id: number;
  examDate: string;
  config: { weekdays: number[]; minutesPerSession: number; weeksScope: [number, number] };
  days: PlanDay[];
  createdAt: string;
};

const WEEKDAYS: { value: number; label: string; full: string }[] = [
  { value: 1, label: "L", full: "Lundi" },
  { value: 2, label: "M", full: "Mardi" },
  { value: 3, label: "M", full: "Mercredi" },
  { value: 4, label: "J", full: "Jeudi" },
  { value: 5, label: "V", full: "Vendredi" },
  { value: 6, label: "S", full: "Samedi" },
  { value: 0, label: "D", full: "Dimanche" },
];

const KIND_BADGES: Record<PlanItem["kind"], { label: string; tone: "brand" | "gold" | "green" | "amber" | "neutral" }> = {
  review: { label: "Réviser", tone: "brand" },
  flashcards: { label: "Cartes", tone: "green" },
  quiz: { label: "Quiz", tone: "amber" },
  exam: { label: "Examen", tone: "gold" },
  reading: { label: "Lecture", tone: "neutral" },
};

function dayLabel(iso: string): string {
  return new Date(iso + "T12:00:00").toLocaleDateString("fr-CA", { weekday: "long", day: "numeric", month: "long" });
}

export function PlanApp({ course }: { course: string }) {
  const [plan, setPlan] = useState<Plan | null | undefined>(undefined); // undefined = chargement
  const [error, setError] = useState<string | null>(null);
  const [showForm, setShowForm] = useState(false);
  const [busy, setBusy] = useState(false);

  // Formulaire
  const [examDate, setExamDate] = useState("");
  const [weekdays, setWeekdays] = useState<number[]>([1, 3, 6]);
  const [minutes, setMinutes] = useState(60);
  const [weekFrom, setWeekFrom] = useState(1);
  const [weekTo, setWeekTo] = useState(14);

  const load = useCallback(() => {
    setError(null);
    fetchJson<{ plan: Plan | null }>(`/api/learning/${course}/plan`)
      .then((d) => setPlan(d.plan))
      .catch((e) => { setPlan(null); setError(e instanceof Error ? e.message : "Erreur de chargement."); });
  }, [course]);

  useEffect(() => { load(); }, [load]);

  async function create(e: React.FormEvent) {
    e.preventDefault();
    if (!examDate || weekdays.length === 0) return;
    setBusy(true);
    setError(null);
    try {
      await postJson(`/api/learning/${course}/plan`, {
        action: "create",
        examDate,
        weekdays,
        minutesPerSession: minutes,
        weeksScope: [Math.min(weekFrom, weekTo), Math.max(weekFrom, weekTo)],
      });
      setShowForm(false);
      load();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erreur de création du plan.");
    } finally {
      setBusy(false);
    }
  }

  async function toggle(date: string, itemIndex: number, done: boolean) {
    if (!plan) return;
    // Optimiste
    setPlan((p) => {
      if (!p) return p;
      const days = p.days.map((d) =>
        d.date === date ? { ...d, items: d.items.map((it, i) => (i === itemIndex ? { ...it, done } : it)) } : d
      );
      return { ...p, days };
    });
    try {
      await postJson(`/api/learning/${course}/plan`, { action: "toggle", planId: plan.id, date, itemIndex, done });
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erreur d'enregistrement.");
      load();
    }
  }

  const todayISO = new Date().toLocaleDateString("fr-CA"); // YYYY-MM-DD local
  const progress = useMemo(() => {
    if (!plan) return { done: 0, total: 0 };
    let done = 0, total = 0;
    for (const d of plan.days) for (const it of d.items) { total++; if (it.done) done++; }
    return { done, total };
  }, [plan]);

  if (plan === undefined) {
    return (
      <main className="px-4 sm:px-6 py-6 max-w-3xl mx-auto w-full space-y-3">
        <Skeleton className="h-8 w-56" />
        <Skeleton className="h-40 w-full" />
        <Skeleton className="h-40 w-full" />
      </main>
    );
  }

  // ---------- Formulaire ----------
  if (!plan || showForm) {
    return (
      <main className="px-4 sm:px-6 py-6 max-w-2xl mx-auto w-full">
        <div className="mb-5">
          <h2 className="text-lg font-bold text-fg">Plan d'étude</h2>
          <p className="text-[13px] text-muted">
            Un calendrier réaliste jusqu'à votre examen : espacement (chaque notion revient plus d'une fois)
            et entrelacement (plusieurs thèmes par séance), pondéré par vos faiblesses.
          </p>
        </div>
        <Card className="p-6 animate-fade-up">
          <form onSubmit={create} className="space-y-5">
            <div>
              <Label htmlFor="plan-date">Date de l'examen</Label>
              <input
                id="plan-date"
                type="date"
                required
                value={examDate}
                min={new Date(Date.now() + 86400_000).toLocaleDateString("fr-CA")}
                onChange={(e) => setExamDate(e.target.value)}
                className="w-full h-10 px-3.5 rounded-lg bg-card border border-app text-sm text-fg outline-none focus:border-brand-400 focus:ring-2 focus:ring-brand-500/25"
              />
            </div>
            <div>
              <Label>Jours disponibles pour étudier</Label>
              <div className="flex gap-1.5 flex-wrap" role="group" aria-label="Jours de la semaine">
                {WEEKDAYS.map((d) => {
                  const on = weekdays.includes(d.value);
                  return (
                    <button
                      key={d.value}
                      type="button"
                      title={d.full}
                      aria-pressed={on}
                      onClick={() => setWeekdays((w) => (on ? w.filter((x) => x !== d.value) : [...w, d.value]))}
                      className={cn(
                        "w-10 h-10 rounded-full text-sm font-semibold border transition-colors",
                        on ? "bg-brand-600 border-brand-600 text-white" : "bg-card border-app text-muted hover:text-fg"
                      )}
                    >
                      {d.label}
                    </button>
                  );
                })}
              </div>
              {weekdays.length === 0 && <p className="text-[12px] text-red-500 mt-1.5">Choisissez au moins un jour.</p>}
            </div>
            <div>
              <Label htmlFor="plan-minutes">Minutes par séance : {minutes} min</Label>
              <input
                id="plan-minutes" type="range" min={20} max={180} step={10}
                value={minutes} onChange={(e) => setMinutes(Number(e.target.value))}
                className="w-full accent-[#1d64b0]"
              />
              <div className="flex justify-between text-[11px] text-muted"><span>20 min</span><span>180 min</span></div>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <Label htmlFor="plan-wfrom">De la semaine</Label>
                <select
                  id="plan-wfrom" value={weekFrom} onChange={(e) => setWeekFrom(Number(e.target.value))}
                  className="w-full h-10 px-3 rounded-lg bg-card border border-app text-sm text-fg outline-none focus:border-brand-400"
                >
                  {Array.from({ length: 14 }, (_, i) => i + 1).map((w) => <option key={w} value={w}>Semaine {w}</option>)}
                </select>
              </div>
              <div>
                <Label htmlFor="plan-wto">À la semaine</Label>
                <select
                  id="plan-wto" value={weekTo} onChange={(e) => setWeekTo(Number(e.target.value))}
                  className="w-full h-10 px-3 rounded-lg bg-card border border-app text-sm text-fg outline-none focus:border-brand-400"
                >
                  {Array.from({ length: 14 }, (_, i) => i + 1).map((w) => <option key={w} value={w}>Semaine {w}</option>)}
                </select>
              </div>
            </div>
            {error && <ErrorBanner message={error} />}
            <div className="flex gap-2">
              <Button type="submit" disabled={busy || weekdays.length === 0} className="flex-1 justify-center">
                {busy ? <Spinner /> : "Générer mon plan"}
              </Button>
              {plan && (
                <Button type="button" variant="secondary" onClick={() => setShowForm(false)}>Annuler</Button>
              )}
            </div>
          </form>
        </Card>
      </main>
    );
  }

  // ---------- Calendrier ----------
  return (
    <main className="px-4 sm:px-6 py-6 max-w-3xl mx-auto w-full">
      <div className="flex flex-wrap items-center justify-between gap-3 mb-4">
        <div>
          <h2 className="text-lg font-bold text-fg">Plan d'étude</h2>
          <p className="text-[13px] text-muted">
            Examen le <span className="font-medium text-fg">{fmtDate(plan.examDate + "T12:00:00")}</span> ·{" "}
            {plan.config.minutesPerSession} min/séance · semaines {plan.config.weeksScope[0]}–{plan.config.weeksScope[1]}
          </p>
        </div>
        <Button variant="secondary" size="sm" onClick={() => { setError(null); setShowForm(true); }}>
          <RefreshCw size={13} /> Régénérer un plan
        </Button>
      </div>

      <Card className="p-4 mb-5">
        <div className="flex justify-between text-[13px] mb-1.5">
          <span className="font-medium text-fg">Progression du plan</span>
          <span className="text-muted tabular-nums">{progress.done}/{progress.total} activités</span>
        </div>
        <ProgressBar value={progress.total ? progress.done / progress.total : 0} tone={progress.done === progress.total && progress.total > 0 ? "green" : "brand"} />
      </Card>

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

      <ol className="space-y-3" aria-label="Calendrier du plan d'étude">
        {plan.days.map((day) => {
          const isToday = day.date === todayISO;
          const isPast = day.date < todayISO;
          const allDone = day.items.every((it) => it.done);
          return (
            <li key={day.date}>
              <Card className={cn("p-4 animate-fade-up", isToday && "border-brand-500 ring-2 ring-brand-500/20", isPast && !allDone && "opacity-90")}>
                <div className="flex items-center gap-2 mb-2.5">
                  <CalendarDays size={15} className={isToday ? "text-brand-500" : "text-muted"} />
                  <h3 className={cn("text-sm font-semibold capitalize", isToday ? "text-brand-600 dark:text-brand-300" : "text-fg")}>
                    {dayLabel(day.date)}
                  </h3>
                  {isToday && <Badge tone="brand">Aujourd'hui</Badge>}
                  {allDone && <Badge tone="green"><Check size={11} /> Complété</Badge>}
                  <span className="ml-auto text-[11.5px] text-muted tabular-nums">
                    {day.items.reduce((s, it) => s + it.minutes, 0)} min
                  </span>
                </div>
                <ul className="space-y-1.5">
                  {day.items.map((it, i) => {
                    const kb = KIND_BADGES[it.kind] ?? KIND_BADGES.review;
                    return (
                      <li key={i}>
                        <label className={cn(
                          "flex items-start gap-2.5 rounded-lg px-2 py-1.5 -mx-2 cursor-pointer transition-colors",
                          "hover:bg-surface-2 dark:hover:bg-brand-900/30"
                        )}>
                          <input
                            type="checkbox"
                            checked={!!it.done}
                            onChange={(e) => toggle(day.date, i, e.target.checked)}
                            className="mt-0.5 w-4 h-4 rounded accent-[#1d64b0] shrink-0"
                            aria-label={it.label}
                          />
                          <span className={cn("text-[13.5px] flex-1 min-w-0", it.done ? "text-muted line-through" : "text-fg")}>
                            {it.label}
                          </span>
                          <Badge tone={kb.tone} className="shrink-0">{kb.label}</Badge>
                          <span className="text-[11.5px] text-muted tabular-nums shrink-0 mt-0.5">{it.minutes} min</span>
                        </label>
                      </li>
                    );
                  })}
                </ul>
              </Card>
            </li>
          );
        })}
      </ol>
    </main>
  );
}