/* global React, bbH, I */
// ============================================================================
// BlueBorrow — lead form fields (2-step)
// ============================================================================
const h = window.bbH;

function digits(s) { return (s || '').replace(/\D/g, ''); }
function validEmail(s) { return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test((s || '').trim()); }
function fmtPhone(s) {
  const d = digits(s).slice(0, 10);
  if (d.length <= 3) return d;
  if (d.length <= 6) return `(${d.slice(0,3)}) ${d.slice(3)}`;
  return `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`;
}

function Field({ label, err, full, children }) {
  return h('div', { className: 'field' + (err ? ' err' : '') + (full ? ' field--full' : '') },
    h('label', null, label, h('span', { className: 'req' }, ' *')),
    children,
    err && h('div', { className: 'field__err' }, I.alert(), err),
  );
}

function Sel({ value, onChange, placeholder, options }) {
  return h('select', { className: value ? '' : 'is-empty', value, onChange: (e) => onChange(e.target.value) },
    h('option', { value: '' }, placeholder),
    options.map((o) => h('option', { key: o, value: o }, o)),
  );
}

function LeadFields({ step, data, set, errors }) {
  const f = (k, v) => set({ [k]: v });

  if (step === 1) {
    return h('div', { className: 'leadform step-enter' },
      h(Field, { label: 'Desired loan amount', err: errors.amount },
        h(Sel, { value: data.amount, onChange: (v) => f('amount', v), placeholder: 'Select amount', options: window.AMOUNT_OPTIONS })),
      h(Field, { label: 'Purpose of loan', err: errors.purpose },
        h(Sel, { value: data.purpose, onChange: (v) => f('purpose', v), placeholder: 'Select purpose', options: window.PURPOSE_OPTIONS })),
      h(Field, { label: 'Estimated credit rating', err: errors.credit },
        h(Sel, { value: data.credit, onChange: (v) => f('credit', v), placeholder: 'Select rating', options: window.CREDIT_OPTIONS })),
      h(Field, { label: 'Residency type', err: errors.residency },
        h(Sel, { value: data.residency, onChange: (v) => f('residency', v), placeholder: 'Select one', options: window.RESIDENCY_OPTIONS })),
    );
  }

  // step 2 — contact + consent
  return h('div', { className: 'leadform step-enter' },
    h(Field, { label: 'Full name', err: errors.name, full: true },
      h('input', { value: data.name, autoComplete: 'name', placeholder: 'First & last name', onChange: (e) => f('name', e.target.value) })),
    h(Field, { label: 'Email', err: errors.email },
      h('input', { type: 'email', inputMode: 'email', value: data.email, autoComplete: 'email', placeholder: 'you@email.com', onChange: (e) => f('email', e.target.value) })),
    h(Field, { label: 'Phone number', err: errors.phone },
      h('input', { type: 'tel', inputMode: 'tel', value: data.phone, autoComplete: 'tel', placeholder: '(555) 123-4567', onChange: (e) => f('phone', fmtPhone(e.target.value)) })),
    h(Field, { label: 'Home address', err: errors.address, full: true },
      h('input', { value: data.address, autoComplete: 'street-address', placeholder: 'Street address', onChange: (e) => f('address', e.target.value) })),
    h(Field, { label: 'State', err: errors.state },
      h(Sel, { value: data.state, onChange: (v) => f('state', v), placeholder: 'Select state', options: window.US_STATES })),
    h(Field, { label: 'ZIP code', err: errors.zip },
      h('input', { inputMode: 'numeric', value: data.zip, autoComplete: 'postal-code', placeholder: '12345', maxLength: 5, onChange: (e) => f('zip', digits(e.target.value).slice(0, 5)) })),
    h(Field, { label: 'Country', err: errors.country, full: true },
      h(Sel, { value: data.country, onChange: (v) => f('country', v), placeholder: 'Select country', options: window.COUNTRY_OPTIONS })),

    h('label', { className: 'consent consent--full' + (errors.consent ? ' err' : '') },
      h('div', { className: 'consent__row' + (data.consent ? ' on' : '') },
        h('span', { className: 'consent__box' }, I.check()),
        h('input', { type: 'checkbox', checked: data.consent, onChange: (e) => f('consent', e.target.checked), style: { position: 'absolute', opacity: 0, width: 0, height: 0 } }),
        h('span', { className: 'consent__text' },
          'By checking this box and submitting this form, I consent to BlueBorrow sharing the information I provide with its third-party partners — including loan specialists and lenders — so they can review my request and contact me, and I agree to receive SMS text messages and phone calls (including via automated technology) from BlueBorrow and its partners at the number provided. ',
          'Consent is not a condition of any purchase. Message frequency varies. Message and data rates may apply. Reply HELP for help or STOP to unsubscribe at any time. See our ',
          h('a', { href: '/privacy', target: '_blank', rel: 'noopener' }, 'Privacy Policy'), ' and ',
          h('a', { href: '/terms', target: '_blank', rel: 'noopener' }, 'Terms of Service'), '.',
        ),
      ),
    ),
    errors.consent && h('div', { className: 'field__err consent__err' }, I.alert(), errors.consent),
  );
}

Object.assign(window, { LeadFields, validEmail, digits });