// ── Import ES6 (section 05) ───────────────────────────────────
import React, { useState, useEffect } from 'react';
import { platsService } from '../services/platsService';
import CartePlat from './CartePlat';

// ── Composant React — arrow function + destructuring des props (sections 01, 02)
const MenuDariGo = ({ ville = "Casablanca", onCommanderPlat }) => {

  // ── useState — destructuring de tableau (sections 02, hook React)
  const [plats, setPlats]               = useState([]);
  const [recherche, setRecherche]       = useState("");
  const [estEnChargement, setChargement]= useState(true);
  const [erreur, setErreur]             = useState(null);

  // ── useEffect + async/await + try/catch (sections 07, 09)
  useEffect(() => {
    const charger = async () => {
      try {
        const data = await platsService.getParVille(ville);  // Fetch API (section 09)
        setPlats(data);
      } catch (err) {
        setErreur(err.message);
      } finally {
        setChargement(false);
      }
    };
    charger();
  }, [ville]);  // tableau de dépendances

  // ── filter() + template literal + includes (sections 04, 06)
  const platsFiltres = plats
    .filter(p => p.disponible)
    .filter(p => p.nom.toLowerCase().includes(recherche.toLowerCase()));

  // ── reduce() — calculer des stats (section 06)
  const prixMoyen = platsFiltres.length
    ? platsFiltres.reduce((acc, p) => acc + p.prix, 0) / platsFiltres.length
    : 0;

  // ── Arrow function — handler d'événement (section 01)
  const ajouterAuPanier = (plat) => {
    // Spread — créer un nouvel objet sans muter (section 03)
    const platAvecDate = { ...plat, dateAjout: new Date().toISOString() };
    onCommanderPlat(platAvecDate);
  };

  if (estEnChargement) return 
Chargement du menu...
;
  if (erreur) return 
{erreur}
;

  return (
    

      {/* Template literal — classe CSS conditionnelle (section 04) */}
      

        Menu DariGo — {ville}
      
      
Prix moyen : {prixMoyen.toFixed(0)} MAD

       setRecherche(e.target.value)}
      />

      {/* map() — rendre une liste de composants (section 06) */}
      

        {platsFiltres.map(plat => (
          // Spread des props — rest/spread (section 03)
           ajouterAuPanier(plat)}
          />
        ))}
      

      {platsFiltres.length === 0 && (
        
Aucun plat disponible pour "{recherche}" à {ville}
      )}
    
  );
};

// ── Export par défaut (section 05)
export default MenuDariGo;

// ── PROBLÈME 1 : portée fonctionnelle de var ─────────────────
// Scénario : calcul du total d'une commande DariGo
function calculerTotal(panier) {
  var total = 0;

  if (panier.length > 5) {
    var total = panier.reduce((acc, p) => acc + p.prix, 0) * 0.9; // remise 10%
    // On pense créer une variable locale au bloc if...
  }

  return total;
  // MAIS var n'a pas de portée de bloc !
  // Si panier.length > 5, total est la valeur avec remise.
  // Si panier.length <= 5, total vaut toujours 0 car le if n'a pas été exécuté.
  // Dans les deux cas, le comportement est inattendu et trompeur.
}

// ── PROBLÈME 2 : var dans une boucle for ─────────────────────
// Scénario : afficher les plats avec un délai (animation DariGo)
var plats = ["Tajine", "Couscous", "Harira"];

for (var i = 0; i < plats.length; i++) {
  setTimeout(function() {
    console.log(plats[i]); // On s'attend à voir "Tajine", "Couscous", "Harira"
  }, i * 1000);
}
// RÉSULTAT RÉEL : undefined, undefined, undefined
// Explication : var i est partagée par toutes les itérations.
// Quand les callbacks setTimeout s'exécutent (après 0ms, 1s, 2s),
// la boucle est déjà terminée et i vaut 3 (plats[3] = undefined).
// Tous les callbacks partagent la MÊME variable i.

// ── PROBLÈME 3 : hoisting (hissage) ──────────────────────────
// JavaScript "remonte" les déclarations var en haut de la fonction
console.log(villeLivraison); // undefined — pas d'erreur !
var villeLivraison = "Casablanca";
// JavaScript interprète ce code comme :
// var villeLivraison;           ← déclaration remontée
// console.log(villeLivraison);  ← undefined (pas encore assignée)
// villeLivraison = "Casablanca"; ← assignation reste en place
// Ce comportement masque des bugs : utiliser une variable avant
// sa déclaration devrait être une erreur, pas retourner undefined.

// ── let résout le problème de portée ─────────────────────────
function calculerTotal(panier) {
  let total = 0; // variable du scope de la fonction

  if (panier.length > 5) {
    let total = panier.reduce((acc, p) => acc + p.prix, 0) * 0.9;
    // Cette variable total est DIFFÉRENTE de celle du dessus.
    // Elle n'existe QUE dans ce bloc if { }.
    console.log("Total avec remise (dans le if) :", total);
  }

  return total; // Toujours 0 — la variable du scope fonction est intacte.
  // Pour corriger la logique, il faudrait réassigner le total extérieur :
}

// Version correcte avec let :
function calculerTotalCorrect(panier) {
  let total = panier.reduce((acc, p) => acc + p.prix, 0);
  if (panier.length > 5) {
    total = total * 0.9; // réassignation du let extérieur — intentionnel et lisible
  }
  return total;
}

// ── let dans les boucles — chaque itération a son propre i ───
let plats = ["Tajine", "Couscous", "Harira"];

for (let i = 0; i < plats.length; i++) {
  setTimeout(function() {
    console.log(plats[i]); // Correct : "Tajine", "Couscous", "Harira"
  }, i * 1000);
}
// Avec let, chaque itération de la boucle crée sa PROPRE copie de i.
// i vaut 0 dans le premier callback, 1 dans le second, 2 dans le troisième.

// ── TDZ — Temporal Dead Zone ─────────────────────────────────
console.log(villeLivraison); // ReferenceError: Cannot access 'villeLivraison' before initialization
let villeLivraison = "Casablanca";
// Contrairement à var, let expose le bug immédiatement.
// C'est le comportement attendu d'un langage sain.

// ── Quand utiliser let ────────────────────────────────────────
let compteurCommandes = 0;
compteurCommandes++;       // let car la valeur change

let statut = "en_attente";
statut = "en_preparation"; // let car réassignation nécessaire
statut = "livree";

for (let i = 0; i < plats.length; i++) {
  // let pour les index de boucle — portée limitée au for
}

// ── const avec types primitifs ────────────────────────────────
const FRAIS_LIVRAISON = 15;      // en MAD
const VILLE_DEFAUT = "Casablanca";
const TVA = 0.2;

FRAIS_LIVRAISON = 20; // TypeError: Assignment to constant variable
VILLE_DEFAUT = "Rabat"; // TypeError

// ── const avec des objets — référence figée, contenu modifiable ──
const livreur = {
  nom: "Khalid El Amrani",
  ville: "Casablanca",
  vehicule: "moto",
  note: 4.7,
  disponible: true
};

// Modifier une propriété — AUTORISÉ
livreur.disponible = false;          // OK
livreur.ville = "Mohammedia";        // OK
livreur.nombreLivraisons = 312;      // OK — ajouter une propriété

// Réassigner la variable — INTERDIT
livreur = { nom: "Amine" };          // TypeError !
// La variable livreur doit TOUJOURS pointer vers le même objet en mémoire.

// ── const avec des tableaux — même logique ────────────────────
const villesLivraison = ["Casablanca", "Rabat", "Fès", "Marrakech"];

// Modifier le contenu — AUTORISÉ
villesLivraison.push("Agadir");      // OK
villesLivraison[0] = "Mohammedia";   // OK
villesLivraison.pop();               // OK

// Réassigner le tableau — INTERDIT
villesLivraison = ["Tanger"];        // TypeError !

// ── const en React — omniprésent ─────────────────────────────
// Composant React — toujours const
const CartePlat = ({ nom, prix, disponible }) => {
  return (
    <div className="carte-plat">
      <h3>{nom}</h3>
      <span>{prix} MAD</span>
    </div>
  );
};

// Hooks — toujours const (useState retourne un tableau fixe)
const [panier, setPanier] = useState([]);
const [villeLivraison, setVilleLivraison] = useState("Casablanca");

// URL d'API — toujours const (ne change jamais à l'exécution)
const API_URL = "https://api.darigo.ma";
const TIMEOUT_REQUETE = 5000; // 5 secondes

// Fonctions utilitaires — toujours const
const formaterPrix = (prix) => `${prix} MAD`;
const estDisponible = (plat) => plat.stock > 0 && plat.restaurant.ouvert;

// ── FORME 1 : corps avec accolades et return ──────────────────
const calculerLivraison = (distance, tarif) => {
  const frais = distance * tarif;
  return frais;
};

// ── FORME 2 : retour implicite ────────────────────────────────
// Une seule expression → pas d'accolades, pas de return
const calculerLivraison = (distance, tarif) => distance * tarif;
const formaterPrix = (prix) => `${prix} MAD`;
const estDisponible = (plat) => plat.stock > 0 && plat.restaurant.ouvert;

// ── FORME 3 : un seul paramètre ──────────────────────────────
const doubler = n => n * 2;           // parenthèses optionnelles
const formaterPrix = prix => `${prix} MAD`;

// Zéro paramètre → parenthèses OBLIGATOIRES
const saluer = () => "Marhba bik !";
const getTimestamp = () => Date.now();

// Plusieurs paramètres → parenthèses OBLIGATOIRES
const additionner = (a, b) => a + b;

// ── FORME 4 : retourner un objet littéral ─────────────────────
// PIÈGE : {} de l'objet confondu avec {} du corps de la fonction
const creerPlatResume = (plat) => { id: plat.id, nom: plat.nom }; // FAUX → undefined

// SOLUTION : entourer l'objet de parenthèses
const creerPlatResume = (plat) => ({ id: plat.id, nom: plat.nom }); // CORRECT
const creerLivreur = (nom, ville) => ({ nom, ville, disponible: true });

// ── EN REACT ─────────────────────────────────────────────────
// Composant — retour JSX multiligne avec parenthèses (retour implicite)
const CartePlat = ({ nom, prix }) => (
  <div className="carte">
    <h3>{nom}</h3>
    <p>{prix} MAD</p>
  </div>
);

// Handler inline
<button onClick={() => setPanier([...panier, plat])}>Ajouter</button>

// Callbacks de tableau
const noms = plats.map(p => p.nom);
const cartes = plats.map(p => <CartePlat key={p.id} {...p} />);

// ── PROBLÈME : fonction classique dans setInterval ───────────
const suiviLivraison = {
  livreur: "Khalid El Amrani",
  demarrerSuivi: function() {
    setInterval(function() {
      // this = window ou undefined — PAS suiviLivraison !
      console.log("Position de " + this.livreur); // undefined ou erreur
    }, 1000);
  }
};

// ── SOLUTION 1 : const self = this (ancien) ───────────────────
const suiviLivraison = {
  livreur: "Khalid El Amrani",
  demarrerSuivi: function() {
    const self = this;
    setInterval(function() {
      console.log("Position de " + self.livreur); // fonctionne mais verbeux
    }, 1000);
  }
};

// ── SOLUTION 2 : arrow function (moderne) ────────────────────
const suiviLivraison = {
  livreur: "Khalid El Amrani",
  demarrerSuivi: function() {
    setInterval(() => {
      // this = suiviLivraison — capturé lexicalement
      console.log("Position de " + this.livreur); // "Position de Khalid El Amrani"
    }, 1000);
  }
};

// ── EN REACT — composant de classe (legacy) ───────────────────
// Avec méthode classique — bind OBLIGATOIRE dans constructor
class PanierDariGo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { nbArticles: 0 };
    this.ajouterArticle = this.ajouterArticle.bind(this); // sans ça : this = undefined
  }
  ajouterArticle() {
    this.setState({ nbArticles: this.state.nbArticles + 1 });
  }
}

// Avec arrow function — pas de bind, this lexical correct
class PanierDariGo extends React.Component {
  state = { nbArticles: 0 };
  ajouterArticle = () => {  // this = instance du composant
    this.setState({ nbArticles: this.state.nbArticles + 1 });
  };
}

// ── COMPOSANT FONCTIONNEL (React moderne) ────────────────────
// Avec hooks — plus aucun problème de this
const PanierDariGo = () => {
  const [nbArticles, setNbArticles] = useState(0);
  const ajouterArticle = () => setNbArticles(nbArticles + 1);
  return <button onClick={ajouterArticle}>{nbArticles} article(s)</button>;
};

const commande = {
  id: 1042,
  client: "Fatima-Zahra Alaoui",
  adresse: "Hay Riad, Avenue Mohammed VI",
  ville: "Rabat",
  total: 145,
  statut: "en_preparation",
  livreur: {
    nom: "Khalid El Amrani",
    telephone: "+212 6 12 34 56 78",
    position: { lat: 33.9716, lng: -6.8498 }
  }
};

// ── Sans destructuring — verbeux ──────────────────────────────
const id = commande.id;
const client = commande.client;
const ville = commande.ville;

// ── Avec destructuring — concis ───────────────────────────────
const { id, client, ville, total } = commande;
console.log(client); // "Fatima-Zahra Alaoui"

// ── Renommer une variable : { propriété: nouveauNom } ─────────
const { client: nomClient, total: montant, ville: villeDestination } = commande;
console.log(nomClient); // "Fatima-Zahra Alaoui"
// Les variables client, total, ville n'existent PAS — seulement les renommées

// ── Valeur par défaut si la propriété est absente ─────────────
const { statut, urgent = false, pourboire = 0 } = commande;
// commande.urgent n'existe pas → urgent = false
// commande.pourboire n'existe pas → pourboire = 0

// Combiner renommage + valeur par défaut
const { statut: etatCommande = "inconnu" } = commande;

// ── Destructuring imbriqué ────────────────────────────────────
const { livreur: { nom: nomLivreur, telephone } } = commande;
console.log(nomLivreur); // "Khalid El Amrani"

const { livreur: { position: { lat, lng } } } = commande;
console.log(lat); // 33.9716

// ── Destructuring dans les paramètres — PATTERN FONDAMENTAL REACT
// Sans destructuring
const CarteCommande = (props) => (
  <div>
    <h3>Commande #{props.id}</h3>
    <p>{props.client} — {props.ville}</p>
    <p>Total : {props.total} MAD</p>
  </div>
);

// Avec destructuring dans les paramètres — propre et lisible
const CarteCommande = ({ id, client, ville, total, statut = "en_attente" }) => (
  <div className={`carte carte-${statut}`}>
    <h3>Commande #{id}</h3>
    <p>{client} — {ville}</p>
    <p>Total : {total} MAD</p>
  </div>
);

const villesLivraison = ["Casablanca", "Rabat", "Fès", "Marrakech", "Agadir", "Tanger"];

// ── Extraction positionnelle ──────────────────────────────────
const [v1, v2, v3] = villesLivraison;
// v1 = "Casablanca", v2 = "Rabat", v3 = "Fès"

// Les noms sont LIBRES — position uniquement
const [principale, capitale] = villesLivraison;

// ── Ignorer des éléments — virgule vide ──────────────────────
const [, , troisiemeVille] = villesLivraison;
console.log(troisiemeVille); // "Fès"

const [, , , quatrieme, cinquieme] = villesLivraison;
// "Marrakech", "Agadir"

// ── Capturer le reste avec ...rest ───────────────────────────
const [principale, ...autresVilles] = villesLivraison;
// principale = "Casablanca"
// autresVilles = ["Rabat", "Fès", "Marrakech", "Agadir", "Tanger"]

// ── Valeur par défaut ─────────────────────────────────────────
const [a, b, c, d, e, f, g = "Meknès"] = villesLivraison;
// g = "Meknès" — index 6 n'existe pas

// ── Swap de variables sans variable temporaire ────────────────
let prixMin = 30, prixMax = 150;
[prixMin, prixMax] = [prixMax, prixMin];
// prixMin = 150, prixMax = 30

// ── useState — le cas d'usage le plus important en React ──────
// useState() retourne un tableau [valeurActuelle, fonctionDeMAJ]

// Sans destructuring — illisible
const etatPanier = useState([]);
const panier = etatPanier[0];
const setPanier = etatPanier[1];

// Avec destructuring — idiomatique React
const [panier, setPanier] = useState([]);
const [villeLivraison, setVilleLivraison] = useState("Casablanca");
const [estCharge, setEstCharge] = useState(false);
const [erreur, setErreur] = useState(null);
const [plats, setPlats] = useState([]);

// Le nom est libre — choisissez ce qui est lisible
const [commandeEnCours, mettreAJourCommande] = useState(null);
const [menuVisible, basculerMenu] = useState(false);

const platsPrincipaux = [
  { id: 1, nom: "Tajine Kefta",    prix: 75 },
  { id: 2, nom: "Couscous Royale", prix: 90 },
];
const desserts = [
  { id: 5, nom: "Chebakia", prix: 15 },
  { id: 6, nom: "Mhancha",  prix: 20 },
];

// ── Copier un tableau — nouvelle référence ────────────────────
const copiePlats = [...platsPrincipaux];
// copiePlats === platsPrincipaux → false (nouvelles références)
// copiePlats[0] === platsPrincipaux[0] → true (copie superficielle)

// ── Fusionner deux tableaux ───────────────────────────────────
const menuComplet = [...platsPrincipaux, ...desserts];

// ── Insérer avant ou après ────────────────────────────────────
const menuAvecSoupe  = [{ id: 0, nom: "Harira", prix: 25 }, ...platsPrincipaux];
const menuAvecCafe   = [...platsPrincipaux, { id: 9, nom: "Café marocain", prix: 10 }];

// ── Passer comme arguments individuels ────────────────────────
const prix = [75, 45, 120, 30, 90, 65];
const prixMax = Math.max(...prix); // Math.max(75, 45, 120, 30, 90, 65) → 120
const prixMin = Math.min(...prix); // 30

// ── Patterns React — gestion du tableau d'état ────────────────
const [panier, setPanier] = useState([]);

// AJOUTER un plat
const ajouterAuPanier = (plat) => setPanier([...panier, plat]);

// SUPPRIMER par id
const retirerDuPanier = (id) => setPanier(panier.filter(p => p.id !== id));

// METTRE À JOUR la quantité
const mettreAJourQuantite = (id, quantite) =>
  setPanier(panier.map(p => p.id === id ? { ...p, quantite } : p));

// VIDER le panier
const viderPanier = () => setPanier([]);

const livreur = {
  id: 7,
  nom: "Khalid El Amrani",
  ville: "Casablanca",
  vehicule: "moto",
  note: 4.7,
  disponible: true,
  nombreLivraisons: 312
};

// ── Modifier une propriété SANS muter l'original ─────────────
const livreurIndisponible = { ...livreur, disponible: false };
console.log(livreur.disponible);             // true  — original intact
console.log(livreurIndisponible.disponible); // false — copie modifiée

// ── Ajouter une propriété ─────────────────────────────────────
const livreurAvecZone = { ...livreur, zoneIntervention: ["Ain Sebaa", "Hay Mohammadi"] };

// ── L'ordre détermine quelle valeur gagne ────────────────────
const miseAJour = { ville: "Mohammedia", note: 4.9 };

// Spread d'abord, surcharge ensuite → miseAJour gagne
const livreurMisAJour = { ...livreur, ...miseAJour };
console.log(livreurMisAJour.ville); // "Mohammedia"

// Surcharge d'abord, spread ensuite → livreur gagne
const livreurNonMisAJour = { ...miseAJour, ...livreur };
console.log(livreurNonMisAJour.ville); // "Casablanca"

// ── Patterns React — mise à jour d'état objet ─────────────────
const [commande, setCommande] = useState({
  client: "Fatima-Zahra Alaoui",
  adresse: "Hay Riad, Rabat",
  total: 145,
  statut: "en_attente",
  livreur: null
});

setCommande({ ...commande, statut: "confirmee" });
setCommande({ ...commande, statut: "en_preparation", livreur: livreurMisAJour });

// ── NE JAMAIS faire — mutation directe ───────────────────────
commande.statut = "confirmee"; // React ne détecte PAS le changement

// ── Copie superficielle — mettre à jour un objet imbriqué ─────
// Il faut spreader à CHAQUE niveau
setCommande({
  ...commande,
  livreur: {
    ...commande.livreur,
    note: 4.9
  }
});

// ── Rest dans les paramètres de fonction ──────────────────────
const calculerTotalPanier = (...articles) => {
  // articles est un VRAI tableau JavaScript
  return articles.reduce((total, a) => total + a.prix * a.quantite, 0);
};

calculerTotalPanier(
  { nom: "Tajine",   prix: 75, quantite: 2 },
  { nom: "Harira",   prix: 25, quantite: 3 },
  { nom: "Chebakia", prix: 15, quantite: 4 }
); // → 285 MAD

// Mélange paramètre fixe + rest
const log = (type, livreur, ...details) => {
  console.log(`[${type}] ${livreur}`);
  details.forEach(d => console.log("  →", d));
};

// ── Rest en destructuring d'objet ─────────────────────────────
const plat = {
  id: 3, nom: "Pastilla", prix: 65,
  categorie: "entree", disponible: true,
  allergenes: ["gluten", "oeufs"], restaurant: "La Sqala"
};

const { id, nom, prix, ...metadonnees } = plat;
// metadonnees = { categorie: "entree", disponible: true, allergenes: [...], restaurant: "..." }

// ── Pattern React — passer les props restantes vers un enfant ─
const BoutonDariGo = ({ label, variante = "primary", isLoading = false, ...autresProps }) => (
  <button
    className={`btn btn-${variante} ${isLoading ? "btn-loading" : ""}`}
    disabled={isLoading}
    {...autresProps}  // onClick, type, aria-label, data-testid, etc.
  >
    {isLoading ? "Chargement..." : label}
  </button>
);

// Utilisation — onClick et type passés via ...autresProps
<BoutonDariGo
  label="Commander"
  variante="success"
  onClick={passerCommande}
  type="submit"
  aria-label="Passer la commande DariGo"
/>

const commande = {
  id: 1042, client: "Nadia Benali",
  ville: "Meknès", total: 145,
  statut: "en_preparation"
};
const livreur = "Khalid El Amrani";
const eta = 18;

// ── Avant ES6 — illisible avec beaucoup de variables ──────────
const msgAncien = "Marhba " + commande.client + " ! Commande #"
  + commande.id + " de " + commande.total + " MAD. ETA : " + eta + " min.";

// ── Template literal — lisible ────────────────────────────────
const msg = `Marhba ${commande.client} ! Commande #${commande.id} de ${commande.total} MAD. ETA : ${eta} min par ${livreur}.`;

// ── Expressions dans ${ } ─────────────────────────────────────
const totalTTC  = `Total TTC : ${(commande.total * 1.2).toFixed(2)} MAD`;
const nbArts    = `Panier : ${panier.length} article${panier.length > 1 ? "s" : ""}`;
const statutMsg = `Statut : ${commande.statut === "livree" ? "Livré" : "En cours"}`;
const heure     = `Heure : ${new Date().toLocaleTimeString("fr-MA")}`;

// ── Multiligne — sans \n ni concaténation ────────────────────
const resumeCommande = `
Récapitulatif DariGo
────────────────────
Commande  : #${commande.id}
Client    : ${commande.client} — ${commande.ville}
Total     : ${commande.total} MAD
Livraison : ${livreur}
ETA       : ${eta} minutes
`.trim();

// ── Construction d'URLs — usage central en React ──────────────
const API = "https://api.darigo.ma";
const page = 2;
const categorie = "plat";

const urlPlats       = `${API}/plats`;
const urlCommande    = `${API}/commandes/${commande.id}`;
const urlPlatsFilter = `${API}/plats?categorie=${categorie}&ville=Casablanca&page=${page}&limit=10`;

// ── Classes CSS conditionnelles en JSX ────────────────────────
const classeStatut = `badge ${commande.statut === "livree" ? "badge-success" : "badge-warning"}`;
const classeCarte  = `carte-plat ${plat.disponible ? "" : "carte-plat--indisponible"}`;
const classeBtn    = `btn btn-${variante} ${isLoading ? "btn--loading" : ""}`;

