import { QueryClientProvider } from '@tanstack/react-query';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from '#/app.jsx';
import { queryClient } from '#/lib/query.js';
import { applyTheme } from '#/lib/theme.js';
import { ConsentPage } from '#/pages/consent.jsx';
import { OnboardPage } from '#/pages/onboard.jsx';
import { SignInPage } from '#/pages/sign-in.jsx';
import '#/style.css';

// The server injects window.__PDS__ when it wants a pre-auth screen rather than
// the console: the onboarding wizard on an empty server, the sign-in form, or
// the OAuth consent form. Absent it, this is the authenticated console.
const boot = window.__PDS__ || {};

// Signed-in bootstraps carry the account's stored appearance choice, so the
// first paint already uses the right palette.
applyTheme(boot.theme);
const screen =
  boot.mode === 'onboard' ? (
    <OnboardPage {...boot} />
  ) : boot.mode === 'signin' ? (
    <SignInPage {...boot} />
  ) : boot.mode === 'consent' ? (
    <ConsentPage {...boot} />
  ) : (
    <App />
  );

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>{screen}</QueryClientProvider>
  </StrictMode>,
);