// Cart drawer + toast

function CartDrawer({ open, onClose, items, onRemove, onQty }) {
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  return (
    <>
      <div onClick={onClose} style={{
        position: 'fixed', inset: 0, zIndex: 90,
        background: 'rgba(0,0,0,0.65)', backdropFilter: 'blur(6px)',
        opacity: open ? 1 : 0,
        pointerEvents: open ? 'auto' : 'none',
        transition: 'opacity 280ms',
      }}/>
      <aside style={{
        position: 'fixed', top: 0, right: 0, bottom: 0, zIndex: 100,
        width: 'min(440px, 100vw)',
        background: '#111111',
        borderLeft: '1px solid rgba(46,204,113,0.2)',
        transform: open ? 'translateX(0)' : 'translateX(100%)',
        transition: 'transform 360ms cubic-bezier(.2,.7,.2,1)',
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          padding: '22px 24px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          borderBottom: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div>
            <div style={{
              fontFamily: 'ui-monospace, monospace', fontSize: 11,
              color: '#2ECC71', letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>Tu carro</div>
            <div style={{
              fontFamily: '"Sora", sans-serif', fontWeight: 700, fontSize: 22,
              color: '#fff', marginTop: 2,
            }}>{items.length} producto{items.length !== 1 ? 's' : ''}</div>
          </div>
          <button onClick={onClose} style={{
            width: 36, height: 36, borderRadius: 999,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.1)',
            color: '#fff', cursor: 'pointer',
          }}>×</button>
        </div>

        <div style={{ flex: 1, overflowY: 'auto', padding: '12px 24px' }}>
          {items.length === 0 ? (
            <div style={{
              padding: '60px 0', textAlign: 'center',
              color: 'rgba(255,255,255,0.5)',
              fontFamily: 'Inter, sans-serif', fontSize: 14,
            }}>Tu carro está vacío. Agregá algo lindo.</div>
          ) : items.map((it) => (
            <div key={it.id} style={{
              display: 'grid', gridTemplateColumns: '70px 1fr auto', gap: 14,
              padding: '14px 0',
              borderBottom: '1px solid rgba(255,255,255,0.06)',
              alignItems: 'center',
            }}>
              <div style={{ width: 70, height: 70, borderRadius: 10, overflow: 'hidden', background: '#1c1c1c' }}>
                <window.ProductGlyph variant={it.swatch} label={it.category} />
              </div>
              <div>
                <div style={{
                  fontFamily: '"Sora", sans-serif', fontWeight: 600, fontSize: 14,
                  color: '#fff', marginBottom: 2,
                }}>{it.name}</div>
                <div style={{
                  fontFamily: 'ui-monospace, monospace', fontSize: 10,
                  color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em',
                  textTransform: 'uppercase', marginBottom: 8,
                }}>{it.brand}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <button onClick={() => onQty(it.id, it.qty - 1)} style={qtyBtn}>−</button>
                  <span style={{ minWidth: 20, textAlign: 'center', color: '#fff', fontFamily: 'ui-monospace, monospace', fontSize: 13 }}>{it.qty}</span>
                  <button onClick={() => onQty(it.id, it.qty + 1)} style={qtyBtn}>+</button>
                  <button onClick={() => onRemove(it.id)} style={{
                    marginLeft: 8, background: 'none', border: 'none',
                    color: 'rgba(255,255,255,0.45)', cursor: 'pointer',
                    fontFamily: 'Inter, sans-serif', fontSize: 12, textDecoration: 'underline',
                  }}>Quitar</button>
                </div>
              </div>
              <div style={{
                fontFamily: '"Sora", sans-serif', fontWeight: 700, fontSize: 14,
                color: '#fff', whiteSpace: 'nowrap',
              }}>{window.fmtCLP(it.price * it.qty)}</div>
            </div>
          ))}
        </div>

        {items.length > 0 && (
          <div style={{ padding: 24, borderTop: '1px solid rgba(255,255,255,0.08)', background: '#0d0d0d' }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
              marginBottom: 14,
            }}>
              <span style={{ color: 'rgba(255,255,255,0.6)', fontFamily: 'Inter, sans-serif', fontSize: 14 }}>Subtotal</span>
              <span style={{ fontFamily: '"Sora", sans-serif', fontWeight: 700, fontSize: 24, color: '#fff' }}>
                {window.fmtCLP(subtotal)}
              </span>
            </div>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 12,
              color: subtotal >= 50000 ? '#2ECC71' : 'rgba(255,255,255,0.55)',
              marginBottom: 14,
            }}>
              {subtotal >= 50000
                ? '✓ Envío gratis incluido'
                : `Te faltan ${window.fmtCLP(50000 - subtotal)} para envío gratis`}
            </div>
            <button style={{
              width: '100%', background: '#2ECC71', color: '#0a0a0a',
              border: 'none', borderRadius: 12, padding: '16px',
              fontFamily: '"Sora", sans-serif', fontWeight: 700, fontSize: 15,
              cursor: 'pointer', letterSpacing: '0.01em',
            }}>Ir a pagar →</button>
          </div>
        )}
      </aside>
    </>
  );
}

const qtyBtn = {
  width: 26, height: 26, borderRadius: 6,
  background: 'rgba(255,255,255,0.06)',
  border: '1px solid rgba(255,255,255,0.1)',
  color: '#fff', cursor: 'pointer', fontSize: 14, lineHeight: 1,
};

function Toast({ show, msg }) {
  return (
    <div style={{
      position: 'fixed', bottom: 28, left: '50%',
      transform: `translateX(-50%) translateY(${show ? 0 : 20}px)`,
      opacity: show ? 1 : 0,
      transition: 'all 280ms ease',
      background: '#1A5C38',
      border: '1px solid rgba(46,204,113,0.5)',
      color: '#fff', padding: '14px 20px', borderRadius: 12,
      fontFamily: '"Sora", sans-serif', fontWeight: 500, fontSize: 14,
      zIndex: 200, pointerEvents: 'none',
      boxShadow: '0 20px 60px rgba(0,0,0,0.5)',
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <span style={{
        width: 22, height: 22, borderRadius: 999, background: '#2ECC71',
        color: '#0a0a0a', display: 'grid', placeItems: 'center',
        fontWeight: 700, fontSize: 13,
      }}>✓</span>
      {msg}
    </div>
  );
}

Object.assign(window, { CartDrawer, Toast });