"use client";
// Cahier d'erreurs : filtres par statut, cartes dépliables (question, votre réponse,
// correction, explication), changement de statut et suppression.
import { useCallback, useEffect, useMemo, useState } from "react";
import { CheckCircle2, ChevronDown, NotebookPen, Trash2 } from "lucide-react";
import { Badge, Card, EmptyState, Skeleton, Tabs, cn } from "@/components/ui";
import { Markdown } from "@/components/chat/markdown";
import { ErrorBanner, fetchJson, fmtDate } from "./shared";

type ErrorEntry = {
  id: number; course_code: string; concept_id: number | null; concept_name: string | null;
  question: string; given_answer: string; correction: string; explanation: string;
  source: string; status: "a-revoir" | "comprise" | "maitrisee"; created_at: string;
};

const STATUS_META: Record<ErrorEntry["status"], { label: string; tone: "red" | "amber" | "green" }> = {
  "a-revoir": { label: "À revoir", tone: "red" },
  comprise: { label: "Comprise", tone: "amber" },
  maitrisee: { label: "Maîtrisée", tone: "green" },
};
const SOURCE_LABELS: Record<string, string> = { quiz: "Quiz", exam: "Examen blanc", chat: "Chat", correction: "Correction" };

export function ErrorsApp({ course }: { course: string }) {
  const upper = course.toUpperCase();
  const [entries, setEntries] = useState<ErrorEntry[] | null>(null);
  const [filter, setFilter] = useState<string>("toutes");
  const [open, setOpen] = useState<Record<number, boolean>>({});
  const [error, setError] = useState<string | null>(null);

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

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

  async function patch(id: number, body: { status?: ErrorEntry["status"]; remove?: boolean }) {
    setError(null);
    try {
      const res = await fetch("/api/learning/errors", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ id, ...body }),
      });
      if (!res.ok) {
        const d = await res.json().catch(() => ({}));
        throw new Error((d as { error?: string }).error ?? `Erreur ${res.status}`);
      }
      setEntries((es) =>
        es
          ? body.remove
            ? es.filter((e) => e.id !== id)
            : es.map((e) => (e.id === id && body.status ? { ...e, status: body.status } : e))
          : es
      );
    } catch (e) {
      setError(e instanceof Error ? e.message : "Erreur d'enregistrement.");
    }
  }

  const filtered = useMemo(() => {
    if (!entries) return [];
    if (filter === "toutes") return entries;
    return entries.filter((e) => e.status === filter);
  }, [entries, filter]);

  const counts = useMemo(() => {
    const c = { toutes: entries?.length ?? 0, "a-revoir": 0, comprise: 0, maitrisee: 0 };
    for (const e of entries ?? []) c[e.status]++;
    return c;
  }, [entries]);

  return (
    <main className="px-4 sm:px-6 py-6 max-w-3xl mx-auto w-full">
      <div className="mb-5">
        <h2 className="text-lg font-bold text-fg">Cahier d'erreurs</h2>
        <p className="text-[13px] text-muted">
          Vos erreurs de quiz et d'examens, à retravailler jusqu'à les maîtriser — la forme de révision la plus rentable.
        </p>
      </div>

      <Tabs
        className="mb-4"
        active={filter}
        onChange={setFilter}
        tabs={[
          { key: "toutes", label: `Toutes (${counts.toutes})` },
          { key: "a-revoir", label: `À revoir (${counts["a-revoir"]})` },
          { key: "comprise", label: `Comprises (${counts.comprise})` },
          { key: "maitrisee", label: `Maîtrisées (${counts.maitrisee})` },
        ]}
      />

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

      {entries === null ? (
        <div className="space-y-3">
          <Skeleton className="h-20 w-full" />
          <Skeleton className="h-20 w-full" />
          <Skeleton className="h-20 w-full" />
        </div>
      ) : filtered.length === 0 ? (
        <EmptyState
          icon={filter === "toutes" ? <CheckCircle2 /> : <NotebookPen />}
          title={filter === "toutes" ? "Aucune erreur enregistrée" : "Rien dans ce filtre"}
          description={
            filter === "toutes"
              ? "Vos réponses incorrectes aux quiz et examens blancs apparaîtront ici automatiquement."
              : "Changez de filtre pour voir les autres entrées."
          }
        />
      ) : (
        <div className="space-y-2.5">
          {filtered.map((e) => {
            const meta = STATUS_META[e.status];
            const isOpen = !!open[e.id];
            return (
              <Card key={e.id} className="overflow-hidden animate-fade-up">
                <button
                  onClick={() => setOpen((o) => ({ ...o, [e.id]: !o[e.id] }))}
                  aria-expanded={isOpen}
                  className="w-full flex items-start gap-3 px-4 py-3.5 text-left"
                >
                  <div className="min-w-0 flex-1">
                    <p className={cn("text-sm text-fg font-medium", !isOpen && "line-clamp-2")}>{e.question}</p>
                    <div className="flex flex-wrap gap-1.5 mt-1.5">
                      <Badge tone={meta.tone}>{meta.label}</Badge>
                      {e.concept_name && <Badge tone="brand">{e.concept_name}</Badge>}
                      <Badge tone="neutral">{SOURCE_LABELS[e.source] ?? e.source}</Badge>
                      <span className="text-[11.5px] text-muted self-center">{fmtDate(e.created_at)}</span>
                    </div>
                  </div>
                  <ChevronDown size={16} className={cn("text-muted shrink-0 mt-1 transition-transform", isOpen && "rotate-180")} />
                </button>
                {isOpen && (
                  <div className="px-4 pb-4 space-y-3 border-t border-app pt-3.5">
                    <div>
                      <p className="text-[11.5px] font-semibold text-red-600 dark:text-red-400 uppercase tracking-wide mb-1">Votre réponse</p>
                      <p className="text-sm text-fg whitespace-pre-wrap bg-red-500/5 border border-red-500/20 rounded-lg px-3 py-2">
                        {e.given_answer || "—"}
                      </p>
                    </div>
                    <div>
                      <p className="text-[11.5px] font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wide mb-1">Correction</p>
                      <div className="bg-emerald-500/5 border border-emerald-500/20 rounded-lg px-3 py-2">
                        <Markdown content={e.correction} />
                      </div>
                    </div>
                    {e.explanation && (
                      <div>
                        <p className="text-[11.5px] font-semibold text-muted uppercase tracking-wide mb-1">Explication</p>
                        <Markdown content={e.explanation} />
                      </div>
                    )}
                    <div className="flex flex-wrap items-center gap-1.5 pt-1">
                      {(Object.keys(STATUS_META) as ErrorEntry["status"][]).map((s) => (
                        <button
                          key={s}
                          onClick={() => patch(e.id, { status: s })}
                          disabled={e.status === s}
                          className={cn(
                            "px-3 h-8 rounded-lg text-[12.5px] font-medium border transition-colors",
                            e.status === s
                              ? "border-brand-500 bg-brand-50 dark:bg-brand-900/40 text-brand-700 dark:text-brand-300 cursor-default"
                              : "border-app bg-card text-muted hover:text-fg hover:border-brand-300"
                          )}
                        >
                          {STATUS_META[s].label}
                        </button>
                      ))}
                      <button
                        onClick={() => { if (confirm("Supprimer définitivement cette entrée ?")) patch(e.id, { remove: true }); }}
                        title="Supprimer"
                        aria-label="Supprimer l'entrée"
                        className="ml-auto p-2 rounded-lg text-muted hover:text-red-500 transition-colors"
                      >
                        <Trash2 size={15} />
                      </button>
                    </div>
                  </div>
                )}
              </Card>
            );
          })}
        </div>
      )}
    </main>
  );
}