// Approche historique : fetch manuel dans useEffect -- fonctionne, mais répète beaucoup de logique
function ListeCours() {
    const [cours, setCours] = useState([]);
    const [chargement, setChargement] = useState(true);
    const [erreur, setErreur] = useState(null);

    useEffect(() => {
        let annule = false;
        fetch("/api/cours")
            .then((r) => r.json())
            .then((data) => { if (!annule) setCours(data); })
            .catch((e) => { if (!annule) setErreur(e); })
            .finally(() => { if (!annule) setChargement(false); });
        return () => { annule = true; };
    }, []);
    // problèmes non résolus : pas de cache entre composants, pas de revalidation,
    // pas de déduplication de requêtes identiques, pas de retry automatique
}

// TanStack Query (React Query) : cache, revalidation, déduplication out-of-the-box
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

function ListeCours() {
    const { data: cours, isLoading, error } = useQuery({
        queryKey: ["cours"],       // clé de cache -- deux composants avec la même clé partagent le résultat
        queryFn: () => fetch("/api/cours").then((r) => r.json()),
        staleTime: 60_000,          // considéré "frais" pendant 60s, pas de refetch automatique avant
    });

    if (isLoading) return <p>Chargement...</p>;
    if (error) return <p>Erreur : {error.message}</p>;
    return <ul>{cours.map((c) => <li key={c.id}>{c.titre}</li>)}</ul>;
}

function BoutonInscription({ coursId }) {
    const queryClient = useQueryClient();

    const mutation = useMutation({
        mutationFn: () => fetch(`/api/cours/${coursId}/inscription`, { method: "POST" }),
        onSuccess: () => {
            // invalide le cache -> déclenche un refetch automatique des composants concernés
            queryClient.invalidateQueries({ queryKey: ["cours"] });
        },
    });

    return (
        <button onClick={() => mutation.mutate()} disabled={mutation.isPending}>
            {mutation.isPending ? "Inscription..." : "S'inscrire"}
        </button>
    );
}

// use() : nouveau primitif React pour "dérouler" une Promise (ou lire un Context) pendant le rendu
import { use, Suspense } from "react";

function promesseCours() {
    return fetch("/api/cours").then((r) => r.json());
}

function ListeCours({ promesse }) {
    const cours = use(promesse); // suspend le rendu tant que la promesse n'est pas résolue
    return <ul>{cours.map((c) => <li key={c.id}>{c.titre}</li>)}</ul>;
}

function Page() {
    const promesse = promesseCours(); // créée une seule fois, idéalement mémoïsée/venant du serveur
    return (
        <Suspense fallback={<p>Chargement...</p>}>
            <ListeCours promesse={promesse} />
        </Suspense>
    );
}
// use() peut être appelé conditionnellement (contrairement aux autres hooks) --
// mais reste réservé à des cas précis (Server Components, promesses stables)

// Optimistic UI : mettre à jour l'affichage AVANT la confirmation serveur
function BoutonLike({ postId, likesInitial }) {
    const [likes, setLikes] = useState(likesInitial);

    async function liker() {
        setLikes((l) => l + 1); // optimiste : affiché immédiatement
        try {
            await fetch(`/api/posts/${postId}/like`, { method: "POST" });
        } catch {
            setLikes((l) => l - 1); // rollback si la requête échoue réellement
        }
    }

    return <button onClick={liker}>+1 ({likes})</button>;
}