const CartDrawer = ({ cart, isOpen, onClose, setCart, setPage, lang }) => {
  const t = (en, id) => lang === "id" ? id : en;

  const updateQty = (key, delta) => {
    setCart(prev => prev.map(item => item.cartKey === key
      ? { ...item, qty: Math.max(1, item.qty + delta) }
      : item
    ));
  };

  const remove = (key) => setCart(prev => prev.filter(item => item.cartKey !== key));
  const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
  const count = cart.reduce((sum, item) => sum + item.qty, 0);

  return (
    <React.Fragment>
      <div onClick={onClose} style={{
        position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)",
        zIndex: 1100, opacity: isOpen ? 1 : 0,
        pointerEvents: isOpen ? "auto" : "none",
        transition: "opacity 0.3s"
      }} />
      <div style={{
        position: "fixed", top: 0, right: 0, bottom: 0, width: 420,
        background: "#f9f8f6", zIndex: 1200,
        transform: isOpen ? "translateX(0)" : "translateX(100%)",
        transition: "transform 0.35s cubic-bezier(0.4,0,0.2,1)",
        display: "flex", flexDirection: "column",
        boxShadow: "-8px 0 40px rgba(0,0,0,0.12)"
      }}>
        {/* Header */}
        <div style={{ padding: "24px 28px", borderBottom: "1px solid #e8e6e2", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <h2 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 24, fontWeight: 400, color: "#111", margin: 0 }}>
              {t("Your Cart", "Keranjang")}
            </h2>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#999", margin: "4px 0 0", letterSpacing: "0.06em" }}>
              {count} {t("item(s)", "produk")}
            </p>
          </div>
          <button onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer", padding: 4 }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#111" strokeWidth="1.5" strokeLinecap="round">
              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          </button>
        </div>

        {/* Items */}
        <div style={{ flex: 1, overflowY: "auto", padding: "0 28px" }}>
          {cart.length === 0 ? (
            <div style={{ textAlign: "center", padding: "80px 0" }}>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: "#bbb" }}>
                {t("Your cart is empty", "Keranjang masih kosong")}
              </p>
              <button onClick={() => { onClose(); setPage("catalog"); }} style={{
                marginTop: 20, background: "#111", border: "none", cursor: "pointer",
                fontFamily: "'DM Sans', sans-serif", fontSize: 10, letterSpacing: "0.16em",
                textTransform: "uppercase", color: "#f9f8f6", padding: "12px 28px"
              }}>
                {t("Start Shopping", "Mulai Belanja")}
              </button>
            </div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column" }}>
              {cart.map(item => (
                <div key={item.cartKey} style={{ padding: "20px 0", borderBottom: "1px solid #e8e6e2", display: "flex", gap: 16 }}>
                  <div style={{ width: 80, height: 80, background: "#f0efed", flexShrink: 0, overflow: "hidden" }}>
                    <img src={item.image} alt={item.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
                      <h3 style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 17, fontWeight: 400, color: "#111", margin: 0, lineHeight: 1.2 }}>
                        {item.name}
                      </h3>
                      <button onClick={() => remove(item.cartKey)} style={{ background: "none", border: "none", cursor: "pointer", color: "#ccc", fontSize: 16, lineHeight: 1, flexShrink: 0 }}>
                        x
                      </button>
                    </div>
                    {(() => {
                      // Gabung opsi jadi satu baris; buang warna kalau sama dgn varian (hindari dobel)
                      const sameCV = item.selectedColor && item.selectedVariant
                        && String(item.selectedColor).toLowerCase().trim() === String(item.selectedVariant).toLowerCase().trim();
                      const opts = [
                        item.selectedVariant,
                        sameCV ? null : item.selectedColor,
                        item.selectedSize,
                      ].filter(Boolean);
                      return opts.length > 0 ? (
                        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: "#777", margin: "4px 0 0", fontWeight: 500 }}>
                          {opts.join(" · ")}
                        </p>
                      ) : null;
                    })()}
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 12 }}>
                      <div style={{ display: "flex", alignItems: "center", border: "1px solid #e8e6e2" }}>
                        <button onClick={() => updateQty(item.cartKey, -1)} style={{ background: "none", border: "none", cursor: "pointer", padding: "4px 10px", color: "#666" }}>-</button>
                        <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, padding: "4px 6px", minWidth: 20, textAlign: "center" }}>{item.qty}</span>
                        <button onClick={() => updateQty(item.cartKey, 1)} style={{ background: "none", border: "none", cursor: "pointer", padding: "4px 10px", color: "#666" }}>+</button>
                      </div>
                      <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, fontWeight: 500, color: "#111" }}>
                        {formatPrice(item.price * item.qty)}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Footer */}
        {cart.length > 0 && (
          <div style={{ padding: "24px 28px", borderTop: "1px solid #e8e6e2" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#888" }}>{t("Subtotal", "Subtotal")}</span>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#888" }}>{formatPrice(total)}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 20 }}>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#888" }}>{t("Shipping", "Ongkir")}</span>
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: "#4a9d6f" }}>{t("FREE", "GRATIS")}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 24 }}>
              <span style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 20, color: "#111" }}>{t("Total", "Total")}</span>
              <span style={{ fontFamily: "'Cormorant Garant', serif", fontSize: 20, color: "#111" }}>{formatPrice(total)}</span>
            </div>
            <button onClick={() => { onClose(); setPage("checkout"); }} style={{
              width: "100%", padding: "16px", background: "#111", border: "none", cursor: "pointer",
              fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.18em",
              textTransform: "uppercase", color: "#f9f8f6", fontWeight: 600, marginBottom: 10
            }}>
              {t("Checkout", "Checkout")}
            </button>
            <button onClick={onClose} style={{
              width: "100%", padding: "12px", background: "none", border: "1px solid #e8e6e2", cursor: "pointer",
              fontFamily: "'DM Sans', sans-serif", fontSize: 11, letterSpacing: "0.12em",
              textTransform: "uppercase", color: "#999"
            }}>
              {t("Continue Shopping", "Lanjut Belanja")}
            </button>
          </div>
        )}
      </div>
    </React.Fragment>
  );
};

Object.assign(window, { CartDrawer });