import { StrictMode, Suspense, lazy } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Navigate, Route, Routes } from "react-router";
import { i18nReady } from "./i18n";
import "@fontsource-variable/exo-2";
import "@fontsource/rajdhani/500.css";
import "@fontsource/rajdhani/600.css";
import "@fontsource/rajdhani/700.css";
import "./styles/tokens.css";
import "./styles/global.css";
import "./styles/components.css";
import "./styles/economy.css";
import "./styles/currency.css";
import "./styles/tables.css";
import "./styles/hud.css";
import "./styles/theme.css";
import { SpaceBackground } from "./components/effects/SpaceBackground";
import { installInteractions } from "./components/effects/interactions";
import { armAmbient } from "./audio/sfx";
import { AuthProvider } from "./features/auth/AuthContext";
import { WalletProvider } from "./features/economy/WalletContext";
import { AccountProvider } from "./features/account/AccountContext";
import { HomePage } from "./features/home/HomePage";
import { SocialProvider } from "./features/social/SocialContext";
import { AppShell } from "./layout/AppShell";

// Chargés à la demande : le plateau de combat ne l'est qu'au moment de jouer.
// Le panel d'administration est un site à part (apps/admin).
const CollectionPage = lazy(() =>
  import("./features/collection/CollectionPage").then((module) => ({
    default: module.CollectionPage,
  })),
);
const BoostersPage = lazy(() =>
  import("./features/boosters/BoostersPage").then((module) => ({
    default: module.BoostersPage,
  })),
);
const PassPage = lazy(() =>
  import("./features/pass/PassPage").then((module) => ({
    default: module.PassPage,
  })),
);
const DecksPage = lazy(() => import("./features/decks/DecksPage"));
const BattlePage = lazy(() => import("./features/battle/BattlePage"));
const WatchPage = lazy(() => import("./features/battle/WatchPage"));
const ProfilePage = lazy(() => import("./features/profile/ProfilePage"));
const MarketPage = lazy(() => import("./features/market/MarketPage"));
const ExpeditionsPage = lazy(
  () => import("./features/expeditions/ExpeditionsPage"),
);
const GuildPage = lazy(() => import("./features/guilds/GuildPage"));
const LeaderboardPage = lazy(
  () => import("./features/leaderboard/LeaderboardPage"),
);
const ReplayPage = lazy(() => import("./features/battle/ReplayPage"));
const RechargePage = lazy(() => import("./features/recharge/RechargePage"));
const GameRulesPage = lazy(() => import("./features/rules/GameRulesPage"));
const CockpitPage = lazy(() => import("./features/cockpit/CockpitPage"));

// En développement, le rechargement à chaud peut réexécuter ce module : on réutilise la racine
// déjà créée au lieu d'en créer une seconde sur le même élément.
const container = document.getElementById("root")! as HTMLElement & {
  __root?: ReturnType<typeof createRoot>;
};
container.__root ??= createRoot(container);
const root = container.__root;
installInteractions();
armAmbient();
void i18nReady.then(() =>
  root.render(
    <StrictMode>
      <SpaceBackground />
      <BrowserRouter>
        <AuthProvider>
          <WalletProvider>
            <AccountProvider>
              <SocialProvider>
                <Suspense fallback={null}>
                  <Routes>
                    <Route element={<AppShell />}>
                      <Route index element={<HomePage />} />
                      <Route path="collection" element={<CollectionPage />} />
                      <Route path="decks" element={<DecksPage />} />
                      <Route path="shop" element={<BoostersPage />} />
                      <Route
                        path="boosters"
                        element={<Navigate to="/shop" replace />}
                      />
                      <Route path="pass" element={<PassPage />} />
                      <Route path="battle" element={<BattlePage />} />
                      <Route path="watch/:id" element={<WatchPage />} />
                      <Route path="profile" element={<ProfilePage />} />
                      <Route path="pilot/:id" element={<CockpitPage />} />
                      <Route path="market" element={<MarketPage />} />
                      <Route path="expeditions" element={<ExpeditionsPage />} />
                      <Route path="guild" element={<GuildPage />} />
                      <Route path="leaderboard" element={<LeaderboardPage />} />
                      <Route path="replay/:id" element={<ReplayPage />} />
                      <Route path="recharge" element={<RechargePage />} />
                      <Route path="rules" element={<GameRulesPage />} />
                      <Route path="*" element={<Navigate to="/" replace />} />
                    </Route>
                  </Routes>
                </Suspense>
              </SocialProvider>
            </AccountProvider>
          </WalletProvider>
        </AuthProvider>
      </BrowserRouter>
    </StrictMode>,
  ),
);