// 报告卡页面
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/grades/report-card
// 顶部：学年/学期筛选 + 打印按钮；主体：报告卡视图

"use client";

import { useQueryState, parseAsString } from "nuqs";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { useAcademicYears } from "@/hooks/useAcademicYears";
import { useReportCard } from "@/hooks/useReportCard";
import { ReportCardView } from "@/components/ReportCardView";

export default function ReportCardPage(): JSX.Element {
  const { currentChildId, currentChild } = useChildSwitcher();
  const { academicYears, loading: yearsLoading } = useAcademicYears();

  // nuqs 管理学年/学期 URL 状态（可刷新恢复）
  const [academicYearId, setAcademicYearId] = useQueryState(
    "academicYearId",
    parseAsString.withDefault(""),
  );
  const [semesterStr, setSemesterStr] = useQueryState(
    "semester",
    parseAsString.withDefault("2"),
  );
  const semester = Number(semesterStr) === 1 ? 1 : 2;

  // URL 为空时回退到第一个学年
  const effectiveYearId = academicYearId || academicYears[0]?.id || null;

  const { reportCard, loading, error } = useReportCard(
    currentChildId,
    effectiveYearId,
    semester,
  );

  return (
    <div className="space-y-6">
      <h1 className="font-serif text-2xl">
        {currentChild?.name ? `${currentChild.name}的报告卡` : "报告卡"}
      </h1>

      {/* 筛选栏 */}
      <div className="flex flex-wrap items-end gap-4 rounded border border-rule bg-paper-elevated p-4 print:hidden">
        <div className="space-y-1">
          <label
            htmlFor="report-year"
            className="text-xs text-ink-muted"
          >
            学年
          </label>
          <select
            id="report-year"
            value={effectiveYearId ?? ""}
            onChange={(e) => setAcademicYearId(e.target.value)}
            disabled={yearsLoading}
            className="rounded border border-rule bg-paper px-3 py-2 text-sm focus:outline-none disabled:opacity-60"
          >
            {academicYears.map((y) => (
              <option key={y.id} value={y.id}>
                {y.name}
              </option>
            ))}
          </select>
        </div>

        <div className="space-y-1">
          <label
            htmlFor="report-semester"
            className="text-xs text-ink-muted"
          >
            学期
          </label>
          <select
            id="report-semester"
            value={String(semester)}
            onChange={(e) => setSemesterStr(e.target.value)}
            className="rounded border border-rule bg-paper px-3 py-2 text-sm focus:outline-none"
          >
            <option value="1">第 1 学期</option>
            <option value="2">第 2 学期</option>
          </select>
        </div>
      </div>

      {/* 主体 */}
      {loading ? (
        <span className="skeleton h-96 w-full rounded" />
      ) : error ? (
        <div
          role="alert"
          className="rounded border border-danger p-4 text-sm text-danger"
        >
          加载失败：{error.message}
        </div>
      ) : !reportCard ? (
        <p className="text-sm text-ink-muted" role="status">
          暂无报告卡数据
        </p>
      ) : (
        <ReportCardView reportCard={reportCard} />
      )}
    </div>
  );
}
