import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import "./index.css";

import { DesignSystem } from "./pages/DesignSystem";
import { AdminQuests } from "./pages/AdminQuests";
import { AdminOverview } from "./pages/admin/Overview";
import { AdminItems } from "./pages/admin/Items";

import { Home } from "./pages/Home";
import { Toaster } from "sonner";
import { NavigationProvider } from "./contexts/navigation-context";
import { MainLayout } from "./components/layout/main-layout";

import { SettingsLayout } from "./pages/settings/SettingsLayout";
import { GeneralSettings } from "./pages/settings/General";
import { EconomySettings } from "./pages/settings/Economy";
import { SystemsSettings } from "./pages/settings/Systems";
import { RolesSettings } from "./pages/settings/Roles";

export function App() {
  return (
    <BrowserRouter>
      <NavigationProvider>
        <Toaster richColors position="top-right" theme="dark" />
        <MainLayout>
          <Routes>

            <Route path="/design-system" element={<DesignSystem />} />
            <Route path="/admin" element={<Navigate to="/admin/overview" replace />} />
            <Route path="/admin/overview" element={<AdminOverview />} />
            <Route path="/admin/quests" element={<AdminQuests />} />
            <Route path="/admin/items" element={<AdminItems />} />

            
            <Route path="/settings" element={<SettingsLayout />}>
              <Route index element={<Navigate to="/settings/general" replace />} />
              <Route path="general" element={<GeneralSettings />} />
              <Route path="economy" element={<EconomySettings />} />
              <Route path="systems" element={<SystemsSettings />} />
              <Route path="roles" element={<RolesSettings />} />
            </Route>

            <Route path="/" element={<Home />} />
          </Routes>
        </MainLayout>
      </NavigationProvider>
    </BrowserRouter>
  );
}

export default App;