/* global React, Icon, Button */

function CartDrawer({ open, items, onClose, onCheckout }) {
  const subtotal = items.reduce((s, it) => s + it.price, 0);
  return (
    <>
      <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(13,42,28,.4)',
        opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none', transition: 'opacity .2s', zIndex: 60 }} />
      <aside style={{ position: 'fixed', top: 0, right: 0, height: '100%', width: 400, maxWidth: '90vw',
        background: 'var(--cream)', zIndex: 61, boxShadow: '-12px 0 32px rgba(13,42,28,.18)',
        transform: open ? 'translateX(0)' : 'translateX(100%)', transition: 'transform .26s cubic-bezier(.4,0,.2,1)',
        display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '22px 24px', borderBottom: '1px solid var(--line)' }}>
          <strong style={{ fontSize: 19, color: 'var(--green-900)' }}>Your cart ({items.length})</strong>
          <button onClick={onClose} style={{ border: 0, background: 'none', cursor: 'pointer', display: 'inline-flex' }}>
            <Icon name="x" size={22} color="var(--green-900)" />
          </button>
        </div>
        <div style={{ flex: 1, overflowY: 'auto', padding: 24 }}>
          {items.length === 0 ? (
            <div style={{ textAlign: 'center', color: 'var(--ink-400)', marginTop: 60 }}>
              <Icon name="shopping-bag" size={40} color="var(--ink-400)" />
              <p style={{ marginTop: 14 }}>Your cart is empty.</p>
            </div>
          ) : items.map((it, i) => (
            <div key={i} style={{ display: 'flex', gap: 14, marginBottom: 18, paddingBottom: 18,
              borderBottom: '1px solid var(--line)' }}>
              <div style={{ width: 64, height: 64, borderRadius: 10, background: '#fff', overflow: 'hidden',
                border: '1px solid var(--line)', flexShrink: 0 }}>
                <img src="../../assets/product-hero.png" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--green-900)' }}>Psyllium Husk Fibre</div>
                <div style={{ fontSize: 13, color: 'var(--ink-600)' }}>{it.bottles} {it.bottles > 1 ? 'Bottles' : 'Bottle'} · {it.mode === 'sub' ? 'Subscription' : 'One-time'}</div>
                <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--green-700)', marginTop: 4 }}>${it.price.toFixed(2)}</div>
              </div>
            </div>
          ))}
        </div>
        {items.length > 0 && (
          <div style={{ padding: 24, borderTop: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16,
              fontSize: 17, fontWeight: 700, color: 'var(--green-900)' }}>
              <span>Subtotal</span><span>${subtotal.toFixed(2)}</span>
            </div>
            <Button variant="primary" full onClick={onCheckout}>Checkout</Button>
            <p style={{ textAlign: 'center', fontSize: 12.5, color: 'var(--ink-400)', margin: '12px 0 0' }}>
              Free shipping · 60-day money-back guarantee
            </p>
          </div>
        )}
      </aside>
    </>
  );
}

function Toast({ show, text }) {
  return (
    <div style={{ position: 'fixed', bottom: 28, left: '50%', transform: `translateX(-50%) translateY(${show ? 0 : 20}px)`,
      background: 'var(--green-900)', color: '#fff', padding: '14px 22px', borderRadius: 999, fontSize: 14.5,
      fontWeight: 600, boxShadow: 'var(--shadow-pop)', opacity: show ? 1 : 0, pointerEvents: 'none',
      transition: 'all .25s', zIndex: 80, display: 'flex', alignItems: 'center', gap: 10 }}>
      <Icon name="check-circle" size={18} color="var(--yellow-400)" />{text}
    </div>
  );
}

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