/* SUPERMEDIA storefront — Cart */
function Cart({ cart, setCart, onNav, openProduct }) {
  const { PRODUCTS } = SM_DATA;
  const find = (id) => PRODUCTS.find(p => p.id === id) || (window.SM_EXTRA && window.SM_EXTRA[id]);
  const items = cart.map(c => ({ ...find(c.id), qty: c.qty })).filter(x => x.id);
  const subtotal = items.reduce((s, x) => s + x.price * x.qty, 0);
  const oldTotal = items.reduce((s, x) => s + (x.old || x.price) * x.qty, 0);
  const savings = oldTotal - subtotal;
  const shipping = subtotal > 30000 || subtotal === 0 ? 0 : 590;
  const total = subtotal + shipping;
  const wide = { maxWidth: 1440, margin: '0 auto', padding: '0 24px' };
  const setQty = (id, q) => setCart(c => c.map(x => x.id === id ? { ...x, qty: Math.max(1, q) } : x));
  const remove = id => setCart(c => c.filter(x => x.id !== id));
  const isMobile = useIsMobile();

  if (items.length === 0) return (
    <div style={{ ...wide, paddingTop: 22 }}>
      <h1 style={{ fontSize: 30, marginBottom: 24 }}>Tvoja korpa</h1>
      <div style={{ textAlign: 'center', padding: '60px 20px', background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-lg)' }}>
        <img src={SM_DATA.A + '/mascot-genie.png'} alt="" style={{ height: 140, marginBottom: 16 }} />
        <div style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 22 }}>Korpa je prazna</div>
        <p style={{ color: 'var(--sm-text-muted)', fontSize: 15, margin: '8px 0 22px' }}>Dodaj proizvode i pusti da duh ispuni tvoju želju ✨</p>
        <Button variant="primary" size="lg" onClick={() => onNav({ view: 'home' })} iconLeft={I('arrow-left', 18)}>Nazad na kupovinu</Button>
      </div>
    </div>
  );

  return (
    <div style={{ ...wide, paddingTop: 22, paddingBottom: 8 }}>
      <h1 style={{ fontSize: 30, marginBottom: 24 }}>Tvoja korpa <span style={{ fontSize: 16, color: 'var(--sm-text-muted)', fontWeight: 400, fontFamily: 'var(--sm-font-body)' }}>({items.length})</span></h1>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 28, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {items.map(x => (
            <div key={x.id} style={{ display: 'flex', gap: isMobile ? 11 : 18, background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-lg)', padding: isMobile ? 12 : 16 }}>
              <div onClick={() => x.voucher ? null : openProduct(x)} style={{ width: isMobile ? 84 : 110, height: isMobile ? 84 : 110, flex: 'none', background: x.voucher ? 'linear-gradient(135deg, var(--sm-primary), var(--sm-violet))' : '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: x.voucher ? 'default' : 'pointer', color: '#fff' }}>
                {x.voucher ? I('gift', 46) : (x.img ? <img src={x.img} alt={x.title} style={{ maxWidth: '78%', maxHeight: '78%', objectFit: 'contain' }} /> : <span style={{ color: 'var(--sm-purple-300)' }}>{I(x.icon || 'package', isMobile ? 38 : 46, { strokeWidth: 1.4 })}</span>)}
              </div>
              <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontFamily: 'var(--sm-font-techno)', textTransform: 'uppercase', letterSpacing: '.1em', fontSize: 11, color: 'var(--sm-text-subtle)' }}>{x.brand}</div>
                <div onClick={() => x.voucher ? null : openProduct(x)} style={{ fontWeight: 600, fontSize: isMobile ? 14 : 15, lineHeight: 1.35, margin: '4px 0 auto', cursor: x.voucher ? 'default' : 'pointer', overflowWrap: 'anywhere' }}>{x.title}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, marginTop: 10 }}>
                  <div style={{ display: 'flex', alignItems: 'center', border: '1.5px solid var(--sm-border)', borderRadius: 'var(--sm-radius-pill)', height: 40, padding: '0 4px' }}>
                    <button onClick={() => setQty(x.id, x.qty - 1)} style={{ ...qtyBtnC }}>{I('minus', 16)}</button>
                    <span style={{ width: 30, textAlign: 'center', fontWeight: 700, fontFamily: 'var(--sm-font-display)' }}>{x.qty}</span>
                    <button onClick={() => setQty(x.id, x.qty + 1)} style={{ ...qtyBtnC }}>{I('plus', 16)}</button>
                  </div>
                  <PriceTag price={x.price * x.qty} oldPrice={x.old ? x.old * x.qty : null} size="md" align="right" />
                </div>
              </div>
              <button onClick={() => remove(x.id)} aria-label="Ukloni" style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--sm-text-subtle)', alignSelf: 'flex-start', padding: 4 }}>{I('trash-2', 18)}</button>
            </div>
          ))}
        </div>

        {/* summary */}
        <aside style={{ background: '#fff', border: '1px solid var(--sm-border)', borderRadius: 'var(--sm-radius-lg)', padding: 24, position: 'sticky', top: 72 }}>
          <h3 style={{ fontSize: 20, marginBottom: 18 }}>Pregled porudžbine</h3>
          <Line label="Međuzbir" value={fmt(subtotal) + ' din.'} />
          {savings > 0 && <Line label="Ušteda" value={'−' + fmt(savings) + ' din.'} accent />}
          <Line label="Dostava" value={shipping === 0 ? 'Besplatno' : fmt(shipping) + ' din.'} />
          {shipping === 0 && <div style={{ fontSize: 12, color: 'var(--sm-success)', marginTop: -6, marginBottom: 6 }}>Besplatna dostava preko 30.000 din.</div>}
          <div style={{ borderTop: '1px solid var(--sm-border)', margin: '14px 0', paddingTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontFamily: 'var(--sm-font-display)', fontWeight: 700, fontSize: 17 }}>Ukupno</span>
            <PriceTag price={total} size="lg" align="right" />
          </div>
          <Button variant="primary" size="lg" block iconRight={I('arrow-right', 18)} onClick={() => onNav({ view: 'checkout' })}>Nastavi na plaćanje</Button>
          <a onClick={() => onNav({ view: 'home' })} style={{ display: 'block', textAlign: 'center', marginTop: 16, color: 'var(--sm-primary)', fontWeight: 600, fontSize: 14, cursor: 'pointer' }}>Nastavi kupovinu</a>
        </aside>
      </div>
    </div>
  );
}
const qtyBtnC = { width: 32, height: 32, borderRadius: '50%', border: 'none', background: 'transparent', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sm-text)' };
function Line({ label, value, accent }) {
  return <div style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 15 }}><span style={{ color: 'var(--sm-text-muted)' }}>{label}</span><span style={{ fontWeight: 700, color: accent ? 'var(--sm-primary)' : 'var(--sm-text)' }}>{value}</span></div>;
}

Object.assign(window, { Cart });