/* eslint-disable */
function CartDrawer({ open, items, onClose, onRemove, onQty, subtotal: subProp }) {
  const subtotal = subProp != null ? subProp : items.reduce((s, i) => s + (i.unitPrice || i.price) * i.qty, 0);
  const threshold = (window.DROP_CONFIG && window.DROP_CONFIG.freeShipThreshold) || 75;
  const freeShipDelta = Math.max(0, threshold - subtotal);
  const progress = Math.min(100, (subtotal / threshold) * 100);
  const goCheckout = async () => {
    if (window.dropTrack) window.dropTrack("begin_checkout", { value: subtotal, items });
    if (window.Shopify?.isConfigured?.()) {
      const url = await window.Shopify.cart.checkoutUrl();
      if (url) { window.location.href = url; return; }
    }
    window.location.href = "cart.html";
  };
  return (
    <React.Fragment>
      {open && <div className="cart-scrim" onClick={onClose}></div>}
      <aside className={"cart " + (open ? "open" : "")}>
        <div className="cart-head">
          <div className="cart-title">YOUR BAG ({items.length})</div>
          <button className="icon-btn" onClick={onClose} aria-label="Close">×</button>
        </div>
        <div className="cart-ship">
          {freeShipDelta > 0 ? (
            <div className="cart-ship-text">Add <strong>${freeShipDelta.toFixed(0)}</strong> more for <strong>free shipping</strong></div>
          ) : (
            <div className="cart-ship-text done">✓ You unlocked free shipping</div>
          )}
          <div className="cart-bar"><div className="cart-bar-fill" style={{width: progress + "%"}}></div></div>
        </div>
        <div className="cart-items">
          {items.length === 0 && <div className="cart-empty">Your bag is empty.</div>}
          {items.map((i, idx) => {
            const href = i.handle ? "product.html?handle=" + i.handle : null;
            const variant = i.variantTitle && i.variantTitle !== "Default Title" ? i.variantTitle : null;
            return (
              <div key={idx} className="cart-item">
                {href ? (
                  <a className="cart-img" href={href} style={{backgroundImage:`url(${i.img})`}} aria-label={i.name}></a>
                ) : (
                  <div className="cart-img" style={{backgroundImage:`url(${i.img})`}}></div>
                )}
                <div className="cart-info">
                  {href ? <a className="cart-name" href={href}>{i.name}</a> : <div className="cart-name">{i.name}</div>}
                  {variant && <div className="cart-variant">{variant}</div>}
                  {i.meta && <div className="cart-meta">{i.meta}</div>}
                  <div className="cart-row">
                    <div className="qty small">
                      <button onClick={() => onQty && onQty(idx, i.qty - 1)} aria-label="Decrease quantity">−</button>
                      <span>{i.qty}</span>
                      <button onClick={() => onQty && onQty(idx, i.qty + 1)} aria-label="Increase quantity">+</button>
                    </div>
                    <span className="cart-price">${((i.unitPrice || i.price) * i.qty).toFixed(0)}</span>
                  </div>
                  <button className="cart-remove" onClick={() => onRemove(idx)}>Remove</button>
                </div>
              </div>
            );
          })}
        </div>
        <div className="cart-upsell">
          <div className="cart-upsell-head">FREQUENTLY ADDED</div>
          <div className="cart-upsell-row">
            <div className="cart-upsell-img" style={{backgroundImage:"url(assets/product-amelia-ring.jpg)"}}></div>
            <div className="cart-upsell-info">
              <div className="cart-name">Amelia Stacking Ring</div>
              <div className="cart-meta">Gold · $24</div>
            </div>
            <button className="btn-mini">+ ADD</button>
          </div>
        </div>
        {items.length > 0 && (
          <div className="cart-foot">
            <div className="cart-subtotal">
              <span>Subtotal</span><span className="price">${subtotal.toFixed(0)}</span>
            </div>
            <div className="cart-vat">Shipping & taxes calculated at checkout</div>
            <button className="btn-primary btn-block" onClick={goCheckout}>CHECKOUT — ${subtotal.toFixed(0)}</button>
            {window.DROP_CONFIG && window.DROP_CONFIG.enableShopPay && (
              <button className="shoppay" onClick={goCheckout} aria-label="Shop Pay">Shop <strong>Pay</strong></button>
            )}
            <button className="btn-link" onClick={onClose}>Continue shopping</button>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}
window.CartDrawer = CartDrawer;