/* ===========================================================
   Repetir Boutique — shared UI components
   Header (country picker + account menu + spaces/XP), cart
   drawer, footer, toast. All read global state via useStore().
   Exposed on window for the page scripts to consume.
   =========================================================== */
(function () {
  const { useState, useEffect, useRef } = React;
  const { useStore } = window.RepetirStore;

  function go(path) { window.location.hash = path; }

  /* ---------------- Language picker ---------------- */
  function LanguageSelect() {
    const { lang, setLang, languages } = useStore();
    return (
      React.createElement("label", { className: "country-pick lang-pick", title: "Langue de la boutique" },
        React.createElement("span", { className: "cf", "aria-hidden": true }, "🌐"),
        React.createElement("select", {
          value: lang, "aria-label": "Langue",
          onChange: (e) => setLang(e.target.value),
        }, languages.map(l => React.createElement("option", { key: l.code, value: l.code }, l.label))),
        React.createElement("span", { className: "cc", "aria-hidden": true }, "▾")
      )
    );
  }

  /* ---------------- Account menu (with spaces / XP) ---------------- */
  function AccountMenu() {
    const { spaces, spaceId, selectSpace, showToast } = useStore();
    const totalXp = spaces.reduce((n, s) => n + s.xp, 0);
    const [open, setOpen] = useState(false);
    const ref = useRef(null);
    useEffect(() => {
      function onKey(e) { if (e.key === "Escape") setOpen(false); }
      document.addEventListener("keydown", onKey);
      return () => document.removeEventListener("keydown", onKey);
    }, []);
    useEffect(() => {
      if (!open) return;
      function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
      const id = setTimeout(() => document.addEventListener("click", onDoc), 0);
      return () => { clearTimeout(id); document.removeEventListener("click", onDoc); };
    }, [open]);
    const fmt = (n) => n.toLocaleString("fr-FR");
    return (
      React.createElement("div", { className: "account" + (open ? " open" : ""), ref },
        React.createElement("button", {
          className: "account-btn", "aria-haspopup": "true", "aria-expanded": open, "aria-label": "Mon compte",
          onClick: () => setOpen(o => !o),
        }, "LM", React.createElement("span", { className: "status-dot", title: "Connecté" })),
        React.createElement("div", { className: "account-menu", role: "menu", "aria-label": "Mon compte" },
          React.createElement("div", { className: "account-head" },
            React.createElement("span", { className: "av" }, "LM"),
            React.createElement("div", null,
              React.createElement("div", { className: "nm" }, "Léa Martin"),
              React.createElement("div", { className: "em" }, "lea.martin@email.fr")
            )
          ),
          React.createElement("div", { className: "account-stats" },
            React.createElement("span", { className: "as-pill fire" }, "🔥 12 jours"),
            React.createElement("span", { className: "as-pill xp" }, "⭐ " + totalXp.toLocaleString("fr-FR") + " XP")
          ),
          React.createElement("div", { className: "menu-label" }, "Espaces · payer en XP"),
          spaces.map(s => React.createElement("button", {
            key: s.id, className: "space-row" + (s.id === spaceId ? " active" : ""),
            role: "menuitemradio", "aria-checked": s.id === spaceId,
            onClick: (e) => { e.stopPropagation(); selectSpace(s.id); },
          },
            React.createElement("span", { className: "sav", style: { background: s.color } }, s.initials),
            React.createElement("span", { className: "sinfo" },
              React.createElement("span", { className: "sn" }, s.name),
              React.createElement("span", { className: "sx" }, "⭐ " + fmt(s.xp) + " XP")
            ),
            React.createElement("span", { className: "schk" }, "✓")
          )),
          React.createElement("hr", { className: "sep" }),
          React.createElement("button", { className: "mi-btn", role: "menuitem", onClick: () => { setOpen(false); go("#/commandes"); } }, "📦 Mes commandes"),
          React.createElement("a", { href: "https://app.repetir.com", role: "menuitem" }, "🚀 Aller à l'application"),
          React.createElement("button", { className: "mi-btn", role: "menuitem", onClick: () => { setOpen(false); showToast("👤 Profil — bientôt disponible"); } }, "👤 Profil"),
          React.createElement("hr", { className: "sep" }),
          React.createElement("button", { className: "mi-btn logout", role: "menuitem", onClick: () => { setOpen(false); showToast("↩ Déconnexion (démo)"); } }, "↩ Déconnexion")
        )
      )
    );
  }

  /* ---------------- Header ---------------- */
  function Header({ variant = "shop", activeCat, onPickCat, onOpenCart }) {
    const { cartQty, activeSpace } = useStore();
    const { D } = useStore();
    const fmt = (n) => n.toLocaleString("fr-FR");
    const NAV = ["Vêtements", "Figurines & 3D", "Déguisements", "Papeterie"];
    return (
      React.createElement("header", { className: "site" },
        React.createElement("div", { className: "wrap hbar" },
          React.createElement("a", { className: "brand", href: "#/", onClick: () => go("#/") },
            React.createElement("span", { className: "wm wordmark" }, "Repetir"),
            React.createElement("span", { className: "store" }, "Store")
          ),
          variant === "shop"
            ? React.createElement("nav", { className: "nav" },
                NAV.map(n => React.createElement("a", {
                  key: n, className: activeCat === n ? "active" : "",
                  onClick: () => onPickCat && onPickCat(n),
                }, n)))
            : React.createElement("button", { className: "back", onClick: () => go("#/") }, "← Continuer mes achats"),
          React.createElement("div", { className: "hright" },
            React.createElement(LanguageSelect, null),
            variant === "shop" && React.createElement("button", { className: "cart-btn", "aria-label": "Panier", onClick: onOpenCart }, "🛒",
              cartQty > 0 && React.createElement("span", { className: "cart-badge" }, cartQty)),
            React.createElement(AccountMenu, null)
          )
        )
      )
    );
  }

  /* ---------------- Cart drawer ---------------- */
  function CartDrawer({ open, onClose }) {
    const { cart, incItem, decItem, removeItem, money, D } = useStore();
    const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
    return (
      React.createElement(React.Fragment, null,
        React.createElement("div", { className: "cart-overlay" + (open ? " open" : ""), onClick: onClose }),
        React.createElement("aside", { className: "cart-drawer" + (open ? " open" : ""), "aria-label": "Panier" },
          React.createElement("div", { className: "cd-head" },
            React.createElement("h3", null, "Ton panier 🛒"),
            React.createElement("button", { className: "cd-close", "aria-label": "Fermer", onClick: onClose }, "✕")
          ),
          React.createElement("div", { className: "cd-items" },
            cart.length === 0
              ? React.createElement("div", { className: "cd-empty" }, "🛒", React.createElement("p", null, "Ton panier est vide."))
              : cart.map((i, idx) => React.createElement("div", { className: "cd-item", key: i.name },
                  React.createElement("div", { className: "cd-i-emoji" }, D.emojiFor(i.name)),
                  React.createElement("div", null,
                    React.createElement("div", { className: "cd-i-name" }, i.name),
                    React.createElement("div", { className: "cd-i-price" }, money(i.price)),
                    React.createElement("div", { className: "cd-qty" },
                      React.createElement("button", { onClick: () => decItem(idx), "aria-label": "Moins" }, "−"),
                      React.createElement("span", null, i.qty),
                      React.createElement("button", { onClick: () => incItem(idx), "aria-label": "Plus" }, "+"),
                      React.createElement("button", { className: "cd-rm", onClick: () => removeItem(idx) }, "Retirer")
                    )
                  ),
                  React.createElement("div", { className: "cd-i-line" }, money(i.price * i.qty))
                ))
          ),
          cart.length > 0 && React.createElement("div", { className: "cd-foot" },
            React.createElement("div", { className: "cd-total" }, React.createElement("span", null, "Total"), React.createElement("span", null, money(total))),
            React.createElement("a", { className: "btn", href: "#/commande", onClick: (e) => { onClose(); go("#/commande"); } }, "Passer commande 🚀"),
            React.createElement("button", { className: "btn btn--ghost btn--sm", onClick: onClose }, "Continuer mes achats")
          )
        )
      )
    );
  }

  /* ---------------- Footer ---------------- */
  function Footer() {
    return (
      React.createElement("footer", { className: "site" },
        React.createElement("div", { className: "wrap" },
          React.createElement("div", { className: "fgrid" },
            React.createElement("div", null,
              React.createElement("span", { className: "wm wordmark" }, "Repetir"),
              React.createElement("p", { className: "tag" }, "L'appli qui te fait mémoriser les langues par l'écriture. La boutique officielle de Stylo et toute sa bande.")
            ),
            React.createElement("div", null, React.createElement("h4", null, "Boutique"),
              React.createElement("ul", null, ["Vêtements", "Figurines & 3D", "Déguisements", "Papeterie"].map(x => React.createElement("li", { key: x }, React.createElement("a", null, x))))),
            React.createElement("div", null, React.createElement("h4", null, "Aide"),
              React.createElement("ul", null, ["Livraison & retours", "Guide des tailles", "Suivre ma commande", "Nous contacter"].map(x => React.createElement("li", { key: x }, React.createElement("a", null, x))))),
            React.createElement("div", null, React.createElement("h4", null, "Repetir"),
              React.createElement("ul", null, ["L'application", "Les mascottes", "Communauté", "Boutique XP"].map(x => React.createElement("li", { key: x }, React.createElement("a", null, x)))))
          ),
          React.createElement("div", { className: "fbottom" },
            React.createElement("span", null, "© 2026 REPETIR LLC · BaptCompany · Fait avec 💜 et beaucoup de crayons"),
            React.createElement("span", null, "CGV · Confidentialité · Mentions légales")
          )
        )
      )
    );
  }

  /* ---------------- Toast (app-level) ---------------- */
  function Toast() {
    const { toast } = useStore();
    return React.createElement("div", { className: "toast" + (toast ? " show" : "") }, toast || "");
  }

  Object.assign(window, { RepHeader: Header, RepCartDrawer: CartDrawer, RepFooter: Footer, RepToast: Toast, repGo: go });
})();