/* =========================================================================
   Morning Mob — cart drawer
   Right-side slide-in, hairline-bordered, minimal line items, +/- steppers.
   ========================================================================= */

const qtyBtn = { width: 28, height: 28, border: '1px solid var(--hairline)', background: 'none', color: 'var(--ink)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 };

/* Thumbnail for a cart line — front view of the chosen colourway. */
const itemThumb = (it) => (window.MM_TEE_VIEWS && it.colour && MM_TEE_VIEWS[it.colour] && MM_TEE_VIEWS[it.colour][0]) || (it.product.card && it.product.card.front);

function CartDrawer({ open, items, onClose, onQty, onCheckout, onShop }) {
  const subtotal = items.reduce((s, i) => s + i.product.price * i.qty, 0);
  return (
    <React.Fragment>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 60,
        background: 'rgba(0,0,0,0.18)', opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
        transition: 'opacity 300ms var(--ease-out)' }} />
      <aside style={{ position: 'fixed', top: 0, right: 0, bottom: 0, width: 420, maxWidth: '92vw', zIndex: 61,
        background: 'var(--canvas)', borderLeft: '1px solid var(--hairline)', display: 'flex', flexDirection: 'column',
        transform: open ? 'translateX(0)' : 'translateX(100%)', transition: 'transform 300ms var(--ease-out)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '24px 24px 16px', borderBottom: '1px solid var(--hairline)' }}>
          <Eyebrow color="var(--ink)">Shopping bag ({items.reduce((s, i) => s + i.qty, 0)})</Eyebrow>
          <button onClick={onClose} aria-label="Close" style={{ width: 40, height: 40, marginRight: -12, background: 'none', border: 'none', color: 'var(--ink)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="x" /></button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: 24 }}>
          {items.length === 0 ? (
            <div style={{ paddingTop: 24 }}>
              <p style={{ color: 'var(--muted)' }}>Your bag is empty.</p>
              <button onClick={() => { onClose(); onShop(); }} style={{ marginTop: 16, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400,
                letterSpacing: '2px', textTransform: 'uppercase', color: 'var(--ink)', background: 'none', border: 'none', borderBottom: '1px solid var(--ink)', padding: '0 0 4px', cursor: 'pointer' }}>Continue shopping</button>
            </div>
          ) : items.map((it) => (
            <div key={it.product.id + (it.size || '') + (it.colour || '')} style={{ display: 'flex', gap: 16, paddingBottom: 24, marginBottom: 24, borderBottom: '1px solid var(--hairline)' }}>
              <div style={{ width: 72, flex: 'none' }}><Photo id={'cart-' + it.product.id + '-' + (it.colour || '')} src={itemThumb(it)} label="" /></div>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 10 }}>
                  <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 16, fontWeight: 400, color: 'var(--ink)', margin: 0 }}>{it.product.name}</h3>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300, color: 'var(--body)', whiteSpace: 'nowrap' }}>{money(it.product.price)}</span>
                </div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 300, letterSpacing: '0.5px', color: 'var(--muted)', marginTop: 4 }}>{[it.colour, it.size && 'Size ' + it.size].filter(Boolean).join(' · ')}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 12 }}>
                  <button onClick={() => onQty(it.product.id, it.size, it.colour, -1)} style={qtyBtn} aria-label="Decrease"><Icon name="minus" size={14} /></button>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 300, color: 'var(--ink)' }}>{it.qty}</span>
                  <button onClick={() => onQty(it.product.id, it.size, it.colour, 1)} style={qtyBtn} aria-label="Increase"><Icon name="plus" size={14} /></button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {items.length > 0 && (
          <div style={{ borderTop: '1px solid var(--hairline)', padding: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
              <Eyebrow color="var(--ink)">Subtotal</Eyebrow>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 300, color: 'var(--ink)' }}>{money(subtotal)}</span>
            </div>
            <button onClick={onCheckout} style={{ width: '100%', height: 48, background: 'var(--ink)', color: '#fff', border: 'none',
              fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 400, letterSpacing: '2px', textTransform: 'uppercase', cursor: 'pointer' }}>Register interest</button>
            <p style={{ textAlign: 'center', color: 'var(--muted)', fontSize: 11, marginTop: 12, letterSpacing: '0.5px' }}>No payment here — register your interest and we'll be in touch.</p>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}
Object.assign(window, { CartDrawer, itemThumb });