/* Cart drawer */

const CartDrawer = ({ open, onClose, items, updateQty, removeItem, subtotal, discount, total, freeShip, onCheckout, promoCode, setPromoCode, applyPromo, promoApplied }) => {
  return (
    <>
      <div className={`drawer-overlay ${open ? 'open' : ''}`} onClick={onClose} />
      <aside className={`drawer ${open ? 'open' : ''}`} aria-label="Cart">
        <div className="drawer-header">
          <h3>Your cart {items.length > 0 && <span style={{ fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--ink-500)', fontWeight: 500 }}>· {items.reduce((s, i) => s + i.qty, 0)} items</span>}</h3>
          <button className="drawer-close" onClick={onClose} aria-label="Close cart"><Icon.Close /></button>
        </div>

        <div className="drawer-body">
          {items.length === 0 ? (
            <div className="drawer-empty">
              <div className="ic"><Icon.Cart size={32} /></div>
              <h4>Your cart is empty.</h4>
              <p>Start your daily golden ritual.</p>
              <button className="btn btn-primary btn-sm" style={{ marginTop: 20 }} onClick={onClose}>Continue shopping</button>
            </div>
          ) : (
            <>
              {items.map(item => (
                <div key={item.packId} className="cart-item">
                  <div className="ci-img"><img src="assets/product-bottle-box.jpeg" style={{ mixBlendMode: 'multiply' }} alt="" /></div>
                  <div>
                    <h5>{item.name}</h5>
                    <div className="ci-sub">200ml · cold-pressed</div>
                    <div className="qty-stepper">
                      <button onClick={() => updateQty(item.packId, item.qty - 1)}>−</button>
                      <span className="num">{item.qty}</span>
                      <button onClick={() => updateQty(item.packId, item.qty + 1)}>+</button>
                    </div>
                  </div>
                  <div className="ci-right">
                    <div className="ci-price">₹{(item.price * item.qty).toLocaleString('en-IN')}</div>
                    <button className="ci-remove" onClick={() => removeItem(item.packId)}>Remove</button>
                  </div>
                </div>
              ))}

              {/* free shipping bar */}
              <div style={{ background: 'var(--cream-100)', borderRadius: 14, padding: 14, marginTop: 18, fontSize: 13, color: 'var(--brown-800)' }}>
                {subtotal >= 1500 ? (
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Icon.Truck /> <b>Free shipping unlocked</b> · enjoy.
                  </div>
                ) : (
                  <>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                      <span>Add <b>₹{(1500 - subtotal).toLocaleString('en-IN')}</b> for free shipping</span>
                    </div>
                    <div style={{ height: 6, background: 'rgba(120,60,20,0.1)', borderRadius: 3, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: `${Math.min(100, (subtotal / 1500) * 100)}%`, background: 'var(--orange-500)', transition: 'width 0.3s' }} />
                    </div>
                  </>
                )}
              </div>

              <div className="drawer-promo">
                <input
                  placeholder={promoApplied ? "ORLINA10 applied ✓" : "Promo code"}
                  value={promoCode}
                  onChange={e => setPromoCode(e.target.value.toUpperCase())}
                  disabled={promoApplied}
                />
                <button onClick={applyPromo} disabled={promoApplied}>
                  {promoApplied ? 'Applied' : 'Apply'}
                </button>
              </div>

              <div className="drawer-summary">
                <div className="row"><span>Subtotal</span><span>₹{subtotal.toLocaleString('en-IN')}</span></div>
                {discount > 0 && <div className="row" style={{ color: 'var(--leaf-600)' }}><span>Discount (ORLINA10)</span><span>−₹{discount.toLocaleString('en-IN')}</span></div>}
                <div className="row"><span>Shipping</span><span>{freeShip ? 'Free' : '₹49'}</span></div>
                <div className="row total"><span>Total</span><b>₹{total.toLocaleString('en-IN')}</b></div>
              </div>
            </>
          )}
        </div>

        {items.length > 0 && (
          <div className="drawer-footer">
            <button className="btn btn-dark checkout-btn" onClick={onCheckout}>
              Secure checkout · ₹{total.toLocaleString('en-IN')} <Icon.Arrow />
            </button>
            <div className="accepted">
              <Icon.Shield size={14} /> UPI · GPay · PhonePe · Paytm · COD
            </div>
          </div>
        )}
      </aside>
    </>
  );
};

window.CartDrawer = CartDrawer;