// ReportCardView：报告卡视图
// 依据：02-architecture-design.md §15 组件设计
// - 学生信息 / 各科成绩表 / 总分 / 排名 / 教师评语 / 打印按钮
// - 打印样式：@media print 下隐藏打印按钮

"use client";

import type { ReportCard } from "@/types";
import { formatDate } from "@/lib/utils";

interface ReportCardViewProps {
  reportCard: ReportCard;
}

export function ReportCardView({ reportCard }: ReportCardViewProps) {
  return (
    <article className="space-y-6 rounded border border-rule bg-paper-elevated p-6 print:border-0 print:p-0">
      {/* 头部：学生信息 */}
      <header className="space-y-1 text-center">
        <h2 className="font-serif text-2xl">成绩报告单</h2>
        <p className="text-sm text-ink-muted">
          {reportCard.academicYearName} 学年 · 第 {reportCard.semester} 学期
        </p>
        <div className="mt-2 flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm">
          <span>姓名：<span className="font-medium">{reportCard.childName}</span></span>
          <span>班级：<span className="font-medium">{reportCard.className}</span></span>
          <span>签发日期：{formatDate(reportCard.issuedAt)}</span>
        </div>
      </header>

      {/* 各科成绩表 */}
      <section aria-label="各科成绩">
        <h3 className="font-serif text-base">各科成绩</h3>
        <table
          className="mt-3 w-full text-sm"
          aria-label="各科成绩明细表"
        >
          <thead>
            <tr className="border-b border-rule text-left text-xs text-ink-muted">
              <th className="pb-2">科目</th>
              <th className="pb-2 text-right">分数</th>
              <th className="pb-2 text-right">满分</th>
              <th className="pb-2 text-right">等级</th>
              <th className="pb-2 text-right">班均</th>
              <th className="pb-2 text-right">班级排名</th>
            </tr>
          </thead>
          <tbody>
            {reportCard.subjects.map((s) => (
              <tr
                key={s.subject}
                className="border-b border-rule last:border-b-0"
              >
                <td className="py-2 font-medium">{s.subject}</td>
                <td className="py-2 text-right font-mono">{s.score}</td>
                <td className="py-2 text-right font-mono text-ink-muted">
                  {s.maxScore}
                </td>
                <td className="py-2 text-right font-medium">{s.gradeLevel}</td>
                <td className="py-2 text-right font-mono text-ink-muted">
                  {s.classAverage}
                </td>
                <td className="py-2 text-right font-mono">
                  {s.rank}/{s.classSize}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>

      {/* 总分与排名 */}
      <section
        aria-label="总分与排名"
        className="grid grid-cols-2 gap-3 sm:grid-cols-3"
      >
        <div className="rounded border border-rule p-3 text-center">
          <div className="font-mono text-xl">{reportCard.overallScore}</div>
          <div className="text-xs text-ink-muted">总分</div>
        </div>
        <div className="rounded border border-rule p-3 text-center">
          <div className="font-mono text-xl">{reportCard.classRank}</div>
          <div className="text-xs text-ink-muted">班级排名</div>
        </div>
        <div className="rounded border border-rule p-3 text-center">
          <div className="font-mono text-xl">{reportCard.classSize}</div>
          <div className="text-xs text-ink-muted">班级人数</div>
        </div>
      </section>

      {/* 教师评语 */}
      <section aria-label="教师评语" className="space-y-3">
        <div className="rounded border border-rule p-4">
          <h3 className="font-serif text-sm">班主任评语</h3>
          <p className="mt-2 text-sm">{reportCard.teacherComment}</p>
        </div>
        {reportCard.headTeacherComment && (
          <div className="rounded border border-rule p-4">
            <h3 className="font-serif text-sm">校长评语</h3>
            <p className="mt-2 text-sm">{reportCard.headTeacherComment}</p>
          </div>
        )}
      </section>

      {/* 打印按钮（打印时隐藏） */}
      <div className="print:hidden">
        <button
          type="button"
          onClick={() => window.print()}
          className="rounded border border-accent px-4 py-2 text-sm font-medium text-accent transition-colors hover:bg-accent-soft"
        >
         打印报告卡
        </button>
      </div>
    </article>
  );
}

export default ReportCardView;
