// onboarding.jsx — Merchant QRIS onboarding wizard (hibank DS)
function MerchantOnboarding({ onBack, onComplete, primary, secondary }) {
  const TEAL = primary || '#0056D2',ORANGE = secondary || '#cf5a27',DARK = '#001F5B';

  const [step, setStep] = React.useState(0);
  const [data, setData] = React.useState({
    merchantName: '', mcc: '', mccCode: '', businessType: '', legalName: '',
    npwp: '', monthlyOmset: '',
    mAddress: '', mPostal: '', mKelurahan: '', mKecamatan: '', mKabupaten: '', mProvinsi: '',
    picName: '', picPhone: '', nik: '', email: '',
    picAddress: '', picPostal: '', picKelurahan: '', picKecamatan: '', picKabupaten: '', picProvinsi: '',
    bankName: 'Bank Hibank (Member of BNI)', accountNumber: '', accountHolder: '', branchCode: ''
  });

  const [verify, setVerify] = React.useState({ status: 'idle' }); // idle | loading | success | error

  // Simulate Cek Rekening lookup
  const checkAccount = () => {
    if (!data.accountNumber || data.accountNumber.length < 6) {
      setVerify({ status: 'error' });
      return;
    }
    setVerify({ status: 'loading' });
    setTimeout(() => {
      // Pull holder name from PIC if available, else mock
      const holder = data.picName ? data.picName.toUpperCase() : 'BUDI SANTOSO';
      setData((d) => ({ ...d, accountHolder: holder }));
      setVerify({ status: 'success' });
    }, 1100);
  };

  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e.target.value }));

  const steps = [
  { id: 'merchant', title: 'Informasi Merchant', sub: 'Data dasar bisnis Anda', icon: 'bx-store-alt' },
  { id: 'address', title: 'Alamat Merchant', sub: 'Lokasi tempat usaha', icon: 'bx-map-alt' },
  { id: 'pic', title: 'Penanggung Jawab', sub: 'Identitas PIC merchant', icon: 'bx-user' },
  { id: 'bank', title: 'Rekening Settlement', sub: 'Tujuan dana settlement', icon: 'bx-credit-card-alt' }];


  const mccOptions = [
  { code: '5411', name: 'Grocery / Supermarket' },
  { code: '5812', name: 'Eating Places / Restoran' },
  { code: '5651', name: 'Family Clothing Stores' },
  { code: '7230', name: 'Beauty / Barber Shop' },
  { code: '5499', name: 'Misc. Food Stores' },
  { code: '5814', name: 'Fast Food / F&B' },
  { code: '5999', name: 'Misc. Retail Store' },
  { code: '4121', name: 'Transportation / Logistics' }];


  const businessTypes = ['Perorangan / UMKM Mikro', 'CV (Persekutuan Komanditer)', 'PT (Perseroan Terbatas)', 'Firma', 'Koperasi', 'Yayasan'];
  const banks = ['Bank Hibank (Member of BNI)', 'BNI', 'BCA', 'Mandiri', 'BRI', 'CIMB Niaga', 'Permata', 'Mayora'];

  // ── FIELD ──
  const Field = ({ label, name, type = 'text', placeholder, required, hint, options, span = 6, prefix, maxLength, disabled, readOnly }) =>
  <div style={{ gridColumn: `span ${span}` }}>
      <label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: '#171919', marginBottom: 6 }}>
        {label}{required && <span style={{ color: ORANGE, marginLeft: 3 }}>*</span>}
      </label>
      {options ?
    <div style={{ position: 'relative' }}>
          <select value={data[name]} onChange={set(name)} disabled={disabled} style={{ ...fieldBase(), background: disabled ? '#f6f6f6' : '#fff', color: disabled ? '#515252' : '#171919', cursor: disabled ? 'not-allowed' : 'pointer' }}>
            <option value="">Pilih {label.toLowerCase()}</option>
            {options.map((o) => <option key={o.code || o} value={o.code || o}>{o.code ? `${o.code} — ${o.name}` : o}</option>)}
          </select>
          {disabled ?
      <i className="bx bx-lock-alt" style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', color: '#a7a8a8', fontSize: 16, pointerEvents: 'none' }} /> :
      <i className="bx bx-chevron-down" style={{ position: 'absolute', right: 14, top: '50%', transform: 'translateY(-50%)', color: '#a7a8a8', fontSize: 18, pointerEvents: 'none' }} />
      }
        </div> :

    <div style={{ position: 'relative' }}>
          {prefix && <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', color: '#515252', fontSize: 14, fontWeight: 600 }}>{prefix}</span>}
          <input type={type} value={data[name]} onChange={set(name)} placeholder={placeholder} maxLength={maxLength} readOnly={readOnly} disabled={disabled}
      style={{ ...fieldBase(), paddingLeft: prefix ? 38 : 14, background: disabled || readOnly ? '#f6f6f6' : '#fff', color: disabled || readOnly ? '#515252' : '#171919', cursor: disabled ? 'not-allowed' : 'text' }}
      onFocus={(e) => {if (!disabled && !readOnly) {e.target.style.borderColor = TEAL;e.target.style.boxShadow = '0 0 0 4px rgba(0,86,210,0.12)';}}}
      onBlur={(e) => {e.target.style.borderColor = '#efefef';e.target.style.boxShadow = 'none';}} />
      
        </div>
    }
      {hint && <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 5 }}>{hint}</div>}
    </div>;


  const fieldBase = () => ({
    width: '100%', padding: '11px 14px', border: '1.5px solid #efefef',
    borderRadius: 8, fontSize: 14, outline: 'none', background: '#fff',
    color: '#171919', fontFamily: "'Open Sans', sans-serif",
    transition: 'all 200ms', appearance: 'none'
  });

  const SectionTitle = ({ icon, title, sub }) =>
  <div style={{ marginBottom: 24, paddingBottom: 18, borderBottom: '1px solid #efefef' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(0,86,210,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <i className={`bx ${icon}`} style={{ fontSize: 20, color: TEAL }} />
        </div>
        <div>
          <h3 style={{ fontSize: 18, fontWeight: 700, color: '#171919', letterSpacing: '-0.01em', margin: 0 }}>{title}</h3>
          <p style={{ fontSize: 13, color: '#515252', margin: 0 }}>{sub}</p>
        </div>
      </div>
    </div>;


  // ── STEP CONTENT ──
  const renderStep = () => {
    if (step === 0) return (
      <>
        <SectionTitle icon="bx-store-alt" title="Informasi Merchant" sub="Lengkapi data dasar bisnis Anda" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 18 }}>
          <Field label="Nama Merchant / QR" name="merchantName" required placeholder="Mis. Warung Bu Sri" span={6} />
          <Field label="Merchant Category" name="mcc" required options={mccOptions} span={4} />
          <Field label="Merchant Category Code" name="mccCode" required placeholder="5411" hint="Auto-isi dari kategori" maxLength={4} span={2} />
          <Field label="Jenis Usaha" name="businessType" required options={businessTypes} span={3} />
          <Field label="Nama Badan Hukum" name="legalName" placeholder="PT / CV / Firma (opsional)" span={3} />
          <Field label="NPWP" name="npwp" required placeholder="00.000.000.0-000.000" hint="15 digit NPWP merchant" span={3} />
          <Field label="Rata-rata Omset / Bulan" name="monthlyOmset" required placeholder="50.000.000" prefix="Rp" span={3} />
        </div>
      </>);

    if (step === 1) return (
      <>
        <SectionTitle icon="bx-map-alt" title="Alamat Merchant" sub="Lokasi tempat usaha beroperasi" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 18 }}>
          <Field label="Alamat Merchant" name="mAddress" required placeholder="Jalan, nomor, RT/RW" span={4} />
          <Field label="Kode Pos" name="mPostal" required placeholder="12345" maxLength={5} span={2} />
          <Field label="Kelurahan" name="mKelurahan" required placeholder="Kelurahan" span={3} />
          <Field label="Kecamatan" name="mKecamatan" required placeholder="Kecamatan" span={3} />
          <Field label="Kabupaten / Kota" name="mKabupaten" required placeholder="Kabupaten / Kota" span={3} />
          <Field label="Provinsi" name="mProvinsi" required placeholder="Provinsi" span={3} />
        </div>
      </>);

    if (step === 2) return (
      <>
        <SectionTitle icon="bx-user" title="Data Penanggung Jawab" sub="PIC yang bertanggung jawab atas merchant" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 18 }}>
          <Field label="Nama Penanggung Jawab" name="picName" required placeholder="Nama lengkap sesuai e-KTP" span={3} />
          <Field label="No. HP Penanggung Jawab" name="picPhone" required placeholder="0812-XXXX-XXXX" prefix="+62" span={3} />
          <Field label="NIK e-KTP" name="nik" required placeholder="16 digit NIK" maxLength={16} span={3} />
          <Field label="Alamat Email" name="email" type="email" required placeholder="nama@email.com" span={3} />

          <div style={{ gridColumn: 'span 6', height: 1, background: '#efefef', margin: '4px 0' }} />

          <Field label="Alamat PIC" name="picAddress" required placeholder="Alamat sesuai e-KTP" span={4} />
          <Field label="Kode Pos PIC" name="picPostal" required placeholder="12345" maxLength={5} span={2} />
          <Field label="Kelurahan" name="picKelurahan" required span={3} />
          <Field label="Kecamatan" name="picKecamatan" required span={3} />
          <Field label="Kabupaten / Kota" name="picKabupaten" required span={3} />
          <Field label="Provinsi" name="picProvinsi" required span={3} />
        </div>
      </>);

    if (step === 3) return (
      <>
        <SectionTitle icon="bx-credit-card-alt" title="Rekening Settlement" sub="Rekening tujuan transfer dana hasil transaksi QRIS" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 18 }}>
          <Field label="Bank" name="bankName" required options={banks} span={6} disabled hint="Settlement dana QRIS hanya dapat dilakukan ke rekening Bank Hibank" />

          {/* Account number + Cek Rekening */}
          <div style={{ gridColumn: 'span 6' }}>
            <label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: '#171919', marginBottom: 6 }}>
              Nomor Rekening<span style={{ color: ORANGE, marginLeft: 3 }}>*</span>
            </label>
            <div style={{ display: 'flex', gap: 10 }}>
              <input type="text" value={data.accountNumber}
              onChange={(e) => {setData((d) => ({ ...d, accountNumber: e.target.value, accountHolder: '' }));setVerify({ status: 'idle' });}}
              placeholder="1234567890" maxLength={16}
              style={{ ...fieldBase(), flex: 1 }}
              onFocus={(e) => {e.target.style.borderColor = TEAL;e.target.style.boxShadow = '0 0 0 4px rgba(0,86,210,0.12)';}}
              onBlur={(e) => {e.target.style.borderColor = '#efefef';e.target.style.boxShadow = 'none';}} />
              
              <button onClick={checkAccount} disabled={!data.accountNumber || verify.status === 'loading'}
              style={{
                display: 'flex', alignItems: 'center', gap: 6, padding: '0 20px',
                borderRadius: 100, border: 'none', whiteSpace: 'nowrap',
                background: !data.accountNumber || verify.status === 'loading' ? '#efefef' : TEAL,
                color: !data.accountNumber || verify.status === 'loading' ? '#a7a8a8' : '#fff',
                fontSize: 13, fontWeight: 600, fontFamily: 'inherit',
                cursor: !data.accountNumber || verify.status === 'loading' ? 'not-allowed' : 'pointer',
                transition: 'all 200ms'
              }}
              onMouseEnter={(e) => {if (data.accountNumber && verify.status !== 'loading') e.currentTarget.style.background = '#3A7EE0';}}
              onMouseLeave={(e) => {if (data.accountNumber && verify.status !== 'loading') e.currentTarget.style.background = TEAL;}}>
                
                {verify.status === 'loading' ?
                <><i className="bx bx-loader-alt bx-spin" style={{ fontSize: 16 }} /> Mengecek...</> :
                verify.status === 'success' ?
                <><i className="bx bx-check-circle" style={{ fontSize: 16 }} /> Tervalidasi</> :
                <><i className="bx bx-search-alt-2" style={{ fontSize: 16 }} /> Cek Rekening</>
                }
              </button>
            </div>
            {verify.status === 'error' &&
            <div style={{ fontSize: 11, color: '#ed3151', marginTop: 6, display: 'flex', alignItems: 'center', gap: 4 }}>
                <i className="bx bx-error-circle" style={{ fontSize: 13 }} /> Nomor rekening tidak ditemukan. Periksa kembali.
              </div>
            }
          </div>

          <Field label="Nama Pemilik Rekening" name="accountHolder" required readOnly placeholder="Klik Cek Rekening untuk memvalidasi" hint="Otomatis terisi setelah validasi rekening berhasil" span={6} />
        </div>
        {/* Summary card */}
        <div style={{ marginTop: 28, padding: 20, background: 'rgba(0,86,210,0.04)', borderRadius: 12, border: '1px solid rgba(0,86,210,0.12)' }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
            <i className="bx bx-info-circle" style={{ fontSize: 18, color: TEAL, marginTop: 2, flexShrink: 0 }} />
            <div>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#171919', marginBottom: 4 }}>Sebelum mengirim pendaftaran</div>
              <p style={{ fontSize: 12, color: '#515252', lineHeight: 1.6, margin: 0 }}>
                Pastikan semua data sudah benar. Tim akan melakukan verifikasi dalam <strong>1–3 hari kerja</strong>. Anda akan menerima notifikasi melalui email <strong>{data.email || 'PIC'}</strong> setelah merchant aktif.
              </p>
            </div>
          </div>
        </div>
      </>);

  };

  const next = () => step < 3 ? setStep(step + 1) : onComplete && onComplete(data);
  const prev = () => step > 0 ? setStep(step - 1) : onBack && onBack();

  return (
    <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', background: '#f6f6f6', fontFamily: "'Open Sans', sans-serif" }}>

      {/* ── HEADER BAR ── */}
      <div style={{ background: '#fff', borderBottom: '1px solid #efefef', padding: '14px 32px', display: 'flex', alignItems: 'center', gap: 16, flexShrink: 0 }}>
        <button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', fontSize: 13, color: '#515252', fontFamily: 'inherit', fontWeight: 500 }}>
          <i className="bx bx-arrow-back" style={{ fontSize: 18 }} /> Kembali ke Dashboard
        </button>
        <div style={{ width: 1, height: 24, background: '#efefef' }} />
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: TEAL, letterSpacing: '0.08em', textTransform: 'uppercase' }}>Onboarding Merchant</div>
          <div style={{ fontSize: 15, fontWeight: 700, color: '#171919' }}>Registrasi Merchant QRIS Baru</div>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          <span style={{ fontSize: 12, color: '#a7a8a8' }}>Disimpan otomatis · {new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })}</span>
          <button style={{ background: '#fff', border: '1.5px solid #efefef', borderRadius: 100, padding: '8px 16px', fontSize: 13, fontWeight: 600, color: '#515252', cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 6 }}>
            <i className="bx bx-save" style={{ fontSize: 15 }} /> Simpan Draft
          </button>
        </div>
      </div>

      {/* ── CONTENT ── */}
      <div style={{ flex: 1, overflow: 'auto', padding: '28px 32px' }}>
        <div style={{ maxWidth: 920, margin: '0 auto', display: 'grid', gridTemplateColumns: '240px 1fr', gap: 28, alignItems: 'flex-start' }}>

          {/* Stepper sidebar */}
          <div style={{ position: 'sticky', top: 0 }}>
            <div style={{ background: '#fff', borderRadius: 15, padding: '20px 18px', border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.04)' }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: '#a7a8a8', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 14 }}>Langkah Pendaftaran</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, position: 'relative' }}>
                {/* connector line */}
                <div style={{ position: 'absolute', left: 15, top: 14, bottom: 14, width: 2, background: '#efefef' }} />
                <div style={{ position: 'absolute', left: 15, top: 14, width: 2, height: `${step / (steps.length - 1) * 100}%`, background: TEAL, transition: 'height 300ms' }} />

                {steps.map((s, i) => {
                  const done = i < step,active = i === step;
                  return (
                    <button key={s.id} onClick={() => i <= step && setStep(i)}
                    style={{ display: 'flex', alignItems: 'flex-start', gap: 12, padding: '10px 8px', border: 'none', background: 'transparent',
                      textAlign: 'left', cursor: i <= step ? 'pointer' : 'default', borderRadius: 8,
                      position: 'relative', zIndex: 1 }}>
                      <div style={{
                        width: 32, height: 32, borderRadius: '50%', flexShrink: 0,
                        background: done ? TEAL : active ? '#fff' : '#fff',
                        border: active ? `2px solid ${TEAL}` : done ? 'none' : '2px solid #efefef',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        transition: 'all 200ms'
                      }}>
                        {done ?
                        <i className="bx bx-check" style={{ color: '#fff', fontSize: 18, fontWeight: 700 }} /> :
                        <span style={{ fontSize: 12, fontWeight: 700, color: active ? TEAL : '#a7a8a8' }}>{i + 1}</span>
                        }
                      </div>
                      <div style={{ paddingTop: 4 }}>
                        <div style={{ fontSize: 13, fontWeight: active || done ? 600 : 500, color: active ? '#171919' : done ? '#515252' : '#a7a8a8' }}>{s.title}</div>
                        <div style={{ fontSize: 11, color: '#a7a8a8', marginTop: 2 }}>{s.sub}</div>
                      </div>
                    </button>);

                })}
              </div>
            </div>

            {/* Helper card */}
            <div style={{ marginTop: 14, padding: 16, background: `linear-gradient(140deg, ${TEAL} 0%, ${DARK} 100%)`, borderRadius: 15, position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -30, right: -30, width: 120, height: 120, borderRadius: '50%', background: `${ORANGE}30` }} />
              <i className="bx bx-help-circle" style={{ fontSize: 24, color: '#fff', marginBottom: 8, position: 'relative' }} />
              <div style={{ fontSize: 13, fontWeight: 700, color: '#fff', marginBottom: 4, position: 'relative' }}>Butuh bantuan?</div>
              <p style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5, position: 'relative', margin: '0 0 10px' }}>Hubungi tim kami untuk panduan pengisian.

              </p>
              <button style={{ background: 'rgba(255,255,255,0.15)', border: '1px solid rgba(255,255,255,0.25)', color: '#fff', fontSize: 11, fontWeight: 600, padding: '6px 12px', borderRadius: 100, cursor: 'pointer', fontFamily: 'inherit', position: 'relative' }}>1112344     

              </button>
            </div>
          </div>

          {/* Form card */}
          <div>
            <div style={{ background: '#fff', borderRadius: 15, padding: '28px 32px', border: '1px solid #efefef', boxShadow: '0 2px 8px rgba(23,25,25,0.04)' }}>
              {renderStep()}
            </div>

            {/* Bottom action bar */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 18, padding: '0 4px' }}>
              <button onClick={prev} disabled={step === 0} style={{
                display: 'flex', alignItems: 'center', gap: 6,
                padding: '11px 22px', borderRadius: 100,
                border: '1.5px solid #efefef', background: '#fff',
                color: step === 0 ? '#a7a8a8' : '#515252',
                cursor: step === 0 ? 'not-allowed' : 'pointer',
                fontSize: 14, fontWeight: 600, fontFamily: 'inherit'
              }}>
                <i className="bx bx-chevron-left" style={{ fontSize: 18 }} /> Sebelumnya
              </button>

              <div style={{ fontSize: 13, color: '#a7a8a8' }}>
                Langkah <strong style={{ color: '#171919' }}>{step + 1}</strong> dari {steps.length}
              </div>

              <button onClick={next} style={{
                display: 'flex', alignItems: 'center', gap: 6,
                padding: '12px 26px', borderRadius: 100,
                border: 'none', background: step === 3 ? ORANGE : TEAL,
                color: '#fff', fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
                cursor: 'pointer',
                boxShadow: `0 4px 16px ${step === 3 ? 'rgba(207,90,39,0.3)' : 'rgba(0,86,210,0.28)'}`,
                transition: 'all 200ms'
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = step === 3 ? '#e87a4d' : '#3A7EE0'}
              onMouseLeave={(e) => e.currentTarget.style.background = step === 3 ? ORANGE : TEAL}>
                
                {step === 3 ? 'Kirim Pendaftaran' : 'Lanjut'}
                <i className={`bx ${step === 3 ? 'bx-check-circle' : 'bx-chevron-right'}`} style={{ fontSize: 18 }} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { MerchantOnboarding });