"use client";

import { useEffect, useRef } from "react";
import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BarChart3,
  ShieldCheck,
  LogIn,
  LogOut,
  ScrollText,
  Settings,
  Sparkles,
  WalletCards
} from "lucide-react";
import clsx from "clsx";
import { revealChildren, runScopedMotion } from "@/lib/ui/motion";
import { AccountUsageMenu } from "@/components/account-usage-menu";
import { useBrowserAuth } from "@/components/browser-auth";

const nav = [
  { href: "/create", label: "创作", icon: Sparkles },
  { href: "/logs", label: "日志", icon: ScrollText, requiredRole: "super" as const },
  { href: "/settings", label: "设置", icon: Settings, requiredRole: "super" as const },
  { href: "/accounts", label: "账号", icon: ShieldCheck },
  { href: "/usage", label: "用量", icon: BarChart3, requiredRole: "admin" as const },
  { href: "/billing", label: "计费", icon: WalletCards }
];

export function AppShell({ children }: { children: React.ReactNode }) {
  const { user, authRequired, isAdmin, isSuperAdmin } = useBrowserAuth();
  const pathname = usePathname();
  const shellRef = useRef<HTMLDivElement | null>(null);
  const isAuthPage = pathname.startsWith("/auth");
  const isCreatePage = pathname === "/create";

  useEffect(() => {
    return runScopedMotion(shellRef, (scope) => revealChildren(scope, "[data-shell-animate]"));
  }, []);

  return (
    <div className={clsx("app-shell", isAuthPage && "auth-shell", isCreatePage && "create-shell")} ref={shellRef}>
      {!isAuthPage ? <a className="skip-link" href="#main-content">跳到主要内容</a> : null}
      {!isAuthPage ? (
        <header className="topbar" data-shell-animate>
          <Link className="brand" href="/create" aria-label="智念AIGC平台">
            <span className="brand-mark" aria-hidden="true">
              <Image className="brand-logo-img" src="/logo/zhinian-logo.png" alt="" width={124} height={28} priority />
            </span>
            <div>
              <div className="brand-title">智念AIGC平台</div>
            </div>
          </Link>
          <nav className="nav top-nav" aria-label="主导航">
            {nav.filter((item) => !item.requiredRole || (item.requiredRole === "super" && isSuperAdmin) || (item.requiredRole === "admin" && isAdmin)).map((item) => {
              const Icon = item.icon;
              const active = item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  className={clsx("nav-link", active && "active")}
                  aria-current={active ? "page" : undefined}
                >
                  <Icon aria-hidden="true" />
                  <span>{item.label}</span>
                </Link>
              );
            })}
          </nav>
          <div className="topbar-account">
            {user ? (
              <>
                <AccountUsageMenu user={user} />
                <form action="/api/auth/logout" method="post">
                  <button className="icon-button logout-button" type="submit" aria-label="退出登录" title="退出登录">
                    <LogOut aria-hidden="true" />
                  </button>
                </form>
              </>
            ) : authRequired ? (
              <Link className="nav-link login-link" href="/auth/login">
                <LogIn aria-hidden="true" />
                <span>登录</span>
              </Link>
            ) : null}
          </div>
        </header>
      ) : null}
      <main className={clsx("main", isAuthPage && "auth-main", isCreatePage && "create-main")} id="main-content" tabIndex={-1}>{children}</main>
    </div>
  );
}