// 练习统计页面
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/practice

"use client";

import { useChildPractice } from "@/hooks/useChildPractice";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { PracticeStatsCard } from "@/components/PracticeStatsCard";
import { PracticeSessionList } from "@/components/PracticeSessionList";

export default function PracticePage() {
  const { currentChild } = useChildSwitcher();
  const { stats, sessions, loading, error } = useChildPractice();

  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-32 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 = stats !== null || sessions.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>
      ) : (
        <>
          {stats && <PracticeStatsCard stats={stats} />}

          <section className="space-y-3" aria-label="练习历史">
            <h2 className="font-serif text-lg">练习历史</h2>
            <PracticeSessionList sessions={sessions} />
          </section>
        </>
      )}
    </div>
  );
}