// Untracked verification harness: renders the real UsersPage (filter bar included)
// with the production theme, emotion cache and stylesheets, but without routing/auth
// guards, so layout can be measured at arbitrary viewport widths. Delete after use.
import { CacheProvider } from "@emotion/react";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import React, { useMemo } from "react";
import { createRoot } from "react-dom/client";
import { ToastProvider } from "@/shared/ui/ToastProvider.jsx";
import { createExternalTheme } from "./src/theme.js";
import { ExternalAuthProvider } from "./src/auth/ExternalAuthProvider.jsx";
import { ExternalI18nProvider, useExternalI18n } from "./src/i18n/ExternalI18nProvider.jsx";
import { externalEmotionCache } from "./src/i18n/emotionCache.js";
import UsersPage from "./src/pages/UsersPage.jsx";
import "@/styles/tokens.css";
import "@/styles/shared-ui.css";
import "./src/styles/index.css";

createRoot(document.getElementById("external-admin-root")).render(
  <React.StrictMode>
    <ExternalI18nProvider>
      <Root />
    </ExternalI18nProvider>
  </React.StrictMode>
);

function Root() {
  const { direction } = useExternalI18n();
  const theme = useMemo(() => createExternalTheme(direction), [direction]);
  return (
    <CacheProvider value={externalEmotionCache(direction)}>
      <ThemeProvider theme={theme}>
        <ToastProvider>
          <CssBaseline />
          <ExternalAuthProvider>
            <UsersPage />
          </ExternalAuthProvider>
        </ToastProvider>
      </ThemeProvider>
    </CacheProvider>
  );
}