import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import { ThemeProvider } from "./context/ThemeContext";
import { AuthProvider } from "./context/AuthContext";
import { ToastProvider } from "./components/ui/Toast";
import { api } from "./lib/api";
import { setShortDomain } from "./lib/format";
import "./index.css";

function render() {
  createRoot(document.getElementById("root")!).render(
    <StrictMode>
      <ThemeProvider>
        <AuthProvider>
          <ToastProvider>
            <BrowserRouter>
              <App />
            </BrowserRouter>
          </ToastProvider>
        </AuthProvider>
      </ThemeProvider>
    </StrictMode>,
  );
}

// Pull the short-link domain from the server so it isn't hardcoded. Don't block
// first paint on it — render after config resolves or a short timeout.
const config = api
  .config()
  .then((c) => setShortDomain(c.shortDomain))
  .catch(() => {});
Promise.race([config, new Promise((r) => setTimeout(r, 800))]).finally(render);