/* global React */
const { Badge, Button } = window.DesignSystem_b1e064;
const BOTTLE_CR = 'assets/images/cuoccio-bottle.jpg';
const TREE_CREAM_CR = 'assets/logos/cuoccio-tree-cream.png';
const TREE_LEAF_CR = 'assets/logos/cuoccio-tree-leaf.png';

const qtyBtnCr = {
  width: 38, height: 38, border: 'none', background: 'transparent', cursor: 'pointer',
  color: 'var(--text-primary)', fontSize: 20, lineHeight: 1,
};
const fmtEuroCr = (n) => n.toFixed(2).replace('.', ',') + ' €';

function Cart({ cart = [], onQty, onRemove, onCheckout, onShop }) {
  const items = cart;
  const subtotal = items.reduce((s, it) => s + (it.priceNum || 0) * (it.qty || 1), 0);
  const shipping = items.length === 0 ? 0 : (subtotal >= 60 ? 0 : 6);
  const free = subtotal >= 60;

  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: 'calc(var(--section-y-tight) + 40px) var(--gutter) var(--section-y)' }}>
      <img src={TREE_CREAM_CR} alt="" aria-hidden="true" style={{
        position: 'absolute', top: '50%', transform: 'translateY(-50%)',
        right: 'clamp(-240px, -15vw, -100px)', width: 'min(56vw, 620px)', opacity: 0.04,
        pointerEvents: 'none', userSelect: 'none', zIndex: 0,
      }} />
      <div style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div data-reveal style={{ display: 'flex', gap: 14, fontSize: 'var(--text-sm)', fontWeight: 700, letterSpacing: '0.04em', marginBottom: 18 }}>
          <span style={{ color: 'var(--accent)' }}>01 Carrello</span>
          <span style={{ color: 'var(--text-muted)' }}>/</span>
          <span style={{ color: 'var(--text-muted)' }}>02 Dati</span>
          <span style={{ color: 'var(--text-muted)' }}>/</span>
          <span style={{ color: 'var(--text-muted)' }}>03 Pagamento</span>
        </div>
        <h1 data-reveal style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h1)', textTransform: 'uppercase', marginBottom: 'var(--space-7)' }}>
          Il tuo carrello
        </h1>

        {items.length === 0 ? (
          /* EMPTY STATE */
          <div data-reveal style={{
            textAlign: 'center', padding: 'var(--space-9) var(--gutter)',
            background: 'var(--surface)', border: '1px solid var(--border-soft)', borderRadius: 'var(--radius-lg)',
          }}>
            <img src={TREE_LEAF_CR} alt="" aria-hidden="true" style={{ width: 64, height: 64, objectFit: 'contain', margin: '0 auto var(--space-5)', opacity: 0.9 }} />
            <h3 style={{ fontSize: 'var(--text-h2)', marginBottom: 10 }}>Il carrello è vuoto</h3>
            <p style={{ color: 'var(--text-secondary)', maxWidth: 380, margin: '0 auto var(--space-6)', lineHeight: 1.7 }}>
              Porta in tavola un olio genuino, frutto di una storia di famiglia e di lavoro tenace.
            </p>
            <Button variant="primary" size="lg" onClick={onShop}>Scopri i formati</Button>
          </div>
        ) : (
          <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 'var(--space-8)', alignItems: 'start' }}>
            {/* LINE ITEMS */}
            <div data-reveal>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
                {items.map((it, i) => (
                  <div key={i} className="rcartrow" style={{
                    display: 'grid', gridTemplateColumns: '92px 1fr auto', gap: 'var(--space-5)', alignItems: 'center',
                    background: 'var(--surface)', border: '1px solid var(--border-soft)', borderRadius: 'var(--radius-md)',
                    padding: 'var(--space-4)',
                  }}>
                    <div style={{ width: 92, height: 92, borderRadius: 'var(--radius-sm)', overflow: 'hidden', background: 'var(--grad-gold)', flex: 'none' }}>
                      <img src={BOTTLE_CR} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                    </div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--text-h4)', marginBottom: 4 }}>{it.label}</div>
                      <div style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', marginBottom: 12 }}>{fmtEuroCr(it.priceNum || 0)} / pz</div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)' }}>
                        <div style={{ display: 'flex', alignItems: 'center', border: '1.5px solid var(--border)', borderRadius: 'var(--radius-pill)', overflow: 'hidden' }}>
                          <button onClick={() => onQty && onQty(i, -1)} style={qtyBtnCr}>−</button>
                          <span style={{ minWidth: 32, textAlign: 'center', fontWeight: 700 }}>{it.qty || 1}</span>
                          <button onClick={() => onQty && onQty(i, 1)} style={qtyBtnCr}>+</button>
                        </div>
                        <button onClick={() => onRemove && onRemove(i)} style={{
                          background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)',
                          fontSize: 'var(--text-sm)', fontWeight: 600, letterSpacing: '0.02em',
                        }}
                          onMouseEnter={(e) => e.currentTarget.style.color = 'var(--danger)'}
                          onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}
                        >Rimuovi</button>
                      </div>
                    </div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h4)', color: 'var(--cream-100)', whiteSpace: 'nowrap' }}>
                      {fmtEuroCr((it.priceNum || 0) * (it.qty || 1))}
                    </div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 'var(--space-5)' }}>
                <Button variant="link" iconLeft="←" onClick={onShop}>Continua lo shopping</Button>
              </div>
            </div>

            {/* SUMMARY */}
            <aside data-reveal className="rsticky" style={{ background: 'var(--surface)', border: '1px solid var(--border-soft)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', position: 'sticky', top: 100 }}>
              <h3 style={{ fontSize: 'var(--text-h4)', marginBottom: 'var(--space-5)' }}>Riepilogo</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 'var(--text-sm)', color: 'var(--text-secondary)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Subtotale</span><span style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{fmtEuroCr(subtotal)}</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>Spedizione</span><span style={{ fontWeight: 600, color: free ? 'var(--accent)' : 'var(--text-primary)' }}>{free ? 'Gratuita' : fmtEuroCr(shipping)}</span></div>
              </div>
              {!free && (
                <p style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 12, lineHeight: 1.5 }}>
                  Aggiungi {fmtEuroCr(60 - subtotal)} per la <span style={{ color: 'var(--accent)' }}>spedizione gratuita</span>.
                </p>
              )}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '16px 0', marginTop: 8, borderTop: '1px solid var(--border-strong)' }}>
                <span style={{ fontWeight: 700 }}>Totale</span>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h3)', color: 'var(--accent)' }}>{fmtEuroCr(subtotal + shipping)}</span>
              </div>
              <Button variant="primary" size="lg" fullWidth onClick={onCheckout}>Procedi al checkout</Button>
              <div style={{ display: 'flex', gap: 10, marginTop: 'var(--space-5)', flexWrap: 'wrap', justifyContent: 'center' }}>
                <Badge variant="terra" size="sm">100% Italiano</Badge>
                <Badge variant="terra" size="sm">Imballaggio eco</Badge>
              </div>
            </aside>
          </div>
        )}
      </div>
    </section>
  );
}

window.Cart = Cart;