/* Cart — line items + order summary card. */
function SF_Cart({ go, cart, setQty, removeItem, wish, toggleWish }) {
  const { PriceTag, QuantityStepper, Button, ProductCard } = window.SS;
  const items = Object.entries(cart).map(([id, qty]) => ({ ...window.SS_PRODUCTS.find((p) => p.id === id), qty })).filter((i) => i.id);
  const wishedItems = window.SS_PRODUCTS.filter((p) => wish && wish[p.id]);
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const shipping = subtotal >= 999 || subtotal === 0 ? 0 : 79;
  const total = subtotal + shipping;

  const row = { display: 'flex', justifyContent: 'space-between', fontSize: 13.5, color: 'var(--sf-text-muted)' };

  return (
    <div className="sf-maxw sf-sticky-page-pad" style={{ paddingTop: 44, paddingBottom: 96 }}>
      <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 34, fontWeight: 600, color: 'var(--sf-text)' }}>Let's get you noticed.</div>

      {items.length === 0 ? (
        <div style={{ padding: '80px 0', textAlign: 'center' }}>
          <div style={{ color: 'var(--sf-text-faint)', fontSize: 14, marginBottom: 20 }}>Your bag is empty.</div>
          <Button variant="gold" onClick={() => go('listing')}>SHOP ALL</Button>
        </div>
      ) : (
        <div className="sf-checkout-cols" style={{ display: 'grid', gridTemplateColumns: '1fr 380px', gap: 48, marginTop: 32, alignItems: 'flex-start', minWidth: 0 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 }}>
            {items.map((i) => (
              <div key={i.id} style={{ display: 'flex', gap: 18, minWidth: 0, background: 'var(--sf-surface)', border: '1px solid var(--sf-border-soft)', borderRadius: 'var(--sf-radius)', padding: 16 }}>
                <div style={{ width: 96, height: 96, borderRadius: 'var(--sf-radius-sm)', overflow: 'hidden', flex: '0 0 auto', background: 'var(--sf-well)' }}>
                  <img src={i.image} alt={i.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
                <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 6, cursor: 'pointer' }} onClick={() => go('pdp', i.id)}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 16.5, fontWeight: 500, color: 'var(--sf-text)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{i.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--sf-text-faint)' }}>{i.material}</div>
                  <PriceTag price={i.price} compareAt={i.compareAt} size="sm" />
                </div>
                <div style={{ flex: '0 0 auto', display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between' }}>
                  <button onClick={() => removeItem(i.id)} style={{ all: 'unset', cursor: 'pointer', fontSize: 11, letterSpacing: '.1em', color: 'var(--sf-text-faint)' }}>REMOVE</button>
                  <QuantityStepper value={i.qty} onChange={(q) => setQty(i.id, q)} />
                </div>
              </div>
            ))}
          </div>

          <div style={{ background: 'var(--sf-card-grad)', border: '1px solid var(--sf-border)', borderRadius: 'var(--sf-radius-lg)', padding: 28, boxShadow: 'var(--sf-shadow-card)', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--sf-text)' }}>Order summary</div>
            <div style={row}><span>Subtotal</span><span>₹{subtotal.toLocaleString('en-IN')}</span></div>
            <div style={row}><span>Shipping</span><span>{shipping === 0 ? 'Free' : '₹' + shipping}</span></div>
            <div style={{ borderTop: '1px solid var(--sf-border-soft)', paddingTop: 14, display: 'flex', justifyContent: 'space-between', fontSize: 16, fontWeight: 600, color: 'var(--sf-text)' }}>
              <span>Total</span><span>₹{total.toLocaleString('en-IN')}</span>
            </div>
            <Button className="sf-hide-mobile" variant="gold" size="lg" onClick={() => go('checkout')}>CHECKOUT</Button>
          </div>
        </div>
      )}

      {wishedItems.length > 0 && (
        <div style={{ marginTop: 72 }}>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--sf-gold-hi)', marginBottom: 20 }}>FROM YOUR WISHLIST</div>
          <div className="sf-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
            {wishedItems.map((p) => (
              <ProductCard key={p.id} {...p} wished={true} onWish={() => toggleWish(p.id)} onQuickView={() => go('pdp', p.id)} style={{ cursor: 'pointer' }} />
            ))}
          </div>
        </div>
      )}

      {items.length > 0 && (
        <div className="sf-sticky-bar" style={{
          alignItems: 'center', gap: 14, padding: '12px 16px', paddingBottom: 'calc(12px + env(safe-area-inset-bottom))',
          background: 'var(--sf-surface-raised)', borderTop: '1px solid var(--sf-border)', boxShadow: 'var(--sf-shadow)',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.3 }}>
            <span style={{ fontSize: 10.5, fontWeight: 500, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--sf-text-faint)' }}>Total</span>
            <span style={{ fontSize: 16, fontWeight: 600, color: 'var(--sf-text)' }}>₹{total.toLocaleString('en-IN')}</span>
          </div>
          <Button variant="gold" size="lg" style={{ flex: 1 }} onClick={() => go('checkout')}>CHECKOUT</Button>
        </div>
      )}
    </div>
  );
}
window.SF_Cart = SF_Cart;