/* linked.market — Vendor KYC / Paystack subaccount flow */
(function () {
const { useState, useEffect } = React;
const h = React.createElement;
const { Icon } = window;

const BANKS = ['Access Bank', 'GTBank', 'Zenith Bank', 'UBA', 'First Bank', 'Kuda MFB', 'OPay', 'Moniepoint MFB', 'Stanbic IBTC', 'Fidelity Bank'];
const STEPS = ['Intro', 'Identity', 'BVN', 'Confirm', 'Business', 'Bank', 'Payouts', 'Review', 'Status'];

function Field({ label, children, hint }) {
  return h('div', { className: 'field' }, label && h('label', { className: 'eyebrow' }, label), children, hint && h('div', { style: { fontSize: 12, color: 'var(--ink-3)' } }, hint));
}
function Radio({ on }) { return h('span', { style: { width: 20, height: 20, borderRadius: 99, border: '2px solid ' + (on ? 'var(--ink)' : 'var(--line-strong)'), display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' } }, on && h('span', { style: { width: 10, height: 10, borderRadius: 99, background: 'var(--ink)' } })); }
function Pick({ label, sub, on, onClick }) {
  return h('button', { onClick, className: 'method' + (on ? ' on' : ''), style: { width: '100%' } },
    h('div', { style: { flex: 1, textAlign: 'left' } }, h('div', { style: { fontWeight: 600, fontSize: 14.5 } }, label), sub && h('div', { style: { fontSize: 12, color: 'var(--ink-3)', marginTop: 1 } }, sub)), h(Radio, { on }));
}

function VendorKYC(props) {
  const { device, go } = props;
  const desktop = device === 'desktop';
  const [step, setStep] = useState(0);
  const [biz, setBiz] = useState('sole');
  const [bank, setBank] = useState('');
  const [acct, setAcct] = useState('');
  const [settle, setSettle] = useState('daily');
  const [verifying, setVerifying] = useState(true);
  const resolved = acct.replace(/\D/g, '').length >= 10;
  useEffect(() => { if (step === 8) { setVerifying(true); const t = setTimeout(() => setVerifying(false), 2400); return () => clearTimeout(t); } }, [step]);

  const next = () => setStep(s => Math.min(STEPS.length - 1, s + 1));
  const back = () => step === 0 ? go('v-dash') : setStep(s => s - 1);

  const bodies = {
    0: h('div', null,
      h('div', { style: { width: 60, height: 60, borderRadius: 16, background: 'var(--verified-tint)', color: 'var(--verified)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 } }, h(Icon, { name: 'shield', style: { width: 30, height: 30 } })),
      h('h1', { className: 't-display', style: { fontSize: desktop ? 34 : 28 } }, 'Set up Paystack payments'),
      h('p', { style: { fontSize: 15, color: 'var(--ink-2)', margin: '12px 0 20px', lineHeight: 1.55 } }, 'Get verified to accept card & transfer payments — funds settle straight to your bank. Takes about 7 minutes.'),
      h('div', { className: 'card', style: { padding: 16, marginBottom: 16 } }, [['Secure Pay badge on your store', 'check'], ['Higher rank in discovery', 'chart'], ['Daily payouts to your bank', 'cart']].map(([t, ic], i) =>
        h('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 11, padding: '8px 0' } }, h('span', { className: 'vmark', style: { width: 22, height: 22, background: 'var(--verified)' } }, h(Icon, { name: 'check' })), h('span', { style: { fontSize: 14, fontWeight: 500 } }, t)))),
      h('div', { className: 'trust-strip' }, h(Icon, { name: 'lock' }), 'Your BVN verifies your identity once — we never see or store it.')),
    1: h('div', null,
      h('h1', { className: 't-display', style: { fontSize: desktop ? 30 : 26 } }, 'Your details'),
      h('p', { style: { fontSize: 14, color: 'var(--ink-3)', margin: '8px 0 22px' } }, 'Must match your BVN exactly.'),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 18 } },
        h(Field, { label: 'Full legal name' }, h('input', { className: 'input', placeholder: 'Nkem Chidinma Adeyemi', defaultValue: 'Nkem Chidinma Adeyemi' })),
        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
          h(Field, { label: 'Date of birth' }, h('input', { className: 'input', placeholder: 'DD / MM / YYYY' })),
          h(Field, { label: 'Gender (optional)' }, h('select', { className: 'input' }, h('option', null, 'Prefer not to say'), h('option', null, 'Female'), h('option', null, 'Male')))))),
    2: h('div', null,
      h('h1', { className: 't-display', style: { fontSize: desktop ? 30 : 26 } }, 'Verify your BVN'),
      h('p', { style: { fontSize: 14, color: 'var(--ink-2)', margin: '8px 0 22px', lineHeight: 1.5 } }, 'We use Paystack to confirm your BVN. We never see or store the number.'),
      h(Field, { label: 'Bank Verification Number' }, h('div', { className: 'inwrap' }, h('span', { className: 'pre' }, h(Icon, { name: 'lock', style: { width: 16, height: 16 } })), h('input', { className: 'input', style: { paddingLeft: 44, letterSpacing: '.3em', fontFamily: 'var(--font-mono)' }, inputMode: 'numeric', maxLength: 11, placeholder: '•••••••••••' }))),
      h('div', { className: 'trust-strip', style: { marginTop: 16 } }, h(Icon, { name: 'shield' }), 'Dial *565*0# on your registered line to retrieve your BVN.')),
    3: h('div', null,
      h('h1', { className: 't-display', style: { fontSize: desktop ? 30 : 26 } }, 'Is this you?'),
      h('p', { style: { fontSize: 14, color: 'var(--ink-3)', margin: '8px 0 22px' } }, 'Returned by your bank via Paystack.'),
      h('div', { className: 'card', style: { padding: 22, textAlign: 'center' } },
        h('div', { className: 'eyebrow', style: { marginBottom: 8 } }, 'Verified name'),
        h('div', { className: 't-display', style: { fontSize: 24 } }, 'NKEM C. ADEYEMI'),
        h('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 12, color: 'var(--verified)', fontSize: 13, fontWeight: 600 } }, h('span', { className: 'vmark', style: { width: 18, height: 18, background: 'var(--verified)' } }, h(Icon, { name: 'check' })), 'BVN matched')),
      h('button', { className: 'btn btn-ghost btn-sm btn-block', style: { marginTop: 14, color: 'var(--ink-3)' } }, 'This doesn’t look right')),
    4: h('div', null,
      h('h1', { className: 't-display', style: { fontSize: desktop ? 30 : 26 } }, 'Business details'),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 18, marginTop: 20 } },
        h(Field, { label: 'Business name' }, h('input', { className: 'input', defaultValue: 'Nkem Atelier' })),
        h(Field, { label: 'Business type' }, h('div', { style: { display: 'flex', flexDirection: 'column', gap: 9 } },
          h(Pick, { label: 'Sole proprietor', sub: 'Just me', on: biz === 'sole', onClick: () => setBiz('sole') }),
          h(Pick, { label: 'Registered business', sub: 'CAC registered', on: biz === 'reg', onClick: () => setBiz('reg') }))),
        h('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 } },
          h(Field, { label: 'City' }, h('input', { className: 'input', defaultValue: 'Lekki' })),
          h(Field, { label: 'State' }, h('input', { className: 'input', defaultValue: 'Lagos' }))))),
    5: h('div', null,
      h('h1', { className: 't-display', style: { fontSize: desktop ? 30 : 26 } }, 'Where should we pay you?'),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 18, marginTop: 20 } },
        h(Field, { label: 'Bank' }, h('select', { className: 'input', value: bank, onChange: e => setBank(e.target.value) }, h('option', { value: '' }, 'Select your bank'), BANKS.map(b => h('option', { key: b, value: b }, b)))),
        h(Field, { label: 'Account number' }, h('input', { className: 'input', inputMode: 'numeric', maxLength: 10, value: acct, onChange: e => setAcct(e.target.value.replace(/\D/g, '')), placeholder: '0123456789', style: { fontFamily: 'var(--font-mono)', letterSpacing: '.1em' } })),
        resolved && h('div', { className: 'card screen-fade', style: { padding: 14, display: 'flex', alignItems: 'center', gap: 11, borderColor: 'var(--verified)', background: 'var(--verified-tint)' } },
          h('span', { className: 'vmark', style: { width: 24, height: 24, background: 'var(--verified)' } }, h(Icon, { name: 'check' })),
          h('div', null, h('div', { style: { fontWeight: 700, fontSize: 14.5, color: 'var(--verified)' } }, 'NKEM C. ADEYEMI'), h('div', { style: { fontSize: 12, color: 'var(--ink-2)' } }, (bank || 'Your bank') + ' · auto-resolved'))))),
    6: h('div', null,
      h('h1', { className: 't-display', style: { fontSize: desktop ? 30 : 26 } }, 'Payout schedule'),
      h('p', { style: { fontSize: 14, color: 'var(--ink-3)', margin: '8px 0 20px' } }, 'When should we settle your earnings?'),
      h('div', { style: { display: 'flex', flexDirection: 'column', gap: 9 } },
        h(Pick, { label: 'Daily (T+1)', sub: 'Paid the next working day — recommended', on: settle === 'daily', onClick: () => setSettle('daily') }),
        h(Pick, { label: 'Weekly', sub: 'Every Monday', on: settle === 'weekly', onClick: () => setSettle('weekly') }),
        h(Pick, { label: 'On-demand', sub: 'Withdraw when you like', on: settle === 'demand', onClick: () => setSettle('demand') }))),
    7: h('div', null,
      h('h1', { className: 't-display', style: { fontSize: desktop ? 30 : 26 } }, 'Review & submit'),
      h('div', { className: 'card', style: { padding: '4px 16px', marginTop: 18 } },
        [['Legal name', 'Nkem C. Adeyemi'], ['BVN', '•••••••••11'], ['Business', 'Nkem Atelier · ' + (biz === 'sole' ? 'Sole proprietor' : 'Registered')], ['Bank', (bank || 'GTBank') + ' · ' + (acct || '0123456789')], ['Payouts', settle === 'daily' ? 'Daily (T+1)' : settle === 'weekly' ? 'Weekly' : 'On-demand']].map(([l, v], i) =>
          h('div', { key: i, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 0', borderBottom: i < 4 ? '1px solid var(--line)' : 'none' } },
            h('span', { style: { fontSize: 13, color: 'var(--ink-3)' } }, l), h('div', { style: { display: 'flex', alignItems: 'center', gap: 10 } }, h('span', { style: { fontWeight: 600, fontSize: 14 } }, v), h('span', { style: { fontSize: 12, color: 'var(--accent)', fontWeight: 600, cursor: 'pointer' } }, 'Edit'))))),
      h('div', { className: 'trust-strip', style: { marginTop: 14 } }, h(Icon, { name: 'lock' }), 'Submitting creates your Paystack subaccount securely.')),
    8: verifying
      ? h('div', { style: { textAlign: 'center', padding: '40px 0' } },
        h('div', { className: 'spin', style: { width: 44, height: 44, borderWidth: 3, borderColor: 'var(--line-strong)', borderTopColor: 'var(--accent)', margin: '0 auto 22px' } }),
        h('h1', { className: 't-display', style: { fontSize: 26 } }, 'Verifying your details'),
        h('p', { style: { fontSize: 14.5, color: 'var(--ink-2)', marginTop: 10 } }, 'This usually takes a few minutes. You can keep working — we’ll notify you.'))
      : h('div', { style: { textAlign: 'center', padding: '20px 0' } },
        h('div', { className: 'confirm-ring', style: { margin: '0 auto' } }, h(Icon, { name: 'shield' })),
        h('div', { className: 'eyebrow', style: { marginTop: 22, color: 'var(--verified)' } }, 'Secure Pay active'),
        h('h1', { className: 't-display', style: { fontSize: 30, marginTop: 8 } }, 'You’re verified'),
        h('p', { style: { fontSize: 14.5, color: 'var(--ink-2)', marginTop: 12, maxWidth: 320, margin: '12px auto 0', lineHeight: 1.55 } }, 'Your Secure Pay badge is now live on your store. Buyers can pay you directly via Paystack.'),
        h('button', { className: 'btn btn-secondary btn-md', style: { marginTop: 22 } }, 'Try buying from your own store — we’ll refund')),
  };

  const showNav = step < 8;
  const label = step === 0 ? 'Start verification' : step === 7 ? 'Submit for verification' : 'Continue';
  return h('div', { className: 'lm-scroll screen-fade', style: { display: 'flex', flexDirection: 'column', minHeight: '100%' } },
    h('div', { style: { padding: desktop ? '24px 40px 0' : '46px 18px 0', display: 'flex', alignItems: 'center', gap: 14 } },
      h('button', { className: 'btn btn-ghost btn-sm', style: { paddingLeft: 8 }, onClick: back }, h(Icon, { name: 'chevL' })),
      h('div', { className: 'eyebrow', style: { flex: 1 } }, step < 8 ? 'Verification · step ' + (step + 1) + ' of 8' : 'Verification'),
      step > 0 && step < 8 && h('div', { style: { display: 'flex', gap: 4, width: 130 } }, STEPS.slice(0, 8).map((_, i) => h('span', { key: i, style: { flex: 1, height: 4, borderRadius: 9, background: i <= step ? 'var(--accent)' : 'var(--line-strong)' } })))),
    h('div', { style: { flex: 1, padding: desktop ? '20px 40px' : '18px 18px', maxWidth: 540, margin: '0 auto', width: '100%' } }, bodies[step]),
    showNav && h('div', { style: { padding: desktop ? '16px 40px 28px' : '14px 18px 28px', maxWidth: 540, margin: '0 auto', width: '100%' } },
      h('button', { className: 'btn btn-primary btn-lg btn-block', onClick: next }, step === 7 && h(Icon, { name: 'lock' }), label)),
    !showNav && !verifying && h('div', { style: { padding: desktop ? '0 40px 28px' : '0 18px 28px', maxWidth: 540, margin: '0 auto', width: '100%' } },
      h('button', { className: 'btn btn-primary btn-lg btn-block', onClick: () => go('v-dash') }, 'Go to dashboard')));
}

window.VendorKYC = VendorKYC;
})();