// ── styled-components — CSS-in-JS avec React ─────────────────
import styled from 'styled-components';

const BoutonCommander = styled.button`
  background-color: ${props => props.urgent ? "#e74c3c" : "#2ecc71"};
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  &:hover { opacity: 0.9; }
`;

<BoutonCommander urgent={commande.urgent}>
  Commander maintenant
</BoutonCommander>

// ── Apollo GraphQL ────────────────────────────────────────────
import { gql } from '@apollo/client';

const GET_PLATS = gql`
  query GetPlats($ville: String!) {
    plats(ville: $ville) {
      id nom prix disponible
    }
  }
`;

// ── FICHIER : utils/prix.js — exports nommés ──────────────────
export const formaterPrix = (prix) => `${prix} MAD`;
export const calculerTTC = (prix, tva = 0.2) => +(prix * (1 + tva)).toFixed(2);
export const appliquerRemise = (prix, pct) => +(prix * (1 - pct / 100)).toFixed(2);
export const FRAIS_LIVRAISON_DEFAUT = 15;
export const VILLES_LIVRAISON = ["Casablanca", "Rabat", "Fès", "Marrakech", "Agadir"];

// Ou grouper à la fin du fichier :
const formaterPrix = (prix) => `${prix} MAD`;
const calculerTTC = (prix) => +(prix * 1.2).toFixed(2);
export { formaterPrix, calculerTTC };

// ── FICHIER : components/CartePlat.jsx — export default ───────
const CartePlat = ({ id, nom, prix, disponible, restaurant }) => (
  <div className={`carte-plat ${disponible ? "" : "carte-plat--grise"}`}>
    <h3>{nom}</h3>
    <p className="prix">{prix} MAD</p>
    <p className="restaurant">{restaurant}</p>
    {!disponible && <span className="badge-indisponible">Indisponible</span>}
  </div>
);
export default CartePlat;

// ── FICHIER : components/Header.jsx — nommé ET défaut ────────
export const LOGO_URL = "/images/darigo-logo.svg"; // export nommé
const Header = ({ titre, panier }) => ( ... );
export default Header; // export par défaut

// ── IMPORTS ───────────────────────────────────────────────────
// Import nommé — accolades OBLIGATOIRES, nom EXACT
import { formaterPrix, calculerTTC } from './utils/prix';
import { FRAIS_LIVRAISON_DEFAUT, VILLES_LIVRAISON } from './utils/prix';

// Import nommé avec alias
import { formaterPrix as fp, VILLES_LIVRAISON as villes } from './utils/prix';

// Import namespace — tout le module dans un objet
import * as PrixUtils from './utils/prix';
PrixUtils.formaterPrix(85); // "85 MAD"

// Import par défaut — PAS d'accolades, NOM LIBRE
import CartePlat from './components/CartePlat';
import Carte from './components/CartePlat'; // renommage libre — identique

// Import mixte — défaut ET nommés dans la même instruction
import Header, { LOGO_URL } from './components/Header';
import React, { useState, useEffect, useCallback, useRef } from 'react';

// ── ERREUR FRÉQUENTE ET SILENCIEUSE ──────────────────────────
// CartePlat est un export default → import SANS accolades
import CartePlat from './components/CartePlat';         // CORRECT
import { CartePlat } from './components/CartePlat';    // FAUX — undefined !

// formaterPrix est un export nommé → import AVEC accolades
import { formaterPrix } from './utils/prix';            // CORRECT
import formaterPrix from './utils/prix';                // FAUX — importe le default (undefined)

// ── Index barrel — simplifier les imports ─────────────────────
// components/index.js
export { default as CartePlat } from './CartePlat';
export { default as PanierResume } from './PanierResume';
export { default as Header } from './Header';
export { default as SuiviLivraison } from './SuiviLivraison';

// Dans App.jsx — un seul import au lieu de plusieurs
import { CartePlat, PanierResume, Header, SuiviLivraison } from './components';

src/
├── index.js                    # Point d'entrée — ReactDOM.createRoot()
├── App.jsx                     # Composant racine — export default App
│
├── components/                 # Composants réutilisables
│   ├── CartePlat.jsx           # export default CartePlat
│   ├── PanierResume.jsx        # export default PanierResume
│   ├── Header.jsx              # export default Header
│   ├── SuiviLivraison.jsx      # export default SuiviLivraison
│   └── index.js                # Barrel — re-export tous les composants
│
├── pages/                      # Pages (une par route)
│   ├── PageAccueil.jsx
│   ├── PageMenu.jsx
│   ├── PageCommande.jsx
│   └── PageSuivi.jsx
│
├── services/                   # Appels API
│   ├── api.js                  # utilitaire requete()
│   ├── platsService.js
│   ├── commandesService.js
│   └── authService.js
│
├── hooks/                      # Custom hooks
│   ├── usePlats.js
│   ├── useCommande.js
│   └── useAuth.js
│
├── store/                      # Redux
│   ├── index.js
│   ├── panierSlice.js
│   └── authSlice.js
│
└── utils/                      # Fonctions utilitaires
    ├── prix.js                 # formaterPrix, calculerTTC...
    ├── dates.js                # formaterDate, tempsEcoule...
    └── validation.js           # validerEmail, validerTel...

const plats = [
  { id: 1, nom: "Tajine Kefta",       prix: 75,  categorie: "plat",    disponible: true,  note: 4.8 },
  { id: 2, nom: "Harira Ramadaniya",  prix: 25,  categorie: "soupe",   disponible: false, note: 4.9 },
  { id: 3, nom: "Pastilla au Poulet", prix: 65,  categorie: "entree",  disponible: true,  note: 4.6 },
  { id: 4, nom: "Couscous Royale",    prix: 90,  categorie: "plat",    disponible: true,  note: 4.7 },
  { id: 5, nom: "Chebakia",           prix: 15,  categorie: "dessert", disponible: true,  note: 4.5 },
];

// ── map() — transformations ───────────────────────────────────
const noms = plats.map(p => p.nom);
// ["Tajine Kefta", "Harira Ramadaniya", ...]

const prixAvecRemise = plats.map(p => ({
  ...p,
  prix: +(p.prix * 0.9).toFixed(2),
  enPromo: true
}));

const nomsNumerotes = plats.map((p, index) =>
  `${index + 1}. ${p.nom} — ${p.prix} MAD`
);

// ── map() en JSX — lister des composants ──────────────────────
const MenuDariGo = ({ plats }) => (
  <section className="menu">
    <div className="grille-plats">
      {plats.map(plat => (
        <CartePlat
          key={plat.id}        // OBLIGATOIRE — id stable de la BDD
          id={plat.id}
          nom={plat.nom}
          prix={plat.prix}
          disponible={plat.disponible}
          note={plat.note}
        />
      ))}
    </div>
  </section>
);

// ── Méthodes complémentaires ──────────────────────────────────
// find() — premier élément correspondant (ou undefined)
const platPrincipal = plats.find(p => p.categorie === "plat");
// { id: 1, nom: "Tajine Kefta", ... }
const platInexistant = plats.find(p => p.prix > 200); // undefined

// findIndex() — index du premier élément correspondant
const indexTajine = plats.findIndex(p => p.id === 1); // 0

// some() — au moins un élément correspond → booléen
const aDesPlatsDisponibles = plats.some(p => p.disponible); // true
const aDesPlatsExpensifs = plats.some(p => p.prix > 100);   // false

// every() — tous les éléments correspondent → booléen
const tousDisponibles = plats.every(p => p.disponible);     // false (Harira non dispo)
const tousMoinsDeDeuxCents = plats.every(p => p.prix < 200); // true

// ── filter() — cas d'usage simples ───────────────────────────
const platsDisponibles = plats.filter(p => p.disponible);
const platsPrincipaux  = plats.filter(p => p.categorie === "plat");
const platsBonMarche   = plats.filter(p => p.prix <= 30);
const platsNotesHaut   = plats.filter(p => p.note >= 4.7);

// ── filter() en React — barre de recherche temps réel ─────────
const MenuAvecRecherche = ({ tousLesPlats }) => {
  const [recherche, setRecherche] = useState("");
  const [categorieActive, setCategorieActive] = useState("tous");
  const [seulementDisponibles, setSeulementDisponibles] = useState(true);

  // Chaîner plusieurs filter() — chaque filtre s'applique au résultat du précédent
  const platsFiltres = tousLesPlats
    .filter(p => !seulementDisponibles || p.disponible)
    .filter(p => categorieActive === "tous" || p.categorie === categorieActive)
    .filter(p => p.nom.toLowerCase().includes(recherche.toLowerCase()));

  return (
    <div>
      <input
        type="text"
        placeholder="Chercher un plat..."
        value={recherche}
        onChange={e => setRecherche(e.target.value)}
      />
      <div className="filtres">
        {["tous", "plat", "entree", "soupe", "dessert"].map(cat => (
          <button
            key={cat}
            className={categorieActive === cat ? "actif" : ""}
            onClick={() => setCategorieActive(cat)}
          >{cat}</button>
        ))}
      </div>
      <p>{platsFiltres.length} plat(s) trouvé(s)</p>
      <div className="grille">
        {platsFiltres.map(p => <CartePlat key={p.id} {...p} />)}
      </div>
    </div>
  );
};

// ── filter() pour supprimer de l'état ────────────────────────
const retirerDuPanier = (id) =>
  setPanier(prev => prev.filter(item => item.id !== id));

// ── Dédupliquer ───────────────────────────────────────────────
const categoriesUniques = [...new Set(plats.map(p => p.categorie))];
// ["plat", "soupe", "entree", "dessert"]

const panier = [
  { id: 1, nom: "Tajine Kefta",    prix: 75, quantite: 2 },
  { id: 3, nom: "Pastilla",        prix: 65, quantite: 1 },
  { id: 5, nom: "Chebakia",        prix: 15, quantite: 4 },
];

// ── Total et nombre d'articles ────────────────────────────────
const sousTotal = panier.reduce((acc, item) => acc + item.prix * item.quantite, 0);
// 75*2 + 65*1 + 15*4 = 275 MAD

const nbArticles = panier.reduce((acc, item) => acc + item.quantite, 0);
// 2 + 1 + 4 = 7 articles

// ── Grouper les plats par catégorie ──────────────────────────
const platsParCategorie = plats.reduce((groupes, plat) => {
  const cat = plat.categorie;
  if (!groupes[cat]) groupes[cat] = [];
  groupes[cat].push(plat);
  return groupes;
}, {});
// { "plat": [Tajine, Couscous], "soupe": [Harira], "entree": [Pastilla], "dessert": [Chebakia] }

// ── Indexer par id — accès O(1) ───────────────────────────────
const platsParId = plats.reduce((index, plat) => {
  index[plat.id] = plat;
  return index;
}, {});
// platsParId[3] → Pastilla directement

// ── Statistiques du menu ──────────────────────────────────────
const stats = plats.reduce((acc, plat) => {
  acc.total++;
  acc.prixTotal += plat.prix;
  if (plat.disponible) acc.disponibles++;
  if (plat.note > acc.meilleureNote) {
    acc.meilleureNote = plat.note;
    acc.meilleureNom = plat.nom;
  }
  return acc;
}, { total: 0, prixTotal: 0, disponibles: 0, meilleureNote: 0, meilleureNom: "" });

// ── Composant résumé panier ───────────────────────────────────
const ResumePanier = ({ panier, fraisLivraison = 15 }) => {
  const sousTotal  = panier.reduce((acc, item) => acc + item.prix * item.quantite, 0);
  const nbArticles = panier.reduce((acc, item) => acc + item.quantite, 0);
  return (
    <div className="resume-panier">
      <p>{nbArticles} article(s)</p>
      <p>Sous-total : {sousTotal} MAD</p>
      <p>Livraison : {fraisLivraison} MAD</p>
      <strong>Total : {sousTotal + fraisLivraison} MAD</strong>
    </div>
  );
};

// ── Chaîner avec .then(), .catch(), .finally() ────────────────
fetch("https://api.darigo.ma/plats")
  .then(response => {
    // IMPORTANT : fetch ne rejette pas pour les codes HTTP 4xx/5xx
    if (!response.ok) {
      throw new Error(`Erreur HTTP ${response.status}`);
    }
    return response.json(); // retourne une autre Promise
  })
  .then(plats => setPlats(plats))
  .catch(erreur => setErreur(erreur.message))
  .finally(() => setEstEnChargement(false)); // toujours exécuté

// ── Promise.all() — paralléliser sans tout annuler ────────────
// Lance toutes les Promises en PARALLÈLE.
// Si UNE échoue → tout échoue (reject immédiat).
Promise.all([
  fetch("https://api.darigo.ma/plats").then(r => r.json()),
  fetch("https://api.darigo.ma/categories").then(r => r.json()),
  fetch("https://api.darigo.ma/restaurants?ville=Casablanca").then(r => r.json()),
])
.then(([plats, categories, restaurants]) => {
  setPlats(plats);
  setCategories(categories);
  setRestaurants(restaurants);
})
.catch(erreur => console.error("Chargement partiel échoué :", erreur));

// ── Promise.allSettled() — attendre sans tout annuler ─────────
// Attend que TOUTES les Promises se terminent — succès OU échec.
Promise.allSettled([
  fetch("https://api.darigo.ma/plats").then(r => r.json()),
  fetch("https://api.darigo.ma/promotions").then(r => r.json()), // peut échouer
])
.then(resultats => {
  resultats.forEach((resultat, i) => {
    if (resultat.status === "fulfilled") {
      console.log(`Requête ${i} réussie :`, resultat.value);
    } else {
      console.warn(`Requête ${i} échouée :`, resultat.reason.message);
    }
  });
});

// ── async/await avec gestion d'erreurs ────────────────────────
const passerCommande = async (panier, adresse, token) => {
  try {
    const response = await fetch("https://api.darigo.ma/commandes", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`
      },
      body: JSON.stringify({ articles: panier, adresseLivraison: adresse })
    });

    if (!response.ok) {
      const erreurBody = await response.json();
      throw new Error(erreurBody.message || `Erreur ${response.status}`);
    }

    return await response.json();
    // { id: 1042, statut: "confirmee", estimationLivraison: 18 }

  } catch (erreur) {
    if (erreur.name === "TypeError") {
      throw new Error("Pas de connexion internet — vérifiez votre réseau");
    }
    throw erreur; // re-lancer pour que l'appelant gère
  }
};

// ── useEffect avec async/await — pattern fondamental React ────
// RÈGLE : useEffect ne peut PAS être async directement.
// Une fonction async retourne une Promise — useEffect ne sait quoi en faire.
// SOLUTION : déclarer une fonction async INTERNE et l'appeler immédiatement.

const MenuDariGo = ({ ville }) => {
  const [plats, setPlats] = useState([]);
  const [estEnChargement, setEstEnChargement] = useState(true);
  const [erreur, setErreur] = useState(null);

  useEffect(() => {
    const charger = async () => {
      try {
        setEstEnChargement(true);
        setErreur(null);
        const data = await chargerMenu(ville);
        setPlats(data);
      } catch (err) {
        setErreur(err.message);
      } finally {
        setEstEnChargement(false);
      }
    };
    charger(); // appel immédiat
  }, [ville]); // re-exécuter si ville change

  if (estEnChargement) return <div className="spinner">Chargement...</div>;
  if (erreur) return <div className="erreur">{erreur}</div>;
  return <div>{plats.map(p => <CartePlat key={p.id} {...p} />)}</div>;
};

// ── AbortController — annuler une requête en cours ────────────
useEffect(() => {
  const controller = new AbortController();

  const charger = async () => {
    try {
      const response = await fetch("https://api.darigo.ma/plats", {
        signal: controller.signal // lier la requête au controller
      });
      const data = await response.json();
      setPlats(data);
    } catch (err) {
      if (err.name !== "AbortError") { // ignorer l'erreur d'annulation
        setErreur(err.message);
      }
    }
  };

  charger();
  return () => controller.abort(); // Cleanup : annuler au démontage
}, []);

class Plat {
  constructor(nom, prix, categorie, restaurant) {
    this.nom = nom;
    this.prix = prix;
    this.categorie = categorie;
    this.restaurant = restaurant;
    this.disponible = true;
    this.dateAjout = new Date();
  }

  // Méthode d'instance
  afficher() {
    return `${this.nom} — ${this.prix} MAD (${this.restaurant})`;
  }

  appliquerRemise(pourcentage) {
    // Créer un nouvel objet — ne pas muter this (immutabilité)
    return new Plat(
      this.nom,
      +(this.prix * (1 - pourcentage / 100)).toFixed(2),
      this.categorie,
      this.restaurant
    );
  }

  // Méthode statique — appelée sur la CLASSE, pas une instance
  static creerSoupe(restaurant = "Restaurant Al Fassia, Rabat") {
    return new Plat("Harira Ramadaniya", 25, "soupe", restaurant);
  }

  static comparer(platA, platB) {
    return platA.prix - platB.prix; // Pour Array.sort()
  }

  // Getter — propriété calculée, accédée sans parenthèses
  get prixTTC() {
    return +(this.prix * 1.2).toFixed(2);
  }

  get estAbordable() {
    return this.prix <= 50;
  }

  // Setter
  set prixHT(valeur) {
    if (valeur < 0) throw new Error("Le prix ne peut pas être négatif");
    this.prix = +valeur.toFixed(2);
  }
}

// ── Instancier et utiliser ────────────────────────────────────
const tajine = new Plat("Tajine Kefta", 75, "plat", "La Sqala, Casablanca");
console.log(tajine.afficher()); // "Tajine Kefta — 75 MAD (La Sqala, Casablanca)"
console.log(tajine.prixTTC);    // 90 (getter — sans parenthèses)
console.log(tajine.estAbordable); // false

const tajinePromo = tajine.appliquerRemise(10); // nouvel objet, tajine intact
const soupe = Plat.creerSoupe(); // méthode statique

// Tri par prix
const platsTriesParPrix = [tajine, couscous, soupe].sort(Plat.comparer);

// ── Héritage avec extends et super ───────────────────────────
class PlatSpecial extends Plat {
  constructor(nom, prix, categorie, restaurant, chef) {
    super(nom, prix, categorie, restaurant); // OBLIGATOIRE en premier
    // super() appelle le constructor de Plat et initialise this
    // Sans super(), accéder à this lève une ReferenceError
    this.chef = chef;
    this.labelSpecial = true;
  }

  afficher() {
    return `${super.afficher()} | Chef : ${this.chef}`;
  }
}

const specialite = new PlatSpecial(
  "Mechoui d'Agneau",  220, "plat",
  "La Mamounia, Marrakech", "Chef Hassan Alaoui"
);
console.log(specialite instanceof Plat);        // true
console.log(specialite instanceof PlatSpecial); // true

// ── COMPOSANT DE CLASSE (LEGACY) ─────────────────────────────
class PanierDariGo extends React.Component {
  constructor(props) {
    super(props); // OBLIGATOIRE — initialise React.Component
    this.state = {
      articles: [],
      villeLivraison: props.villeDefaut || "Casablanca",
    };
    // bind nécessaire pour les méthodes classiques
    this.ajouterArticle = this.ajouterArticle.bind(this);
  }

  // Méthode classique — nécessite bind dans constructor
  ajouterArticle(plat) {
    this.setState(prevState => ({
      articles: [...prevState.articles, plat]
    }));
  }

  // Arrow function comme propriété — this lexical, pas de bind
  retirerArticle = (id) => {
    this.setState(prevState => ({
      articles: prevState.articles.filter(a => a.id !== id)
    }));
  };

  // Lifecycle — équivalent de useEffect(fn, [])
  componentDidMount() {
    fetch("https://api.darigo.ma/plats")
      .then(r => r.json())
      .then(plats => this.setState({ platsDisponibles: plats }));
  }

  componentWillUnmount() {
    clearInterval(this.intervalId); // nettoyage
  }

  render() { // OBLIGATOIRE
    const { articles, villeLivraison } = this.state;
    const total = articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);
    return (
      <div className="panier">
        <h2>Votre panier — {villeLivraison}</h2>
        {articles.map(a => (
          <div key={a.id}>
            <span>{a.nom}</span>
            <button onClick={() => this.retirerArticle(a.id)}>Retirer</button>
          </div>
        ))}
        <strong>Total : {total} MAD</strong>
      </div>
    );
  }
}

// ── ÉQUIVALENT AVEC HOOKS — ce que vous écrirez ───────────────
const PanierDariGo = ({ villeDefaut = "Casablanca" }) => {
  const [articles, setArticles] = useState([]);
  const [villeLivraison] = useState(villeDefaut);

  useEffect(() => {
    fetch("https://api.darigo.ma/plats")
      .then(r => r.json())
      .then(setPlatsDisponibles);
  }, []);

  const ajouterArticle = (plat) => setArticles(prev => [...prev, plat]);
  const retirerArticle = (id) => setArticles(prev => prev.filter(a => a.id !== id));
  const total = articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);

  return (
    <div className="panier">
      <h2>Votre panier — {villeLivraison}</h2>
      {articles.map(a => (
        <div key={a.id}>
          <span>{a.nom}</span>
          <button onClick={() => retirerArticle(a.id)}>Retirer</button>
        </div>
      ))}
      <strong>Total : {total} MAD</strong>
    </div>
  );
};

const API = "https://api.darigo.ma";

// ── GET — lire avec paramètres et auth ────────────────────────
const chargerPlats = async (ville = "Casablanca", categorie = null, page = 1) => {
  const url = new URL(`${API}/plats`);
  url.searchParams.set("ville", ville);
  url.searchParams.set("page", page);
  url.searchParams.set("limit", 10);
  if (categorie) url.searchParams.set("categorie", categorie);

  const response = await fetch(url);
  if (!response.ok) throw new Error(`Erreur ${response.status}`);
  return response.json();
};

const chargerMesCommandes = async (token) => {
  const response = await fetch(`${API}/commandes/mes-commandes`, {
    headers: { "Authorization": `Bearer ${token}` }
  });
  if (!response.ok) throw new Error("Non autorisé ou session expirée");
  return response.json();
};

// ── POST — créer une commande ─────────────────────────────────
const passerCommande = async (panier, adresse, ville, token) => {
  const response = await fetch(`${API}/commandes`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json", // OBLIGATOIRE pour que le serveur parse le body
      "Authorization": `Bearer ${token}`
    },
    body: JSON.stringify({
      articles: panier.map(a => ({ idPlat: a.id, quantite: a.quantite })),
      adresseLivraison: adresse,
      villeLivraison: ville,
      modePaiement: "CMI"
    })
  });

  if (!response.ok) {
    const errBody = await response.json().catch(() => ({}));
    throw new Error(errBody.message || `Commande refusée (${response.status})`);
  }
  return response.json(); // { id: 1042, statut: "confirmee", estimationLivraison: 18 }
};

// ── PATCH — mettre à jour partiellement ──────────────────────
const updateStatut = async (id, statut, token) => {
  const response = await fetch(`${API}/commandes/${id}/statut`, {
    method: "PATCH",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${token}`
    },
    body: JSON.stringify({ statut }) // shorthand ES6
  });
  return response.json();
};

// ── DELETE — annuler ─────────────────────────────────────────
const annulerCommande = async (id, token) => {
  const response = await fetch(`${API}/commandes/${id}`, {
    method: "DELETE",
    headers: { "Authorization": `Bearer ${token}` }
  });
  if (response.status === 204) return true; // No Content — succès sans body
  if (!response.ok) throw new Error(`Annulation impossible (${response.status})`);
  return response.json();
};

// ── services/api.js — fonction utilitaire centrale ────────────
const BASE_URL = process.env.REACT_APP_API_URL || "https://api.darigo.ma";
const TIMEOUT_MS = 10000;

