// AppShell：应用外壳（独立模式）
// 依据：02-architecture-design.md §6 应用外壳、F10 MF 暴露 AppShell 整体
// - MF 启用时由 Shell(teacher-portal) 提供外壳，本组件仅独立模式使用
// - 布局：顶部头部 + 左侧导航 + 中间内容区
// - 头部含 ChildSwitcher + 用户菜单

"use client";

import { type ReactNode } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { ChildSwitcher } from "./ChildSwitcher";
import { getUser, logout } from "@/lib/auth";
import { PERMISSIONS } from "@/lib/permissions";
import { usePermission } from "@/hooks/usePermission";
import { cn } from "@/lib/utils";

interface NavItem {
  label: string;
  href: string;
  permission: string;
}

const NAV_ITEMS: NavItem[] = [
  {
    label: "仪表盘",
    href: "/parent/dashboard",
    permission: PERMISSIONS.DASHBOARD_VIEW,
  },
  {
    label: "成绩",
    href: "/parent/grades",
    permission: PERMISSIONS.CHILD_GRADE_VIEW,
  },
  {
    label: "考试",
    href: "/parent/exams",
    permission: PERMISSIONS.CHILD_EXAM_VIEW,
  },
  {
    label: "考勤",
    href: "/parent/attendance",
    permission: PERMISSIONS.CHILD_ATTENDANCE_VIEW,
  },
  {
    label: "班级",
    href: "/parent/classes",
    permission: PERMISSIONS.CHILD_CLASS_VIEW,
  },
  {
    label: "作业",
    href: "/parent/homework",
    permission: PERMISSIONS.CHILD_HOMEWORK_VIEW,
  },
  {
    label: "学情",
    href: "/parent/weakness",
    permission: PERMISSIONS.CHILD_WEAKNESS_VIEW,
  },
  {
    label: "学习路径",
    href: "/parent/learning-path",
    permission: PERMISSIONS.CHILD_LEARNING_PATH_VIEW,
  },
  {
    label: "趋势",
    href: "/parent/trend",
    permission: PERMISSIONS.CHILD_TREND_VIEW,
  },
  {
    label: "通知",
    href: "/parent/notifications",
    permission: PERMISSIONS.NOTIFICATION_VIEW,
  },
  {
    label: "偏好",
    href: "/parent/preferences",
    permission: PERMISSIONS.NOTIFICATION_PREFERENCE_UPDATE,
  },
  {
    label: "设置",
    href: "/parent/settings",
    permission: PERMISSIONS.PROFILE_VIEW,
  },
];

export function AppShell({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const user = getUser();
  const { hasPermission } = usePermission();

  return (
    <div className="flex min-h-screen flex-col">
      {/* 头部 */}
      <header className="flex items-center justify-between border-b border-rule px-6 py-3">
        <div className="flex items-center gap-6">
          <Link href="/parent/dashboard" className="font-serif text-lg">
            Edu 家长端
          </Link>
          <ChildSwitcher />
        </div>
        <div className="flex items-center gap-4">
          <span className="text-sm text-ink-muted">{user?.name}</span>
          <button
            type="button"
            onClick={logout}
            aria-label="退出登录"
            className="text-sm text-ink-muted hover:text-danger"
          >
            退出
          </button>
        </div>
      </header>

      <div className="flex flex-1">
        {/* 左侧导航 */}
        <nav aria-label="主导航" className="w-48 border-r border-rule py-4">
          <ul className="space-y-1 px-2">
            {NAV_ITEMS.filter((item) =>
              hasPermission(item.permission as never),
            ).map((item) => {
              const isActive = pathname === item.href;
              return (
                <li key={item.href}>
                  <Link
                    href={item.href}
                    aria-current={isActive ? "page" : undefined}
                    className={cn(
                      "block rounded px-3 py-2 text-sm transition-colors",
                      isActive
                        ? "bg-accent-soft font-medium text-ink"
                        : "text-ink-muted hover:bg-paper-elevated hover:text-ink",
                    )}
                  >
                    {item.label}
                  </Link>
                </li>
              );
            })}
          </ul>
        </nav>

        {/* 主内容区 */}
        <main id="main-content" className="flex-1 overflow-x-hidden px-6 py-6">
          {children}
        </main>
      </div>
    </div>
  );
}

export default AppShell;
