aurorabot/panel/src/App.tsx

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { useAuth } from "./lib/useAuth";
import { Loader2 } from "lucide-react";
import Layout from "./components/Layout";
import Dashboard from "./pages/Dashboard";
import Settings from "./pages/Settings";
import Users from "./pages/Users";
import Items from "./pages/Items";
import PlaceholderPage from "./pages/PlaceholderPage";
import NotEnrolled from "./pages/NotEnrolled";
import PlayerDashboard from "./pages/PlayerDashboard";
import { GameLobby } from "./games/GameLobby";
import { GameRoom } from "./games/GameRoom";

const placeholders: Record<string, { title: string; description: string }> = {
    classes: {
        title: "Classes",
        description: "Manage academy classes, assign Discord roles, and track class balances.",
    },
    quests: {
        title: "Quests",
        description: "Configure quests with trigger events, targets, and XP/balance rewards.",
    },
    lootdrops: {
        title: "Lootdrops",
        description: "View active lootdrops, spawn new drops, and manage lootdrop history.",
    },
    moderation: {
        title: "Moderation",
        description: "Review moderation cases — warnings, timeouts, kicks, bans — and manage appeals.",
    },
    transactions: {
        title: "Transactions",
        description: "Browse the economy transaction log with filtering by user, type, and date.",
    },
    leaderboards: {
        title: "Leaderboards",
        description: "View top players by level, wealth, and net worth.",
    },
};

function AppRoutes() {
    const { loading, user, enrolled, logout } = useAuth();

    if (loading) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
            </div>
        );
    }

    if (!user && !enrolled) {
        return <NotEnrolled />;
    }

    if (!user) {
        return (
            <div className="min-h-screen flex items-center justify-center">
                <div className="text-center max-w-xs">
                    <div className="font-display font-bold text-3xl tracking-tight mb-1">Aurora</div>
                    <p className="text-sm text-muted-foreground mb-8">Welcome to Aurora</p>
                    <a
                        href={`/auth/discord?return_to=${encodeURIComponent(window.location.pathname)}`}
                        className="inline-flex items-center justify-center w-full rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors"
                    >
                        Sign in with Discord
                    </a>
                </div>
            </div>
        );
    }

    return (
        <Layout user={user} logout={logout}>
            <Routes>
                <Route path="/" element={<Navigate to={user.role === "admin" ? "/admin" : "/dashboard"} replace />} />

                {/* Player routes */}
                <Route path="/dashboard" element={<PlayerDashboard userId={user.discordId} />} />
                <Route path="/leaderboards" element={<PlaceholderPage {...placeholders.leaderboards} />} />

                {/* Game routes (both roles) */}
                <Route path="/games" element={<GameLobby />} />
                <Route path="/:gameSlug/:roomId" element={<GameRoom userId={user.discordId} />} />

                {/* Admin routes */}
                {user.role === "admin" && (
                    <>
                        <Route path="/admin" element={<Dashboard />} />
                        <Route path="/admin/users" element={<Users />} />
                        <Route path="/admin/items" element={<Items />} />
                        <Route path="/admin/classes" element={<PlaceholderPage {...placeholders.classes} />} />
                        <Route path="/admin/quests" element={<PlaceholderPage {...placeholders.quests} />} />
                        <Route path="/admin/lootdrops" element={<PlaceholderPage {...placeholders.lootdrops} />} />
                        <Route path="/admin/moderation" element={<PlaceholderPage {...placeholders.moderation} />} />
                        <Route path="/admin/transactions" element={<PlaceholderPage {...placeholders.transactions} />} />
                        <Route path="/admin/settings" element={<Settings />} />
                    </>
                )}

                <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
        </Layout>
    );
}

export default function App() {
    return (
        <BrowserRouter>
            <AppRoutes />
        </BrowserRouter>
    );
}