const requete = async (endpoint, options = {}) => {
  const token = localStorage.getItem("darigo_token");
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS);

  try {
    const response = await fetch(`${BASE_URL}${endpoint}`, {
      signal: controller.signal,
      headers: {
        "Content-Type": "application/json",
        ...(token && { "Authorization": `Bearer ${token}` }),
        ...options.headers
      },
      ...options
    });

    if (response.status === 401) {
      localStorage.removeItem("darigo_token");
      window.location.href = "/login";
      throw new Error("Session expirée");
    }

    if (!response.ok) {
      const errBody = await response.json().catch(() => ({}));
      throw new Error(errBody.message || `Erreur ${response.status}`);
    }

    if (response.status === 204) return null;
    return response.json();

  } catch (erreur) {
    if (erreur.name === "AbortError") {
      throw new Error("La requête a expiré — vérifiez votre connexion");
    }
    throw erreur;
  } finally {
    clearTimeout(timeoutId);
  }
};

// ── services/platsService.js ──────────────────────────────────
export const platsService = {
  getAll:        (params = {}) => requete(`/plats?${new URLSearchParams(params)}`),
  getById:       (id)         => requete(`/plats/${id}`),
  getParVille:   (ville)      => requete(`/plats?ville=${encodeURIComponent(ville)}`),
  rechercher:    (terme, ville) =>
    requete(`/plats?q=${encodeURIComponent(terme)}&ville=${encodeURIComponent(ville)}`),
};

// ── services/commandesService.js ──────────────────────────────
export const commandesService = {
  creer:          (data) => requete("/commandes", { method: "POST",  body: JSON.stringify(data) }),
  getById:        (id)   => requete(`/commandes/${id}`),
  getMesCommandes: ()    => requete("/commandes/mes-commandes"),
  updateStatut:   (id, statut) => requete(`/commandes/${id}/statut`, {
    method: "PATCH",
    body: JSON.stringify({ statut })
  }),
  annuler: (id) => requete(`/commandes/${id}`, { method: "DELETE" }),
};

// ── Utilisation dans un composant React ──────────────────────
import { platsService } from '../services/platsService';

const PageMenu = ({ ville }) => {
  const [plats, setPlats] = useState([]);
  const [erreur, setErreur] = useState(null);
  const [estEnChargement, setEstEnChargement] = useState(true);

  useEffect(() => {
    const charger = async () => {
      try {
        const data = await platsService.getParVille(ville);
        setPlats(data);
      } catch (err) {
        setErreur(err.message);
      } finally {
        setEstEnChargement(false);
      }
    };
    charger();
  }, [ville]);
  // ...
};

// ── Manipulation DOM classique — sans React ───────────────────
// Scénario : afficher la liste des plats DariGo reçus de l'API

// 1. Récupérer le conteneur dans le DOM
const conteneurPlats = document.getElementById('liste-plats');

// 2. Pour chaque plat, créer des éléments DOM manuellement
function afficherPlats(plats) {
  // Vider le conteneur avant de re-remplir
  conteneurPlats.innerHTML = '';

  plats.forEach(plat => {
    // Créer chaque élément un par un
    const carte = document.createElement('div');
    carte.classList.add('carte-plat');
    if (!plat.disponible) carte.classList.add('carte-plat--indisponible');

    const titre = document.createElement('h3');
    titre.textContent = plat.nom;

    const prix = document.createElement('p');
    prix.classList.add('prix');
    prix.textContent = `${plat.prix} MAD`;

    const bouton = document.createElement('button');
    bouton.textContent = plat.disponible ? 'Ajouter' : 'Indisponible';
    bouton.disabled = !plat.disponible;

    // Attacher un event listener sur chaque bouton
    bouton.addEventListener('click', () => ajouterAuPanier(plat));

    // Assembler l'arbre manuellement
    carte.appendChild(titre);
    carte.appendChild(prix);
    carte.appendChild(bouton);
    conteneurPlats.appendChild(carte);
  });
}

// 3. Mettre à jour une propriété — trouver et modifier dans le DOM
function mettreAJourPrix(idPlat, nouveauPrix) {
  // Traverser le DOM pour trouver l'élément...
  const cartes = document.querySelectorAll('.carte-plat');
  cartes.forEach(carte => {
    if (carte.dataset.idPlat === String(idPlat)) {
      carte.querySelector('.prix').textContent = `${nouveauPrix} MAD`;
    }
  });
  // Fragile, verbeux, difficile à maintenir
}

// ── Le même résultat avec React ───────────────────────────────
// React se charge de TOUT le DOM — vous décrivez l'état souhaité
const MenuDariGo = ({ plats }) => (
  <div id="liste-plats">
    {plats.map(plat => (
      <div
        key={plat.id}
        className={`carte-plat ${plat.disponible ? '' : 'carte-plat--indisponible'}`}
      >
        <h3>{plat.nom}</h3>
        <p className="prix">{plat.prix} MAD</p>
        <button
          disabled={!plat.disponible}
          onClick={() => ajouterAuPanier(plat)}
        >
          {plat.disponible ? 'Ajouter' : 'Indisponible'}
        </button>
      </div>
    ))}
  </div>
);
// React synchronise le DOM automatiquement quand plats change.
// Plus besoin de getElementById, appendChild, ou querySelector.

# ── Structure d'un projet React après initialisation avec Vite ──
darigo-frontend/
├── node_modules/          # Toutes les dépendances — jamais commitées dans Git
├── public/
│   └── vite.svg           # Assets statiques servis tels quels
├── src/
│   ├── main.jsx           # Point d'entrée — ReactDOM.createRoot()
│   ├── App.jsx            # Composant racine
│   ├── App.css
│   └── index.css
├── index.html             # Template HTML — Vite y injecte le JS compilé
├── package.json           # Dépendances et scripts npm
├── package-lock.json      # Versions exactes des dépendances installées
├── vite.config.js         # Configuration Vite
└── .eslintrc.cjs          # Règles ESLint

# ── Scripts disponibles après création ───────────────────────
npm run dev    # Serveur de développement avec hot reload — http://localhost:5173
npm run build  # Build de production — génère le dossier dist/
npm run preview # Prévisualiser le build de production en local
npm run lint   # Vérifier le code avec ESLint

── Cycle de vie d'une navigation MPA ──────────────────────────

Utilisateur sur darigo.ma/menu
       │
       ▼
Clic sur "Voir ma commande"
       │
       ▼
Navigateur : GET https://darigo.ma/commande/1042
       │
       ▼
Serveur : génère la page HTML complète de la commande
  - Requête BDD pour récupérer la commande
  - Injection des données dans le template HTML
  - Retour d'un document HTML complet (~50KB)
       │
       ▼
Navigateur : reçoit le HTML
  - Détruit la page actuelle (perd l'état JS)
  - Parse le HTML, charge les CSS/JS liés
  - Reconstruit le DOM complet
  - Affiche la nouvelle page
       │
       ▼
Temps total : 300ms à 2s selon réseau et serveur

Problèmes :
- Flash blanc pendant le rechargement
- Perte de l'état (panier, scroll, filtres actifs)
- Header/footer re-rendu inutilement à chaque page
- Chaque page = nouvelle requête réseau + génération HTML serveur

── Cycle de vie d'une navigation SPA ──────────────────────────

Chargement initial : https://darigo.ma
       │
       ▼
Navigateur : GET https://darigo.ma
Serveur : retourne index.html (minimal) + bundle JS (~300KB gzippé)
       │
       ▼
React démarre, affiche la page d'accueil
Tout le code de l'application est déjà en mémoire.
       │
       ▼
Utilisateur clique sur "Voir ma commande"
       │
       ▼
React Router intercepte le clic (preventDefault)
window.history.pushState({}, '', '/commande/1042')
  → URL mise à jour SANS rechargement
       │
       ▼
React Router affiche le composant PageCommande
  → fetch('https://api.darigo.ma/commandes/1042')
  → Données reçues, état mis à jour, composant re-rendu
       │
       ▼
Temps de navigation : 0-50ms (rendu JS immédiat)
+ temps du fetch API : 100-300ms
Aucun flash, aucune reconstruction du header/footer
État conservé (panier, utilisateur connecté)

// ── History API — ce que React Router utilise en interne ─────
// Naviguer sans rechargement
window.history.pushState({ page: 'commande' }, '', '/commande/1042');
// L'URL change dans la barre d'adresse — pas de rechargement

// Écouter les navigations arrière/avant (bouton ← du navigateur)
window.addEventListener('popstate', (event) => {
  console.log('Navigation vers :', window.location.pathname);
  afficherPagePourURL(window.location.pathname);
});

// ── React Router — abstraction de haut niveau sur History API ─
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom';

const AppDariGo = () => (
  <BrowserRouter>
    <Header />  {/* Rendu UNE FOIS — jamais reconstruit */}

    <Routes>
      {/* Chaque Route affiche un composant différent selon l'URL */}
      <Route path="/"               element={<PageAccueil />} />
      <Route path="/menu"           element={<PageMenu />} />
      <Route path="/menu/:ville"    element={<PageMenu />} />
      <Route path="/commande/:id"   element={<PageCommande />} />
      <Route path="/suivi/:id"      element={<PageSuivi />} />
      <Route path="/profil"         element={<PageProfil />} />
      <Route path="*"               element={<Page404 />} />
    </Routes>

    <Footer />  {/* Rendu UNE FOIS — jamais reconstruit */}
  </BrowserRouter>
);

// Link — génère un <a> qui intercepte le clic et utilise History API
const NavDariGo = () => (
  <nav>
    <Link to="/">Accueil</Link>
    <Link to="/menu">Menu</Link>
    <Link to="/profil">Mon profil</Link>
  </nav>
);

// useNavigate — navigation programmatique depuis le code
const FormulaireCommande = () => {
  const navigate = useNavigate();

  const soumettre = async () => {
    const commande = await commandesService.creer(panier);
    // Après succès, naviguer vers la page de suivi
    navigate(`/suivi/${commande.id}`); // History API — pas de rechargement
  };

  return <button onClick={soumettre}>Confirmer ma commande</button>;
};

// ── APPROCHE IMPÉRATIVE (JavaScript pur) ─────────────────────
// Le statut d'une commande DariGo passe à "livree"
// Le développeur doit savoir COMMENT mettre à jour chaque élément DOM

function mettreAJourStatutLivree(idCommande) {
  const badge = document.querySelector(`#commande-${idCommande} .badge-statut`);
  const btnAnnuler = document.querySelector(`#commande-${idCommande} .btn-annuler`);
  const message = document.querySelector(`#commande-${idCommande} .message-statut`);
  const timeline = document.querySelector(`#commande-${idCommande} .timeline`);

  badge.textContent = 'Livrée';
  badge.className = 'badge-statut badge-success';
  btnAnnuler.style.display = 'none';
  message.textContent = 'Votre commande a bien été livrée. Bon appétit !';
  timeline.querySelector('[data-etape="livree"]').classList.add('etape-active');

  // Et si on oublie de mettre à jour un élément ? Bug silencieux.
  // Et si le DOM a changé entre-temps ? Erreur null pointer.
}

// ── APPROCHE DÉCLARATIVE (React) ─────────────────────────────
// Le développeur décrit CE QUE l'interface doit afficher
// React se charge du COMMENT mettre à jour le DOM

const CarteCommande = ({ commande }) => {
  // Je décris l'interface pour chaque état possible de commande.statut
  // React synchronise le DOM automatiquement quand commande change
  return (
    <div id={`commande-${commande.id}`} className="carte-commande">
      <span className={`badge-statut ${commande.statut === 'livree' ? 'badge-success' : 'badge-warning'}`}>
        {commande.statut === 'livree' ? 'Livrée' : 'En cours'}
      </span>

      {commande.statut !== 'livree' && (
        <button className="btn-annuler">Annuler</button>
      )}

      <p className="message-statut">
        {commande.statut === 'livree'
          ? 'Votre commande a bien été livrée. Bon appétit !'
          : `En cours — ETA : ${commande.eta} minutes`}
      </p>

      <Timeline commande={commande} />
    </div>
  );
};
// Quand commande.statut change → React recalcule et met à jour automatiquement.

// ── Visualiser le cycle de rendu React ───────────────────────
const SuiviCommande = ({ idCommande }) => {
  const [commande, setCommande] = useState(null);
  const [statut, setStatut] = useState('en_attente');

  // ÉTAPE 1 — Render : React appelle cette fonction
  // Elle retourne du JSX (Virtual DOM) — aucun DOM réel touché ici
  console.log('Render — statut:', statut);

  // ÉTAPE 3 — Commit : useEffect s'exécute APRÈS que le DOM soit mis à jour
  useEffect(() => {
    console.log('Commit — DOM mis à jour avec statut:', statut);

    // Simuler une mise à jour temps réel du statut de livraison
    const interval = setInterval(async () => {
      const data = await commandesService.getById(idCommande);
      setStatut(data.statut); // Déclenche un nouveau cycle Render→Diff→Commit
    }, 5000);

    return () => clearInterval(interval);
  }, [idCommande]);

  return (
    <div className="suivi-commande">
      <h2>Commande #{idCommande}</h2>
      <BadgeStatut statut={statut} />
      {/* React ne re-rend que BadgeStatut si statut change — pas toute la page */}
    </div>
  );
};

// ── Impact de key sur la performance des listes ───────────────
// Scénario : le menu DariGo — ajout d'un plat spécial en tête de liste

// SANS key stable — React compare par position :
// Ancien : [Tajine(pos0), Couscous(pos1), Harira(pos2)]
// Nouveau : [Méchoui(pos0), Tajine(pos1), Couscous(pos2), Harira(pos3)]
// React pense que TOUS les éléments ont changé → recrée 4 éléments DOM
{plats.map((p, index) => <CartePlat key={index} {...p} />)} // MAUVAIS

// AVEC key={p.id} — React compare par identifiant :
// Tajine(id:1) existe toujours → DOM inchangé
// Couscous(id:2) existe toujours → DOM inchangé
// Harira(id:3) existe toujours → DOM inchangé
// Méchoui(id:99) est nouveau → React crée UN seul nouveau nœud DOM
{plats.map(p => <CartePlat key={p.id} {...p} />)} // CORRECT

# ── Vérifier que Node.js et npm sont installés ────────────────
node --version   # doit afficher v22.x.x (ou v20.x.x minimum)
npm --version    # doit afficher 10.x.x ou supérieur

# ── Installer Node.js ─────────────────────────────────────────
# Windows / Mac : télécharger l'installeur LTS sur https://nodejs.org
# Linux (Ubuntu/Debian) :
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

# ── nvm — gérer plusieurs versions de Node.js (recommandé) ───
# Utile pour jongler entre projets qui nécessitent des versions différentes
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

nvm install 22        # Installer Node.js 22 LTS
nvm use 22            # Utiliser Node.js 22 dans le terminal courant
nvm alias default 22  # Définir comme version par défaut

# ── Créer le projet DariGo avec Vite ─────────────────────────
npm create vite@latest darigo-frontend -- --template react
# darigo-frontend = nom du dossier
# --template react = template JavaScript (sans TypeScript)
# Pour TypeScript : --template react-ts

# Autres templates disponibles :
# react          JavaScript pur
# react-ts       TypeScript
# react-swc      JavaScript + SWC (transpileur Rust, encore plus rapide)
# react-swc-ts   TypeScript + SWC

# ── Installer les dépendances et démarrer ─────────────────────
cd darigo-frontend
npm install          # Installe toutes les dépendances (react, react-dom, vite...)
npm run dev          # Démarre le serveur de développement

# Le serveur démarre sur http://localhost:5173 (port par défaut de Vite)
# Modification d'un fichier → rechargement instantané dans le navigateur

# ── Autres commandes utiles ───────────────────────────────────
npm run build        # Compiler pour la production → dossier dist/
npm run preview      # Prévisualiser le build de production en local
npm run lint         # Analyser le code avec ESLint

# ── Structure du projet après npm create vite ─────────────────
darigo-frontend/
│
├── public/
│   └── vite.svg               # Assets servis sans traitement (favicon, robots.txt...)
│
├── src/
│   ├── assets/
│   │   └── react.svg          # Assets importés dans le JS (optimisés par Vite)
│   ├── App.css                # Styles du composant App
│   ├── App.jsx                # Composant racine de l'application
│   ├── index.css              # Styles globaux
│   └── main.jsx               # Point d'entrée — monte React dans le DOM
│
├── index.html                 # Template HTML — Vite injecte le JS compilé ici
├── package.json               # Dépendances et scripts
├── package-lock.json          # Versions exactes installées (commiter dans Git)
├── vite.config.js             # Configuration Vite
└── .eslintrc.cjs              # Règles ESLint

// ── index.html — le seul fichier HTML du projet SPA ──────────
// Vite injecte automatiquement la balise <script> pour main.jsx
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DariGo — Livraison de plats marocains</title>
  </head>
  <body>
    <div id="root"></div>  <!-- React monte l'application ici -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

// ── src/main.jsx — point d'entrée de l'application ───────────
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

// React 18 — createRoot() remplace l'ancien ReactDOM.render()
// createRoot active le Concurrent Mode de React 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* StrictMode détecte les problèmes potentiels en développement */}
    {/* En production, StrictMode est automatiquement désactivé */}
    <App />
  </React.StrictMode>
);

// ── src/App.jsx — composant racine à remplacer pour DariGo ───
import { useState } from 'react';
import './App.css';

const App = () => {
  return (
    <div className="app">
      <h1>DariGo — Livraison de plats marocains</h1>
      <p>Tajine, Couscous, Harira livrés chez vous à Casablanca</p>
    </div>
  );
};

export default App;

# ── CRA — commandes de référence (projets legacy) ─────────────
npx create-react-app darigo-frontend          # JavaScript
npx create-react-app darigo-frontend --template typescript  # TypeScript

cd darigo-frontend
npm start          # Serveur dev sur http://localhost:3000
npm run build      # Build production → dossier build/ (pas dist/ comme Vite)
npm test           # Lance Jest en mode watch

# ── Différence de structure CRA vs Vite ──────────────────────
# CRA génère :
darigo-frontend/
├── public/
│   ├── index.html    # Template HTML (dans public/ — différent de Vite)
│   └── ...
├── src/
│   ├── App.js        # Extension .js (pas .jsx par défaut dans CRA)
│   ├── App.test.js   # Test Jest généré automatiquement
│   ├── index.js      # Point d'entrée (pas main.jsx)
│   └── ...
└── package.json

# Vite génère :
darigo-frontend/
├── index.html        # À la RACINE — pas dans public/
├── src/
│   ├── App.jsx       # Extension .jsx par convention
│   ├── main.jsx      # Point d'entrée
│   └── ...
└── vite.config.js    # Config visible et modifiable facilement

# ── Créer et configurer DariGo ───────────────────────────────
npm create vite@latest darigo-frontend -- --template react
cd darigo-frontend
npm install

# Installer les dépendances du projet complet
npm install react-router-dom          # Routage
npm install @reduxjs/toolkit react-redux  # État global
npm install axios                     # Requêtes HTTP
npm install react-hook-form           # Formulaires
npm install @tanstack/react-query     # Cache et synchro serveur

# Dépendances de développement
npm install -D eslint-plugin-react-hooks  # Règles ESLint pour les hooks

