'use client';

import { useState, useEffect, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { AuthShell } from '@/components/auth/AuthShell';
import { GoogleSignInButton } from '@/components/auth/GoogleSignInButton';
import { useAuth } from '@/contexts/AuthContext';
import { useLanguage } from '@/contexts/LanguageContext';
import { getPostLoginPath } from '@/lib/auth';

function LoginForm() {
  const { login, loginWithGoogle, user, isLoading } = useAuth();
  const { t } = useLanguage();
  const router = useRouter();
  const searchParams = useSearchParams();
  const redirect = searchParams.get('redirect');

  const [identifier, setIdentifier] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!isLoading && user) {
      router.replace(getPostLoginPath(user.role, redirect));
    }
  }, [user, isLoading, router, redirect]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    try {
      const loggedInUser = await login(identifier, password);
      router.push(getPostLoginPath(loggedInUser.role, redirect));
    } catch (err: unknown) {
      setError(err instanceof Error ? err.message : t('Login failed', 'Hindi nakapasok'));
    } finally {
      setLoading(false);
    }
  };

  const handleGoogle = async (idToken: string) => {
    setLoading(true);
    setError('');
    try {
      const loggedInUser = await loginWithGoogle(idToken);
      router.push(getPostLoginPath(loggedInUser.role, redirect));
    } catch (err: unknown) {
      setError(
        err instanceof Error ? err.message : t('Google Sign-In failed', 'Hindi gumana ang Google Sign-In')
      );
      setLoading(false);
    }
  };

  if (isLoading) {
    return (
      <div className="flex min-h-[50vh] items-center justify-center">
        <div className="loading-spinner" />
      </div>
    );
  }

  if (user) return null;

  return (
    <AuthShell
      title={t('Welcome back', 'Maligayang pagbabalik')}
      subtitle={t('Sign in to your eHandyHire account', 'Mag-sign in sa iyong eHandyHire account')}
    >
      <GoogleSignInButton
        mode="signin"
        onCredential={handleGoogle}
        onError={setError}
        disabled={loading}
        dividerLabel={t('or', 'o')}
      />
      <form onSubmit={handleSubmit} className="space-y-4">
        <Input
          label={t('Email or Phone', 'Email o Cellphone')}
          value={identifier}
          onChange={(e) => setIdentifier(e.target.value)}
          required
        />
        <Input
          label={t('Password', 'Password')}
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        {error && <p className="text-sm text-red-500">{error}</p>}
        <Button type="submit" className="auth-submit rounded-none" disabled={loading}>
          {loading
            ? t('Signing in...', 'Nag-sign in...')
            : t('Sign In', 'Mag-sign in')}
        </Button>
      </form>
      <div className="mt-5 text-center text-sm text-muted space-y-2">
        <Link href="/forgot-password" className="auth-link">
          {t('Forgot password?', 'Nakalimutan ang password?')}
        </Link>
        <p>
          {t("Don't have an account?", 'Wala ka pang account?')}{' '}
          <Link href="/register" className="auth-link">
            {t('Sign up', 'Mag-sign up')}
          </Link>
        </p>
      </div>
    </AuthShell>
  );
}

export default function LoginPage() {
  return (
    <Suspense
      fallback={
        <div className="flex min-h-[50vh] items-center justify-center">
          <div className="loading-spinner" />
        </div>
      }
    >
      <LoginForm />
    </Suspense>
  );
}