// 诊断报告页面
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/diagnostic

"use client";

import { useChildDiagnostic } from "@/hooks/useChildDiagnostic";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { MasterySummaryCard } from "@/components/MasterySummaryCard";
import { DiagnosticReportList } from "@/components/DiagnosticReportList";

export default function DiagnosticPage() {
  const { currentChild } = useChildSwitcher();
  const { masterySummary, reports, loading, error } = useChildDiagnostic();

  if (loading) {
    return (
      <div className="space-y-4" role="status" aria-live="polite">
        <span className="skeleton h-8 w-48 rounded" aria-hidden="true" />
        <span className="skeleton h-48 w-full rounded" aria-hidden="true" />
        <span className="skeleton h-64 w-full rounded" aria-hidden="true" />
        <span className="sr-only">加载诊断报告中...</span>
      </div>
    );
  }

  if (error) {
    return (
      <div
        role="alert"
        className="rounded border border-danger p-4 text-sm text-danger"
      >
        加载失败：{error.message}
      </div>
    );
  }

  const hasData = masterySummary !== null || reports.length > 0;

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

      {!hasData ? (
        <p className="rounded border border-rule bg-paper-elevated p-4 text-sm text-ink-muted">
          暂无诊断数据
        </p>
      ) : (
        <>
          {masterySummary && <MasterySummaryCard summary={masterySummary} />}

          <section className="space-y-3" aria-label="已发布诊断报告">
            <h2 className="font-serif text-lg">已发布诊断报告</h2>
            <DiagnosticReportList reports={reports} />
          </section>
        </>
      )}
    </div>
  );
}
