// keranjang.jsx — Cart & Checkout

function Keranjang({ ctx }) {
  const [step, setStep] = React.useState(1); // 1 Cart, 2 Address, 3 Payment, 4 Confirm
  const [shipping, setShipping] = React.useState('ems');
  const [payment, setPayment] = React.useState('bca-va');
  const [voucher, setVoucher] = React.useState('');

  const subtotal = ctx.cart.reduce((sum, it) => sum + it.product.priceIDR * it.qty, 0);
  const shippingCost = ctx.cart.length === 0 ? 0 :
    shipping === 'ems' ? 280000 :
    shipping === 'jne' ? 120000 :
    shipping === 'jnt' ? 95000 : 0;
  const discount = voucher === 'SAKURA10' ? Math.floor(subtotal * 0.1) : 0;
  const tax = Math.floor(subtotal * 0.05); // pajak impor estimasi
  const total = subtotal + shippingCost + tax - discount;

  return (
    <div>
      <div style={{ marginBottom: 8 }}>
        <span style={{ fontFamily: 'var(--font-jp)', fontWeight: 900, color: 'var(--pink)',
                       fontSize: 12, letterSpacing: '.25em' }}>
          {step === 1 && 'カート'}{step === 2 && '配送先'}{step === 3 && 'お支払い'}{step === 4 && '完了'}
        </span>
      </div>
      <h1 style={{ fontFamily: 'var(--font-display)', fontSize: 32, margin: '0 0 24px' }}>
        {step === 1 && 'Keranjang Belanja'}
        {step === 2 && 'Alamat Pengiriman'}
        {step === 3 && 'Pilih Pembayaran'}
        {step === 4 && 'Pesanan Dibuat!'}
      </h1>

      {/* STEP INDICATOR */}
      <div className="steps">
        {[
          { n: 1, label: 'Keranjang' },
          { n: 2, label: 'Alamat' },
          { n: 3, label: 'Pembayaran' },
          { n: 4, label: 'Konfirmasi' },
        ].map((s, i) => (
          <React.Fragment key={s.n}>
            <div className={`step ${step === s.n ? 'active' : step > s.n ? 'done' : ''}`}>
              <div className="num">{step > s.n ? <Icon name="check" size={12} /> : s.n}</div>
              {s.label}
            </div>
            {i < 3 && <div className="step-sep" />}
          </React.Fragment>
        ))}
      </div>

      {step === 4 ? (
        <div className="empty">
          <div className="icon-big" style={{ color: 'var(--green)' }}>✓</div>
          <h3>Terima kasih atas pesanan kamu!</h3>
          <p>Order ID: <b>NM-2026-04999</b> · Total: <b style={{ color: 'var(--pink)' }}>{fmtIDR(total)}</b></p>
          <p>Kami akan mengirim notifikasi via email & WhatsApp untuk update pengiriman.</p>
          <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
            <button className="btn primary" onClick={() => ctx.go('akun', 'pesanan')}>Lihat Pesanan</button>
            <button className="btn ghost" onClick={() => ctx.go('home')}>Lanjut Belanja</button>
          </div>
        </div>
      ) : ctx.cart.length === 0 && step === 1 ? (
        <div className="empty">
          <div className="icon-big">空</div>
          <h3>Keranjang kamu kosong</h3>
          <p>Yuk mulai belanja produk asli Jepang!</p>
          <button className="btn primary" onClick={() => ctx.go('home')}>Mulai Belanja</button>
        </div>
      ) : (
        <div className="cart-layout">
          <div>
            {step === 1 && (
              <div className="cart-items">
                {ctx.cart.map(item => {
                  const cat = CATEGORY_BY_SLUG[item.product.cat];
                  return (
                    <div key={item.key} className="cart-item">
                      <div className="cart-item-img" style={{ background: cat.color }}>
                        {item.product.glyph}
                      </div>
                      <div className="cart-item-info">
                        <h4>{item.product.nameID}</h4>
                        <div className="meta">
                          {item.product.brand} · {item.product.origin}
                          {item.variant && <> · <b>{item.variant}</b></>}
                        </div>
                        <div className="price">{fmtIDR(item.product.priceIDR)}</div>
                      </div>
                      <div className="cart-item-actions">
                        <button className="icon-btn" onClick={() => ctx.removeFromCart(item.key)} title="Hapus">
                          <Icon name="trash" size={16} />
                        </button>
                        <div className="qty-stepper">
                          <button onClick={() => ctx.updateCartQty(item.key, item.qty - 1)}>
                            <Icon name="minus" size={12} />
                          </button>
                          <span className="val">{item.qty}</span>
                          <button onClick={() => ctx.updateCartQty(item.key, item.qty + 1)}>
                            <Icon name="plus" size={12} />
                          </button>
                        </div>
                        <div className="bold">{fmtIDR(item.product.priceIDR * item.qty)}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}

            {step === 2 && (
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ marginTop: 0, fontFamily: 'var(--font-display)', fontSize: 22 }}>
                  Alamat Pengiriman
                </h3>
                <div className="checkout-form">
                  <div className="field">
                    <label>Nama Penerima</label>
                    <input defaultValue="Sakura Tanaka" />
                  </div>
                  <div className="field">
                    <label>No. HP</label>
                    <input defaultValue="+62 812-3456-7890" />
                  </div>
                  <div className="field full">
                    <label>Alamat Lengkap</label>
                    <textarea rows={2} defaultValue="Jl. Senopati No. 88, RT 03/RW 05, Senopati" />
                  </div>
                  <div className="field">
                    <label>Provinsi</label>
                    <select><option>DKI Jakarta</option></select>
                  </div>
                  <div className="field">
                    <label>Kota / Kabupaten</label>
                    <select><option>Jakarta Selatan</option></select>
                  </div>
                  <div className="field">
                    <label>Kecamatan</label>
                    <select><option>Kebayoran Baru</option></select>
                  </div>
                  <div className="field">
                    <label>Kode Pos</label>
                    <input defaultValue="12190" />
                  </div>
                  <div className="field full">
                    <label>Catatan (opsional)</label>
                    <input placeholder="cth: titip ke security, jangan dilipat" />
                  </div>
                </div>

                <h4 style={{ marginTop: 24, marginBottom: 8 }}>
                  Metode Pengiriman <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 11, fontWeight: 500 }}>· 配送方法</span>
                </h4>
                <div className="shipping-options">
                  {[
                    { id: 'ems',  name: 'EMS Japan Post',   eta: '5–10 hari · langsung dari Tokyo', price: 280000 },
                    { id: 'jne',  name: 'JNE REG (Indo gudang)', eta: '2–4 hari setelah tiba di Jakarta', price: 120000 },
                    { id: 'jnt',  name: 'JNT EZ',           eta: '3–5 hari setelah tiba di Jakarta', price: 95000 },
                    { id: 'sicepat',  name: 'SiCepat BEST', eta: '2–3 hari setelah tiba di Jakarta', price: 110000 },
                  ].map(s => (
                    <div key={s.id} className={`opt-row ${shipping === s.id ? 'active' : ''}`}
                         onClick={() => setShipping(s.id)}>
                      <div className="opt-icon"><Icon name="truck" size={20} /></div>
                      <div className="opt-body">
                        <h5>{s.name}</h5>
                        <p>{s.eta}</p>
                      </div>
                      <div className="opt-price">{fmtIDR(s.price)}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {step === 3 && (
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ marginTop: 0, fontFamily: 'var(--font-display)', fontSize: 22 }}>
                  Metode Pembayaran
                  <span className="muted" style={{ fontFamily: 'var(--font-jp)', fontSize: 11, fontWeight: 500, marginLeft: 8 }}>
                    お支払い方法
                  </span>
                </h3>

                <h4 style={{ marginBottom: 8 }}>Virtual Account</h4>
                <div className="payment-options">
                  {[
                    { id: 'bca-va', name: 'BCA Virtual Account', fee: 'Gratis admin' },
                    { id: 'mandiri-va', name: 'Mandiri Virtual Account', fee: 'Gratis admin' },
                    { id: 'bri-va', name: 'BRI Virtual Account', fee: 'Gratis admin' },
                  ].map(p => (
                    <div key={p.id} className={`opt-row ${payment === p.id ? 'active' : ''}`}
                         onClick={() => setPayment(p.id)}>
                      <div className="opt-icon"><Icon name="card" size={20} /></div>
                      <div className="opt-body">
                        <h5>{p.name}</h5>
                        <p>{p.fee}</p>
                      </div>
                    </div>
                  ))}
                </div>

                <h4 style={{ marginTop: 20, marginBottom: 8 }}>E-Wallet</h4>
                <div className="payment-options">
                  {[
                    { id: 'gopay', name: 'GoPay', fee: 'Fee 0.7%' },
                    { id: 'ovo',   name: 'OVO', fee: 'Fee 0.7%' },
                    { id: 'dana',  name: 'DANA', fee: 'Fee 0.7%' },
                    { id: 'shopee', name: 'ShopeePay', fee: 'Fee 0.7%' },
                  ].map(p => (
                    <div key={p.id} className={`opt-row ${payment === p.id ? 'active' : ''}`}
                         onClick={() => setPayment(p.id)}>
                      <div className="opt-icon"><Icon name="wallet" size={20} /></div>
                      <div className="opt-body">
                        <h5>{p.name}</h5>
                        <p>{p.fee}</p>
                      </div>
                    </div>
                  ))}
                </div>

                <h4 style={{ marginTop: 20, marginBottom: 8 }}>Kartu Kredit / Debit</h4>
                <div className="payment-options">
                  <div className={`opt-row ${payment === 'card' ? 'active' : ''}`}
                       onClick={() => setPayment('card')}>
                    <div className="opt-icon"><Icon name="card" size={20} /></div>
                    <div className="opt-body">
                      <h5>Visa / Mastercard / JCB</h5>
                      <p>Bisa cicilan 3, 6, 12 bulan</p>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>

          {/* SUMMARY */}
          <aside className="summary">
            <h3>
              <span className="jp">注文サマリー</span>
              Ringkasan
            </h3>

            {step <= 2 && (
              <div className="voucher-input">
                <input placeholder="Kode voucher (cth: SAKURA10)" value={voucher}
                       onChange={(e) => setVoucher(e.target.value.toUpperCase())} />
                <button onClick={() => ctx.pushToast({
                  msg: voucher === 'SAKURA10' ? 'Voucher diterapkan!' : 'Kode tidak valid',
                  type: voucher === 'SAKURA10' ? 'success' : ''
                })}>Pakai</button>
              </div>
            )}

            <div className="summary-row">
              <span>Subtotal ({ctx.cart.length} item)</span>
              <span className="v">{fmtIDR(subtotal)}</span>
            </div>
            <div className="summary-row">
              <span>Ongkos kirim</span>
              <span className="v">{shippingCost === 0 ? '—' : fmtIDR(shippingCost)}</span>
            </div>
            <div className="summary-row">
              <span>Pajak impor (est. 5%)</span>
              <span className="v">{fmtIDR(tax)}</span>
            </div>
            {discount > 0 && (
              <div className="summary-row" style={{ color: 'var(--green)' }}>
                <span>Diskon voucher</span>
                <span className="v">- {fmtIDR(discount)}</span>
              </div>
            )}
            <div className="summary-row total">
              <span>Total</span>
              <span className="v">{fmtIDR(total)}</span>
            </div>
            <div className="muted" style={{ fontSize: 11 }}>
              ≈ {fmtJPY(Math.floor(total / 107))} dengan rate ¥1 = Rp 107
            </div>

            {step === 1 && (
              <button className="btn primary block lg" onClick={() => setStep(2)}>
                Lanjut ke Alamat <Icon name="chevr" size={16} />
              </button>
            )}
            {step === 2 && (
              <>
                <button className="btn primary block lg" onClick={() => setStep(3)}>
                  Pilih Pembayaran <Icon name="chevr" size={16} />
                </button>
                <button className="btn ghost block" onClick={() => setStep(1)}>← Kembali ke Keranjang</button>
              </>
            )}
            {step === 3 && (
              <>
                <button className="btn primary block lg" onClick={() => setStep(4)}>
                  Bayar Sekarang · {fmtIDR(total)}
                </button>
                <button className="btn ghost block" onClick={() => setStep(2)}>← Ubah Alamat</button>
              </>
            )}

            <div className="muted" style={{ fontSize: 11, textAlign: 'center', marginTop: 8 }}>
              <Icon name="shield" size={12} /> Pembayaran aman terenkripsi
            </div>
          </aside>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Keranjang });