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

"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { useChildCoursePlanDetail } from "@/hooks/useChildCoursePlanDetail";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { CoursePlanDetail } from "@/components/CoursePlanDetail";

export default function CoursePlanDetailPage(): JSX.Element {
  const params = useParams();
  const planId =
    typeof params?.id === "string"
      ? params.id
      : Array.isArray(params?.id)
        ? (params.id[0] ?? "")
        : "";
  const { currentChild } = useChildSwitcher();
  const { coursePlan, loading, error } = useChildCoursePlanDetail(planId);

  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-40 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>
    );
  }

  if (!coursePlan) {
    return (
      <div className="space-y-4">
        <Link
          href="/parent/course-plans"
          className="text-sm text-accent hover:underline"
        >
          ← 返回课程计划
        </Link>
        <p className="text-sm text-ink-muted" role="status">
          暂无课程计划数据
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <h1 className="font-serif text-2xl">{currentChild?.name}的课程计划</h1>
        <Link
          href="/parent/course-plans"
          className="text-sm text-accent hover:underline"
        >
          ← 返回课程计划
        </Link>
      </div>
      <CoursePlanDetail coursePlan={coursePlan} />
    </div>
  );
}
