import { useState, useEffect, useMemo, useCallback } from 'react';
import { useNavigate, useLocation } from 'react-router';
import { useTranslation } from 'react-i18next';
import { useQuery } from '@tanstack/react-query';
import { useAuthStore } from '../store/auth';
import { useShallow } from 'zustand/shallow';
import { authApi } from '../api/auth';
import { isValidEmail } from '../utils/validation';
import {
  brandingApi,
  getCachedBranding,
  setCachedBranding,
  preloadLogo,
  isLogoPreloaded,
  type BrandingInfo,
  type EmailAuthEnabled,
} from '../api/branding';
import { getAndClearReturnUrl, tokenStorage } from '../utils/token';
import { getApiErrorMessage } from '../utils/api-error';
import { isInTelegramWebApp, getTelegramInitData, useTelegramSDK } from '../hooks/useTelegramSDK';
import { closeMiniApp } from '@telegram-apps/sdk-react';
import LanguageSwitcher from '../components/LanguageSwitcher';
import TelegramLoginButton from '../components/TelegramLoginButton';
import OAuthProviderIcon from '../components/OAuthProviderIcon';
import { saveOAuthState } from '../utils/oauth';
import { getPendingReferralCode } from '../utils/referral';
import { UsersIcon, EmailIcon, RefreshIcon, ChevronDownIcon } from '@/components/icons';
import LegalFooter from '../components/LegalFooter';

