// 备课只读详情页面（家长查看子女备课详情）
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/lesson-plans/[planId]/view

"use client";

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

export default function LessonPlanViewPage(): JSX.Element {
  const params = useParams();
  const planId =
    typeof params?.planId === "string"
      ? params.planId
      : Array.isArray(params?.planId)
        ? (params.planId[0] ?? "")
        : "";
  const { currentChild } = useChildSwitcher();
  const { lessonPlan, loading, error } = useChildLessonPlanDetail(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 (!lessonPlan) {
    return (
      <div className="space-y-4">
        <Link
          href="/parent/lesson-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/lesson-plans"
          className="text-sm text-accent hover:underline"
        >
          ← 返回备课列表
        </Link>
      </div>
      <LessonPlanReadonlyView lessonPlan={lessonPlan} />
    </div>
  );
}
