import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { QueryClientProvider } from "@tanstack/react-query";

import { BootErrorShell } from "../presentation/boundaries/boot-error-shell.jsx";
import { AppRouter } from "../presentation/routes/app-router.jsx";
import { createRuntimeComposition } from "./create-runtime-composition.js";
import { initializeColorScheme } from "./initialize-color-scheme.js";
import { BootConfigError } from "./load-runtime-config.js";
import { ReleaseManifestError } from "./load-release-manifest.js";
import "../presentation/styles/theme.css";

const rootElement = document.getElementById("root");

if (!rootElement) {
  throw new Error("Missing #root mount element");
}

const root = createRoot(rootElement);

async function boot() {
  try {
    const composition = await createRuntimeComposition();
    initializeColorScheme(composition.ports.storage);
    root.render(
      <StrictMode>
        <QueryClientProvider client={composition.ports.queryClient}>
          <AppRouter
            authSession={composition.ports.authSession}
            basename={composition.config.build.routerBasePath}
            buildId={composition.release.buildId}
            storage={composition.ports.storage}
            telemetry={composition.ports.telemetry}
          />
        </QueryClientProvider>
      </StrictMode>,
    );
  } catch (error) {
    const safe =
      error instanceof BootConfigError || error instanceof ReleaseManifestError
        ? error.safe
        : { supportReference: "boot:unknown" };

    root.render(<BootErrorShell {...safe} />);
  }
}

void boot();