import Link from "next/link";
import { redirect } from "next/navigation";
import { BackgroundBlobs } from "@/components/background-blobs";
import { getSessionUser } from "@/lib/auth";
import { listWrong } from "@/lib/wrongbook";
import type { QuizQ } from "@/lib/quiz-parse";
import { WrongRow } from "./wrong-row";

export default async function WrongBookPage() {
  const user = await getSessionUser();
  if (!user) redirect("/join");
  if (user.role !== "child") redirect("/parent");

  const rows = await listWrong(user.id);
  const open = rows.filter((r) => !r.mastered).length;

  return (
    <main className="relative mx-auto max-w-2xl space-y-5 p-4 pb-12">
      <BackgroundBlobs />
      <header className="flex items-center justify-between">
        <Link href="/kid" className="text-sm font-medium text-indigo-600">
          ← 返回
        </Link>
        <h1 className="text-xl font-extrabold text-slate-900">我的错题本</h1>
        <span className="text-xs text-muted-foreground">待掌握 {open} 题</span>
      </header>

      {rows.length === 0 ? (
        <div className="rounded-2xl border border-slate-100 bg-white p-8 text-center shadow-soft">
          <p className="text-3xl">🎉</p>
          <p className="mt-2 font-bold text-slate-900">还没有错题,继续保持!</p>
        </div>
      ) : (
        <div className="space-y-3">
          {rows.map((r) => {
            let q: QuizQ;
            try {
              q = JSON.parse(r.question) as QuizQ;
            } catch {
              return null;
            }
            return (
              <WrongRow
                key={r.id}
                id={r.id}
                sourceTitle={r.sourceTitle}
                q={q}
                userAnswer={r.userAnswer}
                correctAnswer={r.correctAnswer}
                mastered={r.mastered}
              />
            );
          })}
        </div>
      )}
    </main>
  );
}