// CartDrawer — slide-in cart for The Little Scoop.
const CD = window.TheLittleScoopDesignSystem_cee583;
const CD_THEME_BG = {
  spring: "linear-gradient(135deg,#DCF2BE,#B6E27F)", summer: "linear-gradient(135deg,#FFEFB8,#FFDC6B)",
  ocean: "linear-gradient(135deg,#C5F1F6,#86E0EA)", berry: "linear-gradient(135deg,#FFD8E1,#FF9DB3)",
  cosmic: "linear-gradient(135deg,#E4D8F8,#C3A9EE)",
};

function CartDrawer({ open, items, onClose, onQty, onRemove }) {
  const { Button, QuantityStepper } = CD;
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const count = items.reduce((s, it) => s + it.qty, 0);
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(42,36,64,.4)", opacity: open ? 1 : 0,
        pointerEvents: open ? "auto" : "none", transition: "opacity var(--dur-med)", zIndex: 40 }} />
      <aside style={{ position: "fixed", top: 0, right: 0, height: "100%", width: "min(420px, 92vw)", background: "#fff",
        boxShadow: "var(--shadow-xl)", zIndex: 50, transform: open ? "translateX(0)" : "translateX(100%)",
        transition: "transform var(--dur-slow) var(--ease-out)", display: "flex", flexDirection: "column" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "var(--space-5)", borderBottom: "2px solid var(--border-soft)" }}>
          <h2 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-xl)", color: "var(--text-strong)" }}>Your cart {count > 0 && `(${count})`}</h2>
          <button onClick={onClose} aria-label="Close cart" style={{ width: 40, height: 40, borderRadius: "50%", border: "2px solid var(--border-soft)", background: "var(--white)", cursor: "pointer", fontSize: 18, color: "var(--text-strong)" }}>✕</button>
        </div>

        <div style={{ flex: 1, overflowY: "auto", padding: "var(--space-4) var(--space-5)" }}>
          {items.length === 0 ? (
            <div style={{ textAlign: "center", padding: "var(--space-8) 0", color: "var(--text-muted)" }}>
              <div style={{ fontSize: 40, marginBottom: 8 }}>🧺</div>
              <p style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-lg)", color: "var(--text-strong)", margin: "0 0 4px" }}>Your cart is empty</p>
              <p style={{ margin: 0, fontSize: "var(--text-sm)" }}>Time to scoop something fun!</p>
            </div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-4)" }}>
              {items.map((it) => (
                <div key={it.key} style={{ display: "flex", gap: "var(--space-3)" }}>
                  <div style={{ width: 70, height: 70, flex: "none", borderRadius: "var(--radius-md)", background: CD_THEME_BG[it.theme] || CD_THEME_BG.berry }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <p style={{ margin: "0 0 2px", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-sm)", color: "var(--text-strong)", lineHeight: 1.25 }}>{it.title}</p>
                    <p style={{ margin: "0 0 8px", fontSize: "var(--text-sm)", color: "#000", fontWeight: 800 }}>${it.price.toFixed(2)}</p>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      <QuantityStepper size="sm" value={it.qty} onChange={(v) => onQty(it.key, v)} accent="#94d1c5" />
                      <button onClick={() => onRemove(it.key)} style={{ border: "none", background: "none", cursor: "pointer", color: "var(--text-muted)", fontSize: "var(--text-xs)", fontWeight: 700, textDecoration: "underline" }}>Remove</button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {items.length > 0 && (
          <div style={{ borderTop: "2px solid var(--border-soft)", padding: "var(--space-5)", background: "var(--white)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "var(--space-4)" }}>
              <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, color: "var(--text-body)" }}>Subtotal</span>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--text-xl)", color: "var(--text-strong)" }}>${subtotal.toFixed(2)}</span>
            </div>
            <Button variant="primary" size="lg" block style={{ background: "#94d1c5", color: "var(--ink-900)" }}>Checkout</Button>
            <p style={{ textAlign: "center", margin: "var(--space-3) 0 0", fontSize: "var(--text-xs)", color: "var(--text-muted)" }}>Free shipping over $35 · Ships in 2–3 days</p>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { CartDrawer });