import { memo } from "react";

// memo() : comparaison superficielle des props -- si identiques, saute le rendu du composant
const LigneUtilisateur = memo(function LigneUtilisateur({ utilisateur }) {
    console.log("Rendu de", utilisateur.nom);
    return <tr><td>{utilisateur.nom}</td><td>{utilisateur.email}</td></tr>;
});

// Comparateur custom : nécessaire si la comparaison superficielle par défaut ne suffit pas
const LigneOptimisee = memo(
    function LigneOptimisee({ utilisateur }) {
        return <tr><td>{utilisateur.nom}</td></tr>;
    },
    (prevProps, nextProps) => prevProps.utilisateur.id === nextProps.utilisateur.id
    // retourne true si on veut SKIP le rendu (props "égales" selon cette logique)
);

// memo() est inutile, voire contre-productif, si les props changent à chaque rendu de toute façon
function TableauUtilisateurs({ utilisateurs }) {
    return (
        <table>
            <tbody>
                {utilisateurs.map((u) => (
                    // si "onClick={() => faireChose(u.id)}" est recréé ici à chaque rendu du parent,
                    // LigneUtilisateur ne bénéficie JAMAIS de son memo() -- combiner avec useCallback
                    <LigneUtilisateur key={u.id} utilisateur={u} />
                ))}
            </tbody>
        </table>
    );
}

// Virtualisation : ne monter dans le DOM que les lignes VISIBLES, pas les 10 000 items
import { useState, useRef, useMemo } from "react";

function ListeVirtualisee({ items, hauteurLigne = 40, hauteurConteneur = 400 }) {
    const [scrollTop, setScrollTop] = useState(0);

    const indexDebut = Math.floor(scrollTop / hauteurLigne);
    const nbVisibles = Math.ceil(hauteurConteneur / hauteurLigne) + 2; // +2 : marge de sécurité (overscan)
    const indexFin = Math.min(items.length, indexDebut + nbVisibles);

    const itemsVisibles = useMemo(
        () => items.slice(indexDebut, indexFin),
        [items, indexDebut, indexFin]
    );

    return (
        <div
            style={{ height: hauteurConteneur, overflowY: "auto", position: "relative" }}
            onScroll={(e) => setScrollTop(e.target.scrollTop)}
        >
            {/* div fantôme : donne la hauteur TOTALE au scroll, comme si tout était rendu */}
            <div style={{ height: items.length * hauteurLigne, position: "relative" }}>
                {itemsVisibles.map((item, i) => (
                    <div
                        key={item.id}
                        style={{
                            position: "absolute",
                            top: (indexDebut + i) * hauteurLigne,
                            height: hauteurLigne,
                            width: "100%",
                        }}
                    >
                        {item.nom}
                    </div>
                ))}
            </div>
        </div>
    );
}
// en production : préférer une librairie mature (react-window, @tanstack/react-virtual)
// qui gère overscan dynamique, tailles variables, et scroll horizontal

// Profiler : mesurer AVANT d'optimiser, jamais l'inverse
import { Profiler } from "react";

function surRendu(id, phase, dureeReelle) {
    console.log(`${id} (${phase}) : ${dureeReelle.toFixed(2)}ms`);
}

function App() {
    return (
        <Profiler id="TableauUtilisateurs" onRender={surRendu}>
            <TableauUtilisateurs utilisateurs={utilisateurs} />
        </Profiler>
    );
}