export default function Login() {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const {
    isAuthenticated,
    isLoading: isAuthInitializing,
    loginWithTelegram,
    loginWithEmail,
    registerWithEmail,
  } = useAuthStore(
    useShallow((state) => ({
      isAuthenticated: state.isAuthenticated,
      isLoading: state.isLoading,
      loginWithTelegram: state.loginWithTelegram,
      loginWithEmail: state.loginWithEmail,
      registerWithEmail: state.registerWithEmail,
    })),
  );

  // Get referral code from localStorage (captured from ?ref= param at module level in auth store)
  const referralCode = getPendingReferralCode() || '';

  const [authMode, setAuthMode] = useState<'login' | 'register'>(() =>
    referralCode ? 'register' : 'login',
  );
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [firstName, setFirstName] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isTelegramWebApp, setIsTelegramWebApp] = useState(false);
  const [logoLoaded, setLogoLoaded] = useState(() => isLogoPreloaded());
  const [registeredEmail, setRegisteredEmail] = useState<string | null>(null);
  const [showForgotPassword, setShowForgotPassword] = useState(false);
  const [forgotPasswordEmail, setForgotPasswordEmail] = useState('');
  const [forgotPasswordSent, setForgotPasswordSent] = useState(false);
  const [forgotPasswordLoading, setForgotPasswordLoading] = useState(false);
  const [forgotPasswordError, setForgotPasswordError] = useState('');
  const [showEmailForm, setShowEmailForm] = useState(true);

  // Telegram safe area insets
  const { safeAreaInset, contentSafeAreaInset } = useTelegramSDK();
  const safeTop = Math.max(safeAreaInset.top, contentSafeAreaInset.top);
  const safeBottom = Math.max(safeAreaInset.bottom, contentSafeAreaInset.bottom);

  // Получаем URL для возврата после авторизации
  const getReturnUrl = useCallback(() => {
    // Сначала проверяем state от React Router
    const stateFrom = (location.state as { from?: string })?.from;
    if (stateFrom && stateFrom !== '/login') {
      return stateFrom;
    }
    // Затем проверяем сохранённый URL в sessionStorage (от safeRedirectToLogin)
    const savedUrl = getAndClearReturnUrl();
    if (savedUrl && savedUrl !== '/login') {
      return savedUrl;
    }
    // По умолчанию на главную
    return '/';
  }, [location.state]);

  // Fetch branding with unified cache
  const cachedBranding = useMemo(() => getCachedBranding(), []);

  const { data: branding } = useQuery<BrandingInfo>({
    queryKey: ['branding'],
    queryFn: async () => {
      const data = await brandingApi.getBranding();
      setCachedBranding(data);
      await preloadLogo(data);
      return data;
    },
    staleTime: 60000,
    initialData: cachedBranding ?? undefined,
    initialDataUpdatedAt: 0,
  });

  // Check if email auth is enabled
  const { data: emailAuthConfig } = useQuery<EmailAuthEnabled>({
    queryKey: ['email-auth-enabled'],
    queryFn: brandingApi.getEmailAuthEnabled,
    staleTime: 60000,
  });
  const isEmailAuthEnabled = emailAuthConfig?.enabled ?? true;

  const { data: footerEnabled } = useQuery({
    queryKey: ['footer-enabled'],
    queryFn: brandingApi.getFooterEnabled,
    staleTime: 60000,
  });

  // Fetch enabled OAuth providers
  const { data: oauthData } = useQuery({
    queryKey: ['oauth-providers'],
    queryFn: authApi.getOAuthProviders,
    staleTime: 60000,
  });
  const oauthProviders = Array.isArray(oauthData?.providers) ? oauthData.providers : [];

  const [oauthLoading, setOauthLoading] = useState<string | null>(null);

  const handleOAuthLogin = async (provider: string) => {
    setError('');
    setOauthLoading(provider);
    try {
      const { authorize_url, state } = await authApi.getOAuthAuthorizeUrl(provider);

      // Validate redirect URL — only allow HTTPS to prevent open redirect
      let parsed: URL;
      try {
        parsed = new URL(authorize_url);
      } catch {
        throw new Error('Invalid OAuth redirect URL');
      }
      if (parsed.protocol !== 'https:') {
        throw new Error('Invalid OAuth redirect URL');
      }

      saveOAuthState(state, provider);
      window.location.href = authorize_url;
    } catch {
      setError(t('auth.oauthError', 'Authorization was denied or failed'));
      setOauthLoading(null);
    }
  };

  const appName = branding ? branding.name : import.meta.env.VITE_APP_NAME || 'VPN';
  const appLogo = branding?.logo_letter || import.meta.env.VITE_APP_LOGO || 'V';
  const logoUrl = branding ? brandingApi.getLogoUrl(branding) : null;

  // Set document title
  useEffect(() => {
    document.title = appName || 'VPN';
  }, [appName]);

  useEffect(() => {
    if (isAuthenticated) {
      navigate(getReturnUrl(), { replace: true });
    }
  }, [isAuthenticated, navigate, getReturnUrl]);

  // Try Telegram WebApp authentication on mount (with auto-retry on 401)
  // Wait for auth store initialization to complete to avoid race conditions
  // with stale tokens triggering interceptor refresh/redirect loops
  useEffect(() => {
    // Don't attempt Telegram auth until store initialization is done
    if (isAuthInitializing) return;

    const tryTelegramAuth = async () => {
      const initData = getTelegramInitData();
      if (!isInTelegramWebApp() || !initData) return;

      setIsTelegramWebApp(true);
      setIsLoading(true);

      const MAX_RETRIES = 1;
      for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
        try {
          await loginWithTelegram(initData);
          navigate(getReturnUrl(), { replace: true });
          return;
        } catch (err) {
          const error = err as { response?: { status?: number } };
          const status = error.response?.status;
          const detail = getApiErrorMessage(err, '');
          if (import.meta.env.DEV)
            console.warn(`Telegram auth attempt ${attempt + 1} failed:`, status, detail);

          if (status === 401 && attempt < MAX_RETRIES) {
            await new Promise((r) => setTimeout(r, 1500));
            continue;
          }

          // Show backend error detail if available, otherwise generic message
          setError(detail || t('auth.telegramRequired'));
        }
      }

      setIsLoading(false);
    };

    tryTelegramAuth();
  }, [isAuthInitializing, loginWithTelegram, navigate, t, getReturnUrl]);

  const handleRetryTelegramAuth = () => {
    // Clear ALL cached auth state to prevent stale token/initData loops
    tokenStorage.clearTokens();
    sessionStorage.removeItem('tapps/launchParams');
    sessionStorage.removeItem('telegram_init_data');
    localStorage.removeItem('cabinet-auth');
    localStorage.removeItem('tg_user_id');

    try {
      // Close miniapp — Telegram will provide fresh initData on reopen
      closeMiniApp();
    } catch {
      // If closeMiniApp fails, force a clean page reload
      window.location.reload();
    }
  };

  const handleEmailSubmit = async (e: React.SyntheticEvent) => {
    e.preventDefault();
    setError('');

    // Валидация email
    if (!email.trim() || !isValidEmail(email.trim())) {
      setError(t('auth.invalidEmail', 'Please enter a valid email address'));
      return;
    }

    if (authMode === 'register') {
      // Валидация для регистрации
      if (password !== confirmPassword) {
        setError(t('auth.passwordMismatch', 'Passwords do not match'));
        return;
      }
      if (password.length < 8) {
        setError(t('auth.passwordTooShort', 'Password must be at least 8 characters'));
        return;
      }
    }

    setIsLoading(true);

    try {
      if (authMode === 'login') {
        await loginWithEmail(email, password);
        navigate(getReturnUrl(), { replace: true });
      } else {
        const result = await registerWithEmail(
          email,
          password,
          firstName || undefined,
          referralCode || undefined,
        );
        // Show "check your email" screen
        setRegisteredEmail(result.email);
      }
    } catch (err: unknown) {
      const error = err as { response?: { status?: number } };
      const status = error.response?.status;
      const detail = getApiErrorMessage(err, '');

      if (status === 400 && detail.includes('already registered')) {
        setError(t('auth.emailAlreadyRegistered', 'This email is already registered'));
      } else if (status === 401 || status === 403) {
        if (detail.includes('verify your email')) {
          setError(t('auth.emailNotVerified', 'Please verify your email first'));
        } else {
          setError(t('auth.invalidCredentials', 'Invalid email or password'));
        }
      } else if (status === 429) {
        setError(t('auth.tooManyAttempts', 'Too many attempts. Please try again later'));
      } else {
        setError(detail || t('common.error'));
      }
    } finally {
      setIsLoading(false);
    }
  };

  const handleForgotPassword = async (e: React.SyntheticEvent) => {
    e.preventDefault();
    setForgotPasswordError('');

    if (!forgotPasswordEmail.trim() || !isValidEmail(forgotPasswordEmail.trim())) {
      setForgotPasswordError(t('auth.invalidEmail', 'Please enter a valid email address'));
      return;
    }

    setForgotPasswordLoading(true);
    try {
      await authApi.forgotPassword(forgotPasswordEmail.trim());
      setForgotPasswordSent(true);
    } catch (err: unknown) {
      setForgotPasswordError(getApiErrorMessage(err, t('common.error')));
    } finally {
      setForgotPasswordLoading(false);
    }
  };

  const closeForgotPasswordModal = () => {
    setShowForgotPassword(false);
    setForgotPasswordEmail('');
    setForgotPasswordSent(false);
    setForgotPasswordError('');
  };

  return (
    <div
      className="flex min-h-[100dvh] items-center justify-center px-4 sm:px-6 lg:px-8"
      style={{
        paddingTop:
          safeTop > 0 ? `${safeTop + 16}px` : 'calc(1rem + env(safe-area-inset-top, 0px))',
        paddingBottom:
          safeBottom > 0 ? `${safeBottom + 16}px` : 'calc(1rem + env(safe-area-inset-bottom, 0px))',
      }}
    >
      {/* Flat background — the previous two layered gradients (linear
          + accent radial halo) read as the airdrop / crypto aesthetic
          PRODUCT.md explicitly anti-references. Body bg-dark-950 carries
          the surface alone. */}

      {/* Language switcher */}
      <div
        className="fixed right-3 z-50"
        style={{
          top: safeTop > 0 ? `${safeTop + 12}px` : 'calc(12px + env(safe-area-inset-top, 0px))',
        }}
      >
        <LanguageSwitcher />
      </div>

      <div className="relative w-full max-w-md space-y-5">
        {/* Logo & branding */}
        <div className="text-center">
          <div className="relative mx-auto mb-3 flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl border border-dark-700/50 bg-dark-800/80 shadow-md">
            {/* Letter fallback */}
            <span
              className={`absolute text-lg font-bold text-accent-400 transition-opacity duration-200 ${branding?.has_custom_logo && logoLoaded ? 'opacity-0' : 'opacity-100'}`}
            >
              {appLogo}
            </span>
            {/* Logo image */}
            {branding?.has_custom_logo && logoUrl && (
              <img
                src={logoUrl}
                alt={appName || 'Logo'}
                className={`absolute h-full w-full object-contain transition-opacity duration-200 ${logoLoaded ? 'opacity-100' : 'opacity-0'}`}
                onLoad={() => setLogoLoaded(true)}
              />
            )}
          </div>
          {appName && <h1 className="text-2xl font-bold text-dark-50">{appName}</h1>}

          {/* Referral Banner */}
          {referralCode && isEmailAuthEnabled && (
            <div className="mt-3 rounded-xl border border-accent-500/30 bg-accent-500/10 p-2.5">
              <div className="flex items-center justify-center gap-2 text-accent-400">
                <UsersIcon className="h-4 w-4 flex-shrink-0" />
                <span className="text-xs font-medium">{t('auth.referralInvite')}</span>
              </div>
            </div>
          )}
        </div>

        {/* Check Email Screen */}
        {registeredEmail ? (
          <div className="card text-center">
            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-success-500/20">
              <EmailIcon className="h-7 w-7 text-success-400" />
            </div>
            <h2 className="mb-2 text-lg font-bold text-dark-50">
              {t('auth.checkEmail', 'Check your email')}
            </h2>
            <p className="mb-3 text-sm text-dark-400">
              {t('auth.verificationSent', 'We sent a verification link to:')}
            </p>
            <p className="mb-4 text-sm font-medium text-accent-400">{registeredEmail}</p>
            <p className="mb-5 text-xs text-dark-500">
              {t(
                'auth.clickLinkToVerify',
                'Click the link in the email to verify your account and log in.',
              )}
            </p>
            <button
              onClick={() => {
                setRegisteredEmail(null);
                setAuthMode('login');
              }}
              className="btn-secondary w-full"
            >
              {t('auth.backToLogin', 'Back to login')}
            </button>
          </div>
        ) : (
          /* Main auth card */
          <div className="card">
            {error && (
              <div
                role="alert"
                className="mb-4 rounded-xl border border-error-500/30 bg-error-500/10 px-4 py-2.5 text-sm text-error-400"
              >
                {error}
              </div>
            )}

            {/* Telegram auth section */}
            <div className="space-y-3">
              {isLoading && isTelegramWebApp ? (
                <div className="py-6 text-center">
                  <div className="mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-accent-500 border-t-transparent" />
                  <p className="text-sm text-dark-400">{t('auth.authenticating')}</p>
                </div>
              ) : isTelegramWebApp && error ? (
                <div className="space-y-3 text-center">
                  <button
                    onClick={handleRetryTelegramAuth}
                    className="btn-primary mx-auto flex items-center gap-2 px-5 py-2.5"
                  >
                    <RefreshIcon className="h-4 w-4" />
                    {t('auth.tryAgain')}
                  </button>
                  <p className="text-xs text-dark-500">
                    {t(
                      'auth.telegramReopenHint',
                      'If the problem persists, close and reopen the app',
                    )}
                  </p>
                </div>
              ) : (
                <TelegramLoginButton referralCode={referralCode || undefined} />
              )}
            </div>

            {/* OAuth providers - compact icon row */}
            {oauthProviders.length > 0 && (
              <>
                <div className="my-4 flex items-center gap-3">
                  <div className="h-px flex-1 bg-dark-700" />
                  <span className="text-xs text-dark-500">{t('auth.or', 'or')}</span>
                  <div className="h-px flex-1 bg-dark-700" />
                </div>
                <div className="flex items-stretch gap-2">
                  {oauthProviders.map((provider) => (
                    <button
                      key={provider.name}
                      type="button"
                      onClick={() => handleOAuthLogin(provider.name)}
                      disabled={oauthLoading !== null}
                      className="flex flex-1 flex-col items-center justify-center gap-1.5 rounded-xl border border-dark-700 bg-dark-800/80 py-2.5 transition-all hover:border-dark-600 hover:bg-dark-700 disabled:opacity-50"
                      title={provider.display_name}
                    >
                      {oauthLoading === provider.name ? (
                        <span className="h-5 w-5 animate-spin rounded-full border-2 border-dark-400 border-t-white" />
                      ) : (
                        <OAuthProviderIcon provider={provider.name} className="h-5 w-5" />
                      )}
                      <span className="text-[10px] leading-none text-dark-500">
                        {provider.display_name}
                      </span>
                    </button>
                  ))}
                </div>
              </>
            )}

            {/* Email auth section - collapsible */}
            {isEmailAuthEnabled && (
              <>
                <div className="my-4 flex items-center gap-3">
                  <div className="h-px flex-1 bg-dark-700" />
                  <button
                    type="button"
                    onClick={() => setShowEmailForm(!showEmailForm)}
                    className="flex items-center gap-1.5 rounded-full border border-dark-700 bg-dark-800/60 px-3.5 py-1.5 text-xs font-medium text-dark-300 transition-all hover:border-dark-600 hover:bg-dark-700 hover:text-dark-200"
                  >
                    <EmailIcon className="h-3.5 w-3.5 text-dark-400" />
                    <span>{t('auth.loginWithEmail')}</span>
                    <ChevronDownIcon
                      className={`h-3 w-3 text-dark-400 transition-transform duration-300 ${showEmailForm ? 'rotate-180' : ''}`}
                    />
                  </button>
                  <div className="h-px flex-1 bg-dark-700" />
                </div>

                {/* Collapsible email form */}
                <div
                  className={`grid transition-[grid-template-rows] duration-300 ease-in-out ${
                    showEmailForm ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
                  }`}
                  style={{ transform: 'translateZ(0)' }}
                >
                  <div className="overflow-hidden">
                    <div className="space-y-4 pb-1 pt-1">
                      {showForgotPassword ? (
                        /* Forgot password screen - replaces login/register */
                        forgotPasswordSent ? (
                          <div className="space-y-4 text-center">
                            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl bg-success-500/20">
                              <EmailIcon className="h-6 w-6 text-success-400" />
                            </div>
                            <p className="text-sm font-medium text-dark-100">
                              {t('auth.checkEmail', 'Check your email')}
                            </p>
                            <p className="text-xs text-dark-400">
                              {t(
                                'auth.passwordResetSent',
                                'If an account exists with this email, we sent password reset instructions.',
                              )}
                            </p>
                            <button
                              type="button"
                              onClick={closeForgotPasswordModal}
                              className="text-sm text-accent-400 transition-colors hover:text-accent-300"
                            >
                              {t('common.back', 'Back')}
                            </button>
                          </div>
                        ) : (
                          <div className="space-y-4">
                            <p className="text-center text-sm text-dark-400">
                              {t(
                                'auth.forgotPasswordHint',
                                'Enter your email and we will send you instructions to reset your password.',
                              )}
                            </p>
                            <form onSubmit={handleForgotPassword} className="space-y-3">
                              <div>
                                <label htmlFor="forgotEmail" className="label">
                                  Email
                                </label>
                                <input
                                  id="forgotEmail"
                                  type="email"
                                  value={forgotPasswordEmail}
                                  onChange={(e) => setForgotPasswordEmail(e.target.value)}
                                  placeholder="you@example.com"
                                  className="input"
                                  autoFocus
                                />
                              </div>
                              {forgotPasswordError && (
                                <p className="text-sm text-error-400">{forgotPasswordError}</p>
                              )}
                              <button
                                type="submit"
                                disabled={forgotPasswordLoading}
                                className="btn-primary w-full py-2.5"
                              >
                                {forgotPasswordLoading ? (
                                  <span className="flex items-center justify-center gap-2">
                                    <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
                                    {t('common.loading')}
                                  </span>
                                ) : (
                                  t('auth.sendResetLink', 'Send reset link')
                                )}
                              </button>
                            </form>
                            <div className="text-center">
                              <button
                                type="button"
                                onClick={closeForgotPasswordModal}
                                className="text-sm text-dark-400 transition-colors hover:text-dark-200"
                              >
                                {t('common.back', 'Back')}
                              </button>
                            </div>
                          </div>
                        )
                      ) : (
                        /* Normal login / register */
                        <>
                          <div className="flex rounded-lg bg-dark-800 p-1">
                            <button
                              type="button"
                              className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
                                authMode === 'login'
                                  ? 'bg-accent-500 text-on-accent'
                                  : 'text-dark-400 hover:text-dark-200'
                              }`}
                              onClick={() => setAuthMode('login')}
                            >
                              {t('auth.login')}
                            </button>
                            <button
                              type="button"
                              className={`flex-1 rounded-md py-2 text-sm font-medium transition-all ${
                                authMode === 'register'
                                  ? 'bg-accent-500 text-on-accent'
                                  : 'text-dark-400 hover:text-dark-200'
                              }`}
                              onClick={() => setAuthMode('register')}
                            >
                              {t('auth.register', 'Register')}
                            </button>
                          </div>

                          <form className="space-y-3" onSubmit={handleEmailSubmit}>
                            {authMode === 'register' && (
                              <div>
                                <label htmlFor="firstName" className="label">
                                  {t('auth.firstName', 'First Name')}
                                </label>
                                <input
                                  id="firstName"
                                  name="firstName"
                                  type="text"
                                  autoComplete="given-name"
                                  className="input"
                                  placeholder={t(
                                    'auth.firstNamePlaceholder',
                                    'Your name (optional)',
                                  )}
                                  value={firstName}
                                  onChange={(e) => setFirstName(e.target.value)}
                                />
                              </div>
                            )}

                            <div>
                              <label htmlFor="email" className="label">
                                {t('auth.email')}
                              </label>
                              <input
                                id="email"
                                name="email"
                                type="email"
                                autoComplete="email"
                                required
                                className="input"
                                placeholder="you@example.com"
                                value={email}
                                onChange={(e) => setEmail(e.target.value)}
                              />
                            </div>

                            <div>
                              <label htmlFor="password" className="label">
                                {t('auth.password')}
                              </label>
                              <input
                                id="password"
                                name="password"
                                type="password"
                                autoComplete={
                                  authMode === 'login' ? 'current-password' : 'new-password'
                                }
                                required
                                className="input"
                                placeholder="••••••••"
                                value={password}
                                onChange={(e) => setPassword(e.target.value)}
                              />
                              {authMode === 'register' &&
                                password.length > 0 &&
                                password.length < 8 && (
                                  <p className="mt-1.5 text-xs text-error-400">
                                    {t(
                                      'auth.passwordTooShort',
                                      'Password must be at least 8 characters',
                                    )}
                                  </p>
                                )}
                            </div>

                            {authMode === 'register' && (
                              <div>
                                <label htmlFor="confirmPassword" className="label">
                                  {t('auth.confirmPassword', 'Confirm Password')}
                                </label>
                                <input
                                  id="confirmPassword"
                                  name="confirmPassword"
                                  type="password"
                                  autoComplete="new-password"
                                  required
                                  className="input"
                                  placeholder="••••••••"
                                  value={confirmPassword}
                                  onChange={(e) => setConfirmPassword(e.target.value)}
                                />
                              </div>
                            )}

                            <button
                              type="submit"
                              disabled={isLoading}
                              className="btn-primary w-full py-2.5"
                            >
                              {isLoading ? (
                                <span className="flex items-center justify-center gap-2">
                                  <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
                                  {t('common.loading')}
                                </span>
                              ) : authMode === 'login' ? (
                                t('auth.login')
                              ) : (
                                t('auth.register', 'Register')
                              )}
                            </button>
                          </form>

                          {authMode === 'register' && (
                            <p className="text-center text-xs text-dark-500">
                              {t(
                                'auth.verificationEmailNotice',
                                'After registration, a verification email will be sent to your address',
                              )}
                            </p>
                          )}

                          {authMode === 'login' && (
                            <div className="text-center">
                              <button
                                type="button"
                                onClick={() => setShowForgotPassword(true)}
                                className="text-sm text-accent-400 transition-colors hover:text-accent-300"
                              >
                                {t('auth.forgotPassword', 'Forgot password?')}
                              </button>
                            </div>
                          )}
                        </>
                      )}
                    </div>
                  </div>
                </div>
              </>
            )}
          </div>
        )}
        {footerEnabled && <LegalFooter className="pt-1" />}
      </div>
    </div>
  );
}