// screens-cart.jsx — cart / order summary. Exports: CartScreen

// Empty-state illustration: a classic keychain photo — shown when the cart is empty.
function EmptyKeychain({ size = 132 }) {
  return React.createElement("img", {
    src: "assets/empty-keychain.png",
    alt: "",
    style: { display: "block", height: size, width: "auto", margin: "0 auto 8px", opacity: 0.92 },
  });
}

function CartLine({ item, lang, t, onRemove, onQty, onEdit }) {
  const prod = window.PRODUCTS.find((p) => p.id === item.productId) || window.PRODUCTS[0];
  const units = item.units || [];
  return React.createElement(
    "div", { className: "cart-line" },
    React.createElement("div", { className: "cart-line__qrs" },
      units.map((u, i) =>
        React.createElement("div", { key: i, className: "cart-line__qr" },
          React.createElement(window.QRPreview, { text: window.buildQRPayload(u), plate: window.findFilament(u.plate).hex, code: window.findFilament(u.code).hex, size: 76 })
        )
      )
    ),
    React.createElement("div", { className: "cart-line__info" },
      React.createElement("div", { style: { fontWeight: 600, fontSize: 16 } }, lang === "en" ? prod.name_en : prod.name_fr),
      units.map((u, i) => {
        const plateF = window.findFilament(u.plate), codeF = window.findFilament(u.code);
        return React.createElement("div", { key: i, className: "muted", style: { fontSize: 12.5, marginTop: 5, display: "flex", alignItems: "center", gap: 7 } },
          React.createElement(window.TwoTone, { plate: plateF.hex, code: codeF.hex, size: 14 }),
          (prod.count > 1 ? (t("unit_label") + " " + (i + 1) + " · ") : "") + window.qrContentLabel(u, t));
      }),
      React.createElement("div", { style: { display: "flex", gap: 14, marginTop: 12 } },
        React.createElement("button", { className: "linkbtn", onClick: () => onEdit(item) }, t("cart_edit")),
        React.createElement("button", { className: "linkbtn linkbtn--danger", onClick: () => onRemove(item.lineId) }, t("cart_remove")),
      ),
    ),
    React.createElement("div", { className: "cart-line__right" },
      React.createElement("div", { className: "stepper stepper--sm" },
        React.createElement("button", { type: "button", onClick: () => onQty(item.lineId, Math.max(1, item.qty - 1)), disabled: item.qty <= 1 }, "−"),
        React.createElement("span", { className: "val" }, item.qty),
        React.createElement("button", { type: "button", onClick: () => onQty(item.lineId, Math.min(99, item.qty + 1)) }, "+"),
      ),
      React.createElement("div", { style: { fontWeight: 600, fontSize: 16, textAlign: "right" } }, window.fmtPrice(item.price * item.qty, lang)),
    ),
  );
}

function CartScreen({ t, lang, cart, onCheckout, onContinue, onEdit }) {
  const empty = cart.items.length === 0;
  if (empty) {
    return React.createElement(
      "div", { className: "screen cart-page" },
      React.createElement("div", { className: "container", style: { paddingTop: 60, paddingBottom: 120, textAlign: "center" } },
      React.createElement(EmptyKeychain, null),
      React.createElement("h1", { className: "h2", style: { marginTop: 14 } }, t("cart_title")),
      React.createElement("p", { className: "lead", style: { margin: "10px 0 24px" } }, t("cart_empty")),
      React.createElement("button", { className: "btn btn--primary btn--lg", onClick: onContinue }, t("cart_empty_cta")),
      ),
    );
  }
  const subtotal = cart.subtotal;
  return React.createElement(
    "div", { className: "screen cart-page" },
    React.createElement("div", { className: "container", style: { paddingTop: 28, paddingBottom: 90 } },
    React.createElement("h1", { className: "h2", style: { marginBottom: 24 } }, t("cart_title")),
    React.createElement("div", { className: "cart-layout" },
      React.createElement("div", { className: "card", style: { padding: "6px 22px" } },
        cart.items.map((item, i) =>
          React.createElement(React.Fragment, { key: item.lineId },
            i > 0 && React.createElement("hr", { className: "hr" }),
            React.createElement(CartLine, { item, lang, t, onRemove: cart.remove, onQty: cart.update ? (id, q) => cart.update(id, { qty: q }) : null, onEdit }),
          )
        ),
      ),
      React.createElement("div", { className: "cart-summary" },
        React.createElement("div", { className: "card", style: { padding: 22, position: "sticky", top: 76 } },
          React.createElement("div", { style: { fontWeight: 600, fontSize: 17, marginBottom: 16 } }, t("pay_summary")),
          React.createElement(SummaryRow, { label: t("cart_subtotal"), value: window.fmtPrice(subtotal, lang) }),
          React.createElement(SummaryRow, { label: t("cart_shipping"), value: t("cart_free"), accent: true }),
          React.createElement("hr", { className: "hr", style: { margin: "14px 0" } }),
          React.createElement(SummaryRow, { label: t("cart_total"), value: window.fmtPrice(subtotal, lang), big: true }),
          React.createElement("button", { className: "btn btn--primary btn--block", style: { marginTop: 18 }, onClick: onCheckout }, t("cart_checkout")),
          React.createElement("button", { className: "btn btn--quiet btn--block", style: { marginTop: 6 }, onClick: onContinue }, t("cart_continue")),
        )
      ),
    ),
    ),
  );
}

function SummaryRow({ label, value, big, accent }) {
  return React.createElement(
    "div", { style: { display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "5px 0" } },
    React.createElement("span", { style: { fontSize: big ? 16 : 14, fontWeight: big ? 600 : 400, color: big ? "var(--ink)" : "var(--ink-soft)" } }, label),
    React.createElement("span", { style: { fontSize: big ? 22 : 14.5, fontWeight: big ? 700 : 500, color: accent ? "var(--accent)" : "var(--ink)" } }, value),
  );
}

Object.assign(window, { CartScreen, SummaryRow });