// ── vite.config.js — configuration recommandée pour DariGo ───
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // Alias pour éviter les imports relatifs profonds
      // Avant : import CartePlat from '../../../components/CartePlat'
      // Après : import CartePlat from '@components/CartePlat'
      '@'          : path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@pages'     : path.resolve(__dirname, './src/pages'),
      '@services'  : path.resolve(__dirname, './src/services'),
      '@hooks'     : path.resolve(__dirname, './src/hooks'),
      '@store'     : path.resolve(__dirname, './src/store'),
      '@utils'     : path.resolve(__dirname, './src/utils'),
    }
  },
  server: {
    port: 3000,   // Changer le port par défaut si nécessaire
    proxy: {
      // Proxy les requêtes /api vers le backend pour éviter les erreurs CORS en dev
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

// ── JSX → React.createElement() : la transformation Babel ────

// CODE JSX que vous écrivez :
const CartePlat = ({ nom, prix, disponible }) => (
  <div className={`carte-plat ${disponible ? '' : 'grise'}`}>
    <h3>{nom}</h3>
    <p className="prix">{prix} MAD</p>
    <button disabled={!disponible}>
      {disponible ? 'Ajouter' : 'Indisponible'}
    </button>
  </div>
);

// CE QUE BABEL GÉNÈRE (React 17+ avec le nouveau transform JSX) :
// Note: depuis React 17, l'import React n'est plus obligatoire pour le JSX
import { jsx as _jsx, jsxs as _jsxs } from 'react/jsx-runtime';

const CartePlat = ({ nom, prix, disponible }) =>
  _jsxs('div', {
    className: `carte-plat ${disponible ? '' : 'grise'}`,
    children: [
      _jsx('h3', { children: nom }),
      _jsxs('p', { className: 'prix', children: [prix, ' MAD'] }),
      _jsx('button', {
        disabled: !disponible,
        children: disponible ? 'Ajouter' : 'Indisponible'
      })
    ]
  });

// ── L'objet Virtual DOM résultant ────────────────────────────
// React.createElement retourne un objet JavaScript simple :
{
  type: 'div',
  props: {
    className: 'carte-plat',
    children: [
      { type: 'h3', props: { children: 'Tajine Kefta' }, ... },
      { type: 'p', props: { className: 'prix', children: '75 MAD' }, ... },
      { type: 'button', props: { disabled: false, children: 'Ajouter' }, ... }
    ]
  },
  key: null,
  ref: null,
  // ...autres métadonnées React
}
// Ce sont ces objets que React compare (Diffing) pour déterminer
// ce qui a changé dans le DOM réel.

// ── RÈGLE 1 : className au lieu de class ─────────────────────
// class est un mot réservé JavaScript (pour les classes ES6)
<div class="carte">...</div>         // FAUX — warning React
<div className="carte">...</div>     // CORRECT

// ── RÈGLE 2 : htmlFor au lieu de for ─────────────────────────
// for est un mot réservé JavaScript (boucles)
<label for="email">Email</label>     // FAUX
<label htmlFor="email">Email</label> // CORRECT

// ── RÈGLE 3 : attributs en camelCase ─────────────────────────
// Les attributs HTML avec tirets deviennent camelCase en JSX
<div tabindex="1"></div>             // FAUX
<div tabIndex={1}></div>             // CORRECT

<input maxlength="50" />             // FAUX
<input maxLength={50} />             // CORRECT

// Exception : les attributs data-* et aria-* gardent leur tiret
<div data-testid="carte-plat" aria-label="Tajine Kefta">...</div> // CORRECT

// ── RÈGLE 4 : fermeture obligatoire de toutes les balises ─────
// En HTML, <br>, <img>, <input> n'ont pas de balise fermante
<br>                                 // FAUX en JSX
<br />                               // CORRECT

<img src={platImg} alt="Tajine">     // FAUX
<img src={platImg} alt="Tajine" />   // CORRECT

<input type="text" placeholder="Rechercher...">  // FAUX
<input type="text" placeholder="Rechercher..." /> // CORRECT

// ── RÈGLE 5 : un seul élément racine ─────────────────────────
// Un composant React ne peut retourner qu'un seul élément racine
// (car Babel génère un seul appel React.createElement au niveau supérieur)

// FAUX — deux éléments racines :
const CartePlat = () => (
  <h3>Tajine Kefta</h3>
  <p>75 MAD</p>
);
// SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag

// SOLUTION 1 : wrapper div
const CartePlat = () => (
  <div>
    <h3>Tajine Kefta</h3>
    <p>75 MAD</p>
  </div>
);

// SOLUTION 2 : Fragment — sans div supplémentaire dans le DOM
const CartePlat = () => (
  <>
    <h3>Tajine Kefta</h3>
    <p>75 MAD</p>
  </>
);
// <>...</> est le shorthand de <React.Fragment>...</React.Fragment>
// Un Fragment ne crée aucun élément DOM — il regroupe logiquement les enfants

// Fragment avec key (nécessaire dans les listes) :
plats.map(p => (
  <React.Fragment key={p.id}>
    <dt>{p.nom}</dt>
    <dd>{p.prix} MAD</dd>
  </React.Fragment>
));

const plat = {
  id: 1,
  nom: "Tajine Kefta",
  prix: 75,
  note: 4.8,
  disponible: true,
  restaurant: "La Sqala, Casablanca",
  image: "/images/tajine-kefta.jpg"
};
const remise = 10; // %

const CartePlatComplete = ({ plat }) => (
  <div className="carte-plat">

    {/* ── Variables ── */}
    <h3>{plat.nom}</h3>
    <p>{plat.restaurant}</p>

    {/* ── Expressions arithmétiques ── */}
    <p>Prix original : {plat.prix} MAD</p>
    <p>Prix remisé : {plat.prix * (1 - remise / 100)} MAD</p>
    <p>TTC : {(plat.prix * 1.2).toFixed(2)} MAD</p>

    {/* ── Appels de méthodes ── */}
    <p>Note : {plat.note.toFixed(1)} / 5</p>
    <p>Nom en majuscules : {plat.nom.toUpperCase()}</p>

    {/* ── Opérateur ternaire — affichage conditionnel ── */}
    <span className={plat.disponible ? "badge-vert" : "badge-rouge"}>
      {plat.disponible ? "Disponible" : "Indisponible"}
    </span>

    {/* ── && — afficher uniquement si condition vraie ── */}
    {plat.disponible && (
      <button className="btn-ajouter">Ajouter au panier</button>
    )}
    {!plat.disponible && (
      <p className="msg-indispo">Disponible demain</p>
    )}

    {/* ── Attention au && avec 0 ── */}
    {/* PIÈGE : 0 && ... affiche "0" dans le DOM — pas rien ! */}
    {panier.length && <span>{panier.length} articles</span>}
    {/* Si panier est vide (length = 0), React affiche "0" dans le DOM */}
    {/* CORRECTION : forcer un booléen */}
    {panier.length > 0 && <span>{panier.length} articles</span>}
    {/* ou : */}
    {!!panier.length && <span>{panier.length} articles</span>}

    {/* ── Styles inline — objet JavaScript, pas une string CSS ── */}
    <div style={{ backgroundColor: '#2ecc71', padding: '8px 16px', borderRadius: 8 }}>
      {/* Double accolades : la première = expression JSX, la seconde = objet JS */}
      {/* Les propriétés CSS sont en camelCase : background-color → backgroundColor */}
    </div>

    {/* ── Commentaires JSX — dans des accolades ── */}
    {/* Ceci est un commentaire JSX — visible dans le code source, pas dans le DOM */}

    {/* ── Ce qui N'EST PAS possible directement dans JSX ── */}
    {/* if/else — utiliser le ternaire ou && */}
    {/* for — utiliser map() */}
    {/* const/let/var — déclarer en dehors du return */}

    {/* ── map() pour rendre des listes ── */}
    <ul className="tags">
      {['halal', 'marocain', 'traditionnel'].map(tag => (
        <li key={tag} className="tag">{tag}</li>
      ))}
    </ul>

  </div>
);

// ── NE PAS mettre d'instructions dans JSX ────────────────────
// FAUX — if n'est pas une expression
const CartePlat = ({ plat }) => (
  <div>
    {if (plat.disponible) { return <button>Ajouter</button> }}  // SyntaxError !
  </div>
);

// CORRECT — ternaire ou &&
const CartePlat = ({ plat }) => (
  <div>
    {plat.disponible ? <button>Ajouter</button> : null}
  </div>
);

// ── Majuscule obligatoire pour les composants ─────────────────
const cartePlat = ({ nom }) => <h3>{nom}</h3>;  // MAUVAIS nom
<cartePlat nom="Tajine" />  // React pense que c'est une balise HTML inconnue

const CartePlat = ({ nom }) => <h3>{nom}</h3>;  // CORRECT
<CartePlat nom="Tajine" />  // React sait que c'est un composant

// ── Passer des props — attributs avec valeurs ─────────────────
// String — guillemets directs
<CartePlat nom="Tajine Kefta" restaurant="La Sqala" />

// Expression JavaScript — accolades
<CartePlat nom={plat.nom} prix={plat.prix} note={4.8} disponible={true} />

// Booléen true — shorthand (sans ={true})
<CartePlat disponible />         // équivalent à disponible={true}
<CartePlat disponible={false} /> // false doit être explicite

// Spread des props — passer tout l'objet
<CartePlat {...plat} />
// équivalent à : <CartePlat id={plat.id} nom={plat.nom} prix={plat.prix} ... />

// ── La prop children — contenu entre les balises ─────────────
const Card = ({ titre, children }) => (
  <div className="card">
    <h2>{titre}</h2>
    <div className="card-body">{children}</div>
  </div>
);

// Utilisation — tout ce qui est entre les balises devient children
<Card titre="Menu DariGo">
  <CartePlat {...tajine} />
  <CartePlat {...couscous} />
  <CartePlat {...harira} />
</Card>

// ── Composition — assembler des composants ────────────────────
const PageMenu = ({ ville }) => {
  const [plats, setPlats] = useState([]);
  const [panier, setPanier] = useState([]);

  return (
    <div className="page-menu">
      <Header titre={`Menu DariGo — ${ville}`} nbArticles={panier.length} />

      <main>
        <FiltresMenu onFiltrer={setFiltres} />

        <div className="grille-plats">
          {plats.map(p => (
            <CartePlat
              key={p.id}
              {...p}
              onAjouter={() => setPanier(prev => [...prev, p])}
            />
          ))}
        </div>
      </main>

      <PanierFlottant panier={panier} onValider={passerCommande} />
    </div>
  );
};

// ── Composant minimal — forme la plus simple ──────────────────
const Bienvenue = () => <h1>Marhba bik sur DariGo !</h1>;

// ── Composant avec props ──────────────────────────────────────
const CartePlat = ({ nom, prix, disponible, note, restaurant }) => (
  <article className={`carte-plat ${disponible ? '' : 'carte-plat--grise'}`}>
    <header className="carte-plat__header">
      <h3 className="carte-plat__nom">{nom}</h3>
      <span className="carte-plat__note">{note.toFixed(1)} ★</span>
    </header>
    <p className="carte-plat__restaurant">{restaurant}</p>
    <footer className="carte-plat__footer">
      <strong className="carte-plat__prix">{prix} MAD</strong>
      {disponible
        ? <button className="btn btn-primary">Ajouter</button>
        : <span className="badge badge-gris">Indisponible</span>
      }
    </footer>
  </article>
);

// ── Composants imbriqués — composition ────────────────────────
const BadgeStatut = ({ statut }) => {
  const config = {
    en_attente:    { label: 'En attente',    classe: 'warning' },
    en_preparation:{ label: 'En préparation',classe: 'info'    },
    en_livraison:  { label: 'En livraison',  classe: 'primary' },
    livree:        { label: 'Livrée',        classe: 'success' },
    annulee:       { label: 'Annulée',       classe: 'danger'  },
  };
  const { label, classe } = config[statut] || { label: statut, classe: 'default' };
  return <span className={`badge badge-${classe}`}>{label}</span>;
};

const CarteCommande = ({ id, client, total, statut, dateCommande }) => (
  <div className="carte-commande">
    <div className="carte-commande__header">
      <span className="carte-commande__id">Commande #{id}</span>
      <BadgeStatut statut={statut} />   {/* composant imbriqué */}
    </div>
    <p className="carte-commande__client">{client}</p>
    <p className="carte-commande__date">
      {new Date(dateCommande).toLocaleDateString('fr-MA')}
    </p>
    <strong className="carte-commande__total">{total} MAD</strong>
  </div>
);

// ── Composant avec logique interne ────────────────────────────
const FormateurPrix = ({ prix, remise = 0, afficherTTC = false }) => {
  const prixRemise = remise > 0 ? prix * (1 - remise / 100) : prix;
  const prixFinal  = afficherTTC ? prixRemise * 1.2 : prixRemise;
  const label      = afficherTTC ? 'TTC' : 'HT';

  return (
    <div className="prix-wrapper">
      {remise > 0 && (
        <span className="prix-barre">{prix} MAD</span>
      )}
      <span className="prix-principal">
        {prixFinal.toFixed(2)} MAD {label}
      </span>
      {remise > 0 && (
        <span className="badge-remise">-{remise}%</span>
      )}
    </div>
  );
};

// Utilisation
<FormateurPrix prix={90} remise={10} afficherTTC />
// Affiche : ~~90 MAD~~   81.00 MAD TTC   -10%

// ── Décomposition de la page Menu DariGo ─────────────────────
//
// PageMenu
// ├── Header           (titre, logo, lien panier)
// ├── BarreRecherche   (input texte, bouton clear)
// ├── FiltresCategorie (boutons Tous / Plat / Entrée / Soupe / Dessert)
// ├── GrillePlats
// │   ├── CartePlat    × N
// │   │   ├── ImagePlat
// │   │   ├── InfosPlat   (nom, restaurant, note)
// │   │   └── ActionPlat  (prix + bouton ajouter)
// │   └── MessageVide  (si aucun résultat)
// └── PanierFlottant
//     ├── LignePanier  × N
//     └── TotalPanier

// ── Chaque composant = un fichier dans src/components/ ────────

// src/components/BarreRecherche.jsx
const BarreRecherche = ({ valeur, onChange, placeholder = "Chercher un plat..." }) => (
  <div className="barre-recherche">
    <svg className="barre-recherche__icone" /* icône loupe */ />
    <input
      type="search"
      className="barre-recherche__input"
      value={valeur}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
    />
    {valeur && (
      <button className="barre-recherche__clear" onClick={() => onChange('')}>
        ✕
      </button>
    )}
  </div>
);

// src/components/FiltresCategorie.jsx
const CATEGORIES = ['tous', 'plat', 'entree', 'soupe', 'dessert'];

const FiltresCategorie = ({ active, onChange }) => (
  <div className="filtres-categorie" role="group" aria-label="Filtrer par catégorie">
    {CATEGORIES.map(cat => (
      <button
        key={cat}
        className={`filtre-btn ${active === cat ? 'filtre-btn--active' : ''}`}
        onClick={() => onChange(cat)}
        aria-pressed={active === cat}
      >
        {cat === 'tous' ? 'Tous' : cat.charAt(0).toUpperCase() + cat.slice(1)}
      </button>
    ))}
  </div>
);

// src/components/MessageVide.jsx
const MessageVide = ({ recherche, categorie }) => (
  <div className="message-vide">
    <p className="message-vide__titre">Aucun plat trouvé</p>
    <p className="message-vide__detail">
      {recherche
        ? `Aucun résultat pour "${recherche}"${categorie !== 'tous' ? ` dans la catégorie ${categorie}` : ''}`
        : `Aucun plat disponible dans la catégorie ${categorie}`
      }
    </p>
  </div>
);

// ── COMPOSANT DE CLASSE (legacy — à lire dans des projets existants) ──
class CartePlatLegacy extends React.Component {
  constructor(props) {
    super(props);
    this.state = { quantite: 1, ajoute: false };
    this.handleAjouter = this.handleAjouter.bind(this);
  }

  handleAjouter() {
    this.props.onAjouter({ ...this.props.plat, quantite: this.state.quantite });
    this.setState({ ajoute: true });
    setTimeout(() => this.setState({ ajoute: false }), 2000);
  }

  render() {
    const { plat } = this.props;
    const { quantite, ajoute } = this.state;
    return (
      <div className="carte-plat">
        <h3>{plat.nom}</h3>
        <p>{plat.prix} MAD</p>
        <input
          type="number" min="1" max="10"
          value={quantite}
          onChange={e => this.setState({ quantite: +e.target.value })}
        />
        <button onClick={this.handleAjouter} disabled={ajoute}>
          {ajoute ? 'Ajouté !' : 'Ajouter au panier'}
        </button>
      </div>
    );
  }
}

// ── MÊME COMPOSANT en fonctionnel + hooks (migration) ─────────
const CartePlatModerne = ({ plat, onAjouter }) => {
  const [quantite, setQuantite] = useState(1);
  const [ajoute, setAjoute]     = useState(false);

  const handleAjouter = () => {
    onAjouter({ ...plat, quantite });
    setAjoute(true);
    setTimeout(() => setAjoute(false), 2000);
  };

  return (
    <div className="carte-plat">
      <h3>{plat.nom}</h3>
      <p>{plat.prix} MAD</p>
      <input
        type="number" min="1" max="10"
        value={quantite}
        onChange={e => setQuantite(+e.target.value)}
      />
      <button onClick={handleAjouter} disabled={ajoute}>
        {ajoute ? 'Ajouté !' : 'Ajouter au panier'}
      </button>
    </div>
  );
};

// ── Passer tous types de valeurs en props ─────────────────────
const plat = {
  id: 1, nom: "Tajine Kefta", prix: 75,
  note: 4.8, disponible: true, categorie: "plat",
  restaurant: "La Sqala, Casablanca",
  tags: ["halal", "traditionnel", "sans-gluten"],
  nutritions: { calories: 520, proteines: 38, glucides: 22 }
};

<CartePlat
  // String
  nom="Tajine Kefta"
  restaurant="La Sqala, Casablanca"

  // Nombre
  prix={75}
  note={4.8}

  // Booléen — true peut s'écrire sans valeur
  disponible
  estNouveau={false}

  // Tableau
  tags={["halal", "traditionnel"]}

  // Objet
  nutritions={{ calories: 520, proteines: 38 }}

  // Fonction (callback — communication enfant → parent)
  onAjouter={(quantite) => ajouterAuPanier(plat, quantite)}
  onVoirDetails={() => navigate(`/plat/${plat.id}`)}

  // Composant React comme prop (render prop pattern)
  icone={<svg>...</svg>}
/>

// ── Spread de props — passer tout un objet ────────────────────
// Au lieu d'énumérer chaque propriété :
<CartePlat id={plat.id} nom={plat.nom} prix={plat.prix} note={plat.note} ... />

// Utiliser le spread :
<CartePlat {...plat} onAjouter={handleAjouter} />
// Attention : le spread passe TOUTES les propriétés de l'objet.
// Si l'objet a des propriétés que le composant n'attend pas, elles sont ignorées
// (mais peuvent générer des warnings si passées à des éléments HTML natifs).

// ── Valeurs par défaut dans les paramètres ────────────────────
const CartePlat = ({
  nom,
  prix,
  note = 0,             // par défaut 0 si non fourni
  disponible = true,    // par défaut disponible
  remise = 0,
  onAjouter = () => {}, // callback vide par défaut — évite les erreurs
  className = '',
}) => {
  const prixFinal = remise > 0 ? prix * (1 - remise / 100) : prix;
  return ( /* ... */ );
};

// ── children — contenu entre les balises ─────────────────────
const SectionMenu = ({ titre, children }) => (
  <section className="section-menu">
    <h2 className="section-menu__titre">{titre}</h2>
    <div className="section-menu__contenu">
      {children}
    </div>
  </section>
);

// Utilisation
<SectionMenu titre="Plats du moment">
  <CartePlat {...tajine} />
  <CartePlat {...couscous} />
  <CartePlat {...harira} />
</SectionMenu>

// ── Scénario DariGo : le panier est partagé entre CartePlat et PanierResume
// Les deux composants ont besoin de l'état panier.
// Solution : l'état vit dans PageMenu, leur ancêtre commun.

const PageMenu = () => {
  // État dans l'ancêtre commun
  const [panier, setPanier] = useState([]);
  const [plats, setPlats]   = useState([]);

  // Fonctions que les enfants appelleront via props (callbacks)
  const ajouterAuPanier = (plat, quantite = 1) => {
    setPanier(prev => {
      const existant = prev.find(p => p.id === plat.id);
      if (existant) {
        // Mettre à jour la quantité si déjà présent
        return prev.map(p =>
          p.id === plat.id ? { ...p, quantite: p.quantite + quantite } : p
        );
      }
      return [...prev, { ...plat, quantite }];
    });
  };

  const retirerDuPanier = (idPlat) => {
    setPanier(prev => prev.filter(p => p.id !== idPlat));
  };

  const viderPanier = () => setPanier([]);

  return (
    <div className="page-menu">
      <GrillePlats
        plats={plats}
        onAjouter={ajouterAuPanier}      // callback descendu vers l'enfant
      />
      <PanierResume
        panier={panier}                  // état descendu vers l'enfant
        onRetirer={retirerDuPanier}      // callback descendu vers l'enfant
        onVider={viderPanier}
      />
    </div>
  );
};

// CartePlat n'a PAS accès à setPanier — il appelle le callback
const CartePlat = ({ nom, prix, disponible, onAjouter }) => (
  <div className="carte-plat">
    <h3>{nom}</h3>
    <p>{prix} MAD</p>
    <button
      disabled={!disponible}
      onClick={() => onAjouter(1)}   // notifie le parent — c'est tout
    >
      Ajouter
    </button>
  </div>
);

// PanierResume affiche l'état et notifie les suppressions
const PanierResume = ({ panier, onRetirer, onVider }) => {
  const total = panier.reduce((acc, p) => acc + p.prix * p.quantite, 0);
  return (
    <aside className="panier">
      <h3>Panier ({panier.length})</h3>
      {panier.map(item => (
        <div key={item.id} className="panier__ligne">
          <span>{item.nom} × {item.quantite}</span>
          <span>{item.prix * item.quantite} MAD</span>
          <button onClick={() => onRetirer(item.id)}>✕</button>
        </div>
      ))}
      <div className="panier__total">Total : {total} MAD</div>
      <button onClick={onVider}>Vider le panier</button>
    </aside>
  );
};

import PropTypes from 'prop-types';

const CartePlat = ({ nom, prix, note, disponible, tags, onAjouter }) => (
  /* ... JSX ... */
);

CartePlat.propTypes = {
  nom:        PropTypes.string.isRequired,
  prix:       PropTypes.number.isRequired,
  note:       PropTypes.number,
  disponible: PropTypes.bool,
  tags:       PropTypes.arrayOf(PropTypes.string),
  onAjouter:  PropTypes.func.isRequired,

  // Objet avec forme précise
  restaurant: PropTypes.shape({
    nom:   PropTypes.string.isRequired,
    ville: PropTypes.string.isRequired,
    note:  PropTypes.number,
  }),

  // Une des valeurs possibles
  statut: PropTypes.oneOf(['disponible', 'indisponible', 'rupture']),

  // Un des types possibles
  identifiant: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};

// Avertissement en console si nom n'est pas passé :
// Warning: Failed prop type: The prop `nom` is marked as required
// in `CartePlat`, but its value is `undefined`.

// ── En TypeScript (recommandé pour les nouveaux projets) ──────
interface CartePlatProps {
  nom:        string;
  prix:       number;
  note?:      number;         // ? = optionnel
  disponible?: boolean;
  tags?:      string[];
  onAjouter:  (quantite: number) => void;
  restaurant: {
    nom:   string;
    ville: string;
    note?: number;
  };
  statut?: 'disponible' | 'indisponible' | 'rupture';
}

const CartePlat: React.FC<CartePlatProps> = ({ nom, prix, ...rest }) => (
  /* ... */
);
// TypeScript détecte les erreurs au moment de la compilation, pas à l'exécution.

// ── useState — syntaxe de base ────────────────────────────────
const [valeur, setValeur] = useState(valeurInitiale);

// Exemples concrets DariGo
const [panier, setPanier]                 = useState([]);
const [villeLivraison, setVilleLivraison] = useState("Casablanca");
const [estConnecte, setEstConnecte]       = useState(false);
const [commandeEnCours, setCommande]      = useState(null);
const [nbArticles, setNbArticles]         = useState(0);

// ── Initialisation paresseuse ─────────────────────────────────
// Si la valeur initiale est coûteuse à calculer, passer une fonction
// Elle ne s'exécute QU'UNE FOIS au montage du composant
const [panier, setPanier] = useState(() => {
  const sauvegarde = localStorage.getItem('darigo-panier');
  return sauvegarde ? JSON.parse(sauvegarde) : [];
});

// ── Le setter est ASYNCHRONE — piège classique ────────────────
const ajouterArticle = () => {
  setNbArticles(nbArticles + 1);
  setNbArticles(nbArticles + 1); // nbArticles vaut encore l'ancienne valeur !
  console.log(nbArticles); // Affiche l'ANCIENNE valeur — pas la nouvelle
};
// Résultat : +1 au lieu de +2 — les deux appels utilisent la même valeur stale

// ── Functional update — solution au problème de l'état périmé ─
const ajouterArticleCorrect = () => {
  setNbArticles(prev => prev + 1); // prev = valeur GARANTIE la plus récente
  setNbArticles(prev => prev + 1); // s'exécute après le premier
};
// Résultat : +2 — chaque appel travaille sur la valeur précédente

// Toujours utiliser le functional update quand le nouvel état
// dépend de l'ancien état :
const ajouterAuPanier = (plat) => {
  setPanier(prev => {
    const existant = prev.find(p => p.id === plat.id);
    if (existant) {
      return prev.map(p =>
        p.id === plat.id ? { ...p, quantite: p.quantite + 1 } : p
      );
    }
    return [...prev, { ...plat, quantite: 1 }];
  });
};

const retirerDuPanier  = (id) => setPanier(prev => prev.filter(p => p.id !== id));
const viderPanier      = ()   => setPanier([]);
const incrementer      = ()   => setNbArticles(prev => prev + 1);

// ══ TABLEAUX ═════════════════════════════════════════════════

// ── AJOUTER un élément ────────────────────────────────────────
// FAUX — mute le tableau original
const ajouterFaux = (plat) => {
  panier.push(plat);      // push mute — React ne voit aucun changement
  setPanier(panier);      // même référence — pas de re-rendu !
};
// CORRECT — nouveau tableau
const ajouter = (plat) => setPanier(prev => [...prev, plat]);

// ── SUPPRIMER un élément ──────────────────────────────────────
// FAUX
const supprimerFaux = (id) => {
  const idx = panier.findIndex(p => p.id === id);
  panier.splice(idx, 1);  // splice mute
  setPanier(panier);
};
// CORRECT
const supprimer = (id) => setPanier(prev => prev.filter(p => p.id !== id));

// ── MODIFIER un élément ───────────────────────────────────────
// FAUX
const modifierFaux = (id, nouvelleQte) => {
  const plat = panier.find(p => p.id === id);
  plat.quantite = nouvelleQte; // mute l'objet dans le tableau
  setPanier([...panier]);      // nouveau tableau mais objets mutés
};
// CORRECT — nouvel objet pour l'élément modifié
const modifier = (id, nouvelleQte) =>
  setPanier(prev => prev.map(p =>
    p.id === id ? { ...p, quantite: nouvelleQte } : p
  ));

// ── TRIER ─────────────────────────────────────────────────────
// FAUX — sort mute le tableau original
setPanier(prev => prev.sort((a, b) => a.prix - b.prix));
// CORRECT — copier avant de trier
setPanier(prev => [...prev].sort((a, b) => a.prix - b.prix));

// ══ OBJETS ═══════════════════════════════════════════════════

const [commande, setCommande] = useState({
  id: null, client: '', adresse: '', statut: 'en_attente',
  livreur: null, articles: []
});

// ── MODIFIER une propriété ────────────────────────────────────
// FAUX — mutation directe
commande.statut = 'confirmee';
setCommande(commande); // même référence

// CORRECT — nouvel objet avec spread
setCommande(prev => ({ ...prev, statut: 'confirmee' }));
setCommande(prev => ({ ...prev, statut: 'en_livraison', livreur: livreurAssigne }));

// ── MODIFIER un objet imbriqué ────────────────────────────────
// L'adresse est un objet dans la commande
// FAUX — mutation de l'objet imbriqué
commande.adresseObj.ville = 'Rabat';

// CORRECT — spread à chaque niveau
setCommande(prev => ({
  ...prev,
  adresseObj: {
    ...prev.adresseObj,
    ville: 'Rabat'
  }
}));

// ── Plusieurs useState indépendants — approche standard ───────
const FormulaireCommande = () => {
  const [nom, setNom]               = useState('');
  const [telephone, setTelephone]   = useState('');
  const [adresse, setAdresse]       = useState('');
  const [ville, setVille]           = useState('Casablanca');
  const [modePaiement, setMode]     = useState('CMI');
  const [erreurs, setErreurs]       = useState({});
  const [isLoading, setIsLoading]   = useState(false);

  // Règle : séparer les états indépendants en plusieurs useState.
  // Grouper uniquement les états fortement liés.
};

// ── Grouper des états liés en un seul objet ───────────────────
// Quand plusieurs états évoluent toujours ensemble
const FormulaireCommandeGroupe = () => {
  const [form, setForm] = useState({
    nom: '', telephone: '', adresse: '', ville: 'Casablanca', modePaiement: 'CMI'
  });
  const [ui, setUi] = useState({ isLoading: false, erreurs: {}, succes: false });

  // Mettre à jour un champ du formulaire
  const handleChange = (champ, valeur) =>
    setForm(prev => ({ ...prev, [champ]: valeur }));

  // Exemple d'utilisation :
  <input
    value={form.nom}
    onChange={e => handleChange('nom', e.target.value)}
    placeholder="Nadia Benali"
  />
};

// ── État dérivé — calculer depuis l'état existant ─────────────
// NE PAS stocker dans un useState ce qui peut être calculé
const ResumePanier = ({ panier }) => {
  // FAUX — état dérivé inutile et source de désynchronisation
  const [total, setTotal] = useState(0);
  useEffect(() => setTotal(panier.reduce(...)), [panier]); // redondant

  // CORRECT — calculer directement lors du rendu
  const total      = panier.reduce((acc, p) => acc + p.prix * p.quantite, 0);
  const nbArticles = panier.reduce((acc, p) => acc + p.quantite, 0);
  const aPanier    = panier.length > 0;
  const totalTTC   = (total * 1.2).toFixed(2);

  return (
    <div>
      <p>{nbArticles} article(s)</p>
      <p>Total HT : {total} MAD</p>
      <p>Total TTC : {totalTTC} MAD</p>
    </div>
  );
};

// ── Événements de base ────────────────────────────────────────
const BoutonAjouter = ({ plat, onAjouter }) => {
  // Handler défini en dehors du JSX — lisible, testable
  const handleClick = (event) => {
    event.stopPropagation(); // empêcher la propagation au parent
    onAjouter(plat);
  };

  return (
    <button className="btn-ajouter" onClick={handleClick}>
      Ajouter au panier
    </button>
  );
};

// ── onChange — champ texte ────────────────────────────────────
const ChampRecherche = ({ valeur, onChange }) => (
  <input
    type="search"
    value={valeur}
    onChange={(e) => onChange(e.target.value)}
    // e.target.value contient la valeur actuelle du champ
    placeholder="Chercher un plat..."
  />
);

// ── onSubmit — formulaire ─────────────────────────────────────
const FormulaireAdresse = ({ onSoumettre }) => {
  const [adresse, setAdresse] = useState('');
  const [ville, setVille]     = useState('Casablanca');

  const handleSubmit = (e) => {
    e.preventDefault(); // OBLIGATOIRE — empêche le rechargement de la page
    if (!adresse.trim()) return;
    onSoumettre({ adresse: adresse.trim(), ville });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={adresse}
        onChange={e => setAdresse(e.target.value)}
        placeholder="Votre adresse de livraison"
        required
      />
      <select value={ville} onChange={e => setVille(e.target.value)}>
        {['Casablanca','Rabat','Fès','Marrakech','Agadir'].map(v => (
          <option key={v} value={v}>{v}</option>
        ))}
      </select>
      <button type="submit">Confirmer la livraison</button>
    </form>
  );
};

// ── Événements clavier ────────────────────────────────────────
const SearchBar = ({ onSearch }) => {
  const [query, setQuery] = useState('');

  const handleKeyDown = (e) => {
    if (e.key === 'Enter') onSearch(query);
    if (e.key === 'Escape') setQuery('');
  };

  return (
    <input
      value={query}
      onChange={e => setQuery(e.target.value)}
      onKeyDown={handleKeyDown}
      placeholder="Chercher..."
    />
  );
};

// ── Tableau de dépendances — trois comportements ───────────────
useEffect(() => { /* ... */ });
// Pas de tableau → s'exécute après CHAQUE rendu. Rarement voulu.

useEffect(() => { /* ... */ }, []);
// Tableau vide → s'exécute UNE FOIS au montage. Équivalent componentDidMount.

useEffect(() => { /* ... */ }, [ville, categorie]);
// Avec dépendances → s'exécute au montage ET quand ville ou categorie change.

// ── Cas d'usage 1 : charger des données au montage ────────────
const PageMenu = ({ ville }) => {
  const [plats, setPlats]         = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [erreur, setErreur]       = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    const charger = async () => {
      try {
        setIsLoading(true);
        setErreur(null);
        const data = await platsService.getParVille(ville, controller.signal);
        setPlats(data);
      } catch (err) {
        if (err.name !== 'AbortError') setErreur(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    charger();
    return () => controller.abort(); // Cleanup : annuler la requête au démontage
  }, [ville]); // Re-exécuter quand ville change

  if (isLoading) return <Spinner />;
  if (erreur)    return <MessageErreur message={erreur} />;
  return <GrillePlats plats={plats} />;
};

// ── Cas d'usage 2 : suivi de livraison en temps réel ─────────
const SuiviLivraison = ({ idCommande }) => {
  const [position, setPosition] = useState(null);
  const [statut, setStatut]     = useState('en_livraison');

  useEffect(() => {
    // Polling toutes les 10 secondes
    const interval = setInterval(async () => {
      const data = await livraisonsService.getPosition(idCommande);
      setPosition(data.position);
      setStatut(data.statut);
      if (data.statut === 'livree') clearInterval(interval); // arrêter le polling
    }, 10000);

    return () => clearInterval(interval); // Cleanup OBLIGATOIRE
    // Sans cleanup, le timer continue après démontage → fuite mémoire
  }, [idCommande]);

  return (
    <div className="suivi">
      <CarteMap position={position} />
      <BadgeStatut statut={statut} />
    </div>
  );
};

// ── Cas d'usage 3 : synchroniser le titre de la page ──────────
const PageCommande = ({ commande }) => {
  useEffect(() => {
    document.title = `Commande #${commande.id} — ${commande.statut} | DariGo`;
    return () => { document.title = 'DariGo'; }; // Restaurer au démontage
  }, [commande.id, commande.statut]);

  return <div>{/* ... */}</div>;
};

// ── Cas d'usage 4 : sauvegarder le panier ────────────────────
const usePersistPanier = (panier) => {
  useEffect(() => {
    localStorage.setItem('darigo-panier', JSON.stringify(panier));
  }, [panier]); // Sauvegarder à chaque modification du panier
};

// ── Rendu de liste basique ────────────────────────────────────
const GrillePlats = ({ plats, onAjouter }) => (
  <div className="grille-plats">
    {plats.map(plat => (
      <CartePlat
        key={plat.id}            // OBLIGATOIRE — id stable de la BDD
        {...plat}
        onAjouter={() => onAjouter(plat)}
      />
    ))}
  </div>
);

// ── Liste avec Fragment — pas de div supplémentaire ───────────
const MenuTable = ({ categories }) => (
  <dl className="menu-table">
    {categories.map(cat => (
      <React.Fragment key={cat.id}>
        <dt className="categorie-titre">{cat.nom}</dt>
        {cat.plats.map(p => (
          <dd key={p.id} className="plat-ligne">
            <span>{p.nom}</span>
            <span>{p.prix} MAD</span>
          </dd>
        ))}
      </React.Fragment>
    ))}
  </dl>
);

// ── Liste avec index — quand c'est acceptable ─────────────────
// Acceptable SEULEMENT si la liste :
// - n'est jamais réordonnée ni filtrée
// - n'a pas d'éléments avec un état interne (formulaires, animations)
const ListeSteps = ({ etapes }) => (
  <ol>
    {etapes.map((etape, index) => (
      <li key={index}>{etape}</li> // OK — liste statique simple
    ))}
  </ol>
);

// ── Liste vide — toujours gérer ce cas ───────────────────────
const ListeCommandes = ({ commandes }) => {
  if (commandes.length === 0) {
    return (
      <div className="liste-vide">
        <p>Vous n'avez pas encore passé de commande</p>
        <button onClick={() => navigate('/menu')}>Voir le menu</button>
      </div>
    );
  }
  return (
    <div className="liste-commandes">
      {commandes.map(c => <CarteCommande key={c.id} {...c} />)}
    </div>
  );
};

// ── PATTERN 1 : early return — pour les états de chargement ───
const PageMenu = ({ ville }) => {
  const [plats, setPlats]   = useState([]);
  const [loading, setLoading] = useState(true);
  const [erreur, setErreur]   = useState(null);

  // ... useEffect pour charger les plats

  // Retourner tôt pour les états alternatifs
  if (loading) return (
    <div className="page-chargement">
      <div className="spinner" aria-label="Chargement en cours" />
      <p>Chargement du menu de {ville}...</p>
    </div>
  );

  if (erreur) return (
    <div className="page-erreur">
      <p className="erreur-message">{erreur}</p>
      <button onClick={() => window.location.reload()}>Réessayer</button>
    </div>
  );

  if (plats.length === 0) return (
    <div className="page-vide">
      <p>Aucun plat disponible à {ville} pour le moment</p>
    </div>
  );

  // Cas nominal — liste des plats
  return <GrillePlats plats={plats} />;
};

// ── PATTERN 2 : ternaire — deux alternatives ──────────────────
const BoutonPanier = ({ disponible, onClick }) => (
  <div className="carte-action">
    {disponible
      ? <button className="btn-primary" onClick={onClick}>Ajouter</button>
      : <span className="badge-indispo">Indisponible</span>
    }
  </div>
);

// ── PATTERN 3 : && — afficher ou rien ────────────────────────
const CartePlat = ({ plat, estNouveau, remise }) => (
  <article className="carte-plat">
    <h3>{plat.nom}</h3>
    {estNouveau && <span className="badge-nouveau">Nouveau</span>}
    {remise > 0 && <span className="badge-remise">-{remise}%</span>}
    {plat.tags.length > 0 && (
      <div className="tags">
        {plat.tags.map(t => <span key={t} className="tag">{t}</span>)}
      </div>
    )}
  </article>
);

// ── PATTERN 4 : switch — états multiples ──────────────────────
const AfficheurStatut = ({ statut }) => {
  switch (statut) {
    case 'en_attente':
      return <div className="statut statut-attente">En attente de confirmation</div>;
    case 'confirmee':
      return <div className="statut statut-confirmee">Commande confirmée</div>;
    case 'en_preparation':
      return <div className="statut statut-preparation">En cours de préparation</div>;
    case 'en_livraison':
      return <div className="statut statut-livraison">En route vers vous</div>;
    case 'livree':
      return <div className="statut statut-livree">Livrée — Bon appétit !</div>;
    case 'annulee':
      return <div className="statut statut-annulee">Annulée</div>;
    default:
      return <div className="statut">{statut}</div>;
  }
};

// ── PATTERN 5 : objet de config — remplace les longues conditions
const CONFIG_STATUT = {
  en_attente:    { label: 'En attente',    classe: 'warning', icone: '⏳' },
  confirmee:     { label: 'Confirmée',     classe: 'info',    icone: '✓'  },
  en_preparation:{ label: 'En préparation',classe: 'primary', icone: '👨‍🍳' },
  en_livraison:  { label: 'En livraison',  classe: 'accent',  icone: '🛵' },
  livree:        { label: 'Livrée',        classe: 'success', icone: '✓'  },
  annulee:       { label: 'Annulée',       classe: 'danger',  icone: '✕'  },
};

const BadgeStatut = ({ statut }) => {
  const config = CONFIG_STATUT[statut] || { label: statut, classe: 'default', icone: '?' };
  return (
    <span className={`badge badge-${config.classe}`}>
      {config.icone} {config.label}
    </span>
  );
};

// ── Images dans src/assets — importées par Vite ───────────────
// Vite traite ces images : optimisation, hash dans le nom de fichier
import logoUrl       from './assets/darigo-logo.svg';
import tajineImg     from './assets/plats/tajine-kefta.jpg';
import placeholderImg from './assets/plat-placeholder.jpg';

const Header = () => (
  <header>
    <img src={logoUrl} alt="DariGo" width="120" height="40" />
  </header>
);

// ── Images dans public/ — URL directe ────────────────────────
// Fichiers dans public/ sont servis tels quels, pas traités par Vite
// URL construite depuis la racine — sans import
const CartePlat = ({ nom, imageUrl }) => (
  <img
    src={imageUrl || '/images/plat-placeholder.jpg'}
    alt={nom}
    loading="lazy"  // chargement différé pour les images hors viewport
    width="300"
    height="200"
  />
);

// ── Images depuis l'API — URL dynamique ───────────────────────
const ImagePlat = ({ plat }) => {
  const [erreur, setErreur] = useState(false);

  return (
    <img
      src={erreur ? '/images/plat-placeholder.jpg' : plat.imageUrl}
      alt={plat.nom}
      onError={() => setErreur(true)}  // fallback si l'image ne charge pas
      loading="lazy"
      className="carte-plat__image"
    />
  );
};

// ── SVG inline — icônes scalables et stylables en CSS ─────────
const IconePanier = ({ taille = 24, couleur = 'currentColor' }) => (
  <svg
    width={taille}
    height={taille}
    viewBox="0 0 24 24"
    fill="none"
    stroke={couleur}
    strokeWidth="2"
    aria-hidden="true"
  >
    <circle cx="9" cy="21" r="1"/>
    <circle cx="20" cy="21" r="1"/>
    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
  </svg>
);

// ── Variables d'environnement Vite ────────────────────────────
// Les variables préfixées VITE_ sont exposées au code front-end
// Définies dans .env ou .env.local
const API_URL = import.meta.env.VITE_API_URL || 'https://api.darigo.ma';
const MODE    = import.meta.env.MODE; // 'development' ou 'production'

// .env.local (ne pas commiter dans Git)
// VITE_API_URL=http://localhost:8080
// .env.production
// VITE_API_URL=https://api.darigo.ma

// ── Formulaire d'inscription DariGo — complet ─────────────────
const FormulaireInscription = ({ onInscription }) => {
  // État du formulaire
  const [form, setForm] = useState({
    prenom: '', nom: '', email: '', telephone: '',
    ville: 'Casablanca', motDePasse: '', confirmation: ''
  });

  // Erreurs de validation
  const [erreurs, setErreurs] = useState({});
  const [isLoading, setIsLoading] = useState(false);

  // Handler générique — met à jour n'importe quel champ
  const handleChange = (champ) => (e) => {
    const valeur = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setForm(prev => ({ ...prev, [champ]: valeur }));
    // Effacer l'erreur du champ dès que l'utilisateur corrige
    if (erreurs[champ]) setErreurs(prev => ({ ...prev, [champ]: '' }));
  };

  // Validation
  const valider = () => {
    const nouvellesErreurs = {};

    if (!form.prenom.trim())
      nouvellesErreurs.prenom = 'Le prénom est obligatoire';

    if (!form.email.includes('@'))
      nouvellesErreurs.email = 'Adresse email invalide';

    if (!/^(\+212|0)[5-7]\d{8}$/.test(form.telephone.replace(/\s/g, '')))
      nouvellesErreurs.telephone = 'Numéro marocain invalide (ex: 06 12 34 56 78)';

    if (form.motDePasse.length < 8)
      nouvellesErreurs.motDePasse = 'Minimum 8 caractères';

    if (form.motDePasse !== form.confirmation)
      nouvellesErreurs.confirmation = 'Les mots de passe ne correspondent pas';

    setErreurs(nouvellesErreurs);
    return Object.keys(nouvellesErreurs).length === 0;
  };

  // Soumission
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!valider()) return;

    setIsLoading(true);
    try {
      await authService.register(form);
      onInscription();
    } catch (err) {
      setErreurs({ global: err.message });
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="formulaire-inscription" noValidate>
      {erreurs.global && (
        <div className="erreur-globale" role="alert">{erreurs.global}</div>
      )}

      {/* Champ texte */}
      <div className="champ">
        <label htmlFor="prenom">Prénom</label>
        <input
          id="prenom"
          type="text"
          value={form.prenom}
          onChange={handleChange('prenom')}
          placeholder="Khalid"
          className={erreurs.prenom ? 'input-erreur' : ''}
          aria-describedby={erreurs.prenom ? 'err-prenom' : undefined}
        />
        {erreurs.prenom && (
          <span id="err-prenom" className="msg-erreur" role="alert">
            {erreurs.prenom}
          </span>
        )}
      </div>

      {/* Select */}
      <div className="champ">
        <label htmlFor="ville">Ville</label>
        <select id="ville" value={form.ville} onChange={handleChange('ville')}>
          {['Casablanca','Rabat','Fès','Marrakech','Agadir','Tanger'].map(v => (
            <option key={v} value={v}>{v}</option>
          ))}
        </select>
      </div>

      {/* Mot de passe */}
      <div className="champ">
        <label htmlFor="mdp">Mot de passe</label>
        <input
          id="mdp"
          type="password"
          value={form.motDePasse}
          onChange={handleChange('motDePasse')}
          placeholder="Minimum 8 caractères"
          className={erreurs.motDePasse ? 'input-erreur' : ''}
        />
        {erreurs.motDePasse && (
          <span className="msg-erreur">{erreurs.motDePasse}</span>
        )}
      </div>

      <button type="submit" disabled={isLoading} className="btn btn-primary">
        {isLoading ? 'Inscription...' : "S'inscrire sur DariGo"}
      </button>
    </form>
  );
};

import { useForm, Controller } from 'react-hook-form';
import { z } from 'zod'; // bibliothèque de validation de schémas
import { zodResolver } from '@hookform/resolvers/zod';

// ── Définir le schéma de validation avec Zod ─────────────────
const schemaCommande = z.object({
  adresse:      z.string().min(10, 'Adresse trop courte (min. 10 caractères)'),
  ville:        z.enum(['Casablanca','Rabat','Fès','Marrakech','Agadir']),
  telephone:    z.string().regex(/^(\+212|0)[5-7]\d{8}$/, 'Numéro marocain invalide'),
  instructions: z.string().max(200).optional(),
  modePaiement: z.enum(['CMI', 'especes', 'virement']).default('CMI'),
});

// ── Formulaire avec React Hook Form ──────────────────────────
const FormulaireCommandeRHF = ({ panier, onCommander }) => {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting, isValid },
    control, // pour les composants contrôlés (Select, DatePicker...)
    reset,
  } = useForm({
    resolver: zodResolver(schemaCommande),
    defaultValues: { ville: 'Casablanca', modePaiement: 'CMI' },
    mode: 'onChange', // valider à chaque changement (ou 'onBlur', 'onSubmit')
  });

  const onSubmit = async (data) => {
    // data est déjà validé et typé par Zod
    try {
      await commandesService.creer({ ...data, articles: panier });
      onCommander();
      reset();
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>

      {/* register() connecte le champ à RHF — pas de useState nécessaire */}
      <div className="champ">
        <label htmlFor="adresse">Adresse de livraison</label>
        <input
          id="adresse"
          {...register('adresse')}  // spread les props nécessaires (ref, onChange, onBlur, name)
          placeholder="123 Rue Mohammed V, Maarif"
        />
        {errors.adresse && (
          <span className="msg-erreur">{errors.adresse.message}</span>
        )}
      </div>

      <div className="champ">
        <label htmlFor="telephone">Téléphone</label>
        <input
          id="telephone"
          type="tel"
          {...register('telephone')}
          placeholder="06 12 34 56 78"
        />
        {errors.telephone && (
          <span className="msg-erreur">{errors.telephone.message}</span>
        )}
      </div>

      {/* Controller pour les composants non-natifs */}
      <Controller
        name="ville"
        control={control}
        render={({ field }) => (
          <select {...field}>
            {['Casablanca','Rabat','Fès','Marrakech','Agadir'].map(v => (
              <option key={v} value={v}>{v}</option>
            ))}
          </select>
        )}
      />

      <button
        type="submit"
        disabled={isSubmitting || !isValid}
        className="btn btn-primary"
      >
        {isSubmitting ? 'Commande en cours...' : 'Commander — Payer par CMI'}
      </button>

    </form>
  );
};

// ── src/services/api.js — instance Axios centrale ─────────────
import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'https://api.darigo.ma',
  timeout: 10000,
  headers: { 'Content-Type': 'application/json' }
});

