/* ============================================================
   RIVA — LA BORNE

   Le parcours d'une borne de commande, sur le site.

   1. On arrive : les sept familles s'affichent en grands carrés, à plat.
   2. On en choisit une : les carrés GLISSENT vers la gauche et se rangent
      en colonne, pendant que la famille choisie s'ouvre à droite.
   3. On change de famille quand on veut, la colonne reste là.

   Le mouvement doit rester lisible et ne jamais déformer une photo :
   les carrés s'effacent en glissant vers la gauche (celui qu'on a touché
   reste un instant, cerclé d'or), puis la colonne entre par la gauche,
   case après case, pendant que la famille s'ouvre à droite. Motion
   (ex-Framer Motion, chargé en UMD dans index.html) anime l'entrée des
   cases et du contenu ; s'il manque, tout marche sans animation.
   ============================================================ */

const { useState: useB, useEffect: useBE, useRef: useBR, useMemo: useBM } = React;

/* Motion peut ne pas avoir été chargé (coupure réseau au moment d'ouvrir
   la page). Dans ce cas la borne fonctionne quand même, sans le glissement. */
const M = (typeof Motion !== 'undefined') ? Motion : null;
const motion = M ? M.motion : null;
const AnimatePresence = M ? M.AnimatePresence : (({ children }) => children);

const FONDU = { duration: 0.28, ease: [0.22, 0.61, 0.36, 1] };
/* Temps laissé aux carrés pour s'effacer avant d'ouvrir la famille
   (la transition CSS .familles-grille.partent dure 0,26 s). */
const DUREE_DEPART = 240;

/* Le plat qui représente une famille sur son carré.

   Une vraie photo d'abord, toujours : c'est elle qui donne faim. À défaut,
   le premier plat de la première rubrique — et non une « signature » prise
   au hasard, qui allait chercher la planche de bouchées pour représenter
   toute la table tunisienne. */
function platVitrine(famille) {
  // Le restaurant peut imposer la photo d'une famille (champ `vitrine` de familles.js).
  const impose = famille.vitrine && famille.plats.find(p => p.name === famille.vitrine && p.img);
  if (impose) return impose;
  const avecPhoto = famille.plats.find(p => p.img);
  if (avecPhoto) return avecPhoto;
  const premiere = famille.rubriques[0];
  return (premiere && premiere.items[0]) || famille.plats[0];
}


/* ---------- Ce que les clients prennent le plus ---------- */

