import ReactDOM from 'react-dom/client';
import 'react-toastify/dist/ReactToastify.css';
import './index.css';
import './css/Loading.css';
import { RouterProvider } from 'react-router-dom';
import router from './router.tsx';
import { ContextProvider } from './contexts/ContextProvider.tsx';
import { ToastContainer } from 'react-toastify';
import { initialiserAppli } from './app/miseAJour';
import { BandeauMiseAJour } from './app/MiseAJourAppli';
import { activerBoutonRetourAndroid } from './app/boutonRetour';

// Application Android : vérifie les mises à jour (ne fait rien sur le site)
initialiserAppli();

// Application Android : le bouton Retour revient à l'écran précédent au lieu de fermer l'appli
activerBoutonRetourAndroid(router);

// Appli iPhone : le contenu passe sous la barre d'état (heure, batterie) et l'encoche.
// On réserve cet espace (règles « ios-natif » dans index.css). Ne change rien sur Android ni sur le site.
try {
    const cap = (window as any).Capacitor;
    if (cap && typeof cap.getPlatform === 'function' && cap.getPlatform() === 'ios') {
        document.documentElement.classList.add('ios-natif');
        const vp = document.querySelector('meta[name="viewport"]');
        if (vp && !String(vp.getAttribute('content')).includes('viewport-fit')) {
            vp.setAttribute('content', vp.getAttribute('content') + ', viewport-fit=cover, maximum-scale=1');
        }
    }
} catch { /* */ }

ReactDOM.createRoot(document.getElementById('root')!).render(
    <ContextProvider>
        <RouterProvider router={router} />
        <ToastContainer />
        <BandeauMiseAJour />
    </ContextProvider>
);