// ── Intercepteur requête — ajouter le token JWT ───────────────
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem('darigo_token');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => Promise.reject(error)
);

// ── Intercepteur réponse — gestion centralisée des erreurs ────
api.interceptors.response.use(
  (response) => response.data, // retourner directement les données
  async (error) => {
    const { response } = error;

    // Token expiré → tenter un refresh silencieux
    if (response?.status === 401) {
      try {
        const { data } = await axios.post(
          `${import.meta.env.VITE_API_URL}/auth/refresh`,
          { refreshToken: localStorage.getItem('darigo_refresh') }
        );
        localStorage.setItem('darigo_token', data.token);
        // Rejouer la requête originale avec le nouveau token
        error.config.headers.Authorization = `Bearer ${data.token}`;
        return api(error.config);
      } catch {
        localStorage.removeItem('darigo_token');
        localStorage.removeItem('darigo_refresh');
        window.location.href = '/login';
      }
    }

    // Construire un message d'erreur lisible
    const message = response?.data?.message
      || response?.data?.error
      || `Erreur ${response?.status || 'réseau'}`;

    return Promise.reject(new Error(message));
  }
);

export default api;

// ── src/services/platsService.js ──────────────────────────────
import api from './api';

export const platsService = {
  getAll:       (params)    => api.get('/plats', { params }),
  getById:      (id)        => api.get(`/plats/${id}`),
  getParVille:  (ville)     => api.get('/plats', { params: { ville } }),
  rechercher:   (q, ville)  => api.get('/plats', { params: { q, ville } }),
  creer:        (data)      => api.post('/plats', data),
  mettreAJour:  (id, data)  => api.put(`/plats/${id}`, data),
  supprimer:    (id)        => api.delete(`/plats/${id}`),
};

// ── src/services/commandesService.js ─────────────────────────
import api from './api';

export const commandesService = {
  creer:           (data)        => api.post('/commandes', data),
  getById:         (id)          => api.get(`/commandes/${id}`),
  getMesCommandes: (params)      => api.get('/commandes/me', { params }),
  updateStatut:    (id, statut)  => api.patch(`/commandes/${id}/statut`, { statut }),
  annuler:         (id, raison)  => api.delete(`/commandes/${id}`, { data: { raison } }),
  getPosition:     (id)          => api.get(`/commandes/${id}/position`),
};

// ── src/services/authService.js ───────────────────────────────
import api from './api';

export const authService = {
  login: async (email, motDePasse) => {
    const data = await api.post('/auth/login', { email, motDePasse });
    localStorage.setItem('darigo_token',   data.token);
    localStorage.setItem('darigo_refresh', data.refreshToken);
    return data.utilisateur;
  },
  register: (userData)  => api.post('/auth/register', userData),
  logout:   ()          => {
    localStorage.removeItem('darigo_token');
    localStorage.removeItem('darigo_refresh');
    return api.post('/auth/logout').catch(() => {});
  },
  getProfile: () => api.get('/auth/me'),
};

// ── Configuration initiale — main.jsx ─────────────────────────
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime:   1000 * 60 * 5,  // données fraîches pendant 5 minutes
      gcTime:      1000 * 60 * 10, // garder en cache 10 minutes
      retry:       2,              // 2 tentatives en cas d'échec
      refetchOnWindowFocus: true,  // revalider quand l'onglet reprend le focus
    }
  }
});

ReactDOM.createRoot(document.getElementById('root')).render(
  <QueryClientProvider client={queryClient}>
    <App />
    <ReactQueryDevtools /> {/* outil de debug — dev uniquement */}
  </QueryClientProvider>
);

