import { useReducer } from "react";

// reducer : fonction PURE (etat, action) -> nouvel état, jamais de mutation ni d'effet de bord
function panierReducer(etat, action) {
    switch (action.type) {
        case "AJOUTER":
            return {
                ...etat,
                articles: [...etat.articles, action.payload],
            };
        case "SUPPRIMER":
            return {
                ...etat,
                articles: etat.articles.filter((a) => a.id !== action.payload.id),
            };
        case "MODIFIER_QUANTITE":
            return {
                ...etat,
                articles: etat.articles.map((a) =>
                    a.id === action.payload.id ? { ...a, quantite: action.payload.quantite } : a
                ),
            };
        case "VIDER":
            return { ...etat, articles: [] };
        default:
            throw new Error(`Action inconnue : ${action.type}`);
    }
}

const etatInitial = { articles: [] };

function Panier() {
    const [etat, dispatch] = useReducer(panierReducer, etatInitial);

    const total = etat.articles.reduce((s, a) => s + a.prix * a.quantite, 0);

    return (
        <div>
            <ul>
                {etat.articles.map((a) => (
                    <li key={a.id}>
                        {a.nom} x{a.quantite}
                        <button onClick={() => dispatch({ type: "SUPPRIMER", payload: { id: a.id } })}>
                            Retirer
                        </button>
                    </li>
                ))}
            </ul>
            <p>Total : {total}€</p>
            <button onClick={() => dispatch({ type: "VIDER" })}>Vider le panier</button>
        </div>
    );
}

// useReducer vs plusieurs useState : quand basculer
// Plusieurs useState indépendants deviennent pénibles dès que les transitions
// touchent PLUSIEURS champs à la fois, avec des règles métier entre eux
function formulaireReducer(etat, action) {
    switch (action.type) {
        case "CHANGER_CHAMP":
            return { ...etat, [action.champ]: action.valeur, erreurs: {} };
        case "SOUMETTRE_DEBUT":
            return { ...etat, enEnvoi: true, erreurs: {} };
        case "SOUMETTRE_SUCCES":
            return { ...etat, enEnvoi: false, envoye: true };
        case "SOUMETTRE_ECHEC":
            return { ...etat, enEnvoi: false, erreurs: action.erreurs };
        default:
            return etat;
    }
}

function Formulaire() {
    const [etat, dispatch] = useReducer(formulaireReducer, {
        email: "", mdp: "", enEnvoi: false, envoye: false, erreurs: {},
    });

    async function gererSubmit(e) {
        e.preventDefault();
        dispatch({ type: "SOUMETTRE_DEBUT" });
        try {
            await envoyerFormulaire(etat);
            dispatch({ type: "SOUMETTRE_SUCCES" });
        } catch (err) {
            dispatch({ type: "SOUMETTRE_ECHEC", erreurs: err.champs });
        }
    }

    return (
        <form onSubmit={gererSubmit}>
            <input
                value={etat.email}
                onChange={(e) => dispatch({ type: "CHANGER_CHAMP", champ: "email", valeur: e.target.value })}
            />
            <button disabled={etat.enEnvoi}>{etat.enEnvoi ? "Envoi..." : "Envoyer"}</button>
        </form>
    );
}

// useReducer + Context : un mini state manager "fait maison", sans dépendance externe
const PanierContext = createContext(null);

function PanierProvider({ children }) {
    const [etat, dispatch] = useReducer(panierReducer, etatInitial);
    return (
        <PanierContext.Provider value={{ etat, dispatch }}>
            {children}
        </PanierContext.Provider>
    );
}

function usePanier() {
    return useContext(PanierContext);
}