// Avant React 19 : gestion manuelle de l'état d'une soumission
function FormulaireAvant() {
    const [enEnvoi, setEnEnvoi] = useState(false);
    const [erreur, setErreur] = useState(null);

    async function gererSubmit(e) {
        e.preventDefault();
        setEnEnvoi(true);
        setErreur(null);
        try {
            await enregistrerProfil(new FormData(e.target));
        } catch (err) {
            setErreur(err.message);
        } finally {
            setEnEnvoi(false);
        }
    }

    return (
        <form onSubmit={gererSubmit}>
            <input name="nom" />
            <button disabled={enEnvoi}>{enEnvoi ? "Envoi..." : "Enregistrer"}</button>
            {erreur && <p role="alert">{erreur}</p>}
        </form>
    );
}

// Actions : une <form action={fn}> où fn est une fonction async -- React gère pending/erreur/reset
function FormulaireAction() {
    async function enregistrer(formData) {
        // reçoit directement le FormData, pas un event -- pas de preventDefault nécessaire
        const nom = formData.get("nom");
        await fetch("/api/profil", { method: "POST", body: JSON.stringify({ nom }) });
    }

    return (
        <form action={enregistrer}>
            <input name="nom" />
            <button type="submit">Enregistrer</button>
        </form>
    );
}

// useActionState : combine l'action avec un state dérivé de son résultat (succès/erreur)
import { useActionState } from "react";

async function creerCompte(etatPrecedent, formData) {
    const email = formData.get("email");
    if (!email.includes("@")) {
        return { erreur: "Email invalide" }; // devient le nouvel "etat"
    }
    await fetch("/api/comptes", { method: "POST", body: JSON.stringify({ email }) });
    return { succes: true };
}

function FormulaireInscription() {
    const [etat, action, enTransition] = useActionState(creerCompte, { erreur: null });
    // etat : dernier retour de l'action | action : à passer à <form action> | enTransition : pending automatique

    return (
        <form action={action}>
            <input name="email" />
            <button disabled={enTransition}>{enTransition ? "Envoi..." : "S'inscrire"}</button>
            {etat.erreur && <p role="alert">{etat.erreur}</p>}
        </form>
    );
}

// useFormStatus : lit le statut du <form> parent depuis un composant enfant, sans prop-drilling
import { useFormStatus } from "react-dom";

function BoutonSoumettre() {
    const { pending } = useFormStatus(); // lit AUTOMATIQUEMENT le form ancêtre le plus proche
    return <button disabled={pending}>{pending ? "Envoi..." : "Valider"}</button>;
}

function Formulaire() {
    return (
        <form action={creerCompte}>
            <input name="email" />
            <BoutonSoumettre /> {/* pas besoin de recevoir "pending" en prop */}
        </form>
    );
}

// useOptimistic : afficher le résultat probable AVANT la confirmation serveur, avec rollback automatique
import { useOptimistic } from "react";

function ListeCommentaires({ commentaires, ajouterCommentaire }) {
    const [commentairesOptimistes, ajouterOptimiste] = useOptimistic(
        commentaires,
        (etat, nouveauTexte) => [...etat, { id: "temp", texte: nouveauTexte, enAttente: true }]
    );

    async function gererAction(formData) {
        const texte = formData.get("texte");
        ajouterOptimiste(texte); // affiché immédiatement, marqué "enAttente"
        await ajouterCommentaire(texte); // si ça échoue, React revient automatiquement à "commentaires"
    }

    return (
        <>
            <ul>
                {commentairesOptimistes.map((c) => (
                    <li key={c.id} style={{ opacity: c.enAttente ? 0.5 : 1 }}>{c.texte}</li>
                ))}
            </ul>
            <form action={gererAction}>
                <input name="texte" />
                <button type="submit">Publier</button>
            </form>
        </>
    );
}