// 请假页面
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/leave
// 顶部：请假申请表单；底部：历史请假列表

"use client";

import { useChildLeaveRequests } from "@/hooks/useChildLeaveRequests";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import { LeaveRequestForm } from "@/components/LeaveRequestForm";
import { LeaveRequestList } from "@/components/LeaveRequestList";

export default function LeavePage(): JSX.Element {
  const { currentChild } = useChildSwitcher();
  const { leaveRequests, loading, error, refetch } = useChildLeaveRequests();

  return (
    <div className="space-y-6">
      <h1 className="font-serif text-2xl">
        {currentChild?.name ? `${currentChild.name}的请假` : "请假管理"}
      </h1>

      <LeaveRequestForm onSuccess={refetch} />

      <section aria-label="历史请假记录">
        <h2 className="font-serif text-base">历史请假</h2>
        <div className="mt-3">
          {loading ? (
            <span className="skeleton h-40 w-full rounded" />
          ) : error ? (
            <div
              role="alert"
              className="rounded border border-danger p-4 text-sm text-danger"
            >
              加载失败：{error.message}
            </div>
          ) : (
            <LeaveRequestList leaveRequests={leaveRequests} />
          )}
        </div>
      </section>
    </div>
  );
}
