// DiagnosticReportList：诊断报告列表
// 依据：02-architecture-design.md §15 组件设计
// 只显示 published 状态报告，每项含标题 / 摘要 / 掌握度分数 / 学科分析 / 发布时间

"use client";

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

interface DiagnosticReportListProps {
  reports: DiagnosticReport[];
}

export function DiagnosticReportList({ reports }: DiagnosticReportListProps) {
  const published = reports.filter((r) => r.status === "published");

  if (published.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-4" aria-label="诊断报告列表">
      {published.map((report) => {
        const masteryPercent = report.masteryScore;
        const isWeak = report.masteryScore < 60;
        return (
          <li
            key={report.id}
            className="rounded border border-rule bg-paper-elevated p-4"
            aria-label={`诊断报告：${report.title}`}
          >
            <div className="flex items-start justify-between gap-4">
              <div className="min-w-0 flex-1">
                <h3 className="font-serif text-base">{report.title}</h3>
                <p className="mt-1 text-xs text-ink-muted">
                  发布于：{formatDateTime(report.publishedAt ?? report.createdAt)}
                </p>
              </div>
              <div className="shrink-0 text-right">
                <p className="text-xs text-ink-muted">掌握度分数</p>
                <p
                  className={cn(
                    "mt-1 font-mono text-lg",
                    isWeak ? "text-danger" : "text-success",
                  )}
                >
                  {formatNumber(report.masteryScore)}
                </p>
              </div>
            </div>

            <p className="mt-3 text-sm">{report.summary}</p>

            <div
              className="mt-3 h-2 overflow-hidden rounded bg-rule"
              role="progressbar"
              aria-valuenow={masteryPercent}
              aria-valuemin={0}
              aria-valuemax={100}
              aria-label={`${report.title}掌握度分数`}
            >
              <div
                className={cn(
                  "h-full rounded",
                  isWeak ? "bg-danger" : "bg-success",
                )}
                style={{ width: `${masteryPercent}%` }}
              />
            </div>

            <div className="mt-4 space-y-3" aria-label="学科分析">
              {report.subjects.map((subj) => {
                const subjPercent = Math.round(subj.masteryLevel * 100);
                const subjWeak = subj.masteryLevel < 0.6;
                return (
                  <div
                    key={subj.subject}
                    className="border-t border-rule pt-3"
                  >
                    <div className="flex items-center justify-between text-sm">
                      <span className="font-medium">{subj.subject}</span>
                      <span
                        className={cn(
                          "font-mono",
                          subjWeak ? "text-danger" : "text-success",
                        )}
                      >
                        {formatPercent(subj.masteryLevel)}
                      </span>
                    </div>
                    <div
                      className="mt-1 h-1.5 overflow-hidden rounded bg-rule"
                      role="progressbar"
                      aria-valuenow={subjPercent}
                      aria-valuemin={0}
                      aria-valuemax={100}
                      aria-label={`${subj.subject}掌握度`}
                    >
                      <div
                        className={cn(
                          "h-full rounded",
                          subjWeak ? "bg-danger" : "bg-success",
                        )}
                        style={{ width: `${subjPercent}%` }}
                      />
                    </div>
                    <div className="mt-2 grid gap-2 text-xs sm:grid-cols-3">
                      <div>
                        <p className="text-ink-muted">优势</p>
                        <p className="mt-0.5 text-success">
                          {subj.strengths.join("、") || "—"}
                        </p>
                      </div>
                      <div>
                        <p className="text-ink-muted">不足</p>
                        <p className="mt-0.5 text-danger">
                          {subj.weaknesses.join("、") || "—"}
                        </p>
                      </div>
                      <div>
                        <p className="text-ink-muted">建议</p>
                        <p className="mt-0.5">{subj.recommendation}</p>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </li>
        );
      })}
    </ul>
  );
}

export default DiagnosticReportList;
