// Cart.jsx — slide-in `tail -f cart.log`
const Cart = ({ open, items, onClose, onUpdateQty, onClearAll, onCheckout, checkingOut }) => {
  if (!open) return null;
  const total = items.reduce((s, i) => {
    var base = i.p.price * i.qty;
    if (i.customizations) {
      if (i.customizations.rankPatch) base += 5 * i.qty;
      if (i.customizations.handlePrint) base += 8 * i.qty;
    }
    return s + base;
  }, 0);
  return (
    <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.7)', zIndex: 80 }} onClick={onClose}>
      <aside onClick={(e) => e.stopPropagation()} style={{
        position: 'absolute', top: 0, right: 0, height: '100%', width: 460, background: '#0A0A0A',
        borderLeft: '1px solid #00FF41', boxShadow: '0 0 32px rgba(0,255,65,0.15)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{ padding: '14px 18px', borderBottom: '1px solid rgba(255,255,255,0.1)', display: 'flex', alignItems: 'center' }}>
          <span style={{ fontSize: 11, color: '#00FF41', letterSpacing: '0.2em' }}>$ tail -f /var/log/cart.log</span>
          {items.length > 0 && (
            <button onClick={onClearAll} style={{ marginLeft: 'auto', background: 'transparent', border: '1px solid #FF3344', color: '#FF3344', padding: '3px 8px', fontFamily: 'inherit', fontSize: 10, letterSpacing: '0.15em', cursor: 'pointer' }}>[ rm -rf ]</button>
          )}
          <button onClick={onClose} style={{ marginLeft: items.length > 0 ? 8 : 'auto', background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: '#B8B8B8', padding: '3px 8px', fontFamily: 'inherit', fontSize: 10, letterSpacing: '0.15em', cursor: 'pointer' }}>[ X ]</button>
        </div>
        <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
          {items.length === 0 ? (
            <div style={{ color: '#A0A0A0', fontSize: 12, lineHeight: 1.8 }}>
              <div>{'>'} cart empty.</div>
              <div>{'>'} no payload staged.</div>
              <div style={{ marginTop: 14, color: '#7A7A7A' }}>// drink responsibly. pwn responsibly.</div>
            </div>
          ) : items.map((it, idx) => (
            <div key={idx} style={{ paddingBottom: 12, marginBottom: 12, borderBottom: '1px dashed rgba(255,255,255,0.12)', display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              {(() => { var d = it.designId && window.OBC_MERCH_DESIGN_MAP ? window.OBC_MERCH_DESIGN_MAP[it.designId] : null; var ac = d ? d.accent : (it.p.accent || '#00FF41'); var gl = d ? d.glyph : (it.p.glyph || '>'); return (<div style={{ width: 28, height: 28, border: '1px solid ' + ac, color: ac, display: 'grid', placeItems: 'center', fontSize: 13, fontWeight: 800 }}>{gl}</div>); })()}
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, color: (it.designId && window.OBC_MERCH_DESIGN_MAP && window.OBC_MERCH_DESIGN_MAP[it.designId] ? window.OBC_MERCH_DESIGN_MAP[it.designId].accent : it.p.accent) || '#00FF41', fontWeight: 700, letterSpacing: '0.06em' }}>{it.p.name}</div>
                {it.p.category === 'merch' ? (
                  <React.Fragment>
                    {it.designId && window.OBC_MERCH_DESIGN_MAP && window.OBC_MERCH_DESIGN_MAP[it.designId] && <div style={{ fontSize: 10, color: '#A0A0A0', letterSpacing: '0.15em', marginTop: 3 }}>DESIGN: {window.OBC_MERCH_DESIGN_MAP[it.designId].label}</div>}
                    {it.sizeId && <div style={{ fontSize: 10, color: '#A0A0A0', letterSpacing: '0.15em', marginTop: 2 }}>SIZE: {it.sizeId}</div>}
                    {it.customizations && it.customizations.rankPatch && <div style={{ fontSize: 9, color: '#FFD700', letterSpacing: '0.12em', marginTop: 3 }}>+ RANK PATCH (+$5)</div>}
                    {it.customizations && it.customizations.handlePrint && <div style={{ fontSize: 9, color: '#FFD700', letterSpacing: '0.12em', marginTop: 2 }}>+ HANDLE PRINT (+$8)</div>}
                  </React.Fragment>
                ) : (
                  <div style={{ fontSize: 10, color: '#A0A0A0', letterSpacing: '0.15em', marginTop: 3 }}>{it.grind}</div>
                )}
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <button onClick={() => onUpdateQty(idx, -1)} style={{ background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: '#B8B8B8', fontFamily: 'inherit', fontSize: 12, cursor: 'pointer', padding: '2px 8px', lineHeight: '18px' }}>−</button>
                <span style={{ fontSize: 12, color: '#FFF', minWidth: 20, textAlign: 'center' }}>{String(it.qty).padStart(2,'0')}</span>
                <button onClick={() => onUpdateQty(idx, 1)} style={{ background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: '#B8B8B8', fontFamily: 'inherit', fontSize: 12, cursor: 'pointer', padding: '2px 8px', lineHeight: '18px' }}>+</button>
                <span style={{ fontSize: 13, color: '#FFF', minWidth: 40, textAlign: 'right' }}>${(it.p.price + (it.customizations && it.customizations.rankPatch ? 5 : 0) + (it.customizations && it.customizations.handlePrint ? 8 : 0)) * it.qty}</span>
                <button onClick={() => onUpdateQty(idx, -it.qty)} style={{ background: 'transparent', border: 'none', color: '#FF3344', fontFamily: 'inherit', fontSize: 9, letterSpacing: '0.12em', cursor: 'pointer', padding: '0 4px' }}>[rm]</button>
              </div>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', padding: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, letterSpacing: '0.18em', color: '#A0A0A0', marginBottom: 6 }}><span>SUBTOTAL</span><span style={{ color: '#FFF' }}>${total}</span></div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, letterSpacing: '0.18em', color: '#A0A0A0', marginBottom: 12 }}><span>SHIPPING</span><span style={{ color: '#FFF' }}>$5</span></div>
          <button disabled={items.length === 0 || checkingOut} onClick={onCheckout} style={{
            width: '100%', background: (items.length && !checkingOut) ? '#00FF41' : 'transparent', color: (items.length && !checkingOut) ? '#000' : '#7A7A7A',
            border: `1px solid ${(items.length && !checkingOut) ? '#00FF41' : '#7A7A7A'}`, padding: '14px', fontFamily: 'inherit',
            fontWeight: 800, letterSpacing: '0.2em', fontSize: 12, cursor: (items.length && !checkingOut) ? 'pointer' : 'not-allowed', borderRadius: 2,
          }}>
            {checkingOut ? '> redirecting to checkout...' : `> ./checkout — TOTAL $${total + (items.length ? 5 : 0)}`}
          </button>
        </div>
      </aside>
    </div>
  );
};

window.Cart = Cart;