/* global React, useApp, Foto, MOTIFS, GlyphDiamond, IconPlus, IconMinus, IconClose, IconArrow,
   IconLock, IconTruck, PRODUCTS, fmt */
const { createElement: m, useState: useStateCart } = React;

function CartPage() {
  const { cart, setQty, removeItem, navigate, cartTotal } = useApp();
  const [promo, setPromo] = useStateCart("");
  const [applied, setApplied] = useStateCart(false);
  const [placed, setPlaced] = useStateCart(false);

  const subtotal = cartTotal;
  const discount = applied ? Math.round(subtotal * 0.1) : 0;
  const base = subtotal - discount;
  const shipping = base >= 999 || base === 0 ? 0 : 120;
  const total = base + shipping;
  const freeGap = Math.max(0, 999 - base);

  if (placed) {
    return m("div", { style: { background: "var(--bone)", minHeight: "70vh", display: "grid", placeItems: "center", padding: "80px 24px", textAlign: "center" } },
      m("div", { style: { maxWidth: 520 } },
        m(MOTIFS.flor, { size: 80, style: { color: "var(--marigold)", margin: "0 auto 26px" } }),
        m("h1", { className: "display", style: { fontSize: 40, textTransform: "uppercase", letterSpacing: ".05em", margin: "0 0 16px" } }, "Tu ofrenda va en camino"),
        m("p", { className: "serif", style: { fontSize: 21, color: "var(--ink-soft)", lineHeight: 1.5, marginBottom: 30 } }, "Gracias por caminar con Mictlán. Recibirás la confirmación y guía de rastreo en tu correo. Que el copal te acompañe."),
        m("button", { className: "btn btn-ink", onClick: () => navigate("catalog", {}) }, "Seguir explorando", m(IconArrow, { size: 16 })))
    );
  }

  if (cart.length === 0) {
    return m("div", { style: { background: "var(--bone)", minHeight: "70vh", display: "grid", placeItems: "center", padding: "80px 24px", textAlign: "center" } },
      m("div", { style: { maxWidth: 480 } },
        m(MOTIFS.calavera, { size: 80, style: { color: "var(--amate-line)", margin: "0 auto 26px" } }),
        m("h1", { className: "display", style: { fontSize: 36, textTransform: "uppercase", letterSpacing: ".05em", margin: "0 0 14px" } }, "Tu altar está vacío"),
        m("p", { className: "serif", style: { fontSize: 20, color: "var(--ink-soft)", marginBottom: 28 } }, "Aún no eliges ninguna pieza para tu camino. El inframundo te espera."),
        m("button", { className: "btn btn-gold", onClick: () => navigate("catalog", {}) }, "Ir a la tienda", m(IconArrow, { size: 16 })))
    );
  }

  return m("div", { style: { background: "var(--bone)" } },
    m("div", { className: "wrap", style: { padding: "40px 32px 14px", textAlign: "center" } },
      m("h1", { className: "display", style: { fontSize: "clamp(30px,3.6vw,46px)", textTransform: "uppercase", letterSpacing: ".05em", margin: 0 } }, "Tu altar"),
      m("p", { className: "serif", style: { fontSize: 18, color: "var(--ink-faint)", marginTop: 8 } }, cart.reduce((n, i) => n + i.qty, 0), " piezas elegidas")),

    m("div", { className: "wrap cart-grid", style: { display: "grid", gridTemplateColumns: "1fr 360px", gap: 40, padding: "24px 32px 72px", alignItems: "start" } },
      /* items */
      m("div", null,
        /* barra envío gratis */
        m("div", { style: { background: "var(--obsidian-2)", borderRadius: 8, padding: "16px 20px", marginBottom: 22, color: "var(--bone)" } },
          m("div", { style: { display: "flex", alignItems: "center", gap: 10, fontSize: 13.5, marginBottom: 10 } },
            m(IconTruck, { size: 18, style: { color: "var(--marigold)" } }),
            freeGap > 0 ? m("span", null, "Te faltan ", m("strong", { style: { color: "var(--marigold)" } }, fmt(freeGap)), " para ", m("strong", null, "envío gratis"))
              : m("span", { style: { color: "var(--marigold)" } }, "¡Felicidades! Tienes envío gratis ✦")),
          m("div", { style: { height: 6, borderRadius: 3, background: "var(--obsidian-line)", overflow: "hidden" } },
            m("div", { style: { height: "100%", width: Math.min(100, (base / 999) * 100) + "%", background: "linear-gradient(90deg,var(--marigold),var(--fucsia))", transition: "width .4s" } }))),

        cart.map((it, i) =>
          m("div", { key: i, style: { display: "grid", gridTemplateColumns: "110px 1fr auto", gap: 18, padding: "20px 0", borderBottom: "1px solid var(--amate-line)", alignItems: "center" } },
            m("div", { style: { borderRadius: 8, overflow: "hidden" } }, m(Foto, { motif: it.motif, color: it.color, hint: "", style: { height: 110 } })),
            m("div", null,
              m("h3", { className: "display", style: { fontSize: 18, textTransform: "uppercase", letterSpacing: ".03em", margin: "0 0 6px", cursor: "pointer" }, onClick: () => navigate("product", { id: it.id }) }, it.name),
              m("div", { style: { fontSize: 13, color: "var(--ink-faint)", fontFamily: "var(--font-serif)", fontSize: 15, marginBottom: 12 } },
                it.opt && it.opt.model
                  ? (it.opt.vlabel || "Modelo") + ": " + it.opt.model
                  : [
                      it.opt && it.opt.aroma ? "Aroma: " + it.opt.aroma : null,
                      it.opt && it.opt.color ? it.opt.color : null,
                      it.opt && it.opt.size && it.opt.size !== "Única" ? "Talla " + it.opt.size : null
                    ].filter(Boolean).join(" · ")),
              m("div", { style: { display: "flex", alignItems: "center", gap: 16 } },
                m("div", { style: { display: "flex", alignItems: "center", border: "1px solid var(--amate-line)", borderRadius: 4, background: "rgba(0,0,0,.25)" } },
                  m("button", { onClick: () => setQty(i, Math.max(1, it.qty - 1)), style: QB }, m(IconMinus, { size: 14 })),
                  m("span", { style: { width: 36, textAlign: "center", fontFamily: "var(--font-display)", fontSize: 16 } }, it.qty),
                  m("button", { onClick: () => setQty(i, it.qty + 1), style: QB }, m(IconPlus, { size: 14 }))),
                m("button", { onClick: () => removeItem(i), style: { background: "none", border: "none", color: "var(--ink-faint)", fontSize: 13, display: "flex", alignItems: "center", gap: 5, cursor: "pointer", fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 15 } }, m(IconClose, { size: 14 }), "Quitar"))),
            m("div", { className: "serif", style: { fontSize: 22, fontWeight: 600, color: "var(--vino)", whiteSpace: "nowrap" } }, fmt(it.price * it.qty))
          )),

        m("button", { onClick: () => navigate("catalog", {}), style: { marginTop: 24, background: "none", border: "none", color: "var(--ink-soft)", display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontFamily: "var(--font-ui)", fontSize: 13, fontWeight: 600, letterSpacing: ".1em", textTransform: "uppercase" } },
          m(IconArrow, { size: 16, style: { transform: "rotate(180deg)" } }), "Seguir comprando")
      ),

      /* resumen */
      m("aside", { className: "cart-aside", style: { position: "sticky", top: 150, background: "var(--bone-2)", border: "1px solid var(--amate-line)", borderRadius: 12, overflow: "hidden" } },
        m("div", { style: { background: "var(--obsidian)", color: "var(--bone)", padding: "16px 22px", display: "flex", alignItems: "center", gap: 10 } },
          m(GlyphDiamond, { size: 14, style: { color: "var(--marigold)" } }),
          m("span", { className: "display", style: { fontSize: 17, textTransform: "uppercase", letterSpacing: ".08em" } }, "Resumen")),
        m("div", { style: { padding: "22px 22px 24px" } },
          /* promo */
          m("div", { style: { display: "flex", gap: 8, marginBottom: 20 } },
            m("input", { className: "field", placeholder: "Código de cupón", value: promo, onChange: e => setPromo(e.target.value), style: { flex: 1 } }),
            m("button", { className: "btn btn-ghost", style: { padding: "0 16px" }, onClick: () => setApplied(promo.trim().length > 0) }, "Aplicar")),
          applied && m("div", { style: { fontSize: 13, color: "var(--verde)", marginBottom: 14, fontFamily: "var(--font-serif)", fontSize: 15 } }, "✦ Cupón aplicado: −10%"),

          m(Row, { l: "Subtotal", v: fmt(subtotal) }),
          discount > 0 && m(Row, { l: "Descuento", v: "−" + fmt(discount), color: "var(--verde)" }),
          m(Row, { l: "Envío", v: shipping === 0 ? "Gratis" : fmt(shipping), color: shipping === 0 ? "var(--verde)" : null }),
          m("div", { style: { borderTop: "1px solid var(--amate-line)", margin: "14px 0", paddingTop: 14, display: "flex", justifyContent: "space-between", alignItems: "baseline" } },
            m("span", { className: "display", style: { fontSize: 18, textTransform: "uppercase", letterSpacing: ".06em" } }, "Total"),
            m("span", { className: "serif", style: { fontSize: 30, fontWeight: 600, color: "var(--vino)" } }, fmt(total))),
          m("div", { style: { fontSize: 13, color: "var(--verde)", fontWeight: 600, marginBottom: 20, textAlign: "right" } }, "o 3 MSI de ", fmt(Math.round(total / 3))),

          m("button", { className: "btn btn-gold btn-full", style: { fontSize: 14, marginBottom: 12 }, onClick: () => setPlaced(true) }, m(IconLock, { size: 16 }), "Pagar con Mercado Pago"),
          m("div", { style: { display: "flex", justifyContent: "center", gap: 7, flexWrap: "wrap" } },
            ["VISA", "MC", "AMEX", "OXXO", "PayPal"].map((x, i) => m("span", { key: i, style: { fontSize: 9.5, fontWeight: 700, letterSpacing: ".05em", background: "var(--cream)", color: "#1c1205", border: "1px solid var(--amate-line)", borderRadius: 3, padding: "4px 7px" } }, x))),
          m("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: 7, marginTop: 16, fontSize: 12, color: "var(--ink-faint)", letterSpacing: ".04em" } },
            m(IconLock, { size: 13 }), "Pago 100% seguro y encriptado"))
      )
    )
  );
}

function Row({ l, v, color }) {
  return m("div", { style: { display: "flex", justifyContent: "space-between", padding: "5px 0", fontSize: 15, fontFamily: "var(--font-serif)", color: "var(--ink-soft)" } },
    m("span", null, l), m("span", { style: { color: color || "var(--ink)", fontWeight: 600 } }, v));
}
const QB = { width: 34, height: 38, background: "none", border: "none", display: "grid", placeItems: "center", color: "var(--ink)", cursor: "pointer" };

Object.assign(window, { CartPage });