EpicNext-Cms/src/app/admin/layout.tsx

import { redirect } from "next/navigation";
import type { ReactNode } from "react";
import { AdminNavLink } from "@/components/admin/admin-nav-link";
import { requireStaff } from "@/lib/admin/guard";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";
import {
  LayoutDashboard, Newspaper, Tags, Compass, HelpCircle, Megaphone, SquarePen, Image,
  Users, Ban, Globe, Shield, ClipboardList, Group, Key,
  Store, ShoppingCart, Receipt, Ticket, CreditCard, Gem, Award, Trophy, Calendar,
  Radio, History,
  Terminal, Monitor, Bell, FileText, Filter, Wrench, Settings, DoorOpen, Mail, Palette, Cog,
  ChevronDown, LogOut,
} from "lucide-react";

export const dynamic = "force-dynamic";

const NAV_GROUPS: { label: string; icon: ReactNode; items: { href: string; label: string; icon: ReactNode }[] }[] = [
  {
    label: "Overview", icon: <LayoutDashboard size={14} />,
    items: [{ href: "/admin", label: "Dashboard", icon: <LayoutDashboard size={16} /> }],
  },
  {
    label: "Content", icon: <Newspaper size={14} />,
    items: [
      { href: "/admin/articles", label: "Articles", icon: <Newspaper size={16} /> },
      { href: "/admin/tags", label: "Tags", icon: <Tags size={16} /> },
      { href: "/admin/navigation", label: "Navigator", icon: <Compass size={16} /> },
      { href: "/admin/help-questions", label: "Help center", icon: <HelpCircle size={16} /> },
      { href: "/admin/ads", label: "Advertisements", icon: <Megaphone size={16} /> },
      { href: "/admin/writeable-boxes", label: "Writeable boxes", icon: <SquarePen size={16} /> },
      { href: "/admin/photos", label: "Photos", icon: <Image size={16} /> },
    ],
  },
  {
    label: "Users & access", icon: <Shield size={14} />,
    items: [
      { href: "/admin/users", label: "Users", icon: <Users size={16} /> },
      { href: "/admin/bans", label: "Bans", icon: <Ban size={16} /> },
      { href: "/admin/ip", label: "IP management", icon: <Globe size={16} /> },
      { href: "/admin/vpn", label: "VPN", icon: <Shield size={16} /> },
      { href: "/admin/applications", label: "Applications", icon: <ClipboardList size={16} /> },
      { href: "/admin/teams", label: "Teams", icon: <Group size={16} /> },
      { href: "/admin/permissions", label: "Permissions", icon: <Key size={16} /> },
    ],
  },
  {
    label: "Economy", icon: <ShoppingCart size={14} />,
    items: [
      { href: "/admin/catalog", label: "Catalog", icon: <Store size={16} /> },
      { href: "/admin/shop", label: "Shop", icon: <ShoppingCart size={16} /> },
      { href: "/admin/transactions", label: "Transactions", icon: <Receipt size={16} /> },
      { href: "/admin/vouchers", label: "Vouchers", icon: <Ticket size={16} /> },
      { href: "/admin/subscriptions", label: "Subscriptions", icon: <CreditCard size={16} /> },
      { href: "/admin/rare-values", label: "Rare values", icon: <Gem size={16} /> },
      { href: "/admin/badges", label: "Badges", icon: <Award size={16} /> },
      { href: "/admin/achievements", label: "Achievements", icon: <Trophy size={16} /> },
      { href: "/admin/calendar", label: "Calendar", icon: <Calendar size={16} /> },
    ],
  },
  {
    label: "Radio", icon: <Radio size={14} />,
    items: [
      { href: "/admin/radio", label: "Radio", icon: <Radio size={16} /> },
      { href: "/admin/radio/history", label: "Radio history", icon: <History size={16} /> },
    ],
  },
  {
    label: "System", icon: <Settings size={14} />,
    items: [
      { href: "/admin/commandocentrum", label: "Commandocentrum", icon: <Terminal size={16} /> },
      { href: "/admin/emulator", label: "Emulator", icon: <Monitor size={16} /> },
      { href: "/admin/alerts", label: "Alerts", icon: <Bell size={16} /> },
      { href: "/admin/logs", label: "Logs", icon: <FileText size={16} /> },
      { href: "/admin/wordfilter", label: "Word filter", icon: <Filter size={16} /> },
      { href: "/admin/maintenance", label: "Maintenance", icon: <Wrench size={16} /> },
      { href: "/admin/housekeeping", label: "Housekeeping", icon: <Settings size={16} /> },
      { href: "/admin/rooms", label: "Rooms", icon: <DoorOpen size={16} /> },
      { href: "/admin/email-templates", label: "Email templates", icon: <Mail size={16} /> },
      { href: "/admin/theme", label: "Theme", icon: <Palette size={16} /> },
      { href: "/admin/media", label: "Media", icon: <Image size={16} /> },
      { href: "/admin/settings", label: "Settings", icon: <Cog size={16} /> },
    ],
  },
];

