import { lazy, Suspense } from "react";

// lazy() : le module n'est téléchargé QUE lors du premier rendu réel du composant
const TableauDeBord = lazy(() => import("./TableauDeBord"));
const Parametres = lazy(() => import("./Parametres"));

function App() {
    const [page, setPage] = useState("dashboard");

    return (
        <div>
            <nav>
                <button onClick={() => setPage("dashboard")}>Dashboard</button>
                <button onClick={() => setPage("parametres")}>Paramètres</button>
            </nav>

            {/* Suspense affiche le fallback pendant le chargement du chunk JS */}
            <Suspense fallback={<p>Chargement du module...</p>}>
                {page === "dashboard" ? <TableauDeBord /> : <Parametres />}
            </Suspense>
        </div>
    );
}

// Code splitting par route (avec un routeur type React Router)
import { lazy, Suspense } from "react";
import { Routes, Route } from "react-router-dom";

const Accueil = lazy(() => import("./pages/Accueil"));
const Cours = lazy(() => import("./pages/Cours"));
const Profil = lazy(() => import("./pages/Profil"));

function App() {
    return (
        <Suspense fallback={<div className="spinner-page" />}>
            <Routes>
                <Route path="/" element={<Accueil />} />
                <Route path="/cours" element={<Cours />} />
                <Route path="/profil" element={<Profil />} />
            </Routes>
        </Suspense>
    );
}
// chaque route devient son propre "chunk" JS, téléchargé seulement quand l'utilisateur y navigue

// Preload manuel : anticiper le chargement AVANT le clic (ex: au survol d'un lien)
const ModaleCommentaires = lazy(() => import("./ModaleCommentaires"));

function BoutonCommentaires() {
    const [ouvert, setOuvert] = useState(false);

    function precharger() {
        import("./ModaleCommentaires"); // déclenche le téléchargement du chunk sans monter le composant
    }

    return (
        <>
            <button onMouseEnter={precharger} onClick={() => setOuvert(true)}>
                Voir les commentaires
            </button>
            {ouvert && (
                <Suspense fallback={<p>Chargement...</p>}>
                    <ModaleCommentaires />
                </Suspense>
            )}
        </>
    );
}

// Suspense imbriqué : granularité fine du fallback, zone par zone
function PageProduit({ id }) {
    return (
        <div>
            <EnTeteProduit id={id} /> {/* rendu immédiat, pas de lazy ici */}

            <Suspense fallback={<SqueletteAvis />}>
                <SectionAvis id={id} /> {/* peut avoir son propre fetch suspendu */}
            </Suspense>

            <Suspense fallback={<SquelettesRecommandations />}>
                <Recommandations id={id} />
            </Suspense>
        </div>
    );
}
// chaque section se révèle indépendamment dès qu'elle est prête,
// sans bloquer l'affichage des autres