import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';
import './theme/tokens.css';
// MapLibre GL's stylesheet (SPEC_0045), imported once at the app entry: the GPS
// trail map (GpsTrailMap) needs the library's control/marker/popup styles. Kept
// out of the component so it never loads into the jsdom test realm.
import 'maplibre-gl/dist/maplibre-gl.css';

/* The mock service worker IS the backend in local development. It replicates
   the Flask API envelope exactly so that pointing the app at the real
   backend later is a configuration change. Mocking is on unless explicitly
   disabled (VITE_API_MODE=real). */
async function enableMocking(): Promise<void> {
  if (import.meta.env.VITE_API_MODE === 'real') return;
  const { worker } = await import('./mocks/browser');
  await worker.start({ onUnhandledRequest: 'bypass' });
}

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Root element #root not found');

void enableMocking().then(() => {
  createRoot(rootElement).render(
    <StrictMode>
      <App />
    </StrictMode>,
  );
});