export default async function AdminLayout({ children }: { children: ReactNode }) {
  const staff = await requireStaff();

  if (await siteSettings.getBool("force_staff_2fa", false)) {
    const u = await prisma.user
      .findUnique({ where: { id: staff.id }, select: { twoFactorConfirmedAt: true } })
      .catch(() => null);
    if (!u?.twoFactorConfirmedAt) redirect("/settings/2fa?error=staffrequired");
  }

  return (
    <div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] min-h-screen bg-[var(--color-background)]">
      <Sidebar staff={staff} />
      <div className="flex flex-col min-w-0 p-5 lg:p-6">
        <Topbar staff={staff} />
        <section className="admin-page flex-1">{children}</section>
      </div>
    </div>
  );
}

function Sidebar({ staff }: { staff: { id: number; username: string; rank: number } }) {
  const initial = staff.username.charAt(0).toUpperCase();

  return (
    <aside className="sticky top-0 self-start h-screen bg-gradient-to-b from-[#1e1b2e] to-[#151226] text-[#c8cbe0] shadow-xl flex flex-col">
      <div className="flex items-center gap-3 px-4 py-5 border-b border-white/[0.06]">
        <span className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[#1a1a2e] bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-hover)] shadow-lg shadow-[var(--color-primary)]/20" aria-hidden>
          {initial}
        </span>
        <div className="min-w-0 flex-1">
          <div className="font-semibold text-sm text-white truncate">{staff.username}</div>
          <span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[rgba(200,203,224,0.5)]">rank {staff.rank}</span>
        </div>
      </div>

      <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1">
        {NAV_GROUPS.map((group) => (
          <div key={group.label}>
            <div className="flex items-center gap-1.5 px-2 py-2 text-[0.6rem] font-bold uppercase tracking-[0.12em] text-[rgba(200,203,224,0.3)]">
              {group.icon}
              <span>{group.label}</span>
            </div>
            <div className="space-y-0.5">
              {group.items.map((item) => (
                <AdminNavLink key={item.href} href={item.href} icon={item.icon}>
                  {item.label}
                </AdminNavLink>
              ))}
            </div>
          </div>
        ))}
      </nav>

      <div className="px-3 py-3 border-t border-white/[0.06]">
        <a
          href="/"
          className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[#c8cbe0]/60 text-xs font-medium hover:text-white hover:bg-white/5 transition-all duration-150 no-underline"
        >
          <LogOut size={14} />
          <span>Back to site</span>
        </a>
      </div>
    </aside>
  );
}

function Topbar({ staff }: { staff: { id: number; username: string; rank: number } }) {
  return (
    <header className="flex items-center justify-between gap-4 bg-[var(--color-surface)] border border-[var(--border)] rounded-2xl px-5 py-3 mb-5 shadow-card">
      <div className="flex items-center gap-3">
        <h2 className="m-0 text-base font-extrabold text-[var(--color-text)]">Housekeeping</h2>
        <span className="hidden sm:inline-block w-px h-5 bg-[var(--border)]" />
        <span className="hidden sm:inline text-xs text-[var(--color-text-muted)]">
          Hotel management panel
        </span>
      </div>
      <div className="flex items-center gap-3">
        <span className="text-xs text-[var(--color-text-muted)]">
          <strong className="text-[var(--color-text)]">{staff.username}</strong>
        </span>
        <span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[#1a1a2e] bg-[var(--color-primary)] rounded-full px-2.5 py-1">
          rank {staff.rank}
        </span>
      </div>
    </header>
  );
}