import React, { lazy, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import ErrorBoundary from "./components/ErrorBoundary";
import { ConfirmProvider } from "./components/ConfirmProvider";
import "./i18n";
import "./index.css";

// Split by top-level route so each entry point is its own chunk: a public /watch share link or a
// legal page never downloads the authenticated app bundle, and the app never carries them either.
// The legal pages live outside the App tree (no /api/me) so Google's consent screen and reviewers
// can fetch them directly; the watch page is a login-free public player. Reached by full-page
// navigation (plain <a href>), so a simple pathname switch is enough — no router needed.
const App = lazy(() => import("./App"));
const PrivacyPolicy = lazy(() => import("./components/legal/PrivacyPolicy"));
const Terms = lazy(() => import("./components/legal/Terms"));
const WatchPage = lazy(() => import("./components/WatchPage"));

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: false, staleTime: 30_000, refetchOnWindowFocus: false } },
});

// Baseline theme so the token CSS vars (--bg/--surface/--accent/…) resolve on first paint — including
// the standalone public pages (/watch, /privacy, /terms) that render outside <App> and never call
// applyTheme. The app overrides this with the user's saved theme once it mounts.
const de = document.documentElement.dataset;
de.theme ||= "dark";
de.scheme ||= "midnight";

const path = window.location.pathname;
const root =
  path === "/privacy" ? <PrivacyPolicy /> :
  path === "/terms" ? <Terms /> :
  path.startsWith("/watch/") ? <WatchPage /> : (
    <QueryClientProvider client={queryClient}>
      <ErrorBoundary>
        <ConfirmProvider>
          <App />
        </ConfirmProvider>
      </ErrorBoundary>
    </QueryClientProvider>
  );

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Suspense fallback={<div style={{ minHeight: "100vh" }} />}>{root}</Suspense>
  </React.StrictMode>
);
