// Karavi Studio · Cart drawer (motion spring + AnimatePresence)
const Cart = ({ open, onClose, items, onRemove, onQty }) => {
  const subtotal = items.reduce((s, i) => s + i.p.price * i.qty, 0);
  const freeShippingRemaining = Math.max(0, 4000 - subtotal);

  return (
    <AnimatePresence>
      {open && (
        <>
          {/* Scrim */}
          <motion.div
            key="scrim"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.22 }}
            onClick={onClose}
            style={{
              position: "fixed", inset: 0, background: "rgba(45,40,30,.32)",
              zIndex: 90,
            }}
          />

          {/* Drawer */}
          <motion.aside
            key="drawer"
            initial={{ x: "100%" }}
            animate={{ x: 0 }}
            exit={{ x: "100%" }}
            transition={springs.drawer}
            role="dialog"
            aria-label="Shopping bag"
            style={{
              position: "fixed", top: 0, right: 0, bottom: 0,
              width: 460, maxWidth: "100vw",
              background: "var(--karavi-cream)", boxShadow: "var(--shadow-lg)",
              zIndex: 100, display: "flex", flexDirection: "column",
            }}
          >
            {/* Header */}
            <div style={{
              padding: "22px 28px", display: "flex", alignItems: "center",
              justifyContent: "space-between", borderBottom: "1px solid var(--line-soft)",
            }}>
              <div>
                <Eyebrow>
                  Your bag · {items.reduce((s, i) => s + i.qty, 0)} {items.reduce((s, i) => s + i.qty, 0) === 1 ? "piece" : "pieces"}
                </Eyebrow>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 24, marginTop: 4, color: "var(--fg-display)" }}>
                  The bag
                </div>
              </div>
              <motion.button
                onClick={onClose}
                whileHover={{ rotate: 90 }}
                transition={{ duration: 0.25 }}
                aria-label="Close cart"
                style={{ background: "none", border: 0, cursor: "pointer", padding: 4, color: "var(--fg-1)", minHeight: 44 }}
              >
                <Icon name="close" size={20}/>
              </motion.button>
            </div>

            {/* Free shipping bar */}
            <AnimatePresence mode="wait">
              {items.length > 0 && (
                <motion.div
                  key={freeShippingRemaining > 0 ? "remaining" : "earned"}
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.3 }}
                  style={{
                    overflow: "hidden",
                    background: freeShippingRemaining > 0 ? "var(--karavi-bone)" : "var(--status-success)",
                    color: freeShippingRemaining > 0 ? "var(--fg-2)" : "var(--karavi-cream)",
                  }}
                >
                  <div style={{ padding: "12px 28px", fontSize: 12, letterSpacing: ".02em" }}>
                    {freeShippingRemaining > 0
                      ? `Add ₹ ${freeShippingRemaining.toLocaleString("en-IN")} more for free shipping`
                      : "Free shipping applied"}
                  </div>
                  {freeShippingRemaining > 0 && (
                    <div style={{
                      height: 2, background: "rgba(74,56,41,.12)",
                      position: "relative",
                    }}>
                      <motion.div
                        initial={{ scaleX: 0 }}
                        animate={{ scaleX: Math.min(1, subtotal / 4000) }}
                        transition={{ duration: 0.5, ease: [0.22, 0.61, 0.36, 1] }}
                        style={{
                          height: "100%", background: "var(--karavi-clay)",
                          transformOrigin: "0 0",
                        }}
                      />
                    </div>
                  )}
                </motion.div>
              )}
            </AnimatePresence>

            {/* Items */}
            <div style={{ flex: 1, overflowY: "auto", padding: "8px 28px" }}>
              <AnimatePresence mode="popLayout">
                {items.length === 0 ? (
                  <motion.div
                    key="empty"
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.4 }}
                    style={{ padding: "80px 0", textAlign: "center" }}
                  >
                    <Eyebrow style={{ justifyContent: "center", display: "flex" }}>Empty for now</Eyebrow>
                    <div style={{
                      fontFamily: "var(--font-display)", fontStyle: "italic",
                      fontSize: 26, marginTop: 16, color: "var(--fg-display)", lineHeight: 1.3,
                    }}>
                      A small bag<br/>is a quiet bag.
                    </div>
                  </motion.div>
                ) : items.map((it, idx) => (
                  <motion.div
                    key={`${it.p.id}-${it.size}`}
                    layout
                    initial={{ opacity: 0, x: 30 }}
                    animate={{ opacity: 1, x: 0 }}
                    exit={{ opacity: 0, x: 30, transition: { duration: 0.2 } }}
                    transition={springs.gentle}
                    style={{
                      display: "grid", gridTemplateColumns: "84px 1fr auto", gap: 14,
                      padding: "16px 0", borderBottom: "1px solid var(--line-soft)",
                    }}
                  >
                    <div style={{
                      width: 84, height: 96, borderRadius: 10, overflow: "hidden",
                      background: `url(${it.p.image}) center/cover`, flexShrink: 0,
                    }}/>
                    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                      <Eyebrow style={{ fontSize: 10 }}>{it.p.type}</Eyebrow>
                      <div style={{ fontFamily: "var(--font-display)", fontSize: 17, lineHeight: 1.2, color: "var(--fg-display)" }}>
                        {it.p.name}
                      </div>
                      <div style={{ fontSize: 12, color: "var(--fg-3)" }}>{it.size}</div>
                      <div style={{ marginTop: 6, display: "flex", alignItems: "center", gap: 10 }}>
                        <div style={{
                          display: "flex", alignItems: "center",
                          border: "1px solid var(--line-medium)", borderRadius: 999, padding: 2,
                        }}>
                          <motion.button
                            onClick={() => onQty(idx, -1)}
                            whileTap={{ scale: 0.9 }}
                            aria-label="Decrease quantity"
                            style={{ background: "none", border: 0, padding: "4px 8px", cursor: "pointer", minHeight: 36 }}
                          >
                            <Icon name="minus" size={13}/>
                          </motion.button>
                          <motion.span
                            key={it.qty}
                            initial={{ scale: 1.4, color: "var(--karavi-clay)" }}
                            animate={{ scale: 1, color: "var(--fg-1)" }}
                            transition={{ duration: 0.3 }}
                            style={{ minWidth: 22, textAlign: "center", fontSize: 13, display: "inline-block" }}
                          >{it.qty}</motion.span>
                          <motion.button
                            onClick={() => onQty(idx, +1)}
                            whileTap={{ scale: 0.9 }}
                            aria-label="Increase quantity"
                            style={{ background: "none", border: 0, padding: "4px 8px", cursor: "pointer", minHeight: 36 }}
                          >
                            <Icon name="plus" size={13}/>
                          </motion.button>
                        </div>
                        <motion.button
                          onClick={() => onRemove(idx)}
                          whileHover={{ opacity: 0.6 }}
                          style={{
                            background: "none", border: 0, cursor: "pointer",
                            fontSize: 11, letterSpacing: ".18em", textTransform: "uppercase",
                            color: "var(--fg-3)", borderBottom: "1px solid var(--line-medium)",
                            padding: "2px 0", minHeight: 36,
                          }}
                        >Remove</motion.button>
                      </div>
                    </div>
                    <div style={{
                      fontFamily: "var(--font-body)", fontSize: 14,
                      color: "var(--fg-1)", textAlign: "right", paddingTop: 4,
                    }}>
                      ₹ {(it.p.price * it.qty).toLocaleString("en-IN")}
                    </div>
                  </motion.div>
                ))}
              </AnimatePresence>
            </div>

            {/* Footer */}
            <div style={{ padding: "20px 28px 28px", borderTop: "1px solid var(--line-soft)" }}>
              <div style={{
                display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6,
              }}>
                <span style={{ fontSize: 14, color: "var(--fg-2)" }}>Subtotal</span>
                <motion.span
                  key={subtotal}
                  initial={{ scale: 1.05 }}
                  animate={{ scale: 1 }}
                  transition={{ duration: 0.25 }}
                  style={{ fontFamily: "var(--font-display)", fontSize: 26, color: "var(--fg-display)" }}
                >
                  ₹ {subtotal.toLocaleString("en-IN")}
                </motion.span>
              </div>
              <div style={{ fontSize: 12, color: "var(--fg-3)", marginBottom: 20 }}>
                Shipping & taxes calculated at checkout.
              </div>
              <Button full disabled={items.length === 0} magnetic={items.length > 0}>
                Proceed to checkout →
              </Button>
              <motion.button
                onClick={onClose}
                whileHover={{ opacity: 0.7 }}
                style={{
                  display: "block", width: "100%", textAlign: "center", marginTop: 12,
                  fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase",
                  color: "var(--fg-3)", background: "none", border: 0, cursor: "pointer", minHeight: 44,
                }}
              >Continue browsing</motion.button>
            </div>
          </motion.aside>
        </>
      )}
    </AnimatePresence>
  );
};
window.Cart = Cart;