// ── useQuery — charger des données ───────────────────────────
const GrillePlats = ({ ville, categorie }) => {
  const {
    data: plats = [],
    isLoading,
    isError,
    error,
    isFetching,       // true pendant une revalidation silencieuse
    refetch,          // déclencher un rechargement manuel
  } = useQuery({
    queryKey: ['plats', ville, categorie], // clé unique — changer = nouveau fetch
    queryFn:  () => platsService.getParVille(ville, categorie),
    enabled:  !!ville,                     // ne pas exécuter si ville est vide
  });

  if (isLoading) return <Spinner message={`Chargement du menu de ${ville}...`} />;
  if (isError)   return <ErreurAPI message={error.message} onRetry={refetch} />;

  return (
    <div className="grille-plats">
      {isFetching && <span className="badge-sync">Actualisation...</span>}
      {plats.map(p => <CartePlat key={p.id} {...p} />)}
    </div>
  );
};

// ── useMutation — modifier des données ───────────────────────
const BoutonCommander = ({ panier, adresse }) => {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (data) => commandesService.creer(data),
    onSuccess: (nouvelleCommande) => {
      // Invalider le cache des commandes → refetch automatique
      queryClient.invalidateQueries({ queryKey: ['mes-commandes'] });
      // Ajouter la nouvelle commande directement au cache sans refetch
      queryClient.setQueryData(['commande', nouvelleCommande.id], nouvelleCommande);
      navigate(`/suivi/${nouvelleCommande.id}`);
    },
    onError: (error) => {
      toast.error(`Commande impossible : ${error.message}`);
    }
  });

  const handleCommander = () => {
    mutation.mutate({
      articles:         panier.map(p => ({ idPlat: p.id, quantite: p.quantite })),
      adresseLivraison: adresse.adresse,
      villeLivraison:   adresse.ville,
    });
  };

  return (
    <button
      onClick={handleCommander}
      disabled={mutation.isPending || panier.length === 0}
      className="btn btn-primary btn-lg"
    >
      {mutation.isPending ? 'Commande en cours...' : `Commander — ${total} MAD`}
    </button>
  );
};

// ── Mise à jour optimiste ─────────────────────────────────────
// Afficher le résultat immédiatement, annuler si l'API échoue
const mutationNote = useMutation({
  mutationFn: ({ idPlat, note }) => platsService.noterPlat(idPlat, note),
  onMutate: async ({ idPlat, note }) => {
    await queryClient.cancelQueries({ queryKey: ['plats'] });
    const snapshot = queryClient.getQueryData(['plats', ville]);
    // Mettre à jour le cache immédiatement
    queryClient.setQueryData(['plats', ville], old =>
      old.map(p => p.id === idPlat ? { ...p, note } : p)
    );
    return { snapshot }; // contexte pour rollback
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(['plats', ville], context.snapshot); // rollback
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['plats'] });
  }
});

// ── Problème sans mémoïsation ─────────────────────────────────
const PageMenu = ({ ville }) => {
  const [plats, setPlats] = useState([]);
  const [recherche, setRecherche] = useState('');

  // Cette fonction est RECRÉÉE à chaque rendu de PageMenu
  const ajouterAuPanier = (plat) => {
    setPanier(prev => [...prev, plat]);
  };

  // CartePlat avec React.memo se re-rend quand ses props changent.
  // Comme ajouterAuPanier est recréée → nouvelle référence → CartePlat se re-rend
  // même si l'utilisateur a juste tapé dans la barre de recherche !
  return (
    <div>
      <input value={recherche} onChange={e => setRecherche(e.target.value)} />
      {plats.map(p => <CartePlat key={p.id} {...p} onAjouter={ajouterAuPanier} />)}
    </div>
  );
};

// ── useCallback — référence stable pour les fonctions ─────────
const PageMenuOptimise = ({ ville }) => {
  const [plats, setPlats] = useState([]);
  const [recherche, setRecherche] = useState('');

  // useCallback mémoïse la fonction — référence stable entre les rendus
  // Elle n'est recréée que si ses dépendances changent
  const ajouterAuPanier = useCallback((plat) => {
    setPanier(prev => [...prev, plat]);
  }, []); // [] = jamais recréée (setPanier est stable)

  const supprimerDuPanier = useCallback((id) => {
    setPanier(prev => prev.filter(p => p.id !== id));
  }, []);

  return (
    <div>
      <input value={recherche} onChange={e => setRecherche(e.target.value)} />
      {plats.map(p => <CartePlat key={p.id} {...p} onAjouter={ajouterAuPanier} />)}
    </div>
  );
};

// ── useMemo — mémoïser des calculs coûteux ────────────────────
const ResumePanierAvance = ({ panier, promos }) => {
  // Ce calcul est complexe — il ne doit pas se refaire à chaque rendu
  const statsCommande = useMemo(() => {
    const sousTotal    = panier.reduce((acc, p) => acc + p.prix * p.quantite, 0);
    const nbArticles   = panier.reduce((acc, p) => acc + p.quantite, 0);
    const remiseTotale = promos.reduce((acc, promo) => {
      if (promo.applicable(panier)) return acc + promo.calculer(sousTotal);
      return acc;
    }, 0);
    const fraisLivraison = sousTotal > 200 ? 0 : 15; // gratuit au-dessus de 200 MAD
    const total          = sousTotal - remiseTotale + fraisLivraison;
    return { sousTotal, nbArticles, remiseTotale, fraisLivraison, total };
  }, [panier, promos]); // recalculer seulement si panier ou promos changent

  return (
    <div className="resume">
      <p>{statsCommande.nbArticles} article(s)</p>
      <p>Sous-total : {statsCommande.sousTotal} MAD</p>
      {statsCommande.remiseTotale > 0 && (
        <p className="remise">Remise : -{statsCommande.remiseTotale} MAD</p>
      )}
      <p>Livraison : {statsCommande.fraisLivraison === 0 ? 'Gratuite' : `${statsCommande.fraisLivraison} MAD`}</p>
      <strong>Total : {statsCommande.total} MAD</strong>
    </div>
  );
};

// ── React.memo — éviter le re-rendu si props identiques ───────
const CartePlat = React.memo(({ id, nom, prix, disponible, onAjouter }) => {
  console.log(`Rendu de CartePlat ${id}`); // Pour visualiser les re-rendus
  return (
    <article className="carte-plat">
      <h3>{nom}</h3>
      <p>{prix} MAD</p>
      <button onClick={() => onAjouter({ id, nom, prix })} disabled={!disponible}>
        Ajouter
      </button>
    </article>
  );
});
// CartePlat ne se re-rend que si ses props changent réellement.
// Avec useCallback sur onAjouter → référence stable → pas de re-rendu parasite.

// ── Accès à un élément DOM ────────────────────────────────────
const BarreRecherche = () => {
  const inputRef = useRef(null);

  // Focus automatique au montage
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  // Focus sur raccourci clavier (Ctrl+K)
  useEffect(() => {
    const handleKeydown = (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        inputRef.current?.focus();
      }
    };
    window.addEventListener('keydown', handleKeydown);
    return () => window.removeEventListener('keydown', handleKeydown);
  }, []);

  return (
    <input
      ref={inputRef}
      type="search"
      placeholder="Chercher un plat... (Ctrl+K)"
    />
  );
};

// ── Stocker un timer sans provoquer de re-rendu ───────────────
const SuiviTempsReel = ({ idCommande }) => {
  const [position, setPosition] = useState(null);
  const intervalRef = useRef(null);     // ref pour stocker le timer

  const demarrerSuivi = useCallback(() => {
    intervalRef.current = setInterval(async () => {
      const data = await commandesService.getPosition(idCommande);
      setPosition(data);
      if (data.statut === 'livree') arreterSuivi();
    }, 5000);
  }, [idCommande]);

  const arreterSuivi = useCallback(() => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  }, []);

  useEffect(() => {
    demarrerSuivi();
    return arreterSuivi; // cleanup
  }, [demarrerSuivi, arreterSuivi]);

  return <CartePosition position={position} />;
};

// ── Garder la valeur précédente ───────────────────────────────
const usePrevious = (valeur) => {
  const ref = useRef();
  useEffect(() => { ref.current = valeur; }); // s'exécute après le rendu
  return ref.current; // valeur du rendu précédent
};

const CompteurPanier = ({ panier }) => {
  const nbArticles     = panier.reduce((acc, p) => acc + p.quantite, 0);
  const nbPrecedent    = usePrevious(nbArticles);
  const articleAjoute  = nbArticles > (nbPrecedent || 0);

  return (
    <span className={`nb-articles ${articleAjoute ? 'pulse' : ''}`}>
      {nbArticles}
    </span>
  );
};

// ── src/contexts/AuthContext.jsx ──────────────────────────────
import { createContext, useContext, useState, useEffect } from 'react';
import { authService } from '../services/authService';

// 1. Créer le contexte
const AuthContext = createContext(null);

// 2. Créer le Provider — enveloppe les composants qui ont besoin du contexte
export const AuthProvider = ({ children }) => {
  const [utilisateur, setUtilisateur] = useState(null);
  const [isLoading, setIsLoading]     = useState(true);

  // Vérifier la session au démarrage
  useEffect(() => {
    const init = async () => {
      const token = localStorage.getItem('darigo_token');
      if (token) {
        try {
          const user = await authService.getProfile();
          setUtilisateur(user);
        } catch {
          localStorage.removeItem('darigo_token');
        }
      }
      setIsLoading(false);
    };
    init();
  }, []);

  const login = async (email, motDePasse) => {
    const user = await authService.login(email, motDePasse);
    setUtilisateur(user);
    return user;
  };

  const logout = async () => {
    await authService.logout();
    setUtilisateur(null);
  };

  const value = {
    utilisateur,
    isLoading,
    isAuthentifie: !!utilisateur,
    login,
    logout,
    estAdmin: utilisateur?.role === 'admin',
  };

  return (
    <AuthContext.Provider value={value}>
      {children}
    </AuthContext.Provider>
  );
};

// 3. Hook personnalisé pour consommer le contexte
export const useAuth = () => {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth doit être utilisé dans AuthProvider');
  return ctx;
};

// ── main.jsx — envelopper l'app ───────────────────────────────
<QueryClientProvider client={queryClient}>
  <AuthProvider>
    <App />
  </AuthProvider>
</QueryClientProvider>

// ── Utilisation dans n'importe quel composant ─────────────────
const Header = () => {
  const { utilisateur, isAuthentifie, logout } = useAuth();

  return (
    <header>
      <img src="/logo.svg" alt="DariGo" />
      {isAuthentifie
        ? (
          <div className="user-menu">
            <span>Bienvenue, {utilisateur.prenom}</span>
            <button onClick={logout}>Déconnexion</button>
          </div>
        )
        : <button onClick={() => navigate('/login')}>Se connecter</button>
      }
    </header>
  );
};

const RouteProtegee = ({ children }) => {
  const { isAuthentifie, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!isAuthentifie) return <Navigate to="/login" replace />;
  return children;
};

// ── hooks/usePlats.js ─────────────────────────────────────────
// Extrait le pattern répété : chargement + loading + erreur
export const usePlats = (ville, categorie) => {
  const [plats, setPlats]         = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const [erreur, setErreur]       = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const charger = async () => {
      try {
        setIsLoading(true);
        setErreur(null);
        const data = await platsService.getAll({ ville, categorie }, controller.signal);
        setPlats(data);
      } catch (err) {
        if (err.name !== 'AbortError') setErreur(err.message);
      } finally {
        setIsLoading(false);
      }
    };
    charger();
    return () => controller.abort();
  }, [ville, categorie]);

  return { plats, isLoading, erreur };
};

// ── hooks/usePanier.js ────────────────────────────────────────
export const usePanier = () => {
  const [panier, setPanier] = useState(() => {
    const saved = localStorage.getItem('darigo-panier');
    return saved ? JSON.parse(saved) : [];
  });

  // Persister automatiquement
  useEffect(() => {
    localStorage.setItem('darigo-panier', JSON.stringify(panier));
  }, [panier]);

  const ajouter = useCallback((plat, quantite = 1) => {
    setPanier(prev => {
      const existe = prev.find(p => p.id === plat.id);
      if (existe) return prev.map(p => p.id === plat.id ? { ...p, quantite: p.quantite + quantite } : p);
      return [...prev, { ...plat, quantite }];
    });
  }, []);

  const retirer   = useCallback((id)  => setPanier(prev => prev.filter(p => p.id !== id)), []);
  const vider     = useCallback(()    => setPanier([]), []);
  const majQte    = useCallback((id, q) => setPanier(prev => prev.map(p => p.id === id ? { ...p, quantite: q } : p)), []);

  const total      = useMemo(() => panier.reduce((acc, p) => acc + p.prix * p.quantite, 0), [panier]);
  const nbArticles = useMemo(() => panier.reduce((acc, p) => acc + p.quantite, 0), [panier]);

  return { panier, ajouter, retirer, vider, majQte, total, nbArticles };
};

// ── hooks/useDebounce.js ──────────────────────────────────────
// Éviter de chercher à chaque frappe — attendre 300ms de pause
export const useDebounce = (valeur, delai = 300) => {
  const [valeurDifferee, setValeurDifferee] = useState(valeur);

  useEffect(() => {
    const timer = setTimeout(() => setValeurDifferee(valeur), delai);
    return () => clearTimeout(timer);
  }, [valeur, delai]);

  return valeurDifferee;
};

// ── hooks/useLocalStorage.js ──────────────────────────────────
export const useLocalStorage = (cle, valeurInitiale) => {
  const [valeur, setValeur] = useState(() => {
    try {
      const item = localStorage.getItem(cle);
      return item ? JSON.parse(item) : valeurInitiale;
    } catch { return valeurInitiale; }
  });

  const sauvegarder = useCallback((nouvelleValeur) => {
    const valAEnregistrer = typeof nouvelleValeur === 'function'
      ? nouvelleValeur(valeur) : nouvelleValeur;
    setValeur(valAEnregistrer);
    localStorage.setItem(cle, JSON.stringify(valAEnregistrer));
  }, [cle, valeur]);

  return [valeur, sauvegarder];
};

// ── Utilisation dans les composants ──────────────────────────
const PageMenu = ({ ville }) => {
  const [categorie, setCategorie] = useState('tous');
  const [recherche, setRecherche] = useState('');
  const rechercheDifferee         = useDebounce(recherche, 400);

  // Un seul hook remplace ~20 lignes de useState + useEffect
  const { plats, isLoading, erreur } = usePlats(ville, categorie);
  const { ajouter, nbArticles, total } = usePanier();

  const platsFiltres = useMemo(() =>
    plats.filter(p => p.nom.toLowerCase().includes(rechercheDifferee.toLowerCase())),
    [plats, rechercheDifferee]
  );

  if (isLoading) return <Spinner />;
  if (erreur)    return <ErreurAPI message={erreur} />;

  return (
    <div className="page-menu">
      <input value={recherche} onChange={e => setRecherche(e.target.value)} />
      <FiltresCategorie active={categorie} onChange={setCategorie} />
      <GrillePlats plats={platsFiltres} onAjouter={ajouter} />
      <BoutonPanier nbArticles={nbArticles} total={total} />
    </div>
  );
};

// ── src/App.jsx — configuration complète des routes DariGo ────
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <Routes>
      {/* Routes publiques — accessibles sans connexion */}
      <Route path="/" element={<Layout />}>

        {/* Route index — affiché quand path = "/" exactement */}
        <Route index element={<PageAccueil />} />

        {/* Paramètre dynamique :ville */}
        <Route path="menu"         element={<PageMenu />} />
        <Route path="menu/:ville"  element={<PageMenu />} />
        <Route path="plat/:id"     element={<PagePlat />} />

        <Route path="login"        element={<PageLogin />} />
        <Route path="inscription"  element={<PageInscription />} />

        {/* Routes protégées — nécessitent une authentification */}
        <Route element={<RouteProtegee />}>
          <Route path="commande/nouvelle"   element={<PageNouvelleCommande />} />
          <Route path="commande/:id"        element={<PageCommande />} />
          <Route path="suivi/:id"           element={<PageSuivi />} />
          <Route path="profil"              element={<PageProfil />} />
          <Route path="mes-commandes"       element={<PageMesCommandes />} />
        </Route>

        {/* Routes admin */}
        <Route element={<RouteAdmin />}>
          <Route path="admin"               element={<PageAdmin />} />
          <Route path="admin/plats"         element={<PageAdminPlats />} />
        </Route>

        {/* Redirection et 404 */}
        <Route path="accueil" element={<Navigate to="/" replace />} />
        <Route path="*"       element={<Page404 />} />
      </Route>
    </Routes>
  </BrowserRouter>
);

// ── Layout — Header et Footer persistent entre les pages ──────
import { Outlet } from 'react-router-dom';

const Layout = () => (
  <div className="app-layout">
    <Header />
    <main className="app-main">
      <Outlet /> {/* Page courante rendue ici */}
    </main>
    <Footer />
  </div>
);

// ── Route protégée avec Outlet ────────────────────────────────
const RouteProtegee = () => {
  const { isAuthentifie, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  return isAuthentifie ? <Outlet /> : <Navigate to="/login" replace />;
};

const RouteAdmin = () => {
  const { utilisateur } = useAuth();
  return utilisateur?.role === 'admin' ? <Outlet /> : <Navigate to="/" replace />;
};

import {
  Link, NavLink, useNavigate, useParams,
  useSearchParams, useLocation
} from 'react-router-dom';

// ── useParams — paramètres dynamiques de l'URL ────────────────
// Route : path="suivi/:id"
// URL   : /suivi/1042
const PageSuivi = () => {
  const { id } = useParams(); // { id: "1042" } — toujours string !
  const idNumerique = parseInt(id, 10); // convertir si nécessaire

  const { data: commande } = useQuery({
    queryKey: ['commande', id],
    queryFn:  () => commandesService.getById(id),
  });

  return <div>Suivi de la commande #{id}</div>;
};

// ── useSearchParams — query string (?ville=Casablanca&cat=plat) ──
const PageMenu = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const ville     = searchParams.get('ville')     || 'Casablanca';
  const categorie = searchParams.get('categorie') || 'tous';
  const page      = parseInt(searchParams.get('page') || '1', 10);

  const changerVille = (nouvelleVille) => {
    setSearchParams(prev => {
      prev.set('ville', nouvelleVille);
      prev.delete('page'); // réinitialiser la pagination
      return prev;
    });
  };

  // L'URL devient : /menu?ville=Rabat&categorie=plat
  return (
    <div>
      <FiltresVille ville={ville} onChange={changerVille} />
      <FiltresCategorie categorie={categorie} onChange={cat => setSearchParams({ ville, categorie: cat })} />
    </div>
  );
};

// ── useNavigate — navigation programmatique ───────────────────
const FormulaireCommande = ({ panier }) => {
  const navigate = useNavigate();

  const handleSubmit = async (data) => {
    const commande = await commandesService.creer(data);
    navigate(`/suivi/${commande.id}`);         // aller vers
    navigate(-1);                              // retour page précédente
    navigate('/menu', { replace: true });      // remplace l'historique (pas de retour)
    navigate('/login', {                       // avec state
      state: { redirectAfterLogin: '/commande/nouvelle' }
    });
  };
};

// ── Link et NavLink ───────────────────────────────────────────
const Navigation = () => {
  const { nbArticles } = usePanier();

  return (
    <nav>
      {/* NavLink — ajoute automatiquement la classe active sur la route courante */}
      <NavLink to="/"              className={({ isActive }) => isActive ? 'nav-actif' : ''}>Accueil</NavLink>
      <NavLink to="/menu"          className={({ isActive }) => isActive ? 'nav-actif' : ''}>Menu</NavLink>
      <NavLink to="/mes-commandes" className={({ isActive }) => isActive ? 'nav-actif' : ''}>Commandes</NavLink>

      {/* Link — navigation sans rechargement */}
      <Link to="/commande/nouvelle" className="btn btn-primary">
        Panier ({nbArticles})
      </Link>
    </nav>
  );
};

// ── Les 3 concepts Redux illustrés pour DariGo ────────────────

// ── 1. ACTIONS — décrire ce qui s'est passé ───────────────────
// Convention : { type: 'DOMAINE/EVENEMENT', payload: données }
const actionAjouter = {
  type: 'panier/ajouterArticle',
  payload: { id: 1, nom: 'Tajine Kefta', prix: 75, quantite: 2 }
};
const actionRetirer = {
  type: 'panier/retirerArticle',
  payload: { id: 1 }
};
const actionVider = {
  type: 'panier/vider'
};
const actionConnexion = {
  type: 'auth/connexionReussie',
  payload: { id: 42, prenom: 'Khalid', email: 'khalid@darigo.ma', role: 'client' }
};

// ── 2. REDUCER — calculer le nouvel état ─────────────────────
// (etatActuel, action) => nouvelEtat
// Fonction PURE : pas d'effets de bord, immutabilité obligatoire
const etatInitialPanier = { articles: [], total: 0, nbArticles: 0 };

const panierReducer = (state = etatInitialPanier, action) => {
  switch (action.type) {

    case 'panier/ajouterArticle': {
      const existe = state.articles.find(a => a.id === action.payload.id);
      const articles = existe
        ? state.articles.map(a =>
            a.id === action.payload.id
              ? { ...a, quantite: a.quantite + action.payload.quantite }
              : a
          )
        : [...state.articles, action.payload];

      const nbArticles = articles.reduce((acc, a) => acc + a.quantite, 0);
      const total      = articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);
      return { ...state, articles, nbArticles, total };
    }

    case 'panier/retirerArticle': {
      const articles   = state.articles.filter(a => a.id !== action.payload.id);
      const nbArticles = articles.reduce((acc, a) => acc + a.quantite, 0);
      const total      = articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);
      return { ...state, articles, nbArticles, total };
    }

    case 'panier/vider':
      return etatInitialPanier;

    default:
      return state; // TOUJOURS retourner l'état pour les actions inconnues
  }
};

// ── 3. STORE — contenir tout l'état ──────────────────────────
import { createStore, combineReducers } from 'redux';

const authReducer = (state = { utilisateur: null, isAuthentifie: false }, action) => {
  switch (action.type) {
    case 'auth/connexionReussie':
      return { ...state, utilisateur: action.payload, isAuthentifie: true };
    case 'auth/deconnexion':
      return { utilisateur: null, isAuthentifie: false };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  panier: panierReducer,
  auth:   authReducer,
  // notifs: notifsReducer,
});

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__?.() // Redux DevTools
);

// Structure du store DariGo :
// {
//   panier: { articles: [...], total: 275, nbArticles: 7 },
//   auth:   { utilisateur: { id:42, prenom:'Khalid'... }, isAuthentifie: true }
// }

// ── Le flux Redux ────────────────────────────────────────────
// Composant → dispatch(action) → reducer → nouvel état → store → composants re-rendus
store.dispatch(actionAjouter);
store.dispatch({ type: 'panier/retirerArticle', payload: { id: 1 } });
console.log(store.getState().panier); // nouvel état après les deux dispatches

// ── main.jsx — connecter le store à React ────────────────────
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <App />
      </AuthProvider>
    </QueryClientProvider>
  </Provider>
);

// ── useSelector — lire l'état du store ───────────────────────
// useSelector prend un sélecteur : (état global) => valeur voulue
// Le composant se re-rend UNIQUEMENT si la valeur retournée change

const Header = () => {
  // Lire depuis le store
  const nbArticles   = useSelector(state => state.panier.nbArticles);
  const total        = useSelector(state => state.panier.total);
  const utilisateur  = useSelector(state => state.auth.utilisateur);
  const notifications = useSelector(state => state.notifs.liste);

  return (
    <header className="header">
      <img src="/logo.svg" alt="DariGo" />
      <nav>
        <NavLink to="/menu">Menu</NavLink>
        {utilisateur
          ? <span>Bonjour, {utilisateur.prenom}</span>
          : <NavLink to="/login">Connexion</NavLink>
        }
      </nav>
      <Link to="/commande/nouvelle" className="btn-panier">
        Panier — {nbArticles} article(s) — {total} MAD
      </Link>
    </header>
  );
};

// ── useDispatch — déclencher des actions ─────────────────────
const CartePlat = ({ plat }) => {
  const dispatch = useDispatch();

  const ajouterAuPanier = () => {
    dispatch({
      type: 'panier/ajouterArticle',
      payload: { ...plat, quantite: 1 }
    });
  };

  return (
    <article className="carte-plat">
      <h3>{plat.nom}</h3>
      <p>{plat.prix} MAD</p>
      <button onClick={ajouterAuPanier}>Ajouter au panier</button>
    </article>
  );
};

