// ErrorBookStatsCard：错题本统计卡片
// 依据：02-architecture-design.md §15 组件设计
// - 5 项统计网格（总数/新增/学习中/已掌握/待复习）
// - 掌握率进度条（masteredRate 0-1）

"use client";

import type { ErrorBookStats } from "@/types";
import { cn, formatPercent, formatNumber } from "@/lib/utils";

interface ErrorBookStatsCardProps {
  stats: ErrorBookStats;
}

interface StatItem {
  label: string;
  value: number;
  icon: string;
  tone: "default" | "warning" | "success" | "accent";
}

export function ErrorBookStatsCard({ stats }: ErrorBookStatsCardProps) {
  const items: StatItem[] = [
    { label: "错题总数", value: stats.totalCount, icon: "📚", tone: "accent" },
    { label: "新增", value: stats.newCount, icon: "🆕", tone: "default" },
    {
      label: "学习中",
      value: stats.learningCount,
      icon: "📖",
      tone: "default",
    },
    {
      label: "已掌握",
      value: stats.masteredCount,
      icon: "✅",
      tone: "success",
    },
    {
      label: "待复习",
      value: stats.dueReviewCount,
      icon: "🔔",
      tone: "warning",
    },
  ];

  const masteryPercent = Math.round(stats.masteredRate * 100);

  return (
    <div className="space-y-4" aria-label="错题本统计">
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-5">
        {items.map((item) => (
          <div
            key={item.label}
            className={cn(
              "rounded border border-rule bg-paper-elevated p-4",
              item.tone === "warning" && "border-warning",
              item.tone === "success" && "border-success",
              item.tone === "accent" && "border-accent",
            )}
          >
            <div className="flex items-center justify-between">
              <span aria-hidden="true">{item.icon}</span>
              <span className="font-serif text-2xl">
                {formatNumber(item.value)}
              </span>
            </div>
            <p className="mt-2 text-xs text-ink-muted">{item.label}</p>
          </div>
        ))}
      </div>

      <div className="rounded border border-rule bg-paper-elevated p-4">
        <div className="flex items-center justify-between">
          <h3 className="font-serif text-base">掌握率</h3>
          <span className="font-mono text-lg text-success">
            {formatPercent(stats.masteredRate)}
          </span>
        </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="错题掌握率"
        >
          <div
            className="h-full rounded bg-accent"
            style={{ width: `${masteryPercent}%` }}
          />
        </div>
      </div>
    </div>
  );
}

export default ErrorBookStatsCard;
