import { Suspense } from "react";
import { Routes, Route } from "react-router-dom";
import AdminApp from "./admin/AdminApp";

// Bootstrap loader: renders before MuiProvider (and its global styles) mount,
// so it must be fully self-contained — no theme vars, no global CSS classes.
// Background follows the persisted theme attribute set by ThemeContext.
function AdminLoader() {
  const light =
    typeof document !== "undefined" &&
    document.documentElement.getAttribute("data-theme") === "light";
  return (
    <div
      style={{
        minHeight: "100dvh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: light ? "#f4f3f1" : "#0f0f0f",
      }}
    >
      <style>{"@keyframes boha-boot-spin{to{transform:rotate(360deg)}}"}</style>
      <div
        style={{
          width: 32,
          height: 32,
          border: "2px solid #d63031",
          borderTopColor: "transparent",
          borderRadius: "50%",
          animation: "boha-boot-spin 0.8s linear infinite",
        }}
      />
    </div>
  );
}

export default function App() {
  return (
    <Suspense fallback={<AdminLoader />}>
      <Routes>
        <Route path="/*" element={<AdminApp />} />
      </Routes>
    </Suspense>
  );
}