// ── Sélecteurs — centraliser et mémoïser les lectures ─────────
// Définir les sélecteurs dans un fichier séparé
// src/store/selectors.js

export const selPanier        = state => state.panier;
export const selArticlesPanier = state => state.panier.articles;
export const selTotalPanier   = state => state.panier.total;
export const selNbArticles    = state => state.panier.nbArticles;
export const selUtilisateur   = state => state.auth.utilisateur;
export const selEstAuthentifie = state => state.auth.isAuthentifie;

// Sélecteur dérivé — calculer depuis plusieurs parties de l'état
export const selPanierVide = state => state.panier.articles.length === 0;
export const selPeutCommander = state =>
  state.auth.isAuthentifie && state.panier.articles.length > 0;

// Utilisation avec les sélecteurs nommés — plus lisible
const PanierResume = () => {
  const articles     = useSelector(selArticlesPanier);
  const total        = useSelector(selTotalPanier);
  const peutCommander = useSelector(selPeutCommander);

  return (
    <div className="panier-resume">
      {articles.map(a => (
        <LignePanier key={a.id} article={a} />
      ))}
      <strong>Total : {total} MAD</strong>
      <button disabled={!peutCommander}>Commander</button>
    </div>
  );
};

// ── src/store/panierSlice.js ───────────────────────────────────
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { commandesService } from '../services/commandesService';

// createAsyncThunk — actions asynchrones (appels API)
export const passerCommande = createAsyncThunk(
  'panier/passerCommande',  // préfixe/nom — génère 3 actions : pending, fulfilled, rejected
  async ({ articles, adresse, ville }, { rejectWithValue }) => {
    try {
      const commande = await commandesService.creer({ articles, adresse, ville });
      return commande; // payload de fulfilled
    } catch (error) {
      return rejectWithValue(error.message); // payload de rejected
    }
  }
);

const panierSlice = createSlice({
  name: 'panier',
  initialState: {
    articles:    [],
    total:       0,
    nbArticles:  0,
    commandeEnCours: null,
    isLoading:   false,
    erreur:      null,
  },

  reducers: {
    // Avec Immer : on peut "muter" state directement !
    // Immer crée un nouvel objet immutable en interne.

    ajouterArticle: (state, action) => {
      const { id, nom, prix, quantite = 1 } = action.payload;
      const existe = state.articles.find(a => a.id === id);

      if (existe) {
        existe.quantite += quantite;  // mutation Immer — OK !
      } else {
        state.articles.push({ id, nom, prix, quantite }); // push Immer — OK !
      }

      // Recalculer total et nbArticles
      state.nbArticles = state.articles.reduce((acc, a) => acc + a.quantite, 0);
      state.total      = state.articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);
    },

    retirerArticle: (state, action) => {
      state.articles = state.articles.filter(a => a.id !== action.payload.id);
      state.nbArticles = state.articles.reduce((acc, a) => acc + a.quantite, 0);
      state.total      = state.articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);
    },

    majQuantite: (state, action) => {
      const { id, quantite } = action.payload;
      const article = state.articles.find(a => a.id === id);
      if (article) {
        article.quantite = quantite;  // mutation Immer
        state.nbArticles = state.articles.reduce((acc, a) => acc + a.quantite, 0);
        state.total      = state.articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);
      }
    },

    vider: (state) => {
      state.articles   = [];
      state.total      = 0;
      state.nbArticles = 0;
    },
  },

  extraReducers: (builder) => {
    // Gérer les états de l'action asynchrone passerCommande
    builder
      .addCase(passerCommande.pending, (state) => {
        state.isLoading = true;
        state.erreur    = null;
      })
      .addCase(passerCommande.fulfilled, (state, action) => {
        state.isLoading       = false;
        state.commandeEnCours = action.payload;
        state.articles        = [];  // vider après commande réussie
        state.total           = 0;
        state.nbArticles      = 0;
      })
      .addCase(passerCommande.rejected, (state, action) => {
        state.isLoading = false;
        state.erreur    = action.payload;
      });
  }
});

// Les action creators sont générés automatiquement par createSlice
export const { ajouterArticle, retirerArticle, majQuantite, vider } = panierSlice.actions;

// Sélecteurs
export const selPanier       = state => state.panier;
export const selArticles     = state => state.panier.articles;
export const selTotal        = state => state.panier.total;
export const selNbArticles   = state => state.panier.nbArticles;
export const selPanierVide   = state => state.panier.articles.length === 0;

export default panierSlice.reducer;

// ── src/store/authSlice.js ─────────────────────────────────────
const authSlice = createSlice({
  name: 'auth',
  initialState: { utilisateur: null, isAuthentifie: false, isLoading: false },
  reducers: {
    connexionReussie: (state, action) => {
      state.utilisateur    = action.payload;
      state.isAuthentifie  = true;
    },
    deconnexion: (state) => {
      state.utilisateur   = null;
      state.isAuthentifie = false;
    }
  }
});
export const { connexionReussie, deconnexion } = authSlice.actions;
export default authSlice.reducer;

// ── src/store/index.js — configureStore ───────────────────────
import { configureStore } from '@reduxjs/toolkit';
import panierReducer from './panierSlice';
import authReducer   from './authSlice';

const store = configureStore({
  reducer: {
    panier: panierReducer,
    auth:   authReducer,
  },
  // configureStore intègre automatiquement :
  // - Redux DevTools (en développement)
  // - redux-thunk middleware (pour les actions asynchrones)
  // - Vérification d'immutabilité (en développement)
});

export default store;
export type RootState    = ReturnType<typeof store.getState>;
export type AppDispatch  = typeof store.dispatch;

// ── Composant avec Redux Toolkit ──────────────────────────────
import { useSelector, useDispatch } from 'react-redux';
import { ajouterArticle, retirerArticle, selArticles, selTotal, selNbArticles } from '../store/panierSlice';
import { passerCommande } from '../store/panierSlice';

const PageCheckout = ({ adresse }) => {
  const dispatch    = useDispatch();
  const articles    = useSelector(selArticles);
  const total       = useSelector(selTotal);
  const nbArticles  = useSelector(selNbArticles);
  const isLoading   = useSelector(state => state.panier.isLoading);
  const erreur      = useSelector(state => state.panier.erreur);

  const handleCommander = async () => {
    const result = await dispatch(passerCommande({
      articles: articles.map(a => ({ idPlat: a.id, quantite: a.quantite })),
      adresse:  adresse.adresse,
      ville:    adresse.ville,
    }));

    // Vérifier si l'action async a réussi
    if (passerCommande.fulfilled.match(result)) {
      navigate(`/suivi/${result.payload.id}`);
    }
  };

  return (
    <div className="checkout">
      <h2>Votre commande ({nbArticles} article(s))</h2>

      {articles.map(article => (
        <div key={article.id} className="ligne-checkout">
          <span>{article.nom} × {article.quantite}</span>
          <span>{article.prix * article.quantite} MAD</span>
          <button onClick={() => dispatch(retirerArticle({ id: article.id }))}>
            Retirer
          </button>
        </div>
      ))}

      <div className="checkout__total">
        <strong>Total : {total} MAD</strong>
      </div>

      {erreur && (
        <div className="erreur-commande" role="alert">{erreur}</div>
      )}

      <button
        onClick={handleCommander}
        disabled={isLoading || articles.length === 0}
        className="btn btn-primary btn-lg"
      >
        {isLoading ? 'Commande en cours...' : 'Confirmer et payer'}
      </button>
    </div>
  );
};

┌─────────────────────────────────────────────────────────┐
│               DARIGO — ARCHITECTURE COMPLÈTE             │
├─────────────────────────────────────────────────────────┤
│                                                          │
│   darigo-frontend (React + Vite)                         │
│   http://localhost:5173    ←── Navigateur client         │
│         │                                                │
│         │ HTTP (fetch / Axios)                           │
│         ▼                                                │
│   NGINX :80  ←── Gateway reverse proxy                   │
│   /auth       → auth-service:3001                        │
│   /cuisines   → cuisine-service:3002                     │
│   /commandes  → commande-service:3003                    │
│   /livraisons → livraison-service:3004                   │
│   /notifs     → notif-service:3005                       │
│                                                          │
│   RABBITMQ :5672  ←── Messages asynchrones               │
│   exchange darigo (fanout)                               │
│   ├── queue-notifs   → notif-service (consumer)          │
│   └── queue-livreurs → livraison-service (consumer)      │
│                                                          │
│   MONGODB                                                │
│   ├── bddarigo-auth       (utilisateurs)                 │
│   ├── bddarigo-cuisines   (restaurants + plats)          │
│   ├── bddarigo-commandes  (commandes)                    │
│   ├── bddarigo-livraisons (missions livreurs)            │
│   └── bddarigo-notifs     (historique événements)        │
│                                                          │
└─────────────────────────────────────────────────────────┘

Flux d'une commande DariGo :
① Client React → POST /commandes (token JWT)
② commande-service → vérifie token via auth-service GET /auth/verify
③ commande-service → vérifie restaurant via cuisine-service GET /cuisines/:id
④ commande-service → insère en MongoDB, publie événement RabbitMQ
⑤ livraison-service (consumer) → crée mission "disponible"
⑥ notif-service (consumer) → enregistre la notification
⑦ React → polling GET /livraisons/:id → affiche le statut en temps réel

# ── Créer le projet ───────────────────────────────────────────
npm create vite@latest darigo-frontend -- --template react
cd darigo-frontend
npm install

# ── Dépendances du projet ─────────────────────────────────────
npm install react-router-dom              # Routage
npm install @reduxjs/toolkit react-redux  # État global (panier, auth)
npm install @tanstack/react-query         # Chargement et cache des données
npm install axios                         # Client HTTP
npm install react-hook-form               # Formulaires
npm install zod @hookform/resolvers       # Validation des formulaires

darigo-frontend/
├── public/
│   └── images/          # Placeholders des plats
│
├── src/
│   ├── main.jsx          # Point d'entrée (Provider, QueryClient, BrowserRouter)
│   ├── App.jsx           # Routes React Router
│   │
│   ├── components/       # Composants réutilisables
│   │   ├── CartePlat.jsx
│   │   ├── CarteRestaurant.jsx
│   │   ├── BadgeStatut.jsx
│   │   ├── SuiviLivraison.jsx
│   │   ├── Header.jsx
│   │   └── ProtectedRoute.jsx
│   │
│   ├── pages/            # Pages (une par route)
│   │   ├── PageAccueil.jsx
│   │   ├── PageRestaurants.jsx
│   │   ├── PageMenu.jsx
│   │   ├── PageLogin.jsx
│   │   ├── PageRegister.jsx
│   │   ├── PageCommande.jsx
│   │   ├── PageSuivi.jsx
│   │   └── PageProfil.jsx
│   │
│   ├── services/         # Appels API — un fichier par microservice
│   │   ├── api.js        # Instance Axios + intercepteur JWT
│   │   ├── authService.js
│   │   ├── cuisineService.js
│   │   ├── commandeService.js
│   │   ├── livraisonService.js
│   │   └── notifService.js
│   │
│   ├── store/            # Redux Toolkit
│   │   ├── index.js
│   │   ├── panierSlice.js
│   │   └── authSlice.js
│   │
│   └── hooks/            # Hooks personnalisés
│       ├── useAuth.js
│       └── usePanier.js
│
├── .env.local            # Variables d'environnement locales
├── .env.production       # Variables de production
└── vite.config.js

// ── vite.config.js ────────────────────────────────────────────
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@'           : path.resolve(__dirname, './src'),
      '@components' : path.resolve(__dirname, './src/components'),
      '@pages'      : path.resolve(__dirname, './src/pages'),
      '@services'   : path.resolve(__dirname, './src/services'),
      '@store'      : path.resolve(__dirname, './src/store'),
      '@hooks'      : path.resolve(__dirname, './src/hooks'),
    }
  },
  server: {
    port: 5173,
    proxy: {
      // En développement, proxy vers Nginx qui redistribue aux microservices
      '/auth'      : { target: 'http://localhost:80', changeOrigin: true },
      '/cuisines'  : { target: 'http://localhost:80', changeOrigin: true },
      '/commandes' : { target: 'http://localhost:80', changeOrigin: true },
      '/livraisons': { target: 'http://localhost:80', changeOrigin: true },
      '/notifs'    : { target: 'http://localhost:80', changeOrigin: true },
    }
  }
});

// ── .env.local (développement — ne pas commiter) ──────────────
// VITE_API_URL=http://localhost:80
// VITE_POLLING_INTERVAL=10000

// ── .env.production ───────────────────────────────────────────
// VITE_API_URL=https://api.darigo.ma

// ── src/main.jsx — point d'entrée complet ─────────────────────
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';
import store from './store';
import './index.css';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 2,   // 2 min — menus changent rarement
      retry: 1,
      refetchOnWindowFocus: false, // éviter les appels trop fréquents
    }
  }
});

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
      <QueryClientProvider client={queryClient}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </QueryClientProvider>
    </Provider>
  </React.StrictMode>
);

// ── src/services/api.js — instance Axios centrale ─────────────
import axios from 'axios';

const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL || 'http://localhost:80',
  timeout: 8000,
  headers: { 'Content-Type': 'application/json' }
});

// Ajouter le token JWT à chaque requête automatiquement
api.interceptors.request.use(config => {
  const token = localStorage.getItem('darigo_token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// Gérer les erreurs HTTP globalement
api.interceptors.response.use(
  response => response.data,   // retourner directement les données
  error => {
    if (error.response?.status === 401) {
      localStorage.removeItem('darigo_token');
      window.location.href = '/login';
    }
    const message = error.response?.data?.erreur
      || error.response?.data?.message
      || `Erreur ${error.response?.status || 'réseau'}`;
    return Promise.reject(new Error(message));
  }
);

export default api;

// ── src/services/authService.js ───────────────────────────────
import api from './api';

export const authService = {
  // POST /auth/register
  // Body : { nom, email, motDePasse, role? }
  // Réponse : { message: "Compte cree", userId: "..." }
  register: (data) => api.post('/auth/register', data),

  // POST /auth/login
  // Body : { email, motDePasse }
  // Réponse : { message: "Connexion reussie", token: "eyJ..." }
  login: async (email, motDePasse) => {
    const data = await api.post('/auth/login', { email, motDePasse });
    // Stocker le JWT — sera envoyé automatiquement par l'intercepteur
    localStorage.setItem('darigo_token', data.token);
    return data;
  },

  logout: () => {
    localStorage.removeItem('darigo_token');
  },

  // Décoder le JWT localement pour obtenir les infos utilisateur
  // ⚠ Pas de vérification de signature — uniquement pour l'affichage UI
  getUtilisateurLocal: () => {
    const token = localStorage.getItem('darigo_token');
    if (!token) return null;
    try {
      const payload = JSON.parse(atob(token.split('.')[1]));
      // Vérifier l'expiration
      if (payload.exp * 1000 < Date.now()) {
        localStorage.removeItem('darigo_token');
        return null;
      }
      return { userId: payload.userId, nom: payload.nom, email: payload.email, role: payload.role };
    } catch {
      return null;
    }
  }
};

// ── src/store/authSlice.js ─────────────────────────────────────
import { createSlice } from '@reduxjs/toolkit';
import { authService } from '../services/authService';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    // Récupérer l'utilisateur depuis le token stocké au démarrage
    utilisateur: authService.getUtilisateurLocal(),
    isAuthentifie: !!authService.getUtilisateurLocal(),
  },
  reducers: {
    connexionReussie: (state, action) => {
      // action.payload = { userId, nom, email, role } — décodé du JWT
      state.utilisateur   = action.payload;
      state.isAuthentifie = true;
    },
    deconnexion: (state) => {
      authService.logout(); // supprimer le JWT de localStorage
      state.utilisateur   = null;
      state.isAuthentifie = false;
    }
  }
});

export const { connexionReussie, deconnexion } = authSlice.actions;

// Sélecteurs
export const selUtilisateur    = state => state.auth.utilisateur;
export const selIsAuthentifie  = state => state.auth.isAuthentifie;
export const selRole           = state => state.auth.utilisateur?.role;
export const selEstLivreur     = state => state.auth.utilisateur?.role === 'livreur';
export const selEstAdmin       = state => state.auth.utilisateur?.role === 'admin';

export default authSlice.reducer;

// ── src/store/index.js ────────────────────────────────────────
import { configureStore } from '@reduxjs/toolkit';
import authReducer  from './authSlice';
import panierReducer from './panierSlice'; // voir étape cuisine

const store = configureStore({
  reducer: {
    auth:   authReducer,
    panier: panierReducer,
  }
});

export default store;

// ── src/pages/PageLogin.jsx ───────────────────────────────────
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useDispatch } from 'react-redux';
import { useNavigate, Link } from 'react-router-dom';
import { authService } from '../services/authService';
import { connexionReussie } from '../store/authSlice';

const schemaLogin = z.object({
  email:      z.string().email('Email invalide'),
  motDePasse: z.string().min(1, 'Mot de passe requis'),
});

const PageLogin = () => {
  const dispatch  = useDispatch();
  const navigate  = useNavigate();

  const { register, handleSubmit, setError, formState: { errors, isSubmitting } } = useForm({
    resolver: zodResolver(schemaLogin)
  });

  const onSubmit = async ({ email, motDePasse }) => {
    try {
      // POST /auth/login → { message, token }
      await authService.login(email, motDePasse);
      // Décoder le JWT pour obtenir les infos et les stocker dans Redux
      const utilisateur = authService.getUtilisateurLocal();
      dispatch(connexionReussie(utilisateur));
      navigate('/restaurants');
    } catch (err) {
      // Afficher le message d'erreur du back-end (ex: "Identifiants incorrects")
      setError('root', { message: err.message });
    }
  };

  return (
    <div className="page-auth">
      <div className="auth-card">
        <img src="/logo.svg" alt="DariGo" className="auth-logo" />
        <h1>Se connecter</h1>

        <form onSubmit={handleSubmit(onSubmit)} noValidate>
          {errors.root && (
            <div className="alerte alerte-erreur" role="alert">
              {errors.root.message}
            </div>
          )}

          <div className="champ">
            <label htmlFor="email">Email</label>
            <input id="email" type="email" {...register('email')}
              placeholder="khalid@example.com" />
            {errors.email && <span className="msg-erreur">{errors.email.message}</span>}
          </div>

          <div className="champ">
            <label htmlFor="motDePasse">Mot de passe</label>
            <input id="motDePasse" type="password" {...register('motDePasse')} />
            {errors.motDePasse && <span className="msg-erreur">{errors.motDePasse.message}</span>}
          </div>

          <button type="submit" disabled={isSubmitting} className="btn btn-primary btn-full">
            {isSubmitting ? 'Connexion...' : 'Se connecter'}
          </button>
        </form>

        <p className="auth-lien">
          Pas encore de compte ? <Link to="/register">S'inscrire</Link>
        </p>
      </div>
    </div>
  );
};

export default PageLogin;

// ── src/pages/PageRegister.jsx (extrait) ─────────────────────
const schemaRegister = z.object({
  nom:          z.string().min(2, 'Minimum 2 caractères'),
  email:        z.string().email('Email invalide'),
  motDePasse:   z.string().min(6, 'Minimum 6 caractères'),
  confirmation: z.string(),
  role:         z.enum(['client', 'livreur']).default('client'),
}).refine(d => d.motDePasse === d.confirmation, {
  message: 'Les mots de passe ne correspondent pas',
  path: ['confirmation']
});

// POST /auth/register — Body : { nom, email, motDePasse, role }
// Réponse succès : { message: "Compte cree", userId: "..." }
// Réponse erreur : { erreur: "Email deja utilise" } → status 409

// ── src/components/Header.jsx ─────────────────────────────────
import { Link, NavLink } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { selUtilisateur, selIsAuthentifie, deconnexion } from '../store/authSlice';
import { selNbArticles } from '../store/panierSlice';

const Header = () => {
  const dispatch       = useDispatch();
  const utilisateur    = useSelector(selUtilisateur);
  const isAuthentifie  = useSelector(selIsAuthentifie);
  const nbArticles     = useSelector(selNbArticles);

  return (
    <header className="header">
      <Link to="/" className="header-logo">
        <img src="/logo.svg" alt="DariGo" />
      </Link>

      <nav className="header-nav">
        <NavLink to="/restaurants" className={({ isActive }) => isActive ? 'actif' : ''}>
          Restaurants
        </NavLink>
        {isAuthentifie && (
          <NavLink to="/mes-commandes" className={({ isActive }) => isActive ? 'actif' : ''}>
            Mes commandes
          </NavLink>
        )}
      </nav>

      <div className="header-actions">
        {isAuthentifie ? (
          <>
            <Link to="/commande" className="btn-panier">
              Panier {nbArticles > 0 && <span className="badge-nb">{nbArticles}</span>}
            </Link>
            <span className="header-user">{utilisateur?.nom}</span>
            <button onClick={() => dispatch(deconnexion())} className="btn btn-ghost">
              Déconnexion
            </button>
          </>
        ) : (
          <Link to="/login" className="btn btn-primary">Se connecter</Link>
        )}
      </div>
    </header>
  );
};

// ── src/components/ProtectedRoute.jsx ────────────────────────
import { Navigate, Outlet } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { selIsAuthentifie } from '../store/authSlice';

const ProtectedRoute = ({ rolesAutorises }) => {
  const isAuthentifie = useSelector(selIsAuthentifie);
  const utilisateur   = useSelector(state => state.auth.utilisateur);

  if (!isAuthentifie) return <Navigate to="/login" replace />;

  if (rolesAutorises && !rolesAutorises.includes(utilisateur?.role)) {
    return <Navigate to="/" replace />;
  }

  return <Outlet />;
};

// ── src/App.jsx — routes complètes ───────────────────────────
const App = () => (
  <>
    <Header />
    <Routes>
      <Route path="/"              element={<PageAccueil />} />
      <Route path="/restaurants"   element={<PageRestaurants />} />
      <Route path="/restaurants/:id/menu" element={<PageMenu />} />
      <Route path="/login"         element={<PageLogin />} />
      <Route path="/register"      element={<PageRegister />} />

      <Route element={<ProtectedRoute />}>
        <Route path="/commande"        element={<PageCommande />} />
        <Route path="/suivi/:id"       element={<PageSuivi />} />
        <Route path="/mes-commandes"   element={<PageMesCommandes />} />
        <Route path="/profil"          element={<PageProfil />} />
      </Route>

      <Route element={<ProtectedRoute rolesAutorises={['livreur', 'admin']} />}>
        <Route path="/livraisons"  element={<PageLivraisons />} />
      </Route>

      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  </>
);

// ── src/services/cuisineService.js ────────────────────────────
import api from './api';

export const cuisineService = {
  // GET /cuisines?ville=Casablanca&page=1&limit=12
  // Réponse : { restaurants: [...], total: 42, pages: 4 }
  getRestaurants: (params = {}) => api.get('/cuisines', { params }),

  // GET /cuisines/:id
  // Réponse : { _id, nom, adresse, ville, cuisine, note, imageUrl }
  getRestaurant: (id) => api.get(`/cuisines/${id}`),

  // GET /cuisines/:restaurantId/plats
  // Réponse : [{ _id, nom, description, prix, disponible, categorie }]
  getPlats: (restaurantId) => api.get(`/cuisines/${restaurantId}/plats`),

  // POST /cuisines — role restaurateur ou admin
  creerRestaurant: (data) => api.post('/cuisines', data),

  // POST /cuisines/:id/plats — role restaurateur ou admin
  creerPlat: (restaurantId, data) => api.post(`/cuisines/${restaurantId}/plats`, data),

  // PUT /cuisines/:id — role restaurateur ou admin
  majRestaurant: (id, data) => api.put(`/cuisines/${id}`, data),
};

// ── src/store/panierSlice.js ──────────────────────────────────
import { createSlice } from '@reduxjs/toolkit';

