import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
// The brand typefaces, self-hosted. tokens.css names them first in
// --ds-font-sans / --ds-font-mono; without these imports both stacks fell
// through to a system font and the app never rendered in its own type.
// Weights are limited to the three the brand pack supports (400/500/600) —
// the variable Inter file covers the range in one request.
import "@fontsource-variable/inter";
import "@fontsource/jetbrains-mono/400.css";
import "@fontsource/jetbrains-mono/500.css";
import "@xyflow/react/dist/style.css";
import "./ds/tokens.css";
import "./ds/base.css";
import { ApiConnectionProvider } from "./state/ApiConnection";
import { AuthGate } from "./state/Auth";
import { ToastProvider, TooltipProvider } from "./ds";
import { NotificationsProvider } from "./state/Notifications";
import App from "./App";

// AuthGate wraps everything below it and renders nothing until the API says
// who the caller is. ApiConnectionProvider sits inside it and not outside,
// because it reads company_id off the resolved session — there is no ordering
// in which a page can issue a call before the session exists.
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <TooltipProvider>
        <ToastProvider>
          <AuthGate>
            <ApiConnectionProvider>
              <NotificationsProvider>
                <App />
              </NotificationsProvider>
            </ApiConnectionProvider>
          </AuthGate>
        </ToastProvider>
      </TooltipProvider>
    </BrowserRouter>
  </StrictMode>,
);