'use client';

import { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import {
  ArrowRight,
  Briefcase,
  Mail,
  MapPin,
  Shield,
  Sparkles,
  User,
  UserRound,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { ProfilePhotoPicker } from '@/components/ui/ProfilePhotoPicker';
import { GenderSelect } from '@/components/ui/GenderSelect';
import { ServiceAreaPicker } from '@/components/map/LocationPicker';
import { SkillPicker, hasWorkerSkillSelection } from '@/components/workers/SkillPicker';
import { uploadAvatar } from '@/lib/avatar';
import { GoogleSignInButton } from '@/components/auth/GoogleSignInButton';
import {
  RegisterFieldGrid,
  RegisterFieldGroup,
  RegisterFormError,
  RegisterFormFooter,
  RegisterFormPanel,
  RegisterFormSection,
  RegisterFormShell,
  RegisterGoogleBanner,
  RegisterInfoCallout,
  RegisterStepActions,
  RegisterStepIndicator,
  RegisterSummaryCard,
  RegisterTermsSection,
} from '@/components/auth/RegisterFormUi';
import { useAuth } from '@/contexts/AuthContext';
import { useLanguage } from '@/contexts/LanguageContext';
import { api } from '@/lib/api';
import { cn } from '@/lib/utils';
import { isGoogleSignInConfigured } from '@/lib/googleAuth';
import type { ServiceAreaKey } from '@/lib/geocode';
import { AREA_LABELS } from '@/lib/geocode';
import { useDefaultWorkerServiceArea } from '@/hooks/useDefaultWorkerServiceArea';
import { readDefaultWorkerServiceAreaSync } from '@/lib/workerServiceArea';
import { t as translate } from '@/lib/registerLang';

const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

type Step = 'account' | 'skills' | 'areas' | 'otp';

const STEPS = [
  { key: 'account', label: 'Account', labelTl: 'Account', num: 1 },
  { key: 'skills', label: 'Skills', labelTl: 'Kasanayan', num: 2 },
  { key: 'areas', label: 'Areas', labelTl: 'Lugar', num: 3 },
  { key: 'otp', label: 'Verify', labelTl: 'Beripika', num: 4 },
] as const;

const STEP_META: Record<
  Step,
  { title: string; titleTl: string; subtitle: string; subtitleTl: string; icon: typeof Briefcase }
> = {
  account: {
    title: 'Create your account',
    titleTl: 'Gumawa ng account',
    subtitle: 'Continue with Google to autofill, or enter your details manually',
    subtitleTl: 'Gamitin ang Google para auto-fill, o i-type ang detalye mo',
    icon: User,
  },
  skills: {
    title: 'Your skills',
    titleTl: 'Mga kasanayan mo',
    subtitle: 'Select the trades and services you offer',
    subtitleTl: 'Piliin ang mga trabaho o serbisyo na kaya mong gawin',
    icon: Briefcase,
  },
  areas: {
    title: 'Service areas',
    titleTl: 'Mga lugar ng serbisyo',
    subtitle: 'Choose where you are available to work',
    subtitleTl: 'Piliin kung saan ka puwedeng magtrabaho',
    icon: MapPin,
  },
  otp: {
    title: 'Verify your email',
    titleTl: 'I-verify ang email mo',
    subtitle: "We'll send a verification code to your email address",
    subtitleTl: 'Papadalhan ka namin ng verification code sa email mo',
    icon: Mail,
  },
};

export default function RegisterWorkerPage() {
  const { register } = useAuth();
  const { lang } = useLanguage();
  const router = useRouter();
  const [step, setStep] = useState<Step>('account');
  const [form, setForm] = useState({
    firstName: '',
    lastName: '',
    displayName: '',
    email: '',
    password: '',
    gender: '',
  });
  const [confirmPassword, setConfirmPassword] = useState('');
  const [displayNameError, setDisplayNameError] = useState('');
  const [useRealNameAsDisplay, setUseRealNameAsDisplay] = useState(false);
  const [googleIdToken, setGoogleIdToken] = useState<string | null>(null);
  const [googleConnectedEmail, setGoogleConnectedEmail] = useState<string | null>(null);
  const [googleLoading, setGoogleLoading] = useState(false);
  const [serviceAreas, setServiceAreas] = useState<ServiceAreaKey[]>(() => {
    const detected = readDefaultWorkerServiceAreaSync();
    return detected ? [detected] : ['DAVAO_CITY'];
  });
  const [categoryIds, setCategoryIds] = useState<string[]>([]);
  const [otherSkills, setOtherSkills] = useState('');
  const [isStudent, setIsStudent] = useState(false);
  const [acceptedTerms, setAcceptedTerms] = useState(false);
  const [termsError, setTermsError] = useState('');
  const [profilePhoto, setProfilePhoto] = useState<File | null>(null);
  const [profilePhotoPreview, setProfilePhotoPreview] = useState<string | null>(null);
  const [otp, setOtp] = useState('');
  const [otpSent, setOtpSent] = useState(false);
  const [emailError, setEmailError] = useState('');
  const [passwordError, setPasswordError] = useState('');
  const [genderError, setGenderError] = useState('');
  const [confirmPasswordError, setConfirmPasswordError] = useState('');
  const [otherSkillsError, setOtherSkillsError] = useState('');
  const [skillError, setSkillError] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);
  const [resending, setResending] = useState(false);
  const { defaultArea, resolved: defaultAreaResolved } = useDefaultWorkerServiceArea();
  const [areasAutoFilled, setAreasAutoFilled] = useState(
    () => readDefaultWorkerServiceAreaSync() != null
  );

  const t = (en: string, tl: string) => translate(lang, en, tl);

  const realFullName = `${form.firstName.trim()} ${form.lastName.trim()}`.trim();

  useEffect(() => {
    if (!defaultAreaResolved || areasAutoFilled || !defaultArea) return;
    setServiceAreas((prev) => {
      if (prev.length === 1 && prev[0] === 'DAVAO_CITY') {
        return [defaultArea];
      }
      return prev;
    });
    setAreasAutoFilled(true);
  }, [areasAutoFilled, defaultArea, defaultAreaResolved]);

  const meta = STEP_META[step];
  const Icon = meta.icon;

  const summaryBits = useMemo(() => {
    const bits: string[] = [];
    if (form.firstName.trim()) {
      bits.push(`${form.firstName.trim()} ${form.lastName.trim()}`.trim());
    }
    if (categoryIds.length > 0 || otherSkills.trim()) {
      const skillCount = categoryIds.length + (otherSkills.trim() ? 1 : 0);
      bits.push(
        t(
          `${skillCount} skill${skillCount !== 1 ? 's' : ''}`,
          `${skillCount} kasanayan`
        )
      );
    }
    if (serviceAreas.length > 0) {
      bits.push(
        t(
          `${serviceAreas.length} area${serviceAreas.length !== 1 ? 's' : ''}`,
          `${serviceAreas.length} lugar`
        )
      );
    }
    return bits;
  }, [categoryIds.length, form.firstName, form.lastName, otherSkills, serviceAreas.length, lang]);

  const goBack = () => {
    setError('');
    const idx = STEPS.findIndex((s) => s.key === step);
    if (idx > 0) {
      if (step === 'otp') {
        setOtp('');
        setOtpSent(false);
      }
      setStep(STEPS[idx - 1].key);
    }
  };

  const validateEmail = () => {
    const email = form.email.trim();
    if (!email) {
      setEmailError(t('Enter your email address', 'Ilagay ang email address mo'));
      return null;
    }
    if (!EMAIL_RE.test(email)) {
      setEmailError(t('Enter a valid email address', 'Maglagay ng valid na email address'));
      return null;
    }
    setEmailError('');
    return email;
  };

  const handleGooglePrefill = async (idToken: string) => {
    setGoogleLoading(true);
    setError('');
    try {
      const res = await api<{
        data: {
          email: string;
          firstName: string;
          lastName: string;
          avatarUrl?: string | null;
        };
      }>('/auth/google/profile', {
        method: 'POST',
        body: JSON.stringify({ idToken }),
      });

      setGoogleIdToken(idToken);
      setGoogleConnectedEmail(res.data.email);
      setForm((prev) => ({
        ...prev,
        firstName: res.data.firstName || prev.firstName,
        lastName: res.data.lastName || prev.lastName,
        email: res.data.email || prev.email,
        password: '',
      }));
      setConfirmPassword('');
      setPasswordError('');
      setConfirmPasswordError('');
      setEmailError('');

      if (res.data.avatarUrl && !profilePhoto) {
        setProfilePhotoPreview(res.data.avatarUrl);
      }
    } catch (err: unknown) {
      setError(
        err instanceof Error
          ? err.message
          : t('Could not load Google profile', 'Hindi ma-load ang Google profile')
      );
    } finally {
      setGoogleLoading(false);
    }
  };

  const clearGooglePrefill = () => {
    setGoogleIdToken(null);
    setGoogleConnectedEmail(null);
    setForm((prev) => ({ ...prev, password: '' }));
    setConfirmPassword('');
    if (profilePhotoPreview?.startsWith('https://') && !profilePhoto) {
      setProfilePhotoPreview(null);
    }
  };

  const handleAccountNext = (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setPasswordError('');
    setConfirmPasswordError('');
    setGenderError('');
    setDisplayNameError('');
    setTermsError('');
    setEmailError('');

    if (!form.firstName.trim() || !form.lastName.trim()) {
      setError(t('First and last name are required', 'Kailangan ang pangalan at apelyido'));
      return;
    }
    if (!form.displayName.trim() || form.displayName.trim().length < 2) {
      setDisplayNameError(
        t(
          'Enter a display name (at least 2 characters)',
          'Maglagay ng display name (hindi bababa sa 2 character)'
        )
      );
      return;
    }
    if (!form.gender) {
      setGenderError(t('Please select your gender', 'Piliin ang iyong kasarian'));
      return;
    }
    if (!googleIdToken) {
      const email = validateEmail();
      if (!email) return;

      if (form.password.length < 8) {
        setPasswordError(
          t(
            'Password must be at least 8 characters',
            'Ang password ay dapat hindi bababa sa 8 character'
          )
        );
        return;
      }
      if (form.password !== confirmPassword) {
        setConfirmPasswordError(t('Passwords do not match', 'Hindi magkatugma ang mga password'));
        return;
      }
    }
    if (!acceptedTerms) {
      setTermsError(
        t(
          'Please accept the Terms & Conditions to continue.',
          'Tanggapin muna ang Terms & Conditions para makapagpatuloy.'
        )
      );
      return;
    }

    setStep('skills');
  };

  const handleSkillsNext = (e: React.FormEvent) => {
    e.preventDefault();
    setSkillError('');
    setOtherSkillsError('');

    if (!hasWorkerSkillSelection(categoryIds, otherSkills)) {
      setSkillError(
        t(
          'Select at least one skill or describe your skill under "Skill not listed?"',
          'Pumili ng kahit isang kasanayan o ilarawan ang kasanayan mo sa "Wala sa listahan?"'
        )
      );
      return;
    }
    if (otherSkills.trim() && otherSkills.trim().length < 2) {
      setOtherSkillsError(
        t('Please describe your skill in a few words', 'Ilarawan ang kasanayan mo sa ilang salita')
      );
      return;
    }

    setError('');
    setStep('areas');
  };

  const registerWorker = async (opts?: { otpCode?: string }) => {
    await register({
      firstName: form.firstName,
      lastName: form.lastName,
      displayName: form.displayName.trim(),
      email: form.email.trim() || undefined,
      role: 'WORKER',
      gender: form.gender as 'MALE' | 'FEMALE' | 'OTHER' | 'PREFER_NOT_TO_SAY',
      serviceAreas,
      categoryIds,
      ...(otherSkills.trim() && { otherSkills: otherSkills.trim() }),
      isStudent,
      ...(opts?.otpCode ? { otpCode: opts.otpCode } : {}),
      ...(googleIdToken ? { googleIdToken } : { password: form.password }),
    });

    if (profilePhoto) {
      try {
        await uploadAvatar(profilePhoto);
      } catch {
        // Registration succeeded; photo can be uploaded later from profile
      }
    }

    router.push('/worker/dashboard');
  };

  const handleAreasNext = async (e: React.FormEvent) => {
    e.preventDefault();
    if (serviceAreas.length === 0) {
      setError(t('Select at least one service area', 'Pumili ng kahit isang lugar ng serbisyo'));
      return;
    }
    setError('');

    if (googleIdToken) {
      if (!acceptedTerms) {
        setError(
          t(
            'Please accept the Terms & Conditions to create your account.',
            'Tanggapin muna ang Terms & Conditions para magawa ang account mo.'
          )
        );
        setStep('account');
        return;
      }
      setLoading(true);
      try {
        await registerWorker();
      } catch (err: unknown) {
        setError(
          err instanceof Error
            ? err.message
            : t('Registration failed', 'Hindi natapos ang registration')
        );
      } finally {
        setLoading(false);
      }
      return;
    }

    setOtp('');
    setOtpSent(false);
    setStep('otp');
  };

  const handleSendOTP = async (e?: React.FormEvent) => {
    e?.preventDefault();
    const email = validateEmail();
    if (!email) return;
    setLoading(true);
    setError('');
    try {
      await api('/auth/worker/send-otp', {
        method: 'POST',
        body: JSON.stringify({ email }),
      });
      setOtpSent(true);
      setOtp('');
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : t('Failed to send OTP', 'Hindi naipadala ang OTP'));
    } finally {
      setLoading(false);
    }
  };

  const handleVerifyAndRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!acceptedTerms) {
      setError(
        t(
          'Please accept the Terms & Conditions to create your account.',
          'Tanggapin muna ang Terms & Conditions para magawa ang account mo.'
        )
      );
      setStep('account');
      return;
    }
    const email = validateEmail();
    if (!email) return;
    setLoading(true);
    setError('');
    try {
      await registerWorker({ otpCode: otp });
    } catch (err: unknown) {
      setError(
        err instanceof Error ? err.message : t('Registration failed', 'Hindi natapos ang registration')
      );
    } finally {
      setLoading(false);
    }
  };

  const handleResendOTP = async () => {
    const email = validateEmail();
    if (!email) return;
    setResending(true);
    setError('');
    try {
      await api('/auth/worker/resend-otp', {
        method: 'POST',
        body: JSON.stringify({ email }),
      });
    } catch (err: unknown) {
      setError(
        err instanceof Error ? err.message : t('Failed to resend OTP', 'Hindi naipadala ulit ang OTP')
      );
    } finally {
      setResending(false);
    }
  };

  const heroSubtitle =
    step === 'otp' && otpSent
      ? t(`Code sent to ${form.email.trim()}`, `Naipadala ang code sa ${form.email.trim()}`)
      : t(meta.subtitle, meta.subtitleTl);

  return (
    <RegisterFormShell
      roleLabel={t('Worker registration', 'Worker registration')}
      title={t(meta.title, meta.titleTl)}
      subtitle={heroSubtitle}
      backLabel={t('Back to role selection', 'Bumalik sa pagpili ng role')}
      lang={lang}
      stepIndicator={
        <RegisterStepIndicator steps={[...STEPS]} current={step} lang={lang} />
      }
    >
      {step === 'account' && (
        <form onSubmit={handleAccountNext} className="mx-auto max-w-2xl">
          <RegisterFormPanel>
            {!googleIdToken && isGoogleSignInConfigured() && (
              <RegisterFormSection
                icon={Sparkles}
                eyebrow={t('Optional', 'Opsyonal')}
                title={t('Quick start', 'Mabilisang umpisa')}
                description={t(
                  'Autofill your name, email, and photo from Google — or skip and type them in.',
                  'Auto-fill ang pangalan, email, at litrato mula sa Google — o i-type nang manual.'
                )}
              >
                <GoogleSignInButton
                  mode="continue"
                  onCredential={handleGooglePrefill}
                  onError={setError}
                  disabled={loading || googleLoading}
                  dividerLabel={t('or fill in manually', 'o i-type nang manual')}
                />
                {googleLoading && (
                  <p className="text-center text-sm text-muted">
                    {t('Loading Google profile…', 'Kinukuha ang Google profile…')}
                  </p>
                )}
              </RegisterFormSection>
            )}

            {googleIdToken && googleConnectedEmail && (
              <RegisterGoogleBanner
                email={googleConnectedEmail}
                onClear={clearGooglePrefill}
                clearLabel={t('Use manual instead', 'Manual na lang')}
                connectedLabel={t('Connected with Google', 'Nakakonekta sa Google')}
                hint={t(
                  'Details below were filled from Google — edit anything if needed.',
                  'Nakuha ang detalye mula sa Google — puwedeng baguhin.'
                )}
              />
            )}

            <RegisterFormSection
              icon={UserRound}
              eyebrow={t('Step 1', 'Hakbang 1')}
              title={t('Your profile', 'Profile mo')}
              description={t(
                'How customers will see you in search, messages, and your public listing.',
                'Kung paano ka makikita ng customers sa search, messages, at public listing.'
              )}
            >
              <RegisterFieldGroup label={t('Profile photo', 'Litrato sa profile')}>
                <ProfilePhotoPicker
                  value={profilePhoto}
                  previewUrl={profilePhotoPreview}
                  onChange={(file, preview) => {
                    setProfilePhoto(file);
                    setProfilePhotoPreview(preview);
                  }}
                  firstName={form.firstName}
                  lastName={form.lastName}
                  helperText={t(
                    'Upload, take a photo, or drag an image here.',
                    'Mag-upload, kumuha ng litrato, o i-drag ang larawan.'
                  )}
                  pendingLabel={
                    profilePhoto
                      ? t(
                          'Photo ready — saved when registration finishes',
                          'Handa na ang litrato — mase-save pag tapos ka na'
                        )
                      : profilePhotoPreview
                        ? t('Photo from Google — change anytime', 'Litrato mula sa Google — puwedeng palitan')
                        : undefined
                  }
                />
              </RegisterFieldGroup>

              <RegisterFieldGroup label={t('Legal name', 'Legal na pangalan')}>
                <RegisterFieldGrid>
                  <Input
                    label={t('First Name', 'Pangalan')}
                    value={form.firstName}
                    onChange={(e) => {
                      const firstName = e.target.value;
                      setForm((prev) => ({
                        ...prev,
                        firstName,
                        displayName: useRealNameAsDisplay
                          ? `${firstName.trim()} ${prev.lastName.trim()}`.trim()
                          : prev.displayName,
                      }));
                      if (displayNameError) setDisplayNameError('');
                    }}
                    required
                    className="rounded-none"
                  />
                  <Input
                    label={t('Last Name', 'Apelyido')}
                    value={form.lastName}
                    onChange={(e) => {
                      const lastName = e.target.value;
                      setForm((prev) => ({
                        ...prev,
                        lastName,
                        displayName: useRealNameAsDisplay
                          ? `${prev.firstName.trim()} ${lastName.trim()}`.trim()
                          : prev.displayName,
                      }));
                      if (displayNameError) setDisplayNameError('');
                    }}
                    required
                    className="rounded-none"
                  />
                </RegisterFieldGrid>
              </RegisterFieldGroup>

              <RegisterFieldGroup label={t('Public identity', 'Public identity')}>
                <GenderSelect
                  value={form.gender}
                  onChange={(gender) => {
                    setForm({ ...form, gender });
                    if (genderError) setGenderError('');
                  }}
                  required
                  label={t('Gender', 'Kasarian')}
                  placeholder={t('Select gender', 'Piliin ang kasarian')}
                  error={genderError}
                  helperText={t(
                    'Used for customer search filters only — not shown on your public profile.',
                    'Para lang sa filter ng customer — hindi ito lalabas sa public profile mo.'
                  )}
                />
                <Input
                  label={t('Display name', 'Display name')}
                  value={form.displayName}
                  onChange={(e) => {
                    setUseRealNameAsDisplay(false);
                    setForm({ ...form, displayName: e.target.value });
                    if (displayNameError) setDisplayNameError('');
                  }}
                  error={displayNameError}
                  required
                  maxLength={60}
                  placeholder={t('e.g. Mang Pedro, Ate Rosa', 'hal. Mang Pedro, Ate Rosa')}
                  className="rounded-none"
                  readOnly={useRealNameAsDisplay}
                />
                <label className="-mt-1 flex cursor-pointer select-none items-start gap-2.5">
                  <input
                    type="checkbox"
                    checked={useRealNameAsDisplay}
                    onChange={(e) => {
                      const checked = e.target.checked;
                      setUseRealNameAsDisplay(checked);
                      if (checked) {
                        setForm((prev) => ({
                          ...prev,
                          displayName: `${prev.firstName.trim()} ${prev.lastName.trim()}`.trim(),
                        }));
                        if (displayNameError) setDisplayNameError('');
                      }
                    }}
                    disabled={!realFullName}
                    className="mt-0.5 h-4 w-4 shrink-0 border-[#d6d0c4] text-[var(--home-amber)] focus:ring-[var(--home-amber)]/30 disabled:opacity-50"
                  />
                  <span className="text-sm leading-snug text-slate-700">
                    {t(
                      'Use my real first and last name',
                      'Gamitin ang totoong first at last name ko'
                    )}
                  </span>
                </label>
                <p className="-mt-1 text-xs text-muted">
                  {t(
                    'Customers see this name on your profile and in messages — choose something clear and professional.',
                    'Ito ang makikita ng customers sa profile at messages — pumili ng malinaw at propesyonal.'
                  )}
                </p>
              </RegisterFieldGroup>
            </RegisterFormSection>

            <RegisterFormSection
              icon={Mail}
              eyebrow={t('Step 2', 'Hakbang 2')}
              title={t('Sign-in details', 'Detalye sa pag-sign in')}
              description={
                googleIdToken
                  ? t(
                      'Your Google email will be used to sign in. No password needed.',
                      'Gagamitin ang Google email mo para mag-sign in. Walang password na kailangan.'
                    )
                  : t(
                      'Email and password are required to create your account.',
                      'Kailangan ang email at password para magawa ang account mo.'
                    )
              }
            >
              <RegisterFieldGroup>
                <Input
                  label={t('Email', 'Email address')}
                  type="email"
                  value={form.email}
                  onChange={(e) => {
                    setForm({ ...form, email: e.target.value });
                    if (emailError) setEmailError('');
                  }}
                  error={emailError}
                  disabled={Boolean(googleIdToken)}
                  required={!googleIdToken}
                  className={cn('rounded-none', googleIdToken && 'bg-slate-50')}
                />
                {googleIdToken && (
                  <p className="text-xs text-muted">
                    {t('Email comes from your Google account', 'Mula sa Google account mo ang email')}
                  </p>
                )}
              </RegisterFieldGroup>
              {!googleIdToken && (
                <RegisterFieldGrid>
                  <Input
                    label={t('Password', 'Password')}
                    type="password"
                    value={form.password}
                    onChange={(e) => {
                      setForm({ ...form, password: e.target.value });
                      if (passwordError) setPasswordError('');
                    }}
                    error={passwordError}
                    required
                    className="rounded-none"
                  />
                  <Input
                    label={t('Confirm password', 'Ulitin ang password')}
                    type="password"
                    value={confirmPassword}
                    onChange={(e) => {
                      setConfirmPassword(e.target.value);
                      if (confirmPasswordError) setConfirmPasswordError('');
                    }}
                    error={confirmPasswordError}
                    required
                    className="rounded-none"
                  />
                </RegisterFieldGrid>
              )}
            </RegisterFormSection>

            <RegisterFormSection
              icon={Shield}
              eyebrow={t('Step 3', 'Hakbang 3')}
              title={t('Terms & Conditions', 'Terms & Conditions')}
              description={t(
                'Please review and accept before continuing.',
                'Basahin at tanggapin muna bago magpatuloy.'
              )}
            >
              <RegisterTermsSection
                id="worker-accept-terms"
                lang={lang}
                role="worker"
                accepted={acceptedTerms}
                onChange={(checked) => {
                  setAcceptedTerms(checked);
                  if (checked) setTermsError('');
                }}
                error={termsError}
              />
            </RegisterFormSection>

            {error ? <RegisterFormError message={error} /> : null}

            <RegisterStepActions lang={lang}>
              <Button
                type="submit"
                className="auth-submit w-full gap-2 rounded-none sm:min-w-[12rem]"
                disabled={googleLoading}
              >
                {t('Continue', 'Magpatuloy')}
                <ArrowRight className="h-4 w-4" />
              </Button>
            </RegisterStepActions>
          </RegisterFormPanel>

          <RegisterFormFooter>
            <p>
              {t('Looking to hire?', 'Naghahanap ng worker?')}{' '}
              <Link href="/register" className="auth-link">
                {t('Choose a different role', 'Pumili ng ibang role')}
              </Link>
              {' · '}
              <Link href="/register/customer" className="auth-link">
                {t('Register as customer', 'Mag-register bilang customer')}
              </Link>
            </p>
          </RegisterFormFooter>
        </form>
      )}

      {step === 'skills' && (
        <form onSubmit={handleSkillsNext} className="mx-auto max-w-2xl">
          <RegisterFormPanel>
            <RegisterFormSection
              icon={Briefcase}
              title={t('What work do you do?', 'Anong trabaho ang kaya mo?')}
              description={t(
                'Pick one or more trades. You can also describe a skill that is not listed.',
                'Pumili ng isa o higit pang trabaho. Puwede mo ring ilarawan ang skill na wala sa listahan.'
              )}
            >
                <SkillPicker
                  value={categoryIds}
                  onChange={(ids) => {
                    setCategoryIds(ids);
                    if (ids.length > 0 || otherSkills.trim()) {
                      setSkillError('');
                    }
                  }}
                  otherSkills={otherSkills}
                  onOtherSkillsChange={(value) => {
                    setOtherSkills(value);
                    if (otherSkillsError) setOtherSkillsError('');
                    if (value.trim() || categoryIds.length > 0) setSkillError('');
                  }}
                  isStudent={isStudent}
                  onIsStudentChange={setIsStudent}
                  error={skillError}
                  otherSkillsError={otherSkillsError}
                  lang={lang}
                />
              </RegisterFormSection>
            {error ? <RegisterFormError message={error} /> : null}
            <RegisterStepActions onBack={goBack} lang={lang}>
              <Button type="submit" className="auth-submit w-full gap-2 rounded-none sm:min-w-[10rem]">
                {t('Continue', 'Magpatuloy')}
                <ArrowRight className="h-4 w-4" />
              </Button>
            </RegisterStepActions>
          </RegisterFormPanel>
        </form>
      )}

      {step === 'areas' && (
        <form onSubmit={handleAreasNext} className="mx-auto max-w-2xl">
          <RegisterFormPanel>
            {defaultAreaResolved &&
              defaultArea &&
              serviceAreas.length === 1 &&
              serviceAreas[0] === defaultArea && (
                <RegisterInfoCallout icon={MapPin}>
                  {t(
                    `We pre-selected ${AREA_LABELS[defaultArea]} based on your location. Add more cities if you work elsewhere.`,
                    `Awtomatikong napili ang ${AREA_LABELS[defaultArea]} base sa lokasyon mo. Magdagdag pa kung nagtatrabaho ka sa ibang lugar.`
                  )}
                </RegisterInfoCallout>
              )}

            <RegisterFormSection
              icon={MapPin}
              title={t('Where can customers find you?', 'Saan ka puwedeng hanapin?')}
              description={t(
                'Select every city or area where you take jobs.',
                'Piliin ang bawat lungsod o lugar kung saan ka tumatanggap ng trabaho.'
              )}
            >
              <ServiceAreaPicker value={serviceAreas} onChange={setServiceAreas} />
            </RegisterFormSection>
            {error ? <RegisterFormError message={error} /> : null}
            <RegisterStepActions onBack={goBack} lang={lang}>
              <Button
                type="submit"
                className="auth-submit w-full gap-2 rounded-none sm:min-w-[10rem]"
                disabled={loading}
              >
                {loading
                  ? t('Creating account...', 'Ginagawa ang account...')
                  : googleIdToken
                    ? t('Create account', 'Gawin ang account')
                    : t('Continue', 'Magpatuloy')}
                {!loading && <ArrowRight className="h-4 w-4" />}
              </Button>
            </RegisterStepActions>
          </RegisterFormPanel>
        </form>
      )}

      {step === 'otp' && (
        <div className="mx-auto max-w-lg space-y-4">
          {summaryBits.length > 0 && (
            <RegisterSummaryCard
              eyebrow={t('Almost done', 'Malapit na')}
              title={summaryBits.join(' · ')}
              description={t(
                'Verify your email to create your worker account.',
                'I-verify ang email mo para magawa ang worker account.'
              )}
            />
          )}

          <RegisterFormPanel>
            <RegisterInfoCallout icon={Shield}>
              {otpSent
                ? t(
                    'Enter the code we sent to your email to complete registration.',
                    'Ilagay ang code na ipinadala namin sa email mo para makumpleto ang registration.'
                  )
                : t(
                    "We'll email you a 6-digit code to confirm your address before creating your account.",
                    'Papadalhan ka namin ng 6-digit code sa email para i-confirm ang address mo bago gawin ang account.'
                  )}
            </RegisterInfoCallout>

            <form
              onSubmit={otpSent ? handleVerifyAndRegister : handleSendOTP}
              className="divide-y divide-[#ebe6db]"
            >
              <RegisterFormSection title={t('Email verification', 'Email verification')}>
                <Input
                  label={t('Email', 'Email address')}
                  type="email"
                  value={form.email}
                  readOnly
                  className="rounded-none bg-slate-50"
                />
                {otpSent && (
                  <p className="text-xs text-muted">
                    {t(
                      'Need a different email? Go back to Account and update it.',
                      'Ibang email? Bumalik sa Account at i-update.'
                    )}
                  </p>
                )}

                {otpSent && (
                  <Input
                    label={t('Verification code', 'Code ng beripikasyon')}
                    value={otp}
                    onChange={(e) => setOtp(e.target.value.replace(/\D/g, '').slice(0, 6))}
                    placeholder="123456"
                    inputMode="numeric"
                    autoComplete="one-time-code"
                    maxLength={6}
                    className="rounded-none text-center text-lg font-semibold tracking-[0.3em] md:text-xl"
                    required
                  />
                )}
              </RegisterFormSection>

              {error ? <RegisterFormError message={error} /> : null}

              <RegisterStepActions onBack={goBack} lang={lang}>
                {!otpSent ? (
                  <Button
                    type="submit"
                    className="auth-submit w-full gap-2 rounded-none"
                    disabled={loading || !EMAIL_RE.test(form.email.trim())}
                  >
                    {loading
                      ? t('Sending code...', 'Ipinapadala...')
                      : t('Send verification code', 'Ipadala ang verification code')}
                  </Button>
                ) : (
                  <>
                    <Button
                      type="submit"
                      className="auth-submit w-full rounded-none"
                      disabled={loading || otp.length < 6}
                    >
                      {loading
                        ? t('Creating account...', 'Ginagawa ang account...')
                        : t('Verify & Create Account', 'I-verify at gawin ang account')}
                    </Button>
                    <Button
                      type="button"
                      variant="outline"
                      className="w-full rounded-none border-[#d6d0c4]"
                      disabled={resending}
                      onClick={handleResendOTP}
                    >
                      {resending
                        ? t('Sending...', 'Ipinapadala...')
                        : t('Resend code', 'Ipadala ulit ang code')}
                    </Button>
                  </>
                )}
              </RegisterStepActions>
            </form>
          </RegisterFormPanel>
        </div>
      )}
    </RegisterFormShell>
  );
}