const panierSlice = createSlice({
  name: 'panier',
  initialState: {
    articles:       [],    // [{ _id, nom, prix, quantite, restaurantId, restaurantNom }]
    restaurantId:   null,  // Panier limité à un seul restaurant (contrainte métier)
    restaurantNom:  '',
    nbArticles:     0,
    total:          0,
  },
  reducers: {
    ajouterArticle: (state, action) => {
      const plat = action.payload;

      // Vider le panier si on change de restaurant
      if (state.restaurantId && state.restaurantId !== plat.restaurantId) {
        state.articles = [];
      }
      state.restaurantId  = plat.restaurantId;
      state.restaurantNom = plat.restaurantNom;

      const existe = state.articles.find(a => a._id === plat._id);
      if (existe) {
        existe.quantite += 1;  // Immer — mutation autorisée
      } else {
        state.articles.push({ ...plat, quantite: 1 });
      }

      state.nbArticles = state.articles.reduce((acc, a) => acc + a.quantite, 0);
      state.total      = state.articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);
    },

    retirerArticle: (state, action) => {
      state.articles = state.articles.filter(a => a._id !== action.payload);
      if (state.articles.length === 0) state.restaurantId = null;
      state.nbArticles = state.articles.reduce((acc, a) => acc + a.quantite, 0);
      state.total      = state.articles.reduce((acc, a) => acc + a.prix * a.quantite, 0);
    },

    vider: (state) => {
      state.articles      = [];
      state.restaurantId  = null;
      state.restaurantNom = '';
      state.nbArticles    = 0;
      state.total         = 0;
    }
  }
});

export const { ajouterArticle, retirerArticle, vider } = panierSlice.actions;
export const selArticles     = state => state.panier.articles;
export const selTotal        = state => state.panier.total;
export const selNbArticles   = state => state.panier.nbArticles;
export const selRestaurantId = state => state.panier.restaurantId;
export default panierSlice.reducer;

// ── src/pages/PageRestaurants.jsx ─────────────────────────────
import { useQuery } from '@tanstack/react-query';
import { useSearchParams, Link } from 'react-router-dom';
import { cuisineService } from '../services/cuisineService';

const VILLES = ['Casablanca', 'Rabat', 'Fès', 'Marrakech', 'Agadir', 'Tanger'];

const PageRestaurants = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const ville = searchParams.get('ville') || 'Casablanca';
  const page  = parseInt(searchParams.get('page') || '1', 10);

  // GET /cuisines?ville=Casablanca&page=1&limit=12
  const { data, isLoading, isError } = useQuery({
    queryKey: ['restaurants', ville, page],
    queryFn:  () => cuisineService.getRestaurants({ ville, page, limit: 12 }),
    keepPreviousData: true, // garder les données pendant le chargement de la page suivante
  });

  if (isLoading) return <div className="spinner">Chargement des restaurants...</div>;
  if (isError)   return <div className="erreur">Impossible de charger les restaurants</div>;

  return (
    <div className="page-restaurants">
      <h1>Restaurants à {ville}</h1>

      {/* Filtres par ville */}
      <div className="filtres-ville">
        {VILLES.map(v => (
          <button
            key={v}
            className={`filtre-btn ${ville === v ? 'actif' : ''}`}
            onClick={() => setSearchParams({ ville: v, page: '1' })}
          >
            {v}
          </button>
        ))}
      </div>

      {/* Grille des restaurants */}
      <div className="grille-restaurants">
        {data?.restaurants?.map(r => (
          <Link key={r._id} to={`/restaurants/${r._id}/menu`} className="carte-restaurant">
            <img
              src={r.imageUrl || '/images/restaurant-placeholder.jpg'}
              alt={r.nom}
              loading="lazy"
              onError={e => { e.target.src = '/images/restaurant-placeholder.jpg'; }}
            />
            <div className="carte-restaurant__infos">
              <h3>{r.nom}</h3>
              <p>{r.cuisine} · {r.adresse}</p>
              <span className="note">★ {r.note?.toFixed(1) || '—'}</span>
            </div>
          </Link>
        ))}
      </div>

      {/* Pagination */}
      {data?.pages > 1 && (
        <div className="pagination">
          {Array.from({ length: data.pages }, (_, i) => i + 1).map(p => (
            <button
              key={p}
              className={`page-btn ${page === p ? 'actif' : ''}`}
              onClick={() => setSearchParams({ ville, page: String(p) })}
            >
              {p}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

// ── src/pages/PageMenu.jsx ────────────────────────────────────
import { useParams } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { ajouterArticle, selRestaurantId } from '../store/panierSlice';

const PageMenu = () => {
  const { id: restaurantId } = useParams();
  const dispatch              = useDispatch();
  const panierRestaurantId    = useSelector(selRestaurantId);

  // GET /cuisines/:id
  const { data: restaurant } = useQuery({
    queryKey: ['restaurant', restaurantId],
    queryFn:  () => cuisineService.getRestaurant(restaurantId),
  });

  // GET /cuisines/:id/plats
  const { data: plats = [], isLoading } = useQuery({
    queryKey: ['plats', restaurantId],
    queryFn:  () => cuisineService.getPlats(restaurantId),
    staleTime: 1000 * 60 * 5, // 5 min — menus stables
  });

  const [categorieActive, setCategorieActive] = useState('tous');

  const categories = [...new Set(plats.map(p => p.categorie))];
  const platsFiltres = plats.filter(p =>
    categorieActive === 'tous' || p.categorie === categorieActive
  );

  const handleAjouter = (plat) => {
    // Prévenir si le panier contient des plats d'un autre restaurant
    if (panierRestaurantId && panierRestaurantId !== restaurantId) {
      if (!confirm('Votre panier contient des plats d\'un autre restaurant. Le vider ?')) return;
    }
    dispatch(ajouterArticle({
      ...plat,
      restaurantId,
      restaurantNom: restaurant?.nom
    }));
  };

  if (isLoading) return <div className="spinner">Chargement du menu...</div>;

  return (
    <div className="page-menu">
      <div className="menu-header">
        <h1>{restaurant?.nom}</h1>
        <p>{restaurant?.cuisine} · {restaurant?.adresse}</p>
      </div>

      {/* Filtres par catégorie */}
      <div className="filtres-categorie">
        {['tous', ...categories].map(cat => (
          <button
            key={cat}
            className={`filtre-btn ${categorieActive === cat ? 'actif' : ''}`}
            onClick={() => setCategorieActive(cat)}
          >
            {cat}
          </button>
        ))}
      </div>

      {/* Liste des plats */}
      <div className="grille-plats">
        {platsFiltres.map(plat => (
          <div key={plat._id} className={`carte-plat ${!plat.disponible ? 'grise' : ''}`}>
            <div className="carte-plat__corps">
              <h3>{plat.nom}</h3>
              <p className="description">{plat.description}</p>
              <div className="carte-plat__footer">
                <strong>{plat.prix} MAD</strong>
                <button
                  onClick={() => handleAjouter(plat)}
                  disabled={!plat.disponible}
                  className="btn btn-primary btn-sm"
                >
                  {plat.disponible ? '+ Ajouter' : 'Indisponible'}
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ── src/services/commandeService.js ──────────────────────────
import api from './api';

export const commandeService = {
  // POST /commandes — AUTHENTIFIÉ (token JWT requis)
  // Body : { restaurantId, articles: [{platId, nom, prix, quantite}], adresseLivraison, villeLivraison }
  // Réponse : { message, commandeId, statut: "en_attente" }
  // ⚠ commande-service vérifie auth ET cuisine avant d'insérer
  creer: (data) => api.post('/commandes', data),

  // GET /commandes — AUTHENTIFIÉ — commandes du client connecté
  // Réponse : [{ _id, restaurantNom, total, statut, createdAt, articles }]
  getMesCommandes: (params = {}) => api.get('/commandes', { params }),

  // GET /commandes/:id — AUTHENTIFIÉ
  getById: (id) => api.get(`/commandes/${id}`),

  // PATCH /commandes/:id/statut — AUTHENTIFIÉ
  // Body : { statut: "confirmee" | "en_preparation" | "prete" | "en_livraison" | "livree" | "annulee" }
  majStatut: (id, statut) => api.patch(`/commandes/${id}/statut`, { statut }),
};

// ── src/pages/PageCommande.jsx ────────────────────────────────
import { useSelector, useDispatch } from 'react-redux';
import { useMutation } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { selArticles, selTotal, selRestaurantId, selNbArticles, vider } from '../store/panierSlice';
import { commandeService } from '../services/commandeService';

const schemaAdresse = z.object({
  adresseLivraison: z.string().min(10, 'Adresse trop courte (min. 10 caractères)'),
  villeLivraison:   z.enum(['Casablanca','Rabat','Fès','Marrakech','Agadir','Tanger']),
  telephone:        z.string().regex(/^(\+212|0)[5-7]\d{8}$/, 'Numéro marocain invalide'),
  instructions:     z.string().max(200).optional(),
});

const PageCommande = () => {
  const dispatch       = useDispatch();
  const navigate       = useNavigate();
  const articles       = useSelector(selArticles);
  const total          = useSelector(selTotal);
  const nbArticles     = useSelector(selNbArticles);
  const restaurantId   = useSelector(selRestaurantId);

  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: zodResolver(schemaAdresse),
    defaultValues: { villeLivraison: 'Casablanca' }
  });

  const mutation = useMutation({
    mutationFn: (adresse) => commandeService.creer({
      restaurantId,
      articles: articles.map(a => ({
        platId:   a._id,
        nom:      a.nom,
        prix:     a.prix,
        quantite: a.quantite,
      })),
      adresseLivraison: adresse.adresseLivraison,
      villeLivraison:   adresse.villeLivraison,
    }),
    onSuccess: (data) => {
      // Vider le panier Redux après commande réussie
      dispatch(vider());
      // Naviguer vers le suivi — commande-service retourne commandeId
      navigate(`/suivi/${data.commandeId}`);
    },
  });

  if (articles.length === 0) {
    return (
      <div className="page-commande page-commande--vide">
        <p>Votre panier est vide</p>
        <button onClick={() => navigate('/restaurants')} className="btn btn-primary">
          Voir les restaurants
        </button>
      </div>
    );
  }

  return (
    <div className="page-commande">
      <h1>Confirmer votre commande</h1>

      {/* Récapitulatif panier */}
      <section className="recap-panier">
        <h2>Votre panier ({nbArticles} article(s))</h2>
        {articles.map(a => (
          <div key={a._id} className="ligne-panier">
            <span>{a.nom} × {a.quantite}</span>
            <span>{(a.prix * a.quantite).toFixed(2)} MAD</span>
          </div>
        ))}
        <div className="total-panier">
          <strong>Sous-total : {total.toFixed(2)} MAD</strong>
          <span>+ Livraison : 15 MAD</span>
          <strong className="total-final">Total : {(total + 15).toFixed(2)} MAD</strong>
        </div>
      </section>

      {/* Formulaire d'adresse */}
      <form onSubmit={handleSubmit(data => mutation.mutate(data))} noValidate>
        <h2>Adresse de livraison</h2>

        {mutation.isError && (
          <div className="alerte alerte-erreur">{mutation.error.message}</div>
        )}

        <div className="champ">
          <label htmlFor="adresse">Adresse complète</label>
          <input id="adresse" {...register('adresseLivraison')} placeholder="123 Rue Mohammed V, Maarif" />
          {errors.adresseLivraison && <span className="msg-erreur">{errors.adresseLivraison.message}</span>}
        </div>

        <div className="champ">
          <label htmlFor="ville">Ville</label>
          <select id="ville" {...register('villeLivraison')}>
            {['Casablanca','Rabat','Fès','Marrakech','Agadir','Tanger'].map(v => (
              <option key={v} value={v}>{v}</option>
            ))}
          </select>
        </div>

        <div className="champ">
          <label htmlFor="tel">Téléphone</label>
          <input id="tel" type="tel" {...register('telephone')} placeholder="06 12 34 56 78" />
          {errors.telephone && <span className="msg-erreur">{errors.telephone.message}</span>}
        </div>

        <button
          type="submit"
          disabled={mutation.isPending}
          className="btn btn-primary btn-lg btn-full"
        >
          {mutation.isPending ? 'Commande en cours...' : `Commander — ${(total + 15).toFixed(2)} MAD`}
        </button>
      </form>
    </div>
  );
};

// ── src/services/livraisonService.js ──────────────────────────
import api from './api';

export const livraisonService = {
  // GET /livraisons — AUTHENTIFIÉ
  // Pour un livreur : ses missions acceptées + missions disponibles
  // Pour un admin : toutes les missions
  getMissions: (params = {}) => api.get('/livraisons', { params }),

  // PATCH /livraisons/:id/accepter — rôle livreur uniquement
  // Met le statut de la mission à "acceptee" atomiquement
  // Retourne : { message: "Mission acceptee" }
  accepterMission: (id) => api.patch(`/livraisons/${id}/accepter`),

  // PATCH /livraisons/:id/statut — rôle livreur ou admin
  // Body : { statut: "en_route" | "livree" | "annulee" }
  majStatut: (id, statut) => api.patch(`/livraisons/${id}/statut`, { statut }),
};

// ── src/components/BadgeStatut.jsx ────────────────────────────
// Commun aux commandes et aux livraisons — statuts compatibles
const CONFIG_STATUT = {
  en_attente:    { label: 'En attente',     classe: 'warning',  icone: '⏳' },
  confirmee:     { label: 'Confirmée',      classe: 'info',     icone: '✓'  },
  en_preparation:{ label: 'En préparation', classe: 'primary',  icone: '👨‍🍳' },
  prete:         { label: 'Prête',          classe: 'accent',   icone: '🍽'  },
  disponible:    { label: 'En attente livreur', classe: 'warning', icone: '🛵' },
  acceptee:      { label: 'Livreur assigné',classe: 'info',     icone: '🛵'  },
  en_livraison:  { label: 'En livraison',   classe: 'primary',  icone: '🛵'  },
  en_route:      { label: 'En route',       classe: 'primary',  icone: '🛵'  },
  livree:        { label: 'Livrée ✓',       classe: 'success',  icone: '✓'  },
  annulee:       { label: 'Annulée',        classe: 'danger',   icone: '✕'  },
};

export const BadgeStatut = ({ statut }) => {
  const cfg = CONFIG_STATUT[statut] || { label: statut, classe: 'default', icone: '?' };
  return (
    <span className={`badge-statut badge-statut--${cfg.classe}`}>
      {cfg.icone} {cfg.label}
    </span>
  );
};

// ── src/pages/PageSuivi.jsx — vue client ─────────────────────
import { useParams } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { commandeService } from '../services/commandeService';
import { BadgeStatut } from '../components/BadgeStatut';

const STATUTS_ACTIFS = ['en_attente','confirmee','en_preparation','prete','en_livraison','en_route'];

const ETAPES = [
  { key: 'en_attente',    label: 'Reçue'         },
  { key: 'confirmee',     label: 'Confirmée'     },
  { key: 'en_preparation',label: 'Préparation'   },
  { key: 'en_livraison',  label: 'En livraison'  },
  { key: 'livree',        label: 'Livrée'        },
];

const PageSuivi = () => {
  const { id: commandeId } = useParams();

  const { data: commande, isLoading, isError } = useQuery({
    queryKey: ['commande', commandeId],
    queryFn:  () => commandeService.getById(commandeId),
    // Polling toutes les 10 secondes si la commande est encore en cours
    refetchInterval: (data) =>
      STATUTS_ACTIFS.includes(data?.statut)
        ? parseInt(import.meta.env.VITE_POLLING_INTERVAL || '10000', 10)
        : false,
  });

  if (isLoading) return <div className="spinner">Chargement du suivi...</div>;
  if (isError)   return <div className="erreur">Commande introuvable</div>;

  const indexActuel = ETAPES.findIndex(e => e.key === commande?.statut);

  return (
    <div className="page-suivi">
      <h1>Suivi commande #{commandeId.slice(-6).toUpperCase()}</h1>

      {/* Badge statut principal */}
      <div className="suivi-statut">
        <BadgeStatut statut={commande?.statut} />
        {STATUTS_ACTIFS.includes(commande?.statut) && (
          <span className="suivi-pulse">Mise à jour auto toutes les 10s</span>
        )}
      </div>

      {/* Timeline des étapes */}
      <div className="timeline">
        {ETAPES.map((etape, i) => (
          <div
            key={etape.key}
            className={`timeline-etape ${
              i < indexActuel ? 'passee' : i === indexActuel ? 'active' : 'future'
            }`}
          >
            <div className="timeline-point" />
            <span className="timeline-label">{etape.label}</span>
          </div>
        ))}
      </div>

      {/* Récapitulatif commande */}
      <section className="suivi-details">
        <h2>Détails</h2>
        <p><strong>Restaurant :</strong> {commande?.restaurantNom}</p>
        <p><strong>Adresse :</strong> {commande?.adresseLivraison}, {commande?.villeLivraison}</p>
        <p><strong>Total :</strong> {commande?.total?.toFixed(2)} MAD</p>

        {commande?.statut === 'livree' && (
          <div className="suivi-livree">
            <p>Votre commande a été livrée. Bon appétit !</p>
            <button onClick={() => navigate('/restaurants')} className="btn btn-primary">
              Commander à nouveau
            </button>
          </div>
        )}
      </section>
    </div>
  );
};

// ── src/pages/PageLivraisons.jsx — vue livreur ───────────────
// Accessible uniquement aux rôles : livreur, admin
const PageLivraisons = () => {
  const queryClient = useQueryClient();

  // GET /livraisons — missions disponibles + missions du livreur connecté
  const { data: missions = [], isLoading } = useQuery({
    queryKey: ['missions'],
    queryFn:  () => livraisonService.getMissions(),
    refetchInterval: 15000, // polling 15s pour les nouvelles missions
  });

  const mutAccepter = useMutation({
    mutationFn: (id) => livraisonService.accepterMission(id),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['missions'] }),
  });

  const mutStatut = useMutation({
    mutationFn: ({ id, statut }) => livraisonService.majStatut(id, statut),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['missions'] }),
  });

  return (
    <div className="page-livraisons">
      <h1>Mes missions</h1>
      {missions.map(mission => (
        <div key={mission._id} className="carte-mission">
          <BadgeStatut statut={mission.statut} />
          <p>{mission.adresseLivraison} — {mission.villeLivraison}</p>
          <p>Commande #{mission.commandeId?.slice(-6).toUpperCase()}</p>

          {mission.statut === 'disponible' && (
            <button
              onClick={() => mutAccepter.mutate(mission._id)}
              disabled={mutAccepter.isPending}
              className="btn btn-primary"
            >
              Accepter la mission
            </button>
          )}

          {mission.statut === 'acceptee' && (
            <button
              onClick={() => mutStatut.mutate({ id: mission._id, statut: 'en_route' })}
              className="btn btn-accent"
            >
              Je suis en route
            </button>
          )}

          {mission.statut === 'en_route' && (
            <button
              onClick={() => mutStatut.mutate({ id: mission._id, statut: 'livree' })}
              className="btn btn-success"
            >
              Confirmer la livraison
            </button>
          )}
        </div>
      ))}
    </div>
  );
};

// ── src/services/notifService.js ──────────────────────────────
import api from './api';

export const notifService = {
  // GET /notifs — ADMIN uniquement
  // Retourne tous les événements enregistrés par le notif-service
  // Réponse : [{ _id, type, commandeId, createdAt, payload }]
  // Types possibles : commande.creee, commande.statut_mis_a_jour,
  //                   livraison.creee, livraison.acceptee, livraison.livree
  getHistorique: (params = {}) => api.get('/notifs', { params }),
};

// ── src/pages/PageNotifications.jsx — admin uniquement ────────
import { useQuery } from '@tanstack/react-query';
import { useSelector } from 'react-redux';
import { selEstAdmin } from '../store/authSlice';
import { notifService } from '../services/notifService';

const CONFIG_TYPE = {
  'commande.creee':             { label: 'Commande créée',    couleur: 'info'    },
  'commande.statut_mis_a_jour': { label: 'Statut commande',   couleur: 'primary' },
  'livraison.creee':            { label: 'Mission créée',     couleur: 'accent'  },
  'livraison.acceptee':         { label: 'Mission acceptée',  couleur: 'success' },
  'livraison.livree':           { label: 'Livraison confirmée', couleur: 'success' },
};

const PageNotifications = () => {
  const estAdmin = useSelector(selEstAdmin);

  const { data: notifs = [], isLoading, refetch } = useQuery({
    queryKey: ['notifs'],
    queryFn:  () => notifService.getHistorique({ limit: 50 }),
    enabled:  estAdmin, // ne charger que si admin
    refetchInterval: 30000, // rafraîchir toutes les 30s
  });

  if (!estAdmin) return <div className="erreur">Accès réservé aux administrateurs</div>;
  if (isLoading) return <div className="spinner">Chargement des notifications...</div>;

  return (
    <div className="page-notifs">
      <div className="page-notifs__header">
        <h1>Historique des événements DariGo</h1>
        <button onClick={() => refetch()} className="btn btn-ghost">↻ Actualiser</button>
      </div>

      <div className="notifs-liste">
        {notifs.map(notif => {
          const cfg = CONFIG_TYPE[notif.type] || { label: notif.type, couleur: 'default' };
          return (
            <div key={notif._id} className={`notif-ligne notif-ligne--${cfg.couleur}`}>
              <span className={`notif-badge badge-${cfg.couleur}`}>{cfg.label}</span>
              <span className="notif-commande">
                Commande #{notif.commandeId?.slice(-6).toUpperCase() || '—'}
              </span>
              <span className="notif-date">
                {new Date(notif.createdAt).toLocaleString('fr-MA', {
                  day: '2-digit', month: '2-digit', year: 'numeric',
                  hour: '2-digit', minute: '2-digit'
                })}
              </span>
              {notif.payload?.statut && (
                <span className="notif-statut">→ {notif.payload.statut}</span>
              )}
            </div>
          );
        })}
        {notifs.length === 0 && (
          <p className="notifs-vide">Aucun événement enregistré</p>
        )}
      </div>
    </div>
  );
};

// ── Notifications toast temps réel — intégration PageSuivi ────
// Le polling de PageSuivi détecte les changements de statut.
// On peut afficher un toast quand le statut change.

// src/hooks/useStatutChangeToast.js
export const useStatutChangeToast = (statut) => {
  const statutPrecedent = useRef(statut);

  useEffect(() => {
    if (statut && statut !== statutPrecedent.current) {
      const cfg = CONFIG_STATUT[statut];
      if (cfg) {
        // Afficher une notification native du navigateur (si permission accordée)
        if (Notification.permission === 'granted') {
          new Notification('DariGo — Mise à jour commande', {
            body: cfg.label,
            icon: '/favicon.ico'
          });
        }
      }
      statutPrecedent.current = statut;
    }
  }, [statut]);
};

// Demander la permission au montage de l'app
useEffect(() => {
  if ('Notification' in window && Notification.permission === 'default') {
    Notification.requestPermission();
  }
}, []);

# ── Lancer l'application complète DariGo ─────────────────────

# 1. Démarrer le back-end (depuis le dossier darigo/)
docker-compose up -d

# Vérifier que tous les services sont up
curl http://localhost/auth/health      # {"service":"auth-service","statut":"actif"}
curl http://localhost/cuisines/health  # {"service":"cuisine-service","statut":"actif"}

# 2. Démarrer le front-end React
cd darigo-frontend
npm run dev

# L'application est disponible sur http://localhost:5173
# Les requêtes /auth, /cuisines, /commandes, /livraisons, /notifs
# sont proxifiées vers Nginx (port 80) par Vite

# 3. Créer un compte de test
# Via l'interface : http://localhost:5173/register
# Ou via Postman : POST http://localhost/auth/register
# { "nom": "Khalid El Amrani", "email": "khalid@test.ma",
#   "motDePasse": "test1234", "role": "client" }

# 4. Build pour la production
npm run build
# → génère le dossier dist/ — à servir via Nginx ou Azure Static Web Apps