'use client';

import { useState, useEffect, Suspense } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { api, apiPaths } from '@/lib/api';
import { getToken, setUser, getUser } from '@/lib/auth';
import type { ApiUser } from '@/lib/auth';
import { useI18n } from '@/lib/i18n/context';
import { normalizeSaudiIban, validateBankFields, type BankFieldErrors } from '@/lib/validateBankFields';
import { registerInputClass, registerSelectClass } from '@/lib/formFieldStyles';
import LanguageToggle from '../components/LanguageToggle';
import HomeLoadingSpinner from '../components/HomeLoadingSpinner';
import PhoneCountryRow from '@/app/components/PhoneCountryRow';
import FieldError from '@/app/components/FieldError';

type RegisterFieldErrors = Partial<
  Record<
    | 'terms'
    | 'name'
    | 'phone'
    | 'email'
    | 'countryId'
    | 'cityId'
    | 'password'
    | 'passwordConfirmation',
    string
  >
> &
  BankFieldErrors;

function normalizePhone(value: string): string {
  return value.replace(/\D/g, '').replace(/^0/, '');
}

type Country = { id: number; name: string };
type City = { id: number; name: string };

function RegisterContent() {
  const router = useRouter();
  const { t, isRtl } = useI18n();
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [countryKey, setCountryKey] = useState('966');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirmation, setPasswordConfirmation] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [showPassword2, setShowPassword2] = useState(false);
  const [countryId, setCountryId] = useState('');
  const [cityId, setCityId] = useState('');
  const [bankName, setBankName] = useState('');
  const [bankAccountName, setBankAccountName] = useState('');
  const [bankAccountNumber, setBankAccountNumber] = useState('');
  const [iban, setIban] = useState('');
  const [profileImage, setProfileImage] = useState<File | null>(null);
  const [imagePreview, setImagePreview] = useState('');
  const [agreeToTerms, setAgreeToTerms] = useState(false);
  const [countries, setCountries] = useState<Country[]>([]);
  const [cities, setCities] = useState<City[]>([]);
  const [loading, setLoading] = useState(false);
  const [fieldErrors, setFieldErrors] = useState<RegisterFieldErrors>({});
  const [submitError, setSubmitError] = useState('');
  /** لصفحة التحقق من الرمز بعد التسجيل بدون توكن */
  const [otpCountryFlag, setOtpCountryFlag] = useState('');

  const clearFieldError = (key: keyof RegisterFieldErrors) => {
    setFieldErrors((prev) => {
      if (!prev[key]) return prev;
      const next = { ...prev };
      delete next[key];
      return next;
    });
  };

  useEffect(() => {
    getToken();
  }, []);

  useEffect(() => {
    api.get<Country[]>(apiPaths.general.countries).then((res) => {
      if (res.key === 'success' && res.data) setCountries(res.data as Country[]);
    });
  }, []);

  useEffect(() => {
    const u = getUser();
    if (!u) return;
    if (u.name) setName(u.name);
    if (u.email) setEmail(u.email ?? '');
    if (u.phone) setPhone(u.phone);
    if (u.country_code) setCountryKey(String(u.country_code));
    if (u.country?.id) setCountryId(String(u.country.id));
    if (u.city?.id) setCityId(String(u.city.id));
  }, []);

  useEffect(() => {
    if (!countryId) {
      setCities([]);
      return;
    }
    api.get<City[]>(apiPaths.general.cities(countryId)).then((res) => {
      if (res.key === 'success' && res.data) setCities(res.data as City[]);
    });
  }, [countryId]);

  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      setProfileImage(file);
      const reader = new FileReader();
      reader.onloadend = () => setImagePreview(reader.result as string);
      reader.readAsDataURL(file);
    }
  };

  const labelClass = 'block text-gray-800 font-semibold mb-2 text-start';

  const validateForm = (): RegisterFieldErrors => {
    const err: RegisterFieldErrors = {};
    if (!agreeToTerms) err.terms = t('registerPage.errorTerms');
    if (!name.trim()) err.name = t('registerPage.errorName');
    const normalizedPhone = normalizePhone(phone);
    if (normalizedPhone.length < 7 || !countryKey) {
      err.phone = !countryKey ? t('auth.selectCountry') : t('auth.phoneInvalid');
    }
    const emailTrim = email.trim();
    if (!emailTrim) err.email = t('registerPage.errorEmail');
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailTrim)) {
      err.email = t('registerPage.errorEmailInvalid');
    }
    if (!countryId) err.countryId = t('registerPage.errorSelectCountry');
    if (!cityId) err.cityId = t('registerPage.errorSelectCity');
    if (password.length < 6) err.password = t('registerPage.errorPassword');
    if (password !== passwordConfirmation) {
      err.passwordConfirmation = t('registerPage.errorPasswordMatch');
    }
    const bankCheck = validateBankFields({
      bank_name: bankName,
      bank_account_name: bankAccountName,
      bank_account_number: bankAccountNumber,
      iban,
    });
    if (!bankCheck.ok) Object.assign(err, bankCheck.errors);
    return err;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitError('');
    const errs = validateForm();
    if (Object.keys(errs).length > 0) {
      setFieldErrors(errs);
      return;
    }
    setFieldErrors({});

    const token = getToken();
    setLoading(true);

    try {
      const normalizedPhone = normalizePhone(phone);
      const formData = new FormData();
      formData.append('name', name);
      formData.append('phone', normalizedPhone);
      formData.append('country_code', countryKey);
      formData.append('email', email);
      formData.append('password', password);
      formData.append('password_confirmation', passwordConfirmation);
      formData.append('country_id', countryId);
      formData.append('city_id', cityId);
      formData.append('is_accept_terms', '1');
      if (bankName.trim()) formData.append('bank_name', bankName.trim());
      if (bankAccountName.trim()) formData.append('bank_account_name', bankAccountName.trim());
      if (bankAccountNumber.trim()) formData.append('bank_account_number', bankAccountNumber.trim());
      const ibanNorm = normalizeSaudiIban(iban);
      if (ibanNorm) formData.append('iban', ibanNorm);
      if (profileImage) formData.append('image', profileImage);

      if (token) {
        const res = await api.postForm<{ user?: ApiUser & { token?: string } }>(
          apiPaths.user.completeAccountInfo,
          formData
        );

        if (res.key === 'success' && res.data?.user) {
          const u = res.data.user as ApiUser & { token?: string };
          setUser(u);
          router.push('/account-pending');
        } else if (res.key === 'unauthenticated') {
          setSubmitError(t('registerPage.errorSession'));
        } else {
          setSubmitError(res.msg || t('registerPage.errorGeneric'));
        }
        return;
      }

      const guestRes = await api.postFormWithoutAuth(apiPaths.user.registerSendCode, formData);
      if (guestRes.key === 'success') {
        try {
          sessionStorage.setItem('otp_phone', normalizedPhone);
          sessionStorage.setItem('otp_country_code', countryKey);
          sessionStorage.setItem('otp_country_flag', otpCountryFlag);
          sessionStorage.setItem('otp_back', '/register');
        } catch {
          /* ignore */
        }
        router.push('/verify-otp');
        return;
      }
      setSubmitError(guestRes.msg || t('registerPage.errorGeneric'));
    } catch {
      setSubmitError(t('registerPage.errorNetwork'));
    } finally {
      setLoading(false);
    }
  };

  const backIcon = isRtl ? 'ri-arrow-right-line' : 'ri-arrow-left-line';

  return (
    <div
      dir={isRtl ? 'rtl' : 'ltr'}
      className="relative min-h-screen bg-[#f3f4f6] flex items-center justify-center px-4 py-10"
    >
      <div className="absolute top-4 end-4 z-20">
        <LanguageToggle />
      </div>

      <div className="w-full max-w-3xl">
        <div className="bg-white rounded-2xl shadow-md border border-gray-100/80 p-6 sm:p-10 lg:p-12">
          <div className="relative mb-8">
            <Link
              href="/"
              aria-label={t('registerPage.backAria')}
              className="absolute top-0 start-0 z-10 flex h-10 w-10 items-center justify-center rounded-full border border-gray-200 bg-white text-[#2563eb] shadow-sm transition-colors hover:bg-gray-50"
            >
              <i className={`${backIcon} text-xl`} aria-hidden />
            </Link>
            <div className="text-center px-12">
              <div className="mx-auto mb-4 flex h-[72px] w-[72px] items-center justify-center rounded-full bg-[#1e3a5f] shadow-sm">
                <img
                  src="https://static.readdy.ai/image/bdf2ab49f6243fb2a29b7dab4b761c4e/4c8d5a44fb8335dd70f6b4b128739c24.png"
                  alt=""
                  className="h-10 w-10 object-contain"
                />
              </div>
              <h1 className="text-2xl font-bold text-[#1e3a5f]">{t('registerPage.title')}</h1>
              <p className="mt-2 text-sm text-gray-500">{t('registerPage.subtitle')}</p>
            </div>
          </div>

          <form onSubmit={handleSubmit} className="space-y-5">
            <div className="flex justify-center mb-2">
              <div className="relative">
                <div className="flex h-28 w-28 items-center justify-center overflow-hidden rounded-full border-2 border-gray-200 bg-gray-100">
                  {imagePreview ? (
                    <img src={imagePreview} alt="" className="h-full w-full object-cover" />
                  ) : (
                    <i className="ri-user-3-line text-5xl text-gray-400" aria-hidden />
                  )}
                </div>
                <label className="absolute bottom-0 left-0 flex h-9 w-9 cursor-pointer items-center justify-center rounded-full bg-[#1e3a5f] text-white shadow-md transition-colors hover:bg-[#1a3254]">
                  <i className="ri-camera-line text-lg" aria-hidden />
                  <input type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
                </label>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
              <div>
                <label className={labelClass}>
                  {t('registerPage.nameLabel')} <span className="text-red-500">*</span>
                </label>
                <input
                  type="text"
                  value={name}
                  onChange={(e) => {
                    setName(e.target.value);
                    clearFieldError('name');
                  }}
                  placeholder={t('registerPage.namePlaceholder')}
                  className={registerInputClass(!!fieldErrors.name)}
                  autoComplete="name"
                  aria-invalid={!!fieldErrors.name}
                />
                <FieldError message={fieldErrors.name} />
              </div>
              <div>
                <label className={labelClass}>
                  {t('registerPage.phoneLabel')} <span className="text-red-500">*</span>
                </label>
                <PhoneCountryRow
                  variant="form"
                  phone={phone}
                  onPhoneChange={(v) => {
                    setPhone(v);
                    clearFieldError('phone');
                  }}
                  countryKey={countryKey}
                  onCountryKeyChange={(k) => {
                    setCountryKey(k);
                    clearFieldError('phone');
                  }}
                  onSelectedCountry={(c) => setOtpCountryFlag(c?.flag ?? '')}
                  isRtl={isRtl}
                  disabled={loading}
                  error={fieldErrors.phone}
                  labels={{
                    countryPlaceholder: t('login.countryPlaceholder'),
                    searchCountry: t('login.searchCountry'),
                    noResults: t('login.noResults'),
                    phonePlaceholder: t('login.phonePlaceholder'),
                  }}
                />
              </div>
            </div>

            <div>
              <label className={labelClass}>
                {t('registerPage.emailLabel')} <span className="text-red-500">*</span>
              </label>
              <input
                type="email"
                value={email}
                onChange={(e) => {
                  setEmail(e.target.value);
                  clearFieldError('email');
                }}
                placeholder={t('registerPage.emailPlaceholder')}
                className={registerInputClass(!!fieldErrors.email)}
                autoComplete="email"
                aria-invalid={!!fieldErrors.email}
              />
              <FieldError message={fieldErrors.email} />
            </div>

            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
              <div>
                <label className={labelClass}>
                  {t('registerPage.countryLabel')} <span className="text-red-500">*</span>
                </label>
                <select
                  value={countryId}
                  onChange={(e) => {
                    setCountryId(e.target.value);
                    setCityId('');
                    clearFieldError('countryId');
                    clearFieldError('cityId');
                  }}
                  className={registerSelectClass(!!fieldErrors.countryId)}
                  aria-invalid={!!fieldErrors.countryId}
                >
                  <option value="">{t('registerPage.selectCountry')}</option>
                  {countries.map((c) => (
                    <option key={c.id} value={String(c.id)}>
                      {c.name}
                    </option>
                  ))}
                </select>
                <FieldError message={fieldErrors.countryId} />
              </div>
              <div>
                <label className={labelClass}>
                  {t('registerPage.cityLabel')} <span className="text-red-500">*</span>
                </label>
                <select
                  value={cityId}
                  onChange={(e) => {
                    setCityId(e.target.value);
                    clearFieldError('cityId');
                  }}
                  className={registerSelectClass(!!fieldErrors.cityId)}
                  disabled={!countryId}
                  aria-invalid={!!fieldErrors.cityId}
                >
                  <option value="">{t('registerPage.selectCity')}</option>
                  {cities.map((c) => (
                    <option key={c.id} value={String(c.id)}>
                      {c.name}
                    </option>
                  ))}
                </select>
                <FieldError message={fieldErrors.cityId} />
              </div>
            </div>

            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
              <div>
                <label className={labelClass}>
                  {t('registerPage.passwordLabel')} <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <input
                    type={showPassword ? 'text' : 'password'}
                    value={password}
                    onChange={(e) => {
                      setPassword(e.target.value);
                      clearFieldError('password');
                    }}
                    placeholder={t('registerPage.passwordPlaceholder')}
                    className={`${registerInputClass(!!fieldErrors.password)} pe-11`}
                    minLength={6}
                    autoComplete="new-password"
                    aria-invalid={!!fieldErrors.password}
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword((v) => !v)}
                    className="absolute end-3 top-1/2 -translate-y-1/2 rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                    aria-pressed={showPassword}
                    aria-label={showPassword ? 'Hide' : 'Show'}
                  >
                    <i className={showPassword ? 'ri-eye-off-line text-lg' : 'ri-eye-line text-lg'} aria-hidden />
                  </button>
                </div>
                <FieldError message={fieldErrors.password} />
              </div>
              <div>
                <label className={labelClass}>
                  {t('registerPage.confirmPasswordLabel')} <span className="text-red-500">*</span>
                </label>
                <div className="relative">
                  <input
                    type={showPassword2 ? 'text' : 'password'}
                    value={passwordConfirmation}
                    onChange={(e) => {
                      setPasswordConfirmation(e.target.value);
                      clearFieldError('passwordConfirmation');
                    }}
                    placeholder={t('registerPage.confirmPasswordPlaceholder')}
                    className={`${registerInputClass(!!fieldErrors.passwordConfirmation)} pe-11`}
                    minLength={6}
                    autoComplete="new-password"
                    aria-invalid={!!fieldErrors.passwordConfirmation}
                  />
                  <button
                    type="button"
                    onClick={() => setShowPassword2((v) => !v)}
                    className="absolute end-3 top-1/2 -translate-y-1/2 rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
                    aria-pressed={showPassword2}
                    aria-label={showPassword2 ? 'Hide' : 'Show'}
                  >
                    <i className={showPassword2 ? 'ri-eye-off-line text-lg' : 'ri-eye-line text-lg'} aria-hidden />
                  </button>
                </div>
                <FieldError message={fieldErrors.passwordConfirmation} />
              </div>
            </div>

            <p className="border-b border-gray-100 pb-1 pt-2 text-center text-sm font-semibold text-gray-700">
              {t('registerPage.bankSection')}
            </p>
            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
              <div>
                <label className={labelClass}>{t('registerPage.bankName')}</label>
                <input
                  type="text"
                  value={bankName}
                  onChange={(e) => {
                    setBankName(e.target.value);
                    clearFieldError('bank_name');
                  }}
                  placeholder={t('registerPage.bankNamePlaceholder')}
                  className={registerInputClass(!!fieldErrors.bank_name)}
                  aria-invalid={!!fieldErrors.bank_name}
                />
                <FieldError message={fieldErrors.bank_name} />
              </div>
              <div>
                <label className={labelClass}>{t('registerPage.accountHolder')}</label>
                <input
                  type="text"
                  value={bankAccountName}
                  onChange={(e) => {
                    setBankAccountName(e.target.value);
                    clearFieldError('bank_account_name');
                  }}
                  placeholder={t('registerPage.accountHolderPlaceholder')}
                  className={registerInputClass(!!fieldErrors.bank_account_name)}
                  aria-invalid={!!fieldErrors.bank_account_name}
                />
                <FieldError message={fieldErrors.bank_account_name} />
              </div>
              <div>
                <label className={labelClass}>{t('registerPage.accountNumber')}</label>
                <input
                  type="text"
                  inputMode="numeric"
                  pattern="[0-9]*"
                  autoComplete="off"
                  value={bankAccountNumber}
                  onChange={(e) => {
                    setBankAccountNumber(e.target.value.replace(/\D/g, ''));
                    clearFieldError('bank_account_number');
                  }}
                  placeholder={t('registerPage.accountNumberPlaceholder')}
                  className={`${registerInputClass(!!fieldErrors.bank_account_number)} font-mono`}
                  dir="ltr"
                  aria-invalid={!!fieldErrors.bank_account_number}
                />
                <FieldError message={fieldErrors.bank_account_number} />
              </div>
              <div>
                <label className={labelClass}>{t('registerPage.ibanLabel')}</label>
                <input
                  type="text"
                  value={iban}
                  onChange={(e) => {
                    setIban(e.target.value);
                    clearFieldError('iban');
                  }}
                  placeholder={t('registerPage.ibanPlaceholder')}
                  className={`${registerInputClass(!!fieldErrors.iban)} font-mono`}
                  dir="ltr"
                  aria-invalid={!!fieldErrors.iban}
                />
                <FieldError message={fieldErrors.iban} />
              </div>
            </div>

            <div
              className={`flex items-start gap-3 rounded-xl pt-1 ${
                fieldErrors.terms ? 'border border-red-500 bg-red-50/50 p-3' : ''
              }`}
            >
              <label htmlFor="terms-reg" className="flex-1 cursor-pointer text-start text-sm leading-relaxed text-gray-700">
                {t('registerPage.agreePrefix')}{' '}
                <Link
                  href="/profile/terms"
                  className="font-semibold text-[#1e3a5f] underline underline-offset-2 hover:text-[#1a3254]"
                >
                  {t('registerPage.termsLink')}
                </Link>
              </label>
              <input
                type="checkbox"
                id="terms-reg"
                checked={agreeToTerms}
                onChange={(e) => {
                  setAgreeToTerms(e.target.checked);
                  clearFieldError('terms');
                }}
                className="mt-1 h-5 w-5 shrink-0 cursor-pointer rounded border-gray-300 text-[#1e3a5f] focus:ring-[#1e3a5f]"
                aria-invalid={!!fieldErrors.terms}
              />
            </div>
            <FieldError message={fieldErrors.terms} />

            {submitError && <p className="text-sm text-red-600">{submitError}</p>}

            <button
              type="submit"
              disabled={loading}
              className="w-full cursor-pointer rounded-xl bg-[#1e3a5f] py-3.5 font-semibold text-white shadow-sm transition-colors hover:bg-[#1a3254] disabled:cursor-not-allowed disabled:opacity-70"
            >
              {loading ? t('registerPage.submitting') : t('registerPage.submit')}
            </button>
          </form>

          <div className="mt-8 space-y-4 text-center">
            <p className="text-sm text-gray-600">
              {t('registerPage.haveAccount')}{' '}
              <Link
                href="/login"
                className="font-semibold text-[#2563eb] underline underline-offset-2 hover:text-[#1d4ed8]"
              >
                {t('registerPage.loginLink')}
              </Link>
            </p>
            <button
              type="button"
              onClick={() => {
                try {
                  localStorage.setItem('isLoggedIn', 'false');
                } catch {
                  /* ignore */
                }
                router.push('/');
              }}
              className="flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl border border-gray-200/80 bg-slate-100/90 py-3.5 font-semibold text-[#1e3a5f] transition-colors hover:bg-slate-200/90"
            >
              {isRtl ? (
                <>
                  <i className="ri-user-3-line shrink-0 text-xl text-[#2563eb]" aria-hidden />
                  <span>{t('registerPage.guestLogin')}</span>
                </>
              ) : (
                <>
                  <span>{t('registerPage.guestLogin')}</span>
                  <i className="ri-user-3-line shrink-0 text-xl text-[#2563eb]" aria-hidden />
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function RegisterPage() {
  return (
    <Suspense fallback={<HomeLoadingSpinner />}>
      <RegisterContent />
    </Suspense>
  );
}