// Zustand : API minimale, pas de Provider requis, basé sur un store + des hooks sélecteurs
import { create } from "zustand";

const usePanierStore = create((set, get) => ({
    articles: [],

    ajouter: (article) => set((etat) => ({
        articles: [...etat.articles, article],
    })),

    supprimer: (id) => set((etat) => ({
        articles: etat.articles.filter((a) => a.id !== id),
    })),

    total: () => get().articles.reduce((s, a) => s + a.prix * a.quantite, 0),
}));

// Sélecteur : le composant ne re-rend QUE si LA VALEUR SÉLECTIONNÉE change, pas tout le store
function CompteurPanier() {
    const nbArticles = usePanierStore((etat) => etat.articles.length);
    return <span>{nbArticles} articles</span>;
}

function BoutonAjouter({ produit }) {
    const ajouter = usePanierStore((etat) => etat.ajouter);
    return <button onClick={() => ajouter(produit)}>Ajouter au panier</button>;
}
// aucun Provider à poser dans l'arbre : le store est importé directement où nécessaire

// Redux Toolkit : plus structuré, utile pour de très grosses applications avec middleware/devtools poussés
import { createSlice, configureStore } from "@reduxjs/toolkit";
import { useSelector, useDispatch, Provider } from "react-redux";

const panierSlice = createSlice({
    name: "panier",
    initialState: { articles: [] },
    reducers: {
        // Redux Toolkit autorise une syntaxe "mutable" en apparence (via Immer en interne)
        ajouter: (etat, action) => {
            etat.articles.push(action.payload);
        },
        supprimer: (etat, action) => {
            etat.articles = etat.articles.filter((a) => a.id !== action.payload);
        },
    },
});

export const { ajouter, supprimer } = panierSlice.actions;

const store = configureStore({
    reducer: { panier: panierSlice.reducer },
});

function App() {
    return (
        <Provider store={store}>
            <Panier />
        </Provider>
    );
}

function Panier() {
    const articles = useSelector((etat) => etat.panier.articles);
    const dispatch = useDispatch();

    return (
        <ul>
            {articles.map((a) => (
                <li key={a.id}>
                    {a.nom}
                    <button onClick={() => dispatch(supprimer(a.id))}>Retirer</button>
                </li>
            ))}
        </ul>
    );
}

// Persistance et middleware : cas fréquent avec Zustand
import { persist } from "zustand/middleware";

const usePreferencesStore = create(
    persist(
        (set) => ({
            theme: "clair",
            changerTheme: (theme) => set({ theme }),
        }),
        { name: "preferences-storage" } // clé localStorage, synchronisée automatiquement
    )
);