// PracticeSessionList：练习历史列表
// 依据：02-architecture-design.md §15 组件设计
// 每项显示学科 / 开始时间 / 题数 / 正确数 / 正确率 / 用时（mm:ss）/ 知识点标签

"use client";

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

interface PracticeSessionListProps {
  sessions: PracticeSession[];
}

/**
 * 秒数格式化为 mm:ss
 */
function formatDuration(seconds: number): string {
  const minutes = Math.floor(seconds / 60);
  const remaining = seconds % 60;
  const mm = String(minutes).padStart(2, "0");
  const ss = String(remaining).padStart(2, "0");
  return `${mm}:${ss}`;
}

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

export function PracticeSessionList({ sessions }: PracticeSessionListProps) {
  if (sessions.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="练习历史列表">
      {sessions.map((s) => {
        const accuracyPercent = Math.round(s.accuracy * 100);
        const tone = accuracyTone(s.accuracy);
        return (
          <li
            key={s.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">
                <div className="flex items-center gap-2">
                  <span className="rounded bg-accent-soft px-2 py-0.5 text-xs text-ink">
                    {s.subject}
                  </span>
                  <span className="text-xs text-ink-muted">
                    {formatDateTime(s.startedAt)}
                  </span>
                </div>
                <div className="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm">
                  <span>
                    题数：<span className="font-mono">{s.questionCount}</span>
                  </span>
                  <span>
                    正确：<span className="font-mono">{s.correctCount}</span>
                  </span>
                  <span>
                    用时：<span className="font-mono">{formatDuration(s.durationSeconds)}</span>
                  </span>
                </div>
              </div>
              <div className="shrink-0 text-right">
                <p className="text-xs text-ink-muted">正确率</p>
                <p
                  className={cn(
                    "mt-1 font-mono text-lg",
                    tone === "success" && "text-success",
                    tone === "warning" && "text-warning",
                    tone === "danger" && "text-danger",
                  )}
                >
                  {formatPercent(s.accuracy)}
                </p>
              </div>
            </div>

            <div
              className="mt-3 h-1.5 overflow-hidden rounded bg-rule"
              role="progressbar"
              aria-valuenow={accuracyPercent}
              aria-valuemin={0}
              aria-valuemax={100}
              aria-label={`${s.subject}练习正确率`}
            >
              <div
                className={cn(
                  "h-full rounded",
                  tone === "success" && "bg-success",
                  tone === "warning" && "bg-warning",
                  tone === "danger" && "bg-danger",
                )}
                style={{ width: `${accuracyPercent}%` }}
              />
            </div>

            {s.knowledgePoints.length > 0 && (
              <div className="mt-3 flex flex-wrap gap-1.5">
                {s.knowledgePoints.map((kp) => (
                  <span
                    key={kp}
                    className="rounded border border-rule px-2 py-0.5 text-xs text-ink-muted"
                  >
                    {kp}
                  </span>
                ))}
              </div>
            )}
          </li>
        );
      })}
    </ul>
  );
}

export default PracticeSessionList;