function ALaUne({ addToCart }) {
  const [donnees, setDonnees] = useB(null);

  useBE(() => {
    let vivant = true;
    fetch('/api/populaires?n=3')
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (vivant && d?.ok) setDonnees(d); })
      .catch(() => {});   // hors ligne : le bandeau disparaît, c'est tout
    return () => { vivant = false; };
  }, []);

  const { menu } = getEffectiveMenu();
  const tousLesPlats = useBM(() => Object.values(menu).flatMap(c => c.items), [menu]);

  if (!donnees || !donnees.significatif || !donnees.plats.length) return null;

  const trouves = donnees.plats
    .map(p => ({ ...p, plat: tousLesPlats.find(i => i.name === p.nom) }))
    .filter(p => p.plat && !p.plat.rupture);

  if (!trouves.length) return null;

  return (
    <div className="a-la-une">
      <div className="a-la-une-titre">
        <span className="kicker">Les plus commandés</span>
        <span className="a-la-une-detail">sur les 60 derniers jours</span>
      </div>
      <div className="a-la-une-grille">
        {trouves.map((p, i) => (
          <button key={p.nom} className="une-carte" onClick={() => addToCart(p.plat)}>
            <span className="une-rang">{i + 1}</span>
            <PlatVisuel item={p.plat} className="une-image"/>
            <span className="une-texte">
              <span className="une-nom">{p.plat.name}</span>
              <span className="une-prix">{p.plat.price.toFixed(2)}€</span>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}


/* ---------- Une famille : grand carré, ou entrée de colonne ---------- */

/* Octobre 2026 — on ne transforme plus le grand carré en petite case.
   Faire passer une photo de 312×234 à une case de 216×40 l'écrasait en
   plein vol (photo et texte déformés), et la page sautait à l'arrivée.
   Désormais : les carrés s'effacent en glissant vers la gauche, puis la
   colonne entre par la gauche, case après case. Rien ne se déforme. */
function CarteFamille({ famille, mode, actif, onChoisir, rang = 0, choisie = false }) {
  const enGrille = mode === 'grille';
  const vitrine = platVitrine(famille);

  if (enGrille) {
    return (
      <button className={`famille-tuile ${choisie ? 'choisie' : ''}`} style={{ '--rang': rang }}
              onClick={() => onChoisir(famille.id)}>
        {vitrine && (
          <span className="famille-fond">
            <PlatVisuel item={vitrine} className="famille-image"/>
            <span className="famille-voile"/>
          </span>
        )}
        <span className="famille-texte">
          <span className="famille-accroche">{famille.accroche}</span>
          <span className="famille-nom">{famille.nom}</span>
          <span className="famille-nb">{famille.nbPlats} {famille.nbPlats > 1 ? 'plats' : 'plat'}</span>
        </span>
      </button>
    );
  }

  const Bouton = motion ? motion.button : 'button';
  return (
    <Bouton
      {...(motion ? {
        initial: { opacity: 0, x: -18 },
        animate: { opacity: 1, x: 0 },
        transition: { ...FONDU, delay: rang * 0.035 },
      } : {})}
      onClick={() => onChoisir(famille.id)}
      aria-current={actif ? 'true' : undefined}
      className={`colonne-item ${actif ? 'actif' : ''}`}>
      <span className="famille-texte">
        <span className="famille-nom">{famille.nom}</span>
        <span className="famille-nb">{famille.nbPlats}</span>
      </span>
    </Bouton>
  );
}

/* ---------- Le contenu d'une famille ---------- */

function ContenuFamille({ famille, addToCart }) {
  const [rubrique, setRubrique] = useB(null);
  useBE(() => { setRubrique(null); }, [famille.id]);

  const rubriques = famille.rubriques;
  const visibles = rubrique ? rubriques.filter(r => r.id === rubrique) : rubriques;

  return (
    <div className="famille-contenu" key={famille.id}>
      <header className="famille-entete">
        <span className="kicker">{famille.accroche}</span>
        <h3 className="famille-titre">{famille.nom}</h3>
        <p className="famille-desc">{famille.description}</p>
      </header>

      {rubriques.length > 1 && (
        <div className="rubriques">
          <button className={`rubrique ${!rubrique ? 'actif' : ''}`}
                  onClick={() => setRubrique(null)}>
            Tout <span className="rubrique-nb">{famille.nbPlats}</span>
          </button>
          {rubriques.map(r => (
            <button key={r.id}
                    className={`rubrique ${rubrique === r.id ? 'actif' : ''}`}
                    onClick={() => setRubrique(r.id)}>
              {r.label} <span className="rubrique-nb">{r.items.length}</span>
            </button>
          ))}
        </div>
      )}

      {visibles.map(r => (
        <section key={r.id} className="rubrique-bloc">
          {rubriques.length > 1 && (
            <div className="rubrique-entete">
              <h4>{r.label}</h4>
              {r.sub && <span className="rubrique-sub">{r.sub}</span>}
            </div>
          )}
          <div className="plats-grille">
            {r.items.map((item, i) => (
              <div key={item.id} className="plat-entree" style={{ '--rang': i % 9 }}>
                <MenuCard item={item} addToCart={addToCart}/>
              </div>
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}


/* ---------- La borne ---------- */

function Borne({ addToCart, compact }) {
  const [famille, setFamille] = useB(null);
  const [depart, setDepart] = useB(null);     // carré touché, pendant que la grille s'efface
  const zone = useBR(null);
  const minuterie = useBR(null);

  const { menu } = getEffectiveMenu();
  const familles = useBM(() => famillesGarnies(menu), [menu]);

  const ouverte = familles.find(f => f.id === famille);

  /* La grille et la vue ouverte n'ont pas la même hauteur : sans rien
     faire, la page sautait de plusieurs centaines de pixels au changement.
     On recale le haut de la carte sous l'en-tête, d'un coup, pendant que le
     nouveau contenu est encore transparent : l'œil ne voit aucun saut. */
  const recaler = () => {
    if (!zone.current) return;
    const haut = zone.current.getBoundingClientRect().top;
    if (Math.abs(haut) > 4) zone.current.scrollIntoView({ behavior: 'instant', block: 'start' });
  };
  const premierAffichage = useBR(true);
  React.useLayoutEffect(() => {
    if (premierAffichage.current) { premierAffichage.current = false; return; }   // pas au chargement de la page
    recaler();
  }, [!!ouverte]);
  useBE(() => () => clearTimeout(minuterie.current), []);

  const choisir = (id) => {
    if (ouverte) {
      // La colonne est déjà là : on change seulement le contenu.
      setFamille(id);
      if (zone.current && zone.current.getBoundingClientRect().top < -40) {
        zone.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
      return;
    }
    if (depart) return;                        // double-clic pendant le départ
    const reduit = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    setDepart(id);
    minuterie.current = setTimeout(() => { setFamille(id); setDepart(null); }, reduit ? 0 : DUREE_DEPART);
  };

  const Contenu = motion ? motion.div : 'div';

  return (
    <section id="menu" ref={zone} className={`borne ${compact ? 'borne-compacte' : ''}`}>
      <div className="borne-zone">
          {!ouverte && (
            <>
              <div className="borne-titre">
                {compact ? (
                  <>
                    <h2 className="font-display text-3xl md:text-4xl text-[var(--cream)]">La carte</h2>
                    <p className="borne-intro">
                      Choisissez une famille. Tout part en cuisine quand vous validez.
                    </p>
                  </>
                ) : (
                  <>
                    <div className="kicker mb-3">La carte</div>
                    <h2 className="font-display text-5xl md:text-7xl text-[var(--cream)]">
                      Par quoi on <span className="text-[var(--vert)]">commence ?</span>
                    </h2>
                    <p className="borne-intro">
                      Sept familles. Choisissez-en une, les autres se rangent sur le côté.
                    </p>
                  </>
                )}
              </div>

              <ALaUne addToCart={addToCart}/>

              <div className={`familles-grille ${depart ? 'partent' : ''}`}>
                {familles.map((f, i) => (
                  <CarteFamille key={f.id} famille={f} mode="grille" rang={i}
                                choisie={depart === f.id} onChoisir={choisir}/>
                ))}
              </div>
            </>
          )}

          {ouverte && (
            <div className="borne-ouverte">
              <nav className="colonne-familles" aria-label="Familles de la carte">
                <button className="colonne-retour" onClick={() => setFamille(null)}>
                  <Icon.ArrowRight className="w-4 h-4 rotate-180"/> Tout voir
                </button>
                {familles.map((f, i) => (
                  <CarteFamille key={f.id} famille={f} mode="colonne" rang={i}
                                actif={f.id === famille} onChoisir={choisir}/>
                ))}
              </nav>

              {/* La clé change avec la famille : le contenu entre en fondu à
                  chaque changement, sans que la colonne bouge. */}
              <Contenu key={ouverte.id}
                {...(motion ? {
                  initial: { opacity: 0, x: 18 },
                  animate: { opacity: 1, x: 0 },
                  transition: { ...FONDU, delay: 0.08 },
                } : {})}
                style={{ minWidth: 0 }}>
                <ContenuFamille famille={ouverte} addToCart={addToCart}/>
              </Contenu>
            </div>
          )}

      </div>
    </section>
  );
}

try { Object.assign(window, { Borne, ALaUne, CarteFamille }); } catch (e) {}