// MasterySummaryCard：掌握度摘要卡片
// 依据：02-architecture-design.md §15 组件设计
// - 总体掌握度（大字号百分比）
// - 已掌握 / 总知识点数
// - 各学科掌握度进度条

"use client";

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

interface MasterySummaryCardProps {
  summary: MasterySummary;
}

export function MasterySummaryCard({ summary }: MasterySummaryCardProps) {
  const overallPercent = Math.round(summary.overallMastery * 100);

  return (
    <div className="space-y-4" aria-label="掌握度摘要">
      <div className="rounded border border-rule bg-paper-elevated p-4">
        <div className="flex items-end justify-between">
          <div>
            <p className="text-xs text-ink-muted">总体掌握度</p>
            <p className="mt-1 font-serif text-3xl text-accent">
              {formatPercent(summary.overallMastery)}
            </p>
          </div>
          <div className="text-right">
            <p className="text-xs text-ink-muted">已掌握知识点</p>
            <p className="mt-1 font-mono text-lg">
              {formatNumber(summary.masteredKps)} /{" "}
              {formatNumber(summary.totalKps)}
            </p>
          </div>
        </div>
        <div
          className="mt-3 h-2 overflow-hidden rounded bg-rule"
          role="progressbar"
          aria-valuenow={overallPercent}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label="总体掌握度"
        >
          <div
            className="h-full rounded bg-accent"
            style={{ width: `${overallPercent}%` }}
          />
        </div>
      </div>

      <div className="rounded border border-rule bg-paper-elevated p-4">
        <h3 className="font-serif text-base">各学科掌握度</h3>
        <ul className="mt-3 space-y-3">
          {summary.subjectMastery.map((sm) => {
            const percent = Math.round(sm.mastery * 100);
            const isWeak = sm.mastery < 0.6;
            return (
              <li key={sm.subject}>
                <div className="flex items-center justify-between text-sm">
                  <span className="font-medium">{sm.subject}</span>
                  <span
                    className={cn(
                      "font-mono",
                      isWeak ? "text-danger" : "text-success",
                    )}
                  >
                    {formatPercent(sm.mastery)}
                  </span>
                </div>
                <div
                  className="mt-1 h-1.5 overflow-hidden rounded bg-rule"
                  role="progressbar"
                  aria-valuenow={percent}
                  aria-valuemin={0}
                  aria-valuemax={100}
                  aria-label={`${sm.subject}掌握度`}
                >
                  <div
                    className={cn(
                      "h-full rounded",
                      isWeak ? "bg-danger" : "bg-success",
                    )}
                    style={{ width: `${percent}%` }}
                  />
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
}

export default MasterySummaryCard;
