import { useMemo, useState } from 'react';
import { X } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { useLanguage } from '../contexts/LanguageContext';

interface AuthModalProps {
  onClose: () => void;
  mandatory?: boolean;
}

export default function AuthModal({ onClose, mandatory = false }: AuthModalProps) {
  const { signIn, signUp, beginGoogleOAuth, authPhase, authError } = useAuth();
  const { t } = useLanguage();

  const [mode, setMode] = useState<'signin' | 'signup'>('signin');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [localError, setLocalError] = useState('');

  const isBusy = useMemo(
    () => ['email_signing_in', 'email_signing_up', 'oauth_redirecting', 'oauth_exchanging'].includes(authPhase),
    [authPhase]
  );

  const submitText = mode === 'signup' ? t.auth.signUp : t.auth.signIn;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLocalError('');

    if (mode === 'signup') {
      if (password.length < 6) {
        setLocalError(t.auth.passwordHint);
        return;
      }

      if (password !== confirmPassword) {
        setLocalError(t.auth.passwordMismatch);
        return;
      }
    }

    const result = mode === 'signup' ? await signUp(email, password) : await signIn(email, password);

    if (!result.error) {
      onClose();
    }
  };

  const handleGoogleOAuth = async () => {
    await beginGoogleOAuth();
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold text-gray-900">
            {mode === 'signup' ? t.auth.signUpTitle : t.auth.signInTitle}
          </h2>
          {!mandatory && (
            <button
              type="button"
              onClick={onClose}
              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
              aria-label="close"
              disabled={isBusy}
            >
              <X size={20} />
            </button>
          )}
        </div>

        <div className="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 mb-4">
          <button
            type="button"
            onClick={() => setMode('signin')}
            aria-pressed={mode === 'signin'}
            disabled={isBusy}
            className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
              mode === 'signin' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            {t.auth.signIn}
          </button>
          <button
            type="button"
            onClick={() => setMode('signup')}
            aria-pressed={mode === 'signup'}
            disabled={isBusy}
            className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
              mode === 'signup' ? 'bg-white text-gray-900 shadow-sm' : 'text-gray-600 hover:text-gray-900'
            }`}
          >
            {t.auth.signUp}
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="auth-email" className="block text-sm font-medium text-gray-700 mb-1">
              {t.auth.email}
            </label>
            <input
              id="auth-email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="your@email.com"
              required
              disabled={isBusy}
            />
            {mode === 'signup' && (
              <p className="mt-1 text-xs text-gray-500">{t.auth.emailHint}</p>
            )}
          </div>

          <div>
            <label htmlFor="auth-password" className="block text-sm font-medium text-gray-700 mb-1">
              {t.auth.password}
            </label>
            <input
              id="auth-password"
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
              placeholder="••••••••"
              required
              minLength={6}
              disabled={isBusy}
            />
            {mode === 'signup' && (
              <p className="mt-1 text-xs text-gray-500">{t.auth.passwordHint}</p>
            )}
          </div>

          {mode === 'signup' && (
            <div>
              <label htmlFor="auth-password-confirm" className="block text-sm font-medium text-gray-700 mb-1">
                {t.auth.confirmPassword}
              </label>
              <input
                id="auth-password-confirm"
                type="password"
                value={confirmPassword}
                onChange={(e) => setConfirmPassword(e.target.value)}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                placeholder="••••••••"
                required
                minLength={6}
                disabled={isBusy}
              />
            </div>
          )}

          {(localError || authError) && (
            <div className="p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm font-medium">
              {t.auth.error}: {localError || authError}
            </div>
          )}

          <button
            type="submit"
            disabled={isBusy}
            className="w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-80 disabled:cursor-wait"
          >
            {submitText}
          </button>

          <div className="relative py-1">
            <div className="absolute inset-0 flex items-center" aria-hidden="true">
              <div className="w-full border-t border-gray-200" />
            </div>
            <div className="relative flex justify-center text-xs">
              <span className="bg-white px-2 text-gray-400">OR</span>
            </div>
          </div>

          <button
            type="button"
            onClick={handleGoogleOAuth}
            disabled={isBusy}
            className="w-full py-3 px-4 border border-gray-300 text-gray-800 rounded-lg hover:bg-gray-50 transition-colors font-medium disabled:opacity-80 disabled:cursor-wait inline-flex items-center justify-center gap-2"
          >
            <img
              src="https://upload.wikimedia.org/wikipedia/commons/7/7e/Gmail_icon_%282020%29.svg"
              alt=""
              aria-hidden="true"
              className="w-[18px] h-[18px]"
              loading="lazy"
              decoding="async"
            />
            {authPhase === 'oauth_redirecting' ? t.auth.oauthRedirecting : t.auth.continueWithGoogle}
          </button>
        </form>
      </div>
    </div>
  );
}