import { createFileRoute, Outlet, Link, useRouterState } from "@tanstack/react-router";
import { PageHeader } from "@/components/common/PageHeader";
import { User, BarChart3, Shield, ShoppingBag, Wallet, ArrowLeftRight, Palette, Mail, Bell, Users, Gavel, FileText, LifeBuoy, Settings, Flag, Crown } from "lucide-react";
import { cn } from "@/lib/utils";

const NAV = [
  { to: "/account", label: "Overview", icon: User },
  { to: "/account/profile", label: "Profile", icon: User },
  { to: "/account/statistics", label: "Statistics", icon: BarChart3 },
  { to: "/account/privileges", label: "Privileges", icon: Shield },
  { to: "/account/orders", label: "Orders", icon: ShoppingBag },
  { to: "/account/balance", label: "Balance", icon: Wallet },
  { to: "/account/transactions", label: "Transactions", icon: ArrowLeftRight },
  { to: "/account/skins", label: "Skin loadouts", icon: Palette },
  { to: "/account/messages", label: "Messages", icon: Mail },
  { to: "/account/notifications", label: "Notifications", icon: Bell },
  { to: "/account/friends", label: "Friends", icon: Users },
  { to: "/account/punishments", label: "Punishments", icon: Gavel },
  { to: "/account/appeals", label: "Appeals", icon: FileText },
  { to: "/account/reports", label: "Reports", icon: Flag },
  { to: "/account/subscription", label: "Subscription", icon: Crown },
  { to: "/account/support", label: "Support", icon: LifeBuoy },
  { to: "/account/settings", label: "Settings", icon: Settings },
] as const;

export const Route = createFileRoute("/_public/account")({
  component: AccountLayout,
});

function AccountLayout() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  return (
    <div className="mx-auto max-w-[1400px] px-4 py-6">
      <PageHeader title="My account" description="Manage your profile, purchases and loadouts." />
      <div className="grid gap-6 lg:grid-cols-[240px_1fr]">
        <aside className="h-fit rounded-xl border border-border bg-card p-2">
          {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-muted-foreground hover:bg-accent hover:text-foreground")}>
                <n.icon className="h-4 w-4" /> {n.label}
              </Link>
            );
          })}
        </aside>
        <div className="min-w-0"><Outlet /></div>
      </div>
    </div>
  );
}