"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import type { LucideIcon } from "lucide-react";
import {
  LayoutDashboard,
  Users,
  Megaphone,
  Palette,
  ShieldCheck,
  Coins,
  Globe,
  FolderOpen,
  Menu,
  MessageCircle,
  X,
  ArrowLeft,
  LogOut,
  User as UserIcon,
  Settings,
  ChevronDown,
} from "lucide-react";
import type { User } from "@/lib/api";
import { apiAdminPendingCounts, apiLogout } from "@/lib/api";
import {
  canModerateAny,
  isAdminOrAbove,
  isStaff,
  isSuperOrOwner,
  type RoleUserLike,
} from "@/lib/roles";
import { realtime, RT_MODERATION_CHANGED } from "@/lib/realtime";
import { onDocumentVisible } from "@/lib/visibilityReconcile";
import { onForceLogout, onUserUpdate } from "@/lib/userEvents";
import Avatar from "@/components/Avatar";
import RoleBadge from "@/components/RoleBadge";
import NotificationBell from "@/components/NotificationBell";
import ThemeToggle from "@/components/ThemeToggle";

interface NavItem {
  href: string;
  label: string;
  icon: LucideIcon;
  exact?: boolean;
  visible: (u: RoleUserLike) => boolean;
  pendingBadge?: boolean;
}

interface NavGroup {
  title: string;
  items: NavItem[];
}

// 分组导航：概览 → 内容运营 → 成员经济 → 站点配置
const NAV_GROUPS: NavGroup[] = [
  {
    title: "概览",
    items: [
      { href: "/admin", label: "仪表盘", icon: LayoutDashboard, exact: true, visible: () => true },
    ],
  },
  {
    title: "内容",
    items: [
      {
        href: "/admin/content",
        label: "内容管理",
        icon: FolderOpen,
        visible: (u) => canModerateAny(u),
        pendingBadge: true,
      },
      {
        href: "/admin/messages",
        label: "消息管理",
        icon: MessageCircle,
        visible: (u) => isStaff(u.role),
      },
      {
        href: "/admin/announcements",
        label: "公告管理",
        icon: Megaphone,
        visible: (u) => isAdminOrAbove(u.role),
      },
    ],
  },
  {
    title: "成员与经济",
    items: [
      {
        href: "/admin/users",
        label: "用户管理",
        icon: Users,
        visible: (u) => isSuperOrOwner(u.role),
      },
      {
        href: "/admin/economy",
        label: "积分看板",
        icon: Coins,
        visible: (u) => isAdminOrAbove(u.role),
      },
    ],
  },
  {
    title: "站点",
    items: [
      {
        href: "/admin/settings",
        label: "站点设置",
        icon: Globe,
        visible: (u) => isSuperOrOwner(u.role),
      },
      {
        href: "/admin/appearance",
        label: "外观",
        icon: Palette,
        visible: (u) => isSuperOrOwner(u.role),
      },
    ],
  },
];

function isActive(pathname: string, href: string, exact?: boolean) {
  return exact ? pathname === href : pathname === href || pathname.startsWith(`${href}/`);
}

function usePendingCounts(enabled: boolean) {
  const [counts, setCounts] = useState({ posts: 0, comments: 0 });
  useEffect(() => {
    if (!enabled) return;
    let alive = true;
    const load = () => {
      apiAdminPendingCounts()
        .then((c) => {
          if (alive) setCounts(c);
        })
        .catch(() => {});
    };
    load();
    const off = realtime.on(RT_MODERATION_CHANGED, () => load());
    const offVisible = onDocumentVisible(load);
    return () => {
      alive = false;
      off();
      offVisible();
    };
  }, [enabled]);
  return counts.posts + counts.comments;
}

function PendingBadge({ count }: { count: number }) {
  if (count <= 0) return null;
  return (
    <span
      className="ml-auto shrink-0 min-w-[20px] h-5 px-1.5 rounded-full inline-flex items-center justify-center text-[10.5px] font-medium tabular-nums"
      style={{ background: "var(--gold-soft)", color: "var(--gold)" }}
      aria-label={`${count} 条待审核`}
    >
      {count > 99 ? "99+" : count}
    </span>
  );
}

function visibleGroups(user: RoleUserLike) {
  return NAV_GROUPS.map((g) => ({
    ...g,
    items: g.items.filter((i) => i.visible(user)),
  })).filter((g) => g.items.length > 0);
}

function flatItems(user: RoleUserLike) {
  return visibleGroups(user).flatMap((g) => g.items);
}

