import { createFileRoute, Outlet, Link, useRouterState } from "@tanstack/react-router";
import { Header } from "@/components/navigation/Header";
import {
  LayoutDashboard, FileText, Image, Navigation2, Users, Server, Gavel, ScrollText,
  ShoppingBag, Package, ArrowLeftRight, Newspaper, BookOpen, Wallet, Palette,
  MessageCircle, LifeBuoy, UserCog, ClipboardList, Settings, Sparkles,
  Flag, Tag, Crown,
} from "lucide-react";
import { cn } from "@/lib/utils";

const NAV = [
  { to: "/admin", label: "Dashboard", icon: LayoutDashboard },
  { to: "/admin/content", label: "Content", icon: FileText },
  { to: "/admin/sliders", label: "Sliders", icon: Sparkles },
  { to: "/admin/banners", label: "Banners", icon: Image },
  { to: "/admin/navigation", label: "Navigation", icon: Navigation2 },
  { to: "/admin/users", label: "Users", icon: Users },
  { to: "/admin/servers", label: "Servers", icon: Server },
  { to: "/admin/punishments", label: "Punishments", icon: Gavel },
  { to: "/admin/appeals", label: "Appeals", icon: ScrollText },
  { to: "/admin/reports", label: "Reports", icon: Flag },
  { to: "/admin/promo-codes", label: "Promo codes", icon: Tag },
  { to: "/admin/subscriptions", label: "Subscriptions", icon: Crown },
  { to: "/admin/store", label: "Store", icon: ShoppingBag },
  { to: "/admin/orders", label: "Orders", icon: Package },
  { to: "/admin/transactions", label: "Transactions", icon: ArrowLeftRight },
  { to: "/admin/news", label: "News", icon: Newspaper },
  { to: "/admin/rules", label: "Rules", icon: BookOpen },
  { to: "/admin/balances", label: "Balances", icon: Wallet },
  { to: "/admin/skins", label: "Skins", icon: Palette },
  { to: "/admin/chat", label: "Chat", icon: MessageCircle },
  { to: "/admin/support", label: "Support", icon: LifeBuoy },
  { to: "/admin/administrators", label: "Administrators", icon: UserCog },
  { to: "/admin/audit-logs", label: "Audit logs", icon: ClipboardList },
  { to: "/admin/settings", label: "Settings", icon: Settings },
] as const;

export const Route = createFileRoute("/admin")({
  component: AdminLayout,
});

function AdminLayout() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  return (
    <div className="flex min-h-screen flex-col">
      <Header />
      <div className="mx-auto grid w-full max-w-[1600px] flex-1 grid-cols-1 lg:grid-cols-[240px_1fr]">
        <aside className="border-r border-border/60 bg-sidebar p-3 lg:sticky lg:top-16 lg:h-[calc(100vh-4rem)] lg:overflow-y-auto">
          <div className="mb-3 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Admin panel</div>
          <nav className="flex flex-col gap-0.5">
            {NAV.map((n) => {
              const active = pathname === n.to;
              return (
                <Link key={n.to} to={n.to} className={cn("flex items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors", active ? "bg-primary/15 text-secondary" : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground")}>
                  <n.icon className="h-4 w-4" /> {n.label}
                </Link>
              );
            })}
          </nav>
        </aside>
        <main className="min-w-0 p-6"><Outlet /></main>
      </div>
    </div>
  );
}