// TopWrongQuestionList：Top 错题列表
// 依据：02-architecture-design.md §15 组件设计
// 每项显示题干（截断）/ 学科标签 / 知识点 / 错误次数 / 掌握率 / 最后错误时间

"use client";

import type { TopWrongQuestion } from "@/types";
import { cn, formatPercent, formatDateTime } from "@/lib/utils";

interface TopWrongQuestionListProps {
  questions: TopWrongQuestion[];
}

const QUESTION_CONTENT_MAX_LENGTH = 80;

function truncate(content: string, max: number): string {
  if (content.length <= max) return content;
  return `${content.slice(0, max)}…`;
}

export function TopWrongQuestionList({ questions }: TopWrongQuestionListProps) {
  if (questions.length === 0) {
    return (
      <p className="rounded border border-rule bg-paper-elevated p-4 text-sm text-ink-muted">
        暂无错题数据
      </p>
    );
  }

  return (
    <ul className="space-y-3" aria-label="高频错题列表">
      {questions.map((q) => {
        const masteryPercent = Math.round(q.masteryRate * 100);
        const isWeak = q.masteryRate < 0.6;
        return (
          <li
            key={q.id}
            className="rounded border border-rule bg-paper-elevated p-4"
          >
            <div className="flex items-start justify-between gap-4">
              <div className="min-w-0 flex-1">
                <p className="text-sm">{truncate(q.questionContent, QUESTION_CONTENT_MAX_LENGTH)}</p>
                <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-ink-muted">
                  <span className="rounded bg-accent-soft px-2 py-0.5 text-ink">
                    {q.subject}
                  </span>
                  <span>{q.knowledgePoint}</span>
                </div>
              </div>
              <div className="flex shrink-0 flex-col items-end text-right">
                <span className="font-mono text-sm text-danger">
                  错 {q.errorCount} 次
                </span>
                <span
                  className={cn(
                    "mt-1 font-mono text-sm",
                    isWeak ? "text-danger" : "text-success",
                  )}
                >
                  {formatPercent(q.masteryRate)}
                </span>
              </div>
            </div>
            <div className="mt-3 flex items-center justify-between gap-3">
              <div
                className="h-1.5 flex-1 overflow-hidden rounded bg-rule"
                role="progressbar"
                aria-valuenow={masteryPercent}
                aria-valuemin={0}
                aria-valuemax={100}
                aria-label={`${q.subject}错题掌握率`}
              >
                <div
                  className={cn(
                    "h-full rounded",
                    isWeak ? "bg-danger" : "bg-success",
                  )}
                  style={{ width: `${masteryPercent}%` }}
                />
              </div>
              <span className="shrink-0 text-xs text-ink-muted">
                最后错误：{formatDateTime(q.lastErrorAt)}
              </span>
            </div>
          </li>
        );
      })}
    </ul>
  );
}

export default TopWrongQuestionList;
