import { createRoot, hydrateRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { AuthProvider } from "./providers/AuthProvider";
import { SsrDataProvider } from "./ssr/context";
import type { SsrData } from "./ssr/types";
import App from "./app";
import "./assets/index.css";

declare global {
  interface Window {
    __SSR_DATA__?: SsrData;
  }
}

const ssrData = window.__SSR_DATA__ ?? null;
delete window.__SSR_DATA__;

const tree = (
  <SsrDataProvider data={ssrData}>
    <AuthProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </AuthProvider>
  </SsrDataProvider>
);

const container = document.getElementById("root")!;

// Server-rendered pages ship markup to hydrate; every other route is still a
// plain client-side render into an empty root.
if (ssrData) {
  hydrateRoot(container, tree);
} else {
  createRoot(container).render(tree);
}