// Checkout page (multi-step)

const CheckoutPage = () => {
  const { cart, cartTotal, clearCart, setRoute, showToast, user } = useApp();
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({
    email: user?.email || '', name: '', phone: '',
    addr: '', city: '台北市', zip: '',
    method: '宅配', pay: 'card',
    cardNum: '', cardExp: '', cardCvc: '',
  });
  const shipping = cartTotal >= 2000 ? 0 : 120;
  const total = cartTotal + shipping;
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const next = () => setStep(s => Math.min(3, s + 1));
  const back = () => setStep(s => Math.max(1, s - 1));
  const place = () => { clearCart(); setRoute('thankyou'); };

  if (cart.length === 0) {
    return (
      <section style={{ padding: '80px 0', textAlign: 'center' }}>
        <div className="container">
          <h2 className="display" style={{ fontSize: 40 }}>你的購物車是空的</h2>
          <button className="btn" style={{ marginTop: 24 }} onClick={() => setRoute('shop')}>返回商店</button>
        </div>
      </section>
    );
  }

  return (
    <section style={{ padding: '24px 0 80px' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 64 }} className="co-grid">
        <div>
          <div style={{ display: 'flex', gap: 24, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.12em', marginBottom: 32, borderBottom: '1px solid var(--line)', paddingBottom: 16 }}>
            {['CART', 'SHIPPING', 'PAYMENT'].map((lbl, i) => (
              <div key={lbl} style={{ color: step >= i+1 ? 'var(--ink)' : 'var(--mute-2)', fontWeight: step === i+1 ? 600 : 400 }}>
                0{i+1} / {lbl}
              </div>
            ))}
          </div>

          {step === 1 && (
            <div>
              <h2 className="display" style={{ fontSize: 36, marginBottom: 24 }}>Review your bag</h2>
              {cart.map(item => (
                <div key={item.key} style={{ display: 'flex', gap: 16, padding: '20px 0', borderBottom: '1px solid var(--line)' }}>
                  <div className="ph" data-label={item.id} style={{ width: 100, height: 130, flexShrink: 0 }}/>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{item.name}</div>
                    <div style={{ fontSize: 11, color: 'var(--mute)', marginTop: 4 }}>{item.color} · {item.size} · QTY {item.qty}</div>
                    <div style={{ fontFamily: 'var(--f-mono)', fontSize: 13, marginTop: 12 }}>{fmtPrice(item.price * item.qty)}</div>
                  </div>
                </div>
              ))}
              <button className="btn full lg" style={{ marginTop: 32 }} onClick={next}>Continue to shipping <IconArrow size={14}/></button>
            </div>
          )}

          {step === 2 && (
            <div>
              <h2 className="display" style={{ fontSize: 36, marginBottom: 24 }}>Shipping</h2>
              <div style={{ display: 'grid', gap: 16 }}>
                <div className="field"><label>Email</label><input className="input" value={form.email} onChange={e => upd('email', e.target.value)}/></div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div className="field"><label>收件姓名</label><input className="input" value={form.name} onChange={e => upd('name', e.target.value)}/></div>
                  <div className="field"><label>電話</label><input className="input" value={form.phone} onChange={e => upd('phone', e.target.value)}/></div>
                </div>
                <div className="field"><label>配送方式</label>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
                    {['宅配', '超商取貨', '門市自取'].map(m => (
                      <button key={m} onClick={() => upd('method', m)}
                        className={cx('chip', form.method === m && 'active')} style={{ height: 44 }}>{m}</button>
                    ))}
                  </div>
                </div>
                {form.method === '宅配' && <>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 16 }}>
                    <div className="field"><label>郵遞區號</label><input className="input" value={form.zip} onChange={e => upd('zip', e.target.value)}/></div>
                    <div className="field"><label>縣市</label>
                      <select className="select" value={form.city} onChange={e => upd('city', e.target.value)}>
                        {['台北市','新北市','桃園市','台中市','高雄市'].map(c => <option key={c}>{c}</option>)}
                      </select>
                    </div>
                  </div>
                  <div className="field"><label>地址</label><input className="input" value={form.addr} onChange={e => upd('addr', e.target.value)}/></div>
                </>}
              </div>
              <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
                <button className="btn ghost" onClick={back}><IconArrowLeft size={14}/> Back</button>
                <button className="btn" style={{ flex: 1 }} onClick={next}>Continue to payment <IconArrow size={14}/></button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div>
              <h2 className="display" style={{ fontSize: 36, marginBottom: 24 }}>Payment</h2>
              <div className="field" style={{ marginBottom: 16 }}>
                <label>付款方式</label>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                  {[['card','信用卡'],['line','LINE Pay'],['atm','ATM 轉帳']].map(([k, lbl]) => (
                    <button key={k} onClick={() => upd('pay', k)} className={cx('chip', form.pay === k && 'active')} style={{ height: 44 }}>{lbl}</button>
                  ))}
                </div>
              </div>
              {form.pay === 'card' && <>
                <div className="field"><label>卡號</label>
                  <input className="input" value={form.cardNum} onChange={e => upd('cardNum', e.target.value)} placeholder="•••• •••• •••• ••••"/></div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
                  <div className="field"><label>MM / YY</label><input className="input" value={form.cardExp} onChange={e => upd('cardExp', e.target.value)} placeholder="04 / 29"/></div>
                  <div className="field"><label>CVC</label><input className="input" value={form.cardCvc} onChange={e => upd('cardCvc', e.target.value)} placeholder="•••"/></div>
                </div>
              </>}
              <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
                <button className="btn ghost" onClick={back}><IconArrowLeft size={14}/> Back</button>
                <button className="btn accent" style={{ flex: 1 }} onClick={place}>Place Order · {fmtPrice(total)}</button>
              </div>
            </div>
          )}
        </div>

        <aside style={{ background: 'var(--surface)', padding: 32, height: 'fit-content', position: 'sticky', top: 100 }}>
          <h3 style={{ fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 20 }}>Order Summary</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, maxHeight: 280, overflowY: 'auto' }}>
            {cart.map(item => (
              <div key={item.key} style={{ display: 'flex', gap: 12, fontSize: 12 }}>
                <div className="ph" data-label={item.id} style={{ width: 56, height: 72, flexShrink: 0 }}/>
                <div style={{ flex: 1 }}>
                  <div style={{ fontWeight: 500 }}>{item.name}</div>
                  <div style={{ color: 'var(--mute)', marginTop: 2 }}>{item.color} · {item.size} · ×{item.qty}</div>
                </div>
                <div style={{ fontFamily: 'var(--f-mono)' }}>{fmtPrice(item.price * item.qty)}</div>
              </div>
            ))}
          </div>
          <div style={{ borderTop: '1px solid var(--line)', margin: '20px 0', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--mute)' }}><span>Subtotal</span><span style={{ fontFamily: 'var(--f-mono)' }}>{fmtPrice(cartTotal)}</span></div>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--mute)' }}><span>Shipping</span><span style={{ fontFamily: 'var(--f-mono)' }}>{shipping === 0 ? 'FREE' : fmtPrice(shipping)}</span></div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 16, fontWeight: 600, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
            <span>Total</span><span style={{ fontFamily: 'var(--f-mono)' }}>{fmtPrice(total)}</span>
          </div>
          <div style={{ marginTop: 20, padding: 12, background: '#fff', fontSize: 11, color: 'var(--mute)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <IconShield size={14}/> 加密付款 · 資料保護
          </div>
        </aside>
      </div>
      <style>{`@media (max-width: 900px) { .co-grid { grid-template-columns: 1fr !important; } }`}</style>
    </section>
  );
};

const ThankYouPage = () => {
  const { setRoute } = useApp();
  const num = 'FRI-' + Math.random().toString().slice(2, 10);
  return (
    <section style={{ padding: '80px 0', textAlign: 'center' }}>
      <div className="container" style={{ maxWidth: 520 }}>
        <div style={{ width: 64, height: 64, margin: '0 auto 24px', border: '1.5px solid var(--accent)', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)' }}>
          <IconCheck size={28}/>
        </div>
        <div className="eyebrow" style={{ color: 'var(--accent)' }}>ORDER CONFIRMED</div>
        <h1 className="display italic-slant" style={{ fontSize: 56, marginTop: 12 }}>Thank you.</h1>
        <p style={{ color: 'var(--mute)', marginTop: 16 }}>訂單編號 <span style={{ fontFamily: 'var(--f-mono)', color: 'var(--ink)' }}>{num}</span><br/>已寄送確認信至您的信箱</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 32 }}>
          <button className="btn" onClick={() => setRoute('account')}>查看訂單</button>
          <button className="btn ghost" onClick={() => setRoute('shop')}>繼續購物</button>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CheckoutPage, ThankYouPage });