function AdminBrand({ siteName }: { siteName: string }) {
  return (
    <div className="admin-rail-brand">
      <span className="admin-rail-brand-mark" aria-hidden>
        <ShieldCheck size={18} />
      </span>
      <span className="leading-tight min-w-0">
        <span className="block text-[14.5px] font-extrabold tracking-tight truncate" style={{ color: "var(--ink)" }}>
          {siteName}
        </span>
        <span
          className="block text-[10.5px] mt-0.5 tracking-[0.12em] uppercase"
          style={{ color: "var(--ink-3)" }}
        >
          J13 ADMIN
        </span>
      </span>
    </div>
  );
}

function AdminRailNav({
  user,
  onNavigate,
}: {
  user: User;
  onNavigate?: () => void;
}) {
  const pathname = usePathname();
  const groups = visibleGroups(user);
  const pendingTotal = usePendingCounts(flatItems(user).some((i) => i.pendingBadge));

  return (
    <nav className="admin-rail-nav" aria-label="后台导航">
      {groups.map((group) => (
        <div key={group.title} className="admin-rail-group">
          <p className="admin-rail-group-title">{group.title}</p>
          <div className="flex flex-col gap-0.5">
            {group.items.map((item) => {
              const active = isActive(pathname, item.href, item.exact);
              const Icon = item.icon;
              return (
                <Link
                  key={item.href}
                  href={item.href}
                  aria-current={active ? "page" : undefined}
                  onClick={onNavigate}
                  className={`admin-rail-link${active ? " is-active" : ""}`}
                >
                  <Icon size={16} className="shrink-0" aria-hidden />
                  {item.label}
                  {item.pendingBadge && <PendingBadge count={pendingTotal} />}
                </Link>
              );
            })}
          </div>
        </div>
      ))}
    </nav>
  );
}

function AdminUserMenu({ user, onLogout }: { user: User; onLogout: () => void }) {
  const [open, setOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onDown = (e: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const itemCls =
    "w-full flex items-center gap-2.5 px-4 py-2.5 text-[13.5px] transition-colors hover:bg-[var(--accent-soft)] focus-visible:bg-[var(--accent-soft)]";

  return (
    <div className="relative" ref={menuRef}>
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="menu"
        aria-expanded={open}
        className="admin-topbar-user"
        style={{
          borderColor: open ? "var(--accent)" : "var(--line)",
          background: open ? "var(--accent-soft)" : "var(--panel)",
        }}
      >
        <Avatar name={user.nickname || user.username} src={user.avatar || undefined} size={28} />
        <span className="hidden sm:flex flex-col items-start min-w-0 leading-tight">
          <span
            className="text-[13px] font-medium max-w-[100px] truncate"
            style={{ color: open ? "var(--accent)" : "var(--ink)" }}
          >
            {user.nickname}
          </span>
        </span>
        <span className="hidden md:inline-flex shrink-0">
          <RoleBadge role={user.role} boardIds={user.board_ids} size={10} />
        </span>
        <ChevronDown
          size={14}
          className="shrink-0 transition-transform duration-200"
          style={{
            color: "var(--ink-3)",
            transform: open ? "rotate(180deg)" : "none",
          }}
        />
      </button>

      {open && (
        <div
          role="menu"
          className="absolute right-0 mt-2 w-60 overflow-hidden z-50 j13-toast-in"
          style={{
            background: "var(--panel)",
            border: "1px solid var(--line)",
            borderRadius: "var(--r)",
            boxShadow: "var(--shadow-lg)",
          }}
        >
          <div
            className="flex items-center gap-3 px-4 py-3.5"
            style={{ borderBottom: "1px solid var(--line)" }}
          >
            <Avatar name={user.nickname || user.username} src={user.avatar || undefined} size={38} />
            <div className="min-w-0">
              <p className="text-[14px] truncate" style={{ color: "var(--ink)" }}>
                {user.nickname}
              </p>
              <p className="meta text-xs truncate">@{user.username}</p>
            </div>
          </div>
          <div className="p-1.5">
            <Link href={`/u/${user.id}`} onClick={() => setOpen(false)} className={itemCls} role="menuitem">
              <UserIcon size={15} style={{ color: "var(--ink-3)" }} /> 个人主页
            </Link>
            <Link href="/settings" onClick={() => setOpen(false)} className={itemCls} role="menuitem">
              <Settings size={15} style={{ color: "var(--ink-3)" }} /> 账号设置
            </Link>
          </div>
          <div className="p-1.5" style={{ borderTop: "1px solid var(--line)" }}>
            <button
              type="button"
              onClick={() => {
                setOpen(false);
                onLogout();
              }}
              className={itemCls}
              role="menuitem"
              style={{ color: "var(--danger)" }}
            >
              <LogOut size={15} /> 退出登录
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

/**
 * 后台独立壳：全高品牌侧栏 + 细顶栏 + 可滚动主区。
 * 不依赖公开站 Header/Footer；移动端用抽屉打开同源侧栏。
 */
export default function AdminShell({
  user: initialUser,
  siteName,
  initialTheme = "light",
  initialUnread = 0,
  children,
}: {
  user: User;
  siteName: string;
  initialTheme?: "light" | "dark";
  initialUnread?: number;
  children: React.ReactNode;
}) {
  const router = useRouter();
  const pathname = usePathname();
  const [user, setUser] = useState(initialUser);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const brand = siteName.trim() || "姜十三论坛";

  useEffect(() => {
    setUser(initialUser);
  }, [initialUser]);

  useEffect(() => onUserUpdate((patch) => {
    setUser((prev) => ({ ...prev, ...patch }));
  }), []);

  useEffect(() => onForceLogout(() => {
    setDrawerOpen(false);
    apiLogout()
      .catch(() => {})
      .finally(() => {
        router.push("/");
        router.refresh();
      });
  }), [router]);

  // 路由切换时关闭移动抽屉
  useEffect(() => {
    setDrawerOpen(false);
  }, [pathname]);

  // 抽屉打开时锁 body 滚（壳层本身已 overflow:hidden，这里防焦点穿透）
  useEffect(() => {
    if (!drawerOpen) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setDrawerOpen(false);
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [drawerOpen]);

  const handleLogout = async () => {
    try {
      await apiLogout();
    } catch {
      /* ignore */
    }
    router.push("/");
    router.refresh();
  };

  const iconBtn =
    "w-10 h-10 flex items-center justify-center rounded-full transition-colors";
  const iconBtnStyle = {
    border: "1px solid var(--line)",
    background: "var(--panel)",
    color: "var(--ink-2)",
  } as const;

  const railInner = (
    <>
      <AdminBrand siteName={brand} />
      <AdminRailNav user={user} onNavigate={() => setDrawerOpen(false)} />
    </>
  );

  return (
    <div data-admin-viewport className="admin-shell">
      {/* 桌面侧栏：宽度断点由 CSS 控制，避免自定义 display 盖掉 Tailwind hidden */}
      <aside className="admin-rail admin-rail-desktop" aria-label="管理侧栏">
        {railInner}
      </aside>

      {/* 移动抽屉 */}
      {drawerOpen && (
        <div className="admin-drawer lg:hidden" role="dialog" aria-modal="true" aria-label="后台导航">
          <button
            type="button"
            className="admin-drawer-backdrop"
            aria-label="关闭导航"
            onClick={() => setDrawerOpen(false)}
          />
          <aside className="admin-rail admin-drawer-panel">
            <div className="flex items-center justify-between gap-2 mb-1">
              <AdminBrand siteName={brand} />
              <button
                type="button"
                className={iconBtn}
                style={iconBtnStyle}
                aria-label="关闭导航"
                onClick={() => setDrawerOpen(false)}
              >
                <X size={18} />
              </button>
            </div>
            <AdminRailNav user={user} onNavigate={() => setDrawerOpen(false)} />
          </aside>
        </div>
      )}

      <div className="admin-main-col">
        <header className="admin-topbar">
          <div className="admin-topbar-left">
            <button
              type="button"
              className={`${iconBtn} lg:hidden`}
              style={iconBtnStyle}
              aria-label="打开导航"
              aria-expanded={drawerOpen}
              onClick={() => setDrawerOpen(true)}
            >
              <Menu size={18} />
            </button>
            <Link href="/" className="admin-topbar-back">
              <ArrowLeft size={15} aria-hidden />
              返回站点
            </Link>
          </div>
          <div className="admin-topbar-right">
            <ThemeToggle initialTheme={initialTheme} className={iconBtn} style={iconBtnStyle} />
            <NotificationBell initialUnread={initialUnread} />
            <AdminUserMenu user={user} onLogout={handleLogout} />
          </div>
        </header>

        <main id="main" tabIndex={-1} className="admin-canvas outline-none">
          {children}
        </main>
      </div>
    </div>
  );
}