// PracticeStatsCard：练习统计卡片
// 依据：02-architecture-design.md §15 组件设计
// - 4 项统计网格（总会话数 / 已完成 / 总答题数 / 正确率%）
// - 正确率按区间用语义色区分（>=80% success / 60-80% warning / <60% danger）

"use client";

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

interface PracticeStatsCardProps {
  stats: PracticeStats;
}

interface StatItem {
  label: string;
  value: string;
  tone: "default" | "success" | "warning" | "danger";
}

function accuracyTone(rate: number): "success" | "warning" | "danger" {
  if (rate >= 0.8) return "success";
  if (rate >= 0.6) return "warning";
  return "danger";
}

export function PracticeStatsCard({ stats }: PracticeStatsCardProps) {
  const accuracyToneValue = accuracyTone(stats.overallAccuracy);

  const items: StatItem[] = [
    {
      label: "总会话数",
      value: formatNumber(stats.totalSessions),
      tone: "default",
    },
    {
      label: "已完成会话",
      value: formatNumber(stats.completedSessions),
      tone: "default",
    },
    {
      label: "总答题数",
      value: formatNumber(stats.totalQuestionsAnswered),
      tone: "default",
    },
    {
      label: "正确率",
      value: formatPercent(stats.overallAccuracy),
      tone: accuracyToneValue,
    },
  ];

  return (
    <div className="grid grid-cols-2 gap-3 lg:grid-cols-4" aria-label="练习统计">
      {items.map((item) => (
        <div
          key={item.label}
          className={cn(
            "rounded border border-rule bg-paper-elevated p-4",
            item.tone === "success" && "border-success",
            item.tone === "warning" && "border-warning",
            item.tone === "danger" && "border-danger",
          )}
        >
          <p className="text-xs text-ink-muted">{item.label}</p>
          <p
            className={cn(
              "mt-1 font-serif text-2xl",
              item.tone === "success" && "text-success",
              item.tone === "warning" && "text-warning",
              item.tone === "danger" && "text-danger",
            )}
          >
            {item.value}
          </p>
        </div>
      ))}
    </div>
  );
}

export default PracticeStatsCard;
