import { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { Capacitor } from "@capacitor/core";
import App from "./App";
import { startControllerInput } from "./input/controller";
import { currentDisplayLayout } from "./platform/displayLayout";
import { initializeContentSystem } from "./content/contentManager";
import "./styles.css";
import "./ui/dungeonReports.css";

const BottomDisplayApp = lazy(() => import("./platform/BottomDisplayApp").then((module) => ({ default: module.BottomDisplayApp })));

const params = new URLSearchParams(window.location.search);
const displayMode = params.get("display");
const nativeLayoutRequested = params.has("nativeLayout");
if (Capacitor.isNativePlatform() || nativeLayoutRequested) document.documentElement.classList.add("native-platform");
if (displayMode === "top" || displayMode === "bottom") document.documentElement.dataset.displaySurface = displayMode;
document.documentElement.dataset.displayLayout = currentDisplayLayout();
startControllerInput();
void initializeContentSystem();

// React's development StrictMode replays effect cleanup immediately after the
// first mount. The installed R3F Canvas cleanup schedules a forced WebGL
// context loss 500 ms later, even after the live canvas has been reactivated.
// Keep the game root single-mounted so that teardown cannot blank a live scene.
createRoot(document.getElementById("root")!).render(
  displayMode === "bottom"
    ? <Suspense fallback={null}><BottomDisplayApp /></Suspense>
    : <App />,
);