// Agora Checkout — Apple-grade: 3 columns, clean, no clutter.

const Checkout = ({ route, setRoute }) => {
  const data = window.AG_DATA;
  const item = data.byId[route.id] || data.items[0];
  const seller = data.sellers[item.seller];
  const [step, setStep] = useState(1); // 1 shipping, 2 payment, 3 review
  const [paid, setPaid] = useState(false);

  if (paid) {
    return (
      <div className="ag-center ag-col" style={{ padding:'120px 32px', textAlign:'center', gap: 24 }}>
        <div style={{ width: 80, height: 80, borderRadius:'9999px', background:'var(--ap-success)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <Icon name="check" size={36} stroke={1.5}/>
        </div>
        <div className="ag-eyebrow">Order #AG-26-04-21-9482</div>
        <h1 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 88, lineHeight: 0.98, letterSpacing:'-0.015em' }}>Paid. Authenticated. Shipping.</h1>
        <p style={{ maxWidth: 540, color:'var(--ap-fg-muted)', fontSize: 16, lineHeight: 1.55 }}>
          {seller.name} has been notified. We'll authenticate at our Berlin hub and ship within 48 hours. Track your order in your account.
        </p>
        <div className="ag-flex ag-gap-2" style={{ marginTop: 16 }}>
          <button className="ag-btn ag-btn--ghost" onClick={()=>setRoute({ name:'home' })}>Back to the marketplace</button>
          <button className="ag-btn" onClick={()=>setRoute({ name:'watchlist' })}>Track this order</button>
        </div>
      </div>
    );
  }

  return (
    <div className="ag-shell ag-shell--wide" style={{ padding:'40px 32px 80px' }}>
      <div className="ag-flex ag-gap-2" style={{ alignItems:'center', color:'var(--ap-fg-muted)', fontSize: 12 }}>
        <span style={{ cursor:'pointer' }} onClick={()=>setRoute({ name:'product', id: item.id })}>← Back to piece</span>
      </div>
      <h1 className="ag-h1" style={{ marginTop: 12, fontSize: 40 }}>Checkout</h1>

      {/* Step indicator */}
      <div className="ag-flex" style={{ marginTop: 32, gap: 0, borderBottom:'1px solid var(--ap-border)' }}>
        {[
          { n: 1, l:'Address & shipping' },
          { n: 2, l:'Payment' },
          { n: 3, l:'Review & pay' },
        ].map((s, i, arr) => (
          <div key={s.n} onClick={()=>setStep(s.n)} className="ag-flex ag-gap-3" style={{
            flex: 1, alignItems:'center', padding:'18px 0', cursor:'pointer',
            borderBottom: step === s.n ? '2px solid var(--ag-ink)' : '2px solid transparent', marginBottom: -1,
          }}>
            <div style={{ width: 24, height: 24, borderRadius:'9999px', background: step >= s.n ? 'var(--ag-ink)' : 'transparent', color: step >= s.n ? '#fff' : 'var(--ap-fg-faint)', border:'1px solid '+(step >= s.n ? 'var(--ag-ink)' : 'var(--ap-border)'), display:'flex', alignItems:'center', justifyContent:'center', fontSize: 11, fontWeight: 600, fontFamily:'var(--ag-font-mono)' }}>
              {step > s.n ? <Icon name="check" size={12} stroke={3}/> : s.n}
            </div>
            <span className="ag-label" style={{ fontSize: 11, color: step >= s.n ? 'var(--ag-ink)' : 'var(--ap-fg-muted)' }}>{s.l}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40, display:'grid', gridTemplateColumns:'1fr 380px', gap: 64 }}>
        <div>
          {step === 1 && (
            <div className="ag-fade-in">
              <h2 className="ag-h3" style={{ marginBottom: 28 }}>Where it ships</h2>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20 }}>
                <Field label="First name"><input className="ag-input" defaultValue="Lea"/></Field>
                <Field label="Last name"><input className="ag-input" defaultValue="Kobayashi"/></Field>
                <Field label="Email"><input className="ag-input" defaultValue="lea@kobayashi.de"/></Field>
                <Field label="Phone"><input className="ag-input" defaultValue="+49 30 1840 2266"/></Field>
                <div style={{ gridColumn:'1 / -1' }}><Field label="Street address"><input className="ag-input" defaultValue="Linienstraße 124"/></Field></div>
                <Field label="Postal code"><input className="ag-input" defaultValue="10115"/></Field>
                <Field label="City"><input className="ag-input" defaultValue="Berlin"/></Field>
                <Field label="Country"><input className="ag-input" defaultValue="Germany"/></Field>
                <Field label="State / Region"><input className="ag-input" defaultValue="Berlin"/></Field>
              </div>

              <div style={{ marginTop: 40 }}>
                <h2 className="ag-h3" style={{ marginBottom: 20 }}>Shipping method</h2>
                <div className="ag-col ag-gap-2">
                  {[
                    { id:'ddp', l:'DDP Express · DHL', d:'Customs & duties included. 5–8 business days.', cost:'Included' },
                    { id:'std', l:'Standard ground', d:'Customs & duties included. 9–14 business days.', cost:'Included' },
                    { id:'cou', l:'Concierge hand-delivery (Berlin only)', d:'Authenticator brings it personally. Try-on at door.', cost:'+€60' },
                  ].map((m, i) => (
                    <label key={m.id} className="ag-flex ag-gap-3" style={{ padding:'16px 18px', border:'1px solid '+(i===0?'var(--ag-ink)':'var(--ap-border)'), borderRadius: 2, cursor:'pointer' }}>
                      <span style={{ width: 16, height: 16, borderRadius:'9999px', border:'1px solid '+(i===0?'var(--ag-ink)':'var(--ap-border)'), background: i===0 ? 'var(--ag-ink)' : '#fff', flexShrink: 0, marginTop: 2 }}/>
                      <div style={{ flex: 1 }}>
                        <div className="ag-between">
                          <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{m.l}</div>
                          <div className="ag-mono" style={{ fontSize: 13, fontWeight: 600 }}>{m.cost}</div>
                        </div>
                        <div style={{ fontSize: 13, color:'var(--ap-fg-muted)', marginTop: 4 }}>{m.d}</div>
                      </div>
                    </label>
                  ))}
                </div>
              </div>
            </div>
          )}
          {step === 2 && (
            <div className="ag-fade-in">
              <h2 className="ag-h3" style={{ marginBottom: 28 }}>How you'll pay</h2>
              <div className="ag-col ag-gap-2">
                {[
                  { id:'card', l:'Credit / debit card', icon:'tag' },
                  { id:'klarna', l:'Klarna — 3 interest-free instalments', icon:'box' },
                  { id:'bank', l:'Bank transfer (SEPA)', icon:'send' },
                  { id:'escrow', l:'Escrow protection — release on receipt', icon:'shield' },
                ].map((m, i) => (
                  <label key={m.id} className="ag-flex ag-gap-3" style={{ padding:'18px', border:'1px solid '+(i===0?'var(--ag-ink)':'var(--ap-border)'), borderRadius: 2, cursor:'pointer' }}>
                    <span style={{ width: 16, height: 16, borderRadius:'9999px', border:'1px solid '+(i===0?'var(--ag-ink)':'var(--ap-border)'), background: i===0 ? 'var(--ag-ink)' : '#fff', flexShrink: 0, marginTop: 2 }}/>
                    <Icon name={m.icon} size={18} stroke={1.5} style={{ marginTop: 1 }}/>
                    <div style={{ flex: 1, fontSize: 14 }}>{m.l}</div>
                  </label>
                ))}
              </div>
              <div style={{ marginTop: 28, display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap: 16 }}>
                <Field label="Card number"><input className="ag-input ag-mono" defaultValue="4242 4242 4242 4242"/></Field>
                <Field label="Expiry"><input className="ag-input ag-mono" defaultValue="11 / 28"/></Field>
                <Field label="CVC"><input className="ag-input ag-mono" defaultValue="•••"/></Field>
              </div>
              <div className="ag-flex ag-gap-2" style={{ alignItems:'center', marginTop: 18 }}>
                <Check on={true} onToggle={()=>{}}/>
                <span style={{ fontSize: 13 }}>Use the same address as shipping.</span>
              </div>
            </div>
          )}
          {step === 3 && (
            <div className="ag-fade-in">
              <h2 className="ag-h3" style={{ marginBottom: 24 }}>Confirm and pay</h2>
              <div style={{ border:'1px solid var(--ap-border)', padding: 24 }}>
                <div className="ag-eyebrow">Ships to</div>
                <div style={{ marginTop: 6, fontSize: 14 }}>Lea Kobayashi · Linienstraße 124, 10115 Berlin · Germany</div>
                <div className="ag-rule" style={{ margin:'18px 0' }}/>
                <div className="ag-eyebrow">Paying with</div>
                <div className="ag-flex ag-gap-2" style={{ alignItems:'center', marginTop: 6 }}>
                  <Icon name="tag" size={14}/>
                  <span className="ag-mono" style={{ fontSize: 13 }}>Visa ending 4242 · expires 11/28</span>
                </div>
                <div className="ag-rule" style={{ margin:'18px 0' }}/>
                <div className="ag-eyebrow">Shipping method</div>
                <div style={{ marginTop: 6, fontSize: 14 }}>DDP Express · DHL · 5–8 business days · all duties included</div>
              </div>
              <p style={{ marginTop: 24, fontSize: 13, color:'var(--ap-fg-muted)', lineHeight: 1.55 }}>
                Funds are held in escrow until you receive and accept the piece. If anything is amiss, return within 14 days for a full refund. By placing this order, you agree to the Agora Buyer Terms.
              </p>
            </div>
          )}

          <div className="ag-flex ag-gap-3" style={{ marginTop: 48, paddingTop: 24, borderTop:'1px solid var(--ap-border)' }}>
            {step > 1 && <button className="ag-btn ag-btn--ghost" onClick={()=>setStep(step-1)}>← Back</button>}
            <div style={{ flex: 1 }}/>
            {step < 3 ? (
              <button className="ag-btn ag-btn--lg" onClick={()=>setStep(step+1)}>Continue <Icon name="arrow-right" size={12}/></button>
            ) : (
              <button className="ag-btn ag-btn--red ag-btn--lg" onClick={()=>setPaid(true)}>Pay €{item.eur.toLocaleString()} now</button>
            )}
          </div>
        </div>

        {/* Order summary */}
        <aside>
          <div style={{ position:'sticky', top: 180, padding: 24, border:'1px solid var(--ap-border)', background:'var(--ag-bone)' }}>
            <div className="ag-eyebrow">Your order</div>
            <div className="ag-flex ag-gap-3" style={{ marginTop: 18, alignItems:'flex-start' }}>
              <div style={{ width: 84, height: 84, flexShrink: 0 }}>
                <ProductTile item={item} square showWatermark={false}/>
              </div>
              <div style={{ flex: 1 }}>
                <div className="ag-eyebrow-ink" style={{ fontSize: 11 }}>{item.brand}</div>
                <div style={{ fontSize: 13, color:'var(--ap-fg-muted)', marginTop: 4, lineHeight: 1.4 }}>{item.title}</div>
                <div className="ag-mono" style={{ fontSize: 11, color:'var(--ap-fg-faint)', marginTop: 6 }}>From {seller.name}, {item.city}</div>
              </div>
            </div>
            <div className="ag-rule" style={{ margin:'20px 0' }}/>
            <div className="ag-col ag-gap-2" style={{ fontSize: 13 }}>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Item</span><span className="ag-num">€{item.eur.toLocaleString()}</span></div>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Authentication</span><span className="ag-num">Included</span></div>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Shipping (DDP)</span><span className="ag-num">Included</span></div>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Customs &amp; duties</span><span className="ag-num">Included</span></div>
              <div className="ag-between"><span style={{ color:'var(--ap-fg-muted)' }}>Buyer protection</span><span className="ag-num">Included</span></div>
            </div>
            <div className="ag-rule" style={{ margin:'20px 0' }}/>
            <div className="ag-between" style={{ alignItems:'baseline' }}>
              <span className="ag-label">Total · EUR</span>
              <span className="ag-num" style={{ fontSize: 28, fontWeight: 500 }}>€{item.eur.toLocaleString()}</span>
            </div>
            <div className="ag-flex ag-gap-2" style={{ marginTop: 18, padding: 12, background:'#fff', border:'1px solid var(--ap-border)', alignItems:'flex-start' }}>
              <Icon name="shield" size={14}/>
              <div style={{ fontSize: 12, color:'var(--ap-fg-muted)', lineHeight: 1.5 }}>
                Funds held in escrow until you accept the piece. Authenticator photographs every step.
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  );
};

window.Checkout = Checkout;