/* Uleez — Lessor onboarding (multi-step signup) */
(function () {
  const { useState, useRef } = React;
  const Icon  = window.Icon;
  const Field = window.Field;
  const Button = window.Button;

  // Single source of truth: KD.WILAYAS (data.jsx) — the 58 official wilayas.
  const WILAYAS = KD.WILAYAS;

  // ─── Step indicator ───────────────────────────────────────────────────────
  function Steps({ current }) {
    const t = window.I18N ? I18N.useT() : ((k) => k);
    const steps = ['Compte', 'Profil', 'Confirmation'];
    return React.createElement('div', { className: 'ob-steps' },
      steps.map((s, i) => React.createElement('div', { key: i, className: `ob-step${i < current ? ' done' : i === current ? ' active' : ''}` },
        React.createElement('div', { className: 'ob-step-dot' },
          i < current
            ? React.createElement(Icon, { name: 'check', size: 13 })
            : React.createElement('span', null, i + 1)
        ),
        React.createElement('div', { className: 'ob-step-label' }, s)
      ))
    );
  }

  // ─── Step 1 : Compte ──────────────────────────────────────────────────────
  function AccountStep({ onNext }) {
    const t = window.I18N ? I18N.useT() : ((k) => k);
    const [form, setForm] = useState({
      firstName: '', lastName: '', email: '', phone: '', password: '', confirm: '',
      // Indicatif du pays. Repris du dernier choix mémorisé par l'écran de connexion : un
      // loueur qui vient de tenter de se connecter ne le rechoisit pas ici.
      dial: (() => {
        try { return API.dialCodeFor(localStorage.getItem('uleez-dial')).dial; }
        catch (_) { return API.DEFAULT_DIAL; }
      })(),
    });
    const [errors, setErrors] = useState({});
    const [loading, setLoading] = useState(false);
    const [serverErr, setServerErr] = useState('');
    const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

    const validate = () => {
      const e = {};
      if (!form.firstName.trim()) e.firstName = 'Requis';
      if (!form.lastName.trim()) e.lastName = 'Requis';
      if (!form.email.includes('@')) e.email = 'Email invalide';
      // Longueur exacte du pays choisi, et non « au moins 9 chiffres » — qui acceptait aussi
      // bien 12 chiffres qu'un 0 de tête, parti tel quel en « +2130661… ».
      if (!API.toE164(form.dial, form.phone)) {
        e.phone = `Numéro invalide pour ${API.dialCodeFor(form.dial).name}`;
      }
      const pwdRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/;
      if (!pwdRegex.test(form.password)) e.password = t('ob.passwordRule');
      if (form.password !== form.confirm) e.confirm = t('rp.mismatch');
      return e;
    };

    const submit = async () => {
      const errs = validate();
      if (Object.keys(errs).length) { setErrors(errs); return; }
      setErrors({});
      setServerErr('');
      setLoading(true);
      try {
        const phone = API.toE164(form.dial, form.phone);
        const res = await API.auth.signup({
          firstName: form.firstName.trim(),
          lastName: form.lastName.trim(),
          email: form.email.trim(),
          phone,
          password: form.password,
          role: 'lessor',
        });
        API.setSession(res); // store access + refresh tokens
        onNext({ userId: res.user?.id, phone, email: form.email.trim(), firstName: form.firstName.trim(), lastName: form.lastName.trim() });
      } catch (ex) {
        setServerErr(ex.message || t('ob.signupError'));
      } finally {
        setLoading(false);
      }
    };

    return React.createElement('div', { className: 'ob-body' },
      React.createElement('h3', { className: 'ob-title' }, t('ob.createAccount')),
      React.createElement('p', { className: 'ob-sub' }, 'Ces informations permettent de créer votre accès à la plateforme.'),

      serverErr && React.createElement('div', { className: 'lf-banner' },
        React.createElement(Icon, { name: 'alert', size: 15 }), serverErr),

      React.createElement('div', { className: 'ob-grid2' },
        React.createElement(Field, { label: t('ob.firstName'), error: errors.firstName },
          React.createElement('input', { className: `input${errors.firstName ? ' input-err' : ''}`, value: form.firstName, onChange: set('firstName'), placeholder: 'Mohamed' })),
        React.createElement(Field, { label: t('ob.lastName'), error: errors.lastName },
          React.createElement('input', { className: `input${errors.lastName ? ' input-err' : ''}`, value: form.lastName, onChange: set('lastName'), placeholder: 'Bensalem' })),
      ),
      React.createElement(Field, { label: 'Adresse e-mail *', error: errors.email },
        React.createElement('input', { className: `input${errors.email ? ' input-err' : ''}`, type: 'email', value: form.email, onChange: set('email'), placeholder: 'agence@exemple.dz' })),
      React.createElement(Field, { label: t('ob.phone'), error: errors.phone },
        React.createElement(PhoneInput, {
          dial: form.dial, national: form.phone, error: !!errors.phone,
          onChange: (d, n) => setForm((f) => ({ ...f, dial: d, phone: n })),
        })),
      React.createElement('div', { className: 'ob-grid2' },
        React.createElement(Field, { label: t('ob.password'), error: errors.password },
          React.createElement('input', { className: `input${errors.password ? ' input-err' : ''}`, type: 'password', value: form.password, onChange: set('password'), placeholder: 'Min. 8 caract., 1 maj., 1 chiffre, 1 spécial' })),
        React.createElement(Field, { label: t('ob.confirmPassword'), error: errors.confirm },
          React.createElement('input', { className: `input${errors.confirm ? ' input-err' : ''}`, type: 'password', value: form.confirm, onChange: set('confirm'), placeholder: '••••••••' })),
      ),
      React.createElement('div', { className: 'ob-footer' },
        React.createElement(Button, { variant: 'primary', size: 'lg', className: 'btn-block', loading, disabled: loading, onClick: submit },
          loading ? t('ob.creating') : 'Continuer →'))
    );
  }

  // ─── Step 2 : Profil (Agence ou Particulier) ─────────────────────────────
  function ProfileStep({ account, onNext, onBack }) {
    const t = window.I18N ? I18N.useT() : ((k) => k);
    const isPro = (type) => type === 'agency';

    const [form, setForm] = useState({
      businessName: '', type: 'independent', wilaya: 'Alger', city: '', address: '',
      phone: '', dial: API.DEFAULT_DIAL,
      email: account.email || '', legalIdentifier: '', taxIdentifier: '', description: '',
    });
    const [errors, setErrors] = useState({});
    const [loading, setLoading] = useState(false);
    const [serverErr, setServerErr] = useState('');
    const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

    const handleTypeChange = (e) => {
      const newType = e.target.value;
      setForm(f => ({
        ...f,
        type: newType,
        // For individuals, pre-fill businessName with full name if not yet filled
        businessName: newType === 'independent' && !f.businessName.trim()
          ? `${account.firstName || ''} ${account.lastName || ''}`.trim()
          : f.businessName,
      }));
    };

    const validate = () => {
      const e = {};
      if (!form.wilaya) e.wilaya = 'Requis';
      if (!form.city.trim()) e.city = 'Requis';
      if (isPro(form.type) && !form.businessName.trim()) e.businessName = t('ob.rcRequired');
      return e;
    };

    const submit = async () => {
      const errs = validate();
      if (Object.keys(errs).length) { setErrors(errs); return; }
      setErrors({});
      setServerErr('');
      setLoading(true);
      try {
        const profile = await API.lessor.createProfile({
          businessName: form.businessName.trim() || `${account.firstName} ${account.lastName}`.trim(),
          type: form.type,
          wilaya: form.wilaya,
          city: form.city.trim(),
          address: form.address.trim() || undefined,
          // Normalisé avant envoi, comme le numéro de compte : `Lessor.phone` recevait
          // jusqu'ici la saisie brute.
          phone: API.toE164(form.dial, form.phone) || undefined,
          email: form.email.trim() || undefined,
          legalIdentifier: isPro(form.type) ? (form.legalIdentifier.trim() || undefined) : undefined,
          taxIdentifier: isPro(form.type) ? (form.taxIdentifier.trim() || undefined) : undefined,
          description: form.description.trim() || undefined,
        });
        onNext({ lessorId: profile.id, businessName: profile.businessName });
      } catch (ex) {
        setServerErr(ex.message || t('ob.genericError'));
      } finally {
        setLoading(false);
      }
    };

    return React.createElement('div', { className: 'ob-body' },
      React.createElement('h3', { className: 'ob-title' }, isPro(form.type) ? t('ob.yourAgency') : t('ob.yourProfile')),
      React.createElement('p', { className: 'ob-sub' }, 'Ces informations seront visibles sur votre profil public.'),

      serverErr && React.createElement('div', { className: 'lf-banner' },
        React.createElement(Icon, { name: 'alert', size: 15 }), serverErr),

      // Type selection — prominent, at the top
      React.createElement(Field, { label: t('ob.youAre') },
        React.createElement('select', { className: 'input', value: form.type, onChange: handleTypeChange },
          React.createElement('option', { value: 'independent' }, t('ob.independent')),
          React.createElement('option', { value: 'agency' }, t('ob.agency')))),

      // businessName — required for agency, optional for individual
      React.createElement(Field, {
        label: isPro(form.type) ? t('ob.agencyName') : 'Nom commercial (optionnel)',
        error: errors.businessName,
      },
        React.createElement('input', {
          className: `input${errors.businessName ? ' input-err' : ''}`,
          value: form.businessName,
          onChange: set('businessName'),
          placeholder: isPro(form.type) ? 'Alger Auto Rent' : `${account.firstName} ${account.lastName}`.trim(),
        })),

      React.createElement('div', { className: 'ob-grid2' },
        React.createElement(Field, { label: 'Wilaya *', error: errors.wilaya },
          React.createElement('select', { className: `input${errors.wilaya ? ' input-err' : ''}`, value: form.wilaya, onChange: set('wilaya') },
            WILAYAS.map(w => React.createElement('option', { key: w, value: w }, w)))),
        React.createElement(Field, { label: 'Ville *', error: errors.city },
          React.createElement('input', { className: `input${errors.city ? ' input-err' : ''}`, value: form.city, onChange: set('city'), placeholder: 'Alger Centre' }))),

      React.createElement(Field, { label: 'Adresse' },
        React.createElement('input', { className: 'input', value: form.address, onChange: set('address'), placeholder: '12 Rue Didouche Mourad' })),

      React.createElement('div', { className: 'ob-grid2' },
        // Ce champ n'avait AUCUNE validation ni normalisation : il partait brut vers
        // `Lessor.phone`, d'où des numéros stockés dans quatre formes différentes.
        React.createElement(Field, { label: t('ob.contactPhone') },
          React.createElement(PhoneInput, {
            dial: form.dial, national: form.phone,
            onChange: (d, n) => setForm((f) => ({ ...f, dial: d, phone: n })),
          })),
        React.createElement(Field, { label: t('ob.contactEmail') },
          React.createElement('input', { className: 'input', type: 'email', value: form.email, onChange: set('email'), placeholder: 'contact@agence.dz' }))),

      // RC/NIF — only for agencies
      isPro(form.type) && React.createElement('div', { className: 'ob-grid2' },
        React.createElement(Field, { label: t('ob.rcNumber') },
          React.createElement('input', { className: 'input', value: form.legalIdentifier, onChange: set('legalIdentifier'), placeholder: 'RC16/00-1234567' })),
        React.createElement(Field, { label: 'N° Fiscal (NIF)' },
          React.createElement('input', { className: 'input', value: form.taxIdentifier, onChange: set('taxIdentifier'), placeholder: '000000000000000' }))),

      React.createElement(Field, { label: 'Description (optionnel)' },
        React.createElement('textarea', { className: 'input', rows: 3, value: form.description, onChange: set('description'), placeholder: isPro(form.type) ? t('ob.descPlaceholder') : t('ob.descPlaceholderIndep'), style: { resize: 'vertical' } })),

      // Info box about post-login setup
      React.createElement('div', { className: 'ob-info-box' },
        React.createElement(Icon, { name: 'shield', size: 15 }),
        React.createElement('span', null, t('ob.completeLater'))),

      React.createElement('div', { className: 'ob-footer ob-footer-2' },
        React.createElement(Button, { variant: 'ghost', onClick: onBack, disabled: loading }, '← Retour'),
        React.createElement(Button, { variant: 'primary', size: 'lg', loading, disabled: loading, onClick: submit },
          loading ? 'Enregistrement…' : t('ob.goToDashboard')))
    );
  }

  // ─── Step 3 : Succès ──────────────────────────────────────────────────────
  function SuccessStep({ account, agency, onLogin }) {
    const t = window.I18N ? I18N.useT() : ((k) => k);
    return React.createElement('div', { className: 'ob-body ob-success' },
      React.createElement('div', { className: 'ob-success-icon' },
        React.createElement(Icon, { name: 'check', size: 36 })),
      React.createElement('h3', { className: 'ob-title' }, t('ob.accountCreated')),
      React.createElement('p', { className: 'ob-sub' },
        `Bienvenue ${account?.firstName || ''} ! Votre espace loueur `,
        React.createElement('strong', null, agency?.businessName || ''),
        t('ob.isReady')),
      React.createElement('div', { className: 'ob-steps-info' },
        [
          { icon: 'clipboard', text: t('ob.completeFile') },
          { icon: 'message', text: t('ob.reviewDelay') },
          { icon: 'car', text: t('ob.onceActive') },
        ].map(({ icon, text }, i) =>
          React.createElement('div', { key: i, className: 'ob-step-info' },
            React.createElement('div', { className: 'ob-step-info-ico' }, React.createElement(Icon, { name: icon, size: 16 })),
            React.createElement('span', null, text)))),
      React.createElement('div', { className: 'ob-footer' },
        React.createElement(Button, { variant: 'primary', size: 'lg', className: 'btn-block', onClick: onLogin },
          t('ob.goToSpace')))
    );
  }

  // ─── Orchestrator ─────────────────────────────────────────────────────────
  function LessorOnboarding({ onBack, onLogin }) {
    const [step, setStep] = useState(0);
    const [account, setAccount] = useState(null);
    const [agency, setAgency] = useState(null);

    return React.createElement('div', { className: 'ob-shell' },
      React.createElement('div', { className: 'ob-card' },
        React.createElement('div', { className: 'ob-head' },
          React.createElement('button', { className: 'ob-back-btn', onClick: step === 0 ? onBack : undefined, style: { visibility: step === 0 ? 'visible' : 'hidden' } },
            React.createElement(Icon, { name: 'chevLeft', size: 18 })),
          React.createElement('div', { className: 'ob-head-brand' },
            React.createElement('img', { src: 'icons/Icon-192.png', style: { width: 32, height: 32, objectFit: 'cover', borderRadius: 8 } }),
            React.createElement('span', { className: 'ob-brand-name' }, 'Ul', React.createElement('strong', null, 'eez'))),
          React.createElement('div', { style: { width: 40 } })),

        React.createElement(Steps, { current: step }),

        step === 0 && React.createElement(AccountStep, {
          onNext: data => { setAccount(data); setStep(1); }
        }),
        step === 1 && React.createElement(ProfileStep, {
          account,
          onNext: data => { setAgency(data); setStep(2); },
          onBack: () => setStep(0),
        }),
        step === 2 && React.createElement(SuccessStep, {
          account,
          agency,
          onLogin,
        }),
      )
    );
  }

  window.LessorOnboarding = LessorOnboarding;
})();