// 课程计划列表页面（家长查看子女课程计划）
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/course-plans

"use client";

import { useChildCoursePlans } from "@/hooks/useChildCoursePlans";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { CoursePlanList } from "@/components/CoursePlanList";

export default function CoursePlansPage(): JSX.Element {
  const { currentChild } = useChildSwitcher();
  const { coursePlans, loading, error } = useChildCoursePlans();

  if (loading) {
    return (
      <div className="space-y-4" role="status" aria-live="polite">
        <span className="skeleton h-8 w-48 rounded" aria-hidden="true" />
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <span className="skeleton h-44 w-full rounded" aria-hidden="true" />
          <span className="skeleton h-44 w-full rounded" aria-hidden="true" />
          <span className="skeleton h-44 w-full rounded" aria-hidden="true" />
        </div>
        <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>
    );
  }

  return (
    <div className="space-y-6">
      <h1 className="font-serif text-2xl">{currentChild?.name}的课程计划</h1>
      <CoursePlanList coursePlans={coursePlans} />
    </div>
  );
}