// Rôle : choisit la page à rendre selon la route active.
import { lazy, Suspense } from "react";
import { AboutPage } from "../pages/AboutPage.jsx";
import { HomePage } from "../pages/HomePage.jsx";
import { navigate } from "./hashRouter.js";

const GameRoute = lazy(() => import("../features/games/GameRoute.jsx").then((module) => ({ default: module.GameRoute })));
const GamesPage = lazy(() => import("../features/games/GamesPage.jsx").then((module) => ({ default: module.GamesPage })));
const LibraryPage = lazy(() => import("../pages/LibraryPage.jsx").then((module) => ({ default: module.LibraryPage })));
const ToolboxPage = lazy(() => import("../features/toolboxes/ToolboxPages.jsx").then((module) => ({ default: module.ToolboxPage })));
const ToolboxesPage = lazy(() => import("../features/toolboxes/ToolboxPages.jsx").then((module) => ({ default: module.ToolboxesPage })));
const DesignSystemPage = import.meta.env.DEV
  ? lazy(() => import("../pages/DesignSystemPage.jsx").then((module) => ({ default: module.DesignSystemPage })))
  : null;

function RouteLoader() {
  return <section className="empty nds-empty-state"><p>Chargement...</p></section>;
}

export function RouteContent(props) {
  const { route } = props;
  if (route === "/") return <HomePage {...props} />;
  if (route === "/about") return <AboutPage siteContent={props.siteContent} />;
  if (route === "/library") return <Suspense fallback={<RouteLoader />}><LibraryPage {...props} /></Suspense>;
  if (route === "/design-system" && DesignSystemPage) return <Suspense fallback={<RouteLoader />}><DesignSystemPage /></Suspense>;
  if (route === "/toolboxes") return <Suspense fallback={<RouteLoader />}><ToolboxesPage {...props} /></Suspense>;
  if (route.startsWith("/toolbox/")) return <Suspense fallback={<RouteLoader />}><ToolboxPage {...props} toolboxId={route.split("/")[2]} /></Suspense>;
  if (route === "/games") return <Suspense fallback={<RouteLoader />}><GamesPage {...props} /></Suspense>;
  if (route.startsWith("/games/")) return <Suspense fallback={<RouteLoader />}><GameRoute {...props} gameId={route.split("/")[2]} category={route.split("/")[3] || ""} /></Suspense>;
  navigate("/");
  return null;
}