/* ===========================================================
   Repetir Boutique — Mes commandes
   Tabs (en cours / passées), order cards with delivery tracker.
   Reads orders from the store. window.RepOrders
   =========================================================== */
(function () {
  const { useState } = React;
  const { useStore } = window.RepetirStore;

  const STATUS = {
    "En préparation": { cls: "b-prep", step: 1 },
    "Expédiée": { cls: "b-ship", step: 2 },
    "Livrée": { cls: "b-done", step: 3 },
    "Annulée": { cls: "b-cancel", step: 0 },
  };
  const isCurrent = o => o.status === "En préparation" || o.status === "Expédiée";
  const fmtDate = iso => new Date(iso).toLocaleDateString("fr-FR", { day: "numeric", month: "long", year: "numeric" });

  function Tracker({ status }) {
    const step = (STATUS[status] || { step: 1 }).step;
    const nodes = [["✓", "Confirmée", 1], ["📦", "Préparation", 1], ["🚚", "Expédiée", 2], ["🏠", "Livrée", 3]];
    return React.createElement("div", { className: "tracker" },
      React.createElement("div", { className: "track" }, nodes.map((n, i) => {
        const on = step >= n[2] || i === 0;
        return React.createElement(React.Fragment, { key: i },
          i > 0 && React.createElement("div", { className: "seg" + (step >= n[2] ? " on" : "") }),
          React.createElement("div", { className: "node" + (on ? " on" : "") },
            React.createElement("div", { className: "ring" }, n[0]),
            React.createElement("div", { className: "tl" }, n[1])));
      })));
  }

  function OrderCard({ o }) {
    const { money, D } = useStore();
    const [showDetails, setShowDetails] = useState(false);
    const st = STATUS[o.status] || { cls: "b-prep" };
    const cur = isCurrent(o);
    return React.createElement("div", { className: "order" },
      React.createElement("div", { className: "o-head" },
        React.createElement("span", { className: "onum" }, o.id),
        React.createElement("span", { className: "odate" }, "· " + fmtDate(o.date)),
        React.createElement("span", { className: "badge " + st.cls }, o.status),
        React.createElement("span", { className: "ototal" }, money(o.total))),
      cur && React.createElement(Tracker, { status: o.status }),
      React.createElement("div", { className: "o-body" },
        React.createElement("div", { className: "o-items" }, o.items.map((i, k) => React.createElement("div", { className: "oi", key: k },
          React.createElement("div", { className: "em" }, D.emojiFor(i.name)),
          React.createElement("div", null, React.createElement("div", { className: "nm" }, i.name), React.createElement("div", { className: "q" }, "×" + i.qty))))),
        React.createElement("div", { className: "o-actions" },
          cur
            ? React.createElement("button", { className: "btn btn--sm", onClick: () => alert("Suivi du colis " + o.id + " — bientôt disponible") }, "Suivre le colis")
            : React.createElement("button", { className: "btn btn--ghost btn--sm", onClick: () => alert("Articles ajoutés au panier (démo)") }, "Racheter"),
          React.createElement("button", { className: "btn btn--ghost btn--sm", onClick: () => setShowDetails(s => !s) }, "Détails"))),
      showDetails && React.createElement("div", { className: "o-foot", style: { display: "flex" } },
        React.createElement("span", null, "🚚 Livraison " + o.method + (o.shipping === 0 ? " · offerte" : " · " + money(o.shipping))),
        React.createElement("span", null, "📍 " + o.address.first + " " + (o.address.last || "") + ", " + o.address.city),
        React.createElement("span", null, "🧾 Sous-total " + money(o.subtotal))));
  }

  function Empty({ msg }) {
    return React.createElement("div", { className: "empty" },
      React.createElement("div", { className: "big" }, "📭"),
      React.createElement("p", null, msg),
      React.createElement("a", { className: "btn", href: "#/" }, "Découvrir la boutique 🚀"));
  }

  function Orders() {
    const { orders } = useStore();
    const [tab, setTab] = useState("current");
    const current = orders.filter(isCurrent);
    const past = orders.filter(o => !isCurrent(o));
    const list = tab === "current" ? current : past;
    return React.createElement("div", { className: "wrap wrap--orders" },
      React.createElement("div", { className: "page-head" },
        React.createElement("h1", null, "Mes commandes 📦"),
        React.createElement("p", null, "Suis tes colis Stylo et retrouve l'historique de tes achats.")),
      React.createElement("div", { className: "tabs" },
        React.createElement("button", { className: "tab" + (tab === "current" ? " active" : ""), onClick: () => setTab("current") }, "En cours ", React.createElement("span", { className: "count" }, current.length)),
        React.createElement("button", { className: "tab" + (tab === "past" ? " active" : ""), onClick: () => setTab("past") }, "Passées ", React.createElement("span", { className: "count" }, past.length))),
      React.createElement("div", { className: "orders" },
        list.length ? list.map(o => React.createElement(OrderCard, { key: o.id, o })) : React.createElement(Empty, { msg: tab === "current" ? "Aucune commande en cours." : "Pas encore d'historique." })));
  }

  window.RepOrders = Orders;
})();