/* global React */
const { Badge, Button, Input, Select, Checkbox } = window.DesignSystem_b1e064;
const BOTTLE_C = 'assets/images/cuoccio-bottle.jpg';
const TREE_CREAM_C = 'assets/logos/cuoccio-tree-cream.png';

function Checkout({ cart, onPay }) {
  const items = (cart && cart.length) ? cart : [{ label: 'Olio EVO — Lattina 5 L', price: '60,00 €', qty: 1, priceNum: 60 }];
  const subtotal = items.reduce((s, it) => s + (it.priceNum || 0) * (it.qty || 1), 0);
  const fmtEuro = (n) => n.toFixed(2).replace('.', ',') + ' €';
  const [pay, setPay] = React.useState('card');

  return (
    <section style={{ position: 'relative', overflow: 'hidden', padding: 'calc(var(--section-y-tight) + 30px) var(--gutter) var(--section-y)' }}>
      <img src={TREE_CREAM_C} alt="" aria-hidden="true" style={{
        position: 'absolute', top: '12%', right: 'clamp(-260px, -16vw, -120px)',
        width: 'min(60vw, 680px)', opacity: 0.035, pointerEvents: 'none', userSelect: 'none', zIndex: 0,
      }} />
      <div style={{ maxWidth: 'var(--maxw-wide)', margin: '0 auto', position: 'relative', zIndex: 1 }}>
        {/* steps */}
        <div data-reveal style={{ display: 'flex', gap: 14, fontSize: 'var(--text-sm)', fontWeight: 700, letterSpacing: '0.04em', marginBottom: 18 }}>
          <span style={{ color: 'var(--text-muted)' }}>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(--accent)' }}>03 Pagamento</span>
        </div>
        <h1 data-reveal style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 'var(--text-h1)', textTransform: 'uppercase', marginBottom: 'var(--space-7)' }}>
          Checkout sicuro
        </h1>

        <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-8)', alignItems: 'start' }}>
          {/* FORM */}
          <div data-reveal style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 'var(--space-4)' }}>
                <h3 style={{ fontSize: 'var(--text-h4)' }}>Contatti</h3>
                <span style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>Hai un account? <a href="#" onClick={(e)=>e.preventDefault()}>Accedi</a></span>
              </div>
              <Input label="Indirizzo email" placeholder="nome@esempio.it" type="email" iconRight={<span>✉</span>} />
              <div style={{ marginTop: 12 }}>
                <Checkbox label="Tienimi aggiornato su nuovi raccolti e offerte" defaultChecked />
              </div>
            </div>

            <div>
              <h3 style={{ fontSize: 'var(--text-h4)', marginBottom: 'var(--space-4)' }}>Indirizzo di spedizione</h3>
              <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                <Input label="Nome" />
                <Input label="Cognome" />
                <div style={{ gridColumn: '1 / -1' }}><Input label="Indirizzo" placeholder="Via, numero civico" /></div>
                <Input label="Città" />
                <Input label="CAP" />
                <div style={{ gridColumn: '1 / -1' }}>
                  <Select label="Paese" defaultValue="IT" options={[{ value: 'IT', label: 'Italia' }, { value: 'FR', label: 'Francia' }, { value: 'DE', label: 'Germania' }]} />
                </div>
              </div>
            </div>

            <div>
              <h3 style={{ fontSize: 'var(--text-h4)', marginBottom: 'var(--space-4)' }}>Pagamento</h3>
              <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
                {[['card', '💳 Carta'], ['wallet', '📱 Wallet']].map(([id, lbl]) => {
                  const active = pay === id;
                  return (
                    <button key={id} onClick={() => setPay(id)} style={{
                      padding: '15px', borderRadius: 'var(--radius-md)', cursor: 'pointer',
                      border: `1.5px solid ${active ? 'var(--accent)' : 'var(--border)'}`,
                      background: active ? 'var(--accent-soft)' : 'transparent',
                      color: active ? 'var(--accent)' : 'var(--text-secondary)',
                      fontWeight: 700, fontSize: 'var(--text-sm)',
                    }}>{lbl}</button>
                  );
                })}
              </div>
              {pay === 'card' && (
                <div className="r2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
                  <div style={{ gridColumn: '1 / -1' }}><Input label="Numero carta" placeholder="0000 0000 0000 0000" iconRight={<span>🔒</span>} /></div>
                  <Input label="MM / AA" placeholder="12 / 28" />
                  <Input label="CVC" placeholder="123" />
                  <Input label="Intestatario" />
                </div>
              )}
            </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 ordine</h3>
            <div style={{ borderRadius: 'var(--radius-md)', overflow: 'hidden', aspectRatio: '16/8', background: 'var(--grad-gold)', position: 'relative', marginBottom: 'var(--space-5)' }}>
              <img src={BOTTLE_C} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', left: 14, bottom: 12 }}>
                <div style={{ color: 'var(--cream-100)', fontWeight: 800, fontFamily: 'var(--font-display)' }}>Olio EVO Tenace</div>
                <Badge variant="cream" size="sm">Campagna 2025/2026</Badge>
              </div>
            </div>

            {items.map((it, i) => (
              <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, padding: '12px 0', borderBottom: '1px solid var(--border-soft)' }}>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 'var(--text-sm)' }}>{it.label}</div>
                  <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>Qtà {it.qty || 1}</div>
                </div>
                <span style={{ fontWeight: 700, fontSize: 'var(--text-sm)' }}>{it.price}</span>
              </div>
            ))}

            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, padding: '16px 0', fontSize: 'var(--text-sm)', color: 'var(--text-secondary)' }}>
              <Row l="Subtotale" r={fmtEuro(subtotal)} />
              <Row l="Spedizione" r={<span style={{ color: 'var(--accent)' }}>{subtotal >= 60 ? 'Gratuita' : '6,00 €'}</span>} />
              <Row l="IVA inclusa" r="—" />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '14px 0', 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)' }}>{fmtEuro(subtotal + (subtotal >= 60 ? 0 : 6))}</span>
            </div>

            <div style={{ display: 'flex', gap: 10, margin: '8px 0 18px' }}>
              <Input placeholder="Codice sconto" style={{ flex: 1 }} />
              <Button variant="secondary">Applica</Button>
            </div>

            <Button variant="primary" size="lg" fullWidth onClick={onPay}>Paga {fmtEuro(subtotal + (subtotal >= 60 ? 0 : 6))}</Button>
            <p style={{ textAlign: 'center', fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 12 }}>🔒 Pagamenti sicuri e crittografati</p>
          </aside>
        </div>
      </div>
    </section>
  );
}

function Row({ l, r }) {
  return <div style={{ display: 'flex', justifyContent: 'space-between' }}><span>{l}</span><span style={{ fontWeight: 600, color: 'var(--text-primary)' }}>{r}</span></div>;
}

window.Checkout = Checkout;