import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { HelmetProvider } from 'react-helmet-async';
import App from './App.jsx';
import { SiteDataProvider } from './contexts/SiteDataContext.jsx';
import { AuthProvider } from './contexts/AuthContext.jsx';
import ErrorBoundary from './components/ErrorBoundary.jsx';
import { initErrorReporter } from './lib/errorReporter.js';
import './index.css';
// CSS Leaflet importe globalement : la carte interactive de la page d'accueil
// (react-leaflet) en a besoin pour le rendu correct des tuiles et controles.
import 'leaflet/dist/leaflet.css';

// Couche 3 du dispositif d'alerte erreur : branche des le demarrage les
// handlers globaux (window.onerror + unhandledrejection) qui remontent a
// l'API toute erreur JS non geree. Les erreurs de rendu React sont, elles,
// capturees par <ErrorBoundary /> ci-dessous.
initErrorReporter();

// Point d'entree de l'application : monte React dans le div#root.
// ErrorBoundary enveloppe TOUT l'arbre : il intercepte les erreurs de rendu
// de n'importe quel provider ou composant et affiche un ecran de secours
// plutot qu'une page blanche.
// BrowserRouter active le routage cote client.
// HelmetProvider permet la gestion des balises <head> (titre, meta) par page.
// AuthProvider gere la session de l'espace admin (login / logout, jeton JWT)
// et l'expose a toute l'application via useAuth().
// SiteDataProvider charge les donnees dynamiques (regions, spots, contenu...)
// depuis l'API REST et les expose a toute l'application via useSiteData().
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <ErrorBoundary>
      <HelmetProvider>
        <BrowserRouter>
          <AuthProvider>
            <SiteDataProvider>
              <App />
            </SiteDataProvider>
          </AuthProvider>
        </BrowserRouter>
      </HelmetProvider>
    </ErrorBoundary>
  </React.StrictMode>
);
