// 子女详情聚合页
// 依据：02-architecture-design.md §3.1 路由结构
// 路由：/parent/children/[studentId]
// 头部：面包屑 + 学生信息；主体：Tab 面板（nuqs 管理 ?tab=）

"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { useQueryState, parseAsString } from "nuqs";
import { useChildDetail } from "@/hooks/useChildDetail";
import { useChildSwitcher } from "@/hooks/useChildSwitcher";
import {
  ChildDetailPanel,
  type DetailTab,
} from "@/components/ChildDetailPanel";
import { cn } from "@/lib/utils";

const VALID_TABS: DetailTab[] = [
  "overview",
  "homework",
  "grades",
  "exams",
  "schedule",
];

function isDetailTab(value: string): value is DetailTab {
  return (VALID_TABS as string[]).includes(value);
}

export default function ChildDetailPage(): JSX.Element {
  const params = useParams();
  const studentId =
    typeof params?.studentId === "string"
      ? params.studentId
      : Array.isArray(params?.studentId)
        ? (params.studentId[0] ?? "")
        : "";

  const { children } = useChildSwitcher();
  const { childDetail, loading, error } = useChildDetail(studentId);

  // nuqs 管理 ?tab= 参数
  const [tabStr, setTabStr] = useQueryState(
    "tab",
    parseAsString.withDefault("overview"),
  );
  const activeTab: DetailTab = isDetailTab(tabStr) ? tabStr : "overview";

  // 兄弟姐妹（除当前子女外）
  const siblings = children.filter((c) => c.id !== studentId);

  return (
    <div className="space-y-6">
      {/* 面包屑 */}
      <nav aria-label="面包屑" className="text-xs text-ink-muted">
        <ol className="flex flex-wrap gap-1">
          <li>
            <Link href="/parent/dashboard" className="hover:text-ink">
              首页
            </Link>
          </li>
          <li aria-hidden="true">/</li>
          <li aria-current="page">子女详情</li>
        </ol>
      </nav>

      {/* 头部：学生信息 */}
      <header className="rounded border border-rule bg-paper-elevated p-4">
        {loading ? (
          <span className="skeleton h-16 w-full rounded" />
        ) : error ? (
          <div
            role="alert"
            className="rounded border border-danger p-4 text-sm text-danger"
          >
            加载失败：{error.message}
          </div>
        ) : !childDetail ? (
          <p className="text-sm text-ink-muted" role="status">
            暂无子女详情数据
          </p>
        ) : (
          <div className="flex flex-wrap items-center gap-4">
            <div
              className="flex h-12 w-12 items-center justify-center rounded-full bg-accent-soft font-serif text-lg font-medium text-accent"
              aria-hidden="true"
            >
              {childDetail.basicInfo.name.slice(0, 1)}
            </div>
            <div className="space-y-1">
              <h1 className="font-serif text-2xl">
                {childDetail.basicInfo.name}
              </h1>
              <p className="text-xs text-ink-muted">
                {childDetail.basicInfo.className} · {childDetail.basicInfo.schoolName} · 关系：{childDetail.basicInfo.relation}
              </p>
            </div>
          </div>
        )}
      </header>

      {/* 兄弟姐妹切换 */}
      {siblings.length > 0 && (
        <div className="flex flex-wrap items-center gap-2">
          <span className="text-xs text-ink-muted">其他子女：</span>
          {siblings.map((s) => (
            <Link
              key={s.id}
              href={`/parent/children/${s.id}`}
              className={cn(
                "rounded border border-rule px-3 py-1 text-sm transition-colors hover:bg-paper-elevated",
              )}
            >
              {s.name}
            </Link>
          ))}
        </div>
      )}

      {/* Tab 面板 */}
      {childDetail && (
        <ChildDetailPanel
          childDetail={childDetail}
          activeTab={activeTab}
          onTabChange={(t) => setTabStr(t)}
        />
      )}
    </div>
  );
}
