// 错题本页面
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/error-book

"use client";

import { useChildErrorBook } from "@/hooks/useChildErrorBook";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { ErrorBookStatsCard } from "@/components/ErrorBookStatsCard";
import { TopWrongQuestionList } from "@/components/TopWrongQuestionList";
import { cn, formatPercent } from "@/lib/utils";

export default function ErrorBookPage() {
  const { currentChild } = useChildSwitcher();
  const { stats, topWrongQuestions, weakKps, loading, error } =
    useChildErrorBook();

  if (loading) {
    return (
      <div className="space-y-4" role="status" aria-live="polite">
        <span className="skeleton h-8 w-48 rounded" aria-hidden="true" />
        <span className="skeleton h-40 w-full rounded" aria-hidden="true" />
        <span className="skeleton h-64 w-full rounded" aria-hidden="true" />
        <span className="sr-only">加载错题本中...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div
        role="alert"
        className="rounded border border-danger p-4 text-sm text-danger"
      >
        加载失败：{error.message}
      </div>
    );
  }

  const hasData =
    stats !== null ||
    topWrongQuestions.length > 0 ||
    weakKps.length > 0;

  return (
    <div className="space-y-6">
      <h1 className="font-serif text-2xl">{currentChild?.name}的错题本</h1>

      {!hasData ? (
        <p className="rounded border border-rule bg-paper-elevated p-4 text-sm text-ink-muted">
          暂无错题数据
        </p>
      ) : (
        <>
          {stats && <ErrorBookStatsCard stats={stats} />}

          <section className="space-y-3" aria-label="高频错题">
            <h2 className="font-serif text-lg">高频错题</h2>
            <TopWrongQuestionList questions={topWrongQuestions} />
          </section>

          <section className="space-y-3" aria-label="薄弱知识点">
            <h2 className="font-serif text-lg">薄弱知识点</h2>
            {weakKps.length === 0 ? (
              <p className="rounded border border-rule bg-paper-elevated p-4 text-sm text-ink-muted">
                暂无薄弱知识点
              </p>
            ) : (
              <ul className="space-y-3">
                {weakKps.map((kp) => {
                  const masteryPercent = Math.round(kp.masteryRate * 100);
                  const isWeak = kp.masteryRate < 0.6;
                  return (
                    <li
                      key={`${kp.subject}-${kp.knowledgePointName}`}
                      className="rounded border border-rule bg-paper-elevated p-4"
                    >
                      <div className="flex items-start justify-between gap-4">
                        <div>
                          <h3 className="font-serif text-base">
                            {kp.knowledgePointName}
                          </h3>
                          <p className="mt-1 text-xs text-ink-muted">
                            {kp.subject}
                          </p>
                        </div>
                        <div className="text-right">
                          <p className="font-mono text-sm text-danger">
                            错 {kp.errorCount} 次
                          </p>
                          <p
                            className={cn(
                              "mt-1 font-mono text-sm",
                              isWeak ? "text-danger" : "text-success",
                            )}
                          >
                            {formatPercent(kp.masteryRate)}
                          </p>
                        </div>
                      </div>
                      <div
                        className="mt-3 h-2 overflow-hidden rounded bg-rule"
                        role="progressbar"
                        aria-valuenow={masteryPercent}
                        aria-valuemin={0}
                        aria-valuemax={100}
                        aria-label={`${kp.knowledgePointName}掌握率`}
                      >
                        <div
                          className={cn(
                            "h-full rounded",
                            isWeak ? "bg-danger" : "bg-success",
                          )}
                          style={{ width: `${masteryPercent}%` }}
                        />
                      </div>
                    </li>
                  );
                })}
              </ul>
            )}
          </section>
        </>
      )}
    </div>
  );
}
