var Cart = function(props) {
  var items = props.items;
  var onUpdate = props.onUpdate;
  var onRemove = props.onRemove;
  var onClose = props.onClose;
  var onCheckout = props.onCheckout;
  var open = props.open;

  var _mounted = React.useState(false);
  var mounted = _mounted[0], setMounted = _mounted[1];

  React.useEffect(function() {
    if (open) {
      requestAnimationFrame(function() { setMounted(true); });
    } else {
      setMounted(false);
    }
  }, [open]);

  if (!open) return null;

  var subtotal = 0;
  for (var i = 0; i < items.length; i++) {
    subtotal += (items[i].p.price || 0) * items[i].qty;
  }

  var backdropStyle = {
    position: 'fixed', inset: 0, zIndex: 9999,
    background: mounted ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0)',
    backdropFilter: 'blur(4px)',
    transition: 'background .3s ease',
  };

  var drawerStyle = {
    position: 'fixed', top: 0, right: 0, bottom: 0,
    width: '420px', maxWidth: '92vw', zIndex: 10000,
    background: 'var(--bg)',
    borderLeft: '1px solid var(--border)',
    display: 'flex', flexDirection: 'column',
    transform: mounted ? 'translateX(0)' : 'translateX(100%)',
    transition: 'transform .3s ease',
  };

  var headerStyle = {
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    padding: '20px 24px',
    borderBottom: '1px solid var(--border)',
    flexShrink: 0,
  };

  var bodyStyle = {
    flex: 1, overflowY: 'auto', padding: '16px 24px',
    WebkitOverflowScrolling: 'touch',
  };

  var footerStyle = {
    borderTop: '1px solid var(--border)',
    padding: '20px 24px',
    flexShrink: 0,
  };

  var qtyBtnStyle = {
    width: '28px', height: '28px',
    background: 'transparent',
    border: '1px solid var(--border)',
    color: 'var(--text)',
    fontFamily: 'var(--font-mono)',
    fontSize: '14px',
    cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    transition: 'border-color .15s, color .15s',
  };

  var lineItems = [];
  for (var j = 0; j < items.length; j++) {
    (function(idx) {
      var item = items[idx];
      var img = item.p.images && item.p.images[0];
      var sizeName = null;
      if (item.sizeId && item.p.sizes) {
        sizeName = item.sizeId;
      }

      lineItems.push(
        <div key={idx} style={{
          display: 'flex', gap: '16px', padding: '16px 0',
          borderBottom: '1px solid var(--border)',
        }}>
          {img && (
            <div style={{
              width: '80px', height: '80px', flexShrink: 0,
              background: 'var(--bg-2)', overflow: 'hidden',
              border: '1px solid var(--border)',
            }}>
              <img src={img} alt={item.p.name} style={{
                width: '100%', height: '100%', objectFit: 'cover',
              }} />
            </div>
          )}
          {!img && (
            <div style={{
              width: '80px', height: '80px', flexShrink: 0,
              background: 'var(--bg-2)', display: 'grid', placeItems: 'center',
              border: '1px solid var(--border)',
              fontFamily: 'var(--font-display)', fontSize: '24px', color: 'var(--text-muted)',
            }}>?</div>
          )}
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: '18px',
              color: 'var(--text)', lineHeight: 1.2, letterSpacing: '0.02em',
              marginBottom: '4px',
            }}>{item.p.name}</div>
            {sizeName && (
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: '11px',
                color: 'var(--text-muted)', letterSpacing: '0.08em',
                textTransform: 'uppercase', marginBottom: '4px',
              }}>SIZE: {sizeName}</div>
            )}
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: '14px',
              color: 'var(--amber)', fontWeight: 700,
              marginBottom: '10px',
            }}>${item.p.price}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <button style={qtyBtnStyle}
                onClick={function() { onUpdate(idx, Math.max(1, item.qty - 1)); }}
                onMouseEnter={function(e) { e.currentTarget.style.borderColor = 'var(--amber)'; e.currentTarget.style.color = 'var(--amber)'; }}
                onMouseLeave={function(e) { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text)'; }}>
                &minus;
              </button>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: '14px',
                color: 'var(--text)', minWidth: '20px', textAlign: 'center',
              }}>{item.qty}</span>
              <button style={qtyBtnStyle}
                onClick={function() { onUpdate(idx, item.qty + 1); }}
                onMouseEnter={function(e) { e.currentTarget.style.borderColor = 'var(--amber)'; e.currentTarget.style.color = 'var(--amber)'; }}
                onMouseLeave={function(e) { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--text)'; }}>
                +
              </button>
              <button style={{
                background: 'transparent', border: 'none', cursor: 'pointer',
                fontFamily: 'var(--font-mono)', fontSize: '10px',
                color: 'var(--text-muted)', letterSpacing: '0.08em',
                textTransform: 'uppercase', marginLeft: '12px',
                padding: '4px 0', transition: 'color .15s',
              }}
                onClick={function() { onRemove(idx); }}
                onMouseEnter={function(e) { e.currentTarget.style.color = '#ff6b35'; }}
                onMouseLeave={function(e) { e.currentTarget.style.color = 'var(--text-muted)'; }}>
                REMOVE
              </button>
            </div>
          </div>
        </div>
      );
    })(j);
  }

  var emptyState = (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      justifyContent: 'center', padding: '64px 24px', textAlign: 'center',
    }}>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: '14px',
        color: 'var(--text-muted)', marginBottom: '20px',
        letterSpacing: '0.06em',
      }}>Cart is empty</div>
      <a href="/shop" style={{
        fontFamily: 'var(--font-mono)', fontSize: '13px',
        color: 'var(--amber)', textDecoration: 'none',
        letterSpacing: '0.08em', transition: 'color .15s',
        borderBottom: '1px solid var(--amber-dim)',
        paddingBottom: '2px',
      }}
        onMouseEnter={function(e) { e.currentTarget.style.borderBottomColor = 'var(--amber)'; }}
        onMouseLeave={function(e) { e.currentTarget.style.borderBottomColor = 'var(--amber-dim)'; }}>
        $ cd /shop
      </a>
    </div>
  );

  return ReactDOM.createPortal(
    <div>
      <div style={backdropStyle} onClick={onClose} />
      <div style={drawerStyle} onClick={function(e) { e.stopPropagation(); }}>
        <div style={headerStyle}>
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: '13px',
            letterSpacing: '0.16em', color: 'var(--amber)',
            textTransform: 'uppercase',
          }}>// CART</div>
          <div onClick={onClose} style={{
            cursor: 'pointer', color: 'var(--text-muted)',
            fontSize: '24px', lineHeight: 1, padding: '8px', margin: '-8px',
            transition: 'color .15s',
          }}
            onMouseEnter={function(e) { e.currentTarget.style.color = 'var(--amber)'; }}
            onMouseLeave={function(e) { e.currentTarget.style.color = 'var(--text-muted)'; }}>
            &times;
          </div>
        </div>

        <div style={bodyStyle}>
          {items.length === 0 ? emptyState : lineItems}
        </div>

        {items.length > 0 && (
          <div style={footerStyle}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              marginBottom: '16px',
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: '13px',
                color: 'var(--text-2)', letterSpacing: '0.08em',
                textTransform: 'uppercase',
              }}>Subtotal</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: '20px',
                fontWeight: 700, color: 'var(--amber)',
              }}>${subtotal.toFixed(2)}</span>
            </div>
            <button onClick={onCheckout} style={{
              width: '100%', padding: '16px 24px',
              background: 'var(--amber)', color: 'var(--bg)',
              border: 'none', borderRadius: '2px',
              fontFamily: 'var(--font-mono)', fontSize: '14px', fontWeight: 700,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              cursor: 'pointer', transition: 'background .2s',
            }}
              onMouseEnter={function(e) { e.currentTarget.style.background = 'var(--deep-amber)'; }}
              onMouseLeave={function(e) { e.currentTarget.style.background = 'var(--amber)'; }}>
              CHECKOUT &rarr;
            </button>
          </div>
        )}
      </div>
    </div>,
    document.getElementById('overlays')
  );
};

window.Cart = Cart;