'use client';

import { useState, useEffect, Suspense } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { api, apiPaths } from '@/lib/api';
import { setToken, setUser } from '@/lib/auth';
import type { ApiUser } from '@/lib/auth';
import { useI18n } from '@/lib/i18n/context';
import HomeLoadingSpinner from '../components/HomeLoadingSpinner';
import LanguageToggle from '../components/LanguageToggle';
import PhoneCountryRow from '@/app/components/PhoneCountryRow';
import FieldError from '@/app/components/FieldError';

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

/** يظهر الدخول برمز الجوال فقط مع ?otp=1 (مخفي عن واجهة التسجيل/الدخول العادية) */
function LoginForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const allowOtpLogin = searchParams.get('otp') === '1';
  const { t, isRtl } = useI18n();

  const [countryKey, setCountryKey] = useState('966');
  const [otpCountryFlag, setOtpCountryFlag] = useState('');

  const [phone, setPhone] = useState('');
  const [password, setPassword] = useState('');
  const [otpMode, setOtpMode] = useState(false);
  const [loading, setLoading] = useState(false);
  const [phoneError, setPhoneError] = useState('');
  const [passwordError, setPasswordError] = useState('');
  const [submitError, setSubmitError] = useState('');

  useEffect(() => {
    if (!allowOtpLogin) setOtpMode(false);
  }, [allowOtpLogin]);

  const otpModeActive = allowOtpLogin && otpMode;

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setPhoneError('');
    setPasswordError('');
    setSubmitError('');
    const normalized = normalizePhone(phone);
    if (normalized.length < 7) {
      setPhoneError(t('auth.phoneInvalid'));
      return;
    }
    if (!countryKey) {
      setPhoneError(t('auth.selectCountry'));
      return;
    }
    if (!otpModeActive) {
      if (password.trim().length < 6) {
        setPasswordError(t('auth.passwordRequired'));
        return;
      }
    }
    setLoading(true);
    try {
      const res = await api.post<{
        user?: ApiUser & { token?: string };
        go_to_register_step?: boolean;
      }>(
        apiPaths.user.login,
        otpModeActive
          ? { phone: normalized, country_code: String(countryKey), otp_login: true }
          : { phone: normalized, country_code: String(countryKey), password }
      );

      if (!otpModeActive && res.key === 'success' && res.data?.user) {
        const raw = res.data as {
          user: ApiUser & { token?: string };
          go_to_register_step?: boolean;
          token?: string;
        };
        const u = raw.user;
        const bearer = (u.token ?? raw.token ?? '').trim();
        if (bearer) setToken(bearer);
        setUser({ ...u, token: bearer || u.token });
        if (res.data.go_to_register_step) {
          router.push('/register');
          return;
        }
        if (u.is_approved === false) {
          router.push('/account-pending');
          return;
        }
        router.push('/');
        return;
      }

      if (otpModeActive && res.key === 'success') {
        sessionStorage.setItem('otp_phone', normalized);
        sessionStorage.setItem('otp_country_code', countryKey);
        sessionStorage.setItem('otp_country_flag', otpCountryFlag);
        sessionStorage.setItem('otp_back', '/login');
        router.push('/verify-otp');
        return;
      }
      if (res.key === 'already_authenticated') {
        try {
          localStorage.removeItem('token');
        } catch {
          /* ignore */
        }
        router.push('/');
        return;
      }
      setSubmitError(res.msg || t('login.genericError'));
    } catch {
      setSubmitError(t('auth.networkError'));
    } finally {
      setLoading(false);
    }
  };

  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 right-4 z-20 rtl:left-4 rtl:right-auto">
        <LanguageToggle />
      </div>
      <div className="w-full max-w-md">
        <div className="bg-white rounded-2xl shadow-md border border-gray-100/80 p-8 sm:p-10">
          <div className="text-center mb-8">
            <div className="mx-auto mb-5 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('login.title')}</h1>
            <p className="text-gray-500 mt-2 text-sm">{t('login.welcomeBack')}</p>
          </div>

          <form onSubmit={handleLogin} className="space-y-5">
            <div>
              <label className={`block text-gray-700 font-semibold mb-2 ${isRtl ? 'text-right' : 'text-left'}`}>{t('login.phoneLabel')}</label>

              <PhoneCountryRow
                phone={phone}
                onPhoneChange={(v) => {
                  setPhone(v);
                  setPhoneError('');
                }}
                countryKey={countryKey}
                onCountryKeyChange={(k) => {
                  setCountryKey(k);
                  setPhoneError('');
                }}
                onSelectedCountry={(c) => setOtpCountryFlag(c?.flag ?? '')}
                isRtl={isRtl}
                disabled={loading}
                error={phoneError}
                labels={{
                  countryPlaceholder: t('login.countryPlaceholder'),
                  searchCountry: t('login.searchCountry'),
                  noResults: t('login.noResults'),
                  phonePlaceholder: t('login.phonePlaceholder'),
                }}
              />
            </div>

            {!otpModeActive ? (
              <div>
                <label className={`block text-gray-700 font-semibold mb-2 ${isRtl ? 'text-right' : 'text-left'}`}>{t('login.passwordLabel')}</label>
                <div className="relative">
                  <input
                    type="password"
                    value={password}
                    onChange={(e) => {
                      setPassword(e.target.value);
                      setPasswordError('');
                    }}
                    placeholder={t('login.passwordPlaceholder')}
                    className={`w-full py-3.5 border rounded-xl focus:outline-none focus:ring-2 text-sm bg-white placeholder:text-gray-400 ltr:pl-10 ltr:pr-4 rtl:pr-10 rtl:pl-4 ${
                      passwordError
                        ? 'border-red-500 ring-1 ring-red-500/30 focus:border-red-500 focus:ring-red-500/25'
                        : 'border-gray-200 focus:ring-[#1e3a5f]/25 focus:border-[#1e3a5f]/40'
                    }`}
                    disabled={loading}
                    autoComplete="current-password"
                    minLength={6}
                    aria-invalid={!!passwordError}
                  />
                  <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 rtl:left-auto rtl:right-3" aria-hidden>
                    <i className="ri-lock-2-line text-gray-400 text-lg" />
                  </span>
                </div>
                <FieldError message={passwordError} />
              </div>
            ) : (
              <p className="text-sm text-[#1e3a5f] bg-slate-50 border border-gray-200 rounded-xl px-4 py-3">{t('login.otpHint')}</p>
            )}

            {allowOtpLogin && (
              <button
                type="button"
                onClick={() => {
                  setOtpMode((v) => !v);
                  setPassword('');
                  setSubmitError('');
                }}
                className="w-full text-sm text-[#2563eb] hover:text-[#1d4ed8] font-semibold py-1 cursor-pointer"
              >
                {otpMode ? t('login.otpToggleBack') : t('login.otpToggleForward')}
              </button>
            )}

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

            {!otpModeActive && (
              <div className={isRtl ? 'text-left' : 'text-right'}>
                <Link href="/forgot-password" className="text-[#2563eb] hover:text-[#1d4ed8] text-sm font-semibold">
                  {t('login.forgotLink')}
                </Link>
              </div>
            )}

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

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

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