/**
 * Forgot Password Page Component
 * Allows users to request a password reset email
 */

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useForgotPassword } from '../hooks/useAuth';
import { Link } from 'react-router-dom';
import SmoothScheduleLogo from '../components/SmoothScheduleLogo';
import LanguageSelector from '../components/LanguageSelector';
import { AlertCircle, Loader2, Mail, ArrowLeft, CheckCircle } from 'lucide-react';

const ForgotPassword: React.FC = () => {
  const { t } = useTranslation();
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  const forgotPasswordMutation = useForgotPassword();

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

    // Basic email validation
    if (!email) {
      setError(t('auth.emailRequired'));
      return;
    }

    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      setError(t('auth.invalidEmail'));
      return;
    }

    forgotPasswordMutation.mutate(
      { email },
      {
        onSuccess: () => {
          setSuccess(true);
        },
        onError: (err: any) => {
          setError(err.response?.data?.error || t('auth.forgotPasswordError'));
        },
      }
    );
  };

  return (
    <div className="min-h-screen flex bg-white dark:bg-gray-900 transition-colors duration-200">
      {/* Left Side - Image & Branding (Hidden on mobile) */}
      <div className="hidden lg:flex lg:w-1/2 relative bg-gray-900 text-white overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80')] bg-cover bg-center opacity-40"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-gray-900/50"></div>

        <div className="relative z-10 flex flex-col justify-between w-full p-12">
          <div>
            <Link to="/" className="flex items-center gap-3 text-white/90 hover:text-white transition-colors">
              <SmoothScheduleLogo className="w-8 h-8 text-brand-500" />
              <span className="font-bold text-xl tracking-tight">Smooth Schedule</span>
            </Link>
          </div>

          <div className="space-y-6 max-w-md">
            <h1 className="text-4xl font-extrabold tracking-tight leading-tight">
              {t('auth.forgotPasswordTitle')}
            </h1>
            <p className="text-lg text-gray-300">
              {t('auth.forgotPasswordDescription')}
            </p>
            <div className="flex gap-2 pt-4">
              <div className="h-1 w-12 bg-brand-500 rounded-full"></div>
              <div className="h-1 w-4 bg-gray-600 rounded-full"></div>
              <div className="h-1 w-4 bg-gray-600 rounded-full"></div>
            </div>
          </div>

          <div className="text-sm text-gray-500">
            © {new Date().getFullYear()} {t('marketing.copyright')}
          </div>
        </div>
      </div>

      {/* Right Side - Forgot Password Form */}
      <div className="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8 lg:w-1/2 xl:px-24 bg-gray-50 dark:bg-gray-900">
        <div className="mx-auto w-full max-w-sm lg:max-w-md">
          <div className="text-center lg:text-left mb-10">
            <Link to="/" className="lg:hidden flex justify-center mb-6">
              <SmoothScheduleLogo className="w-12 h-12 text-brand-600" />
            </Link>
            <h2 className="text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight">
              {t('auth.forgotPasswordHeading')}
            </h2>
            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
              {t('auth.forgotPasswordSubheading')}
            </p>
          </div>

          {success ? (
            <div className="mb-6 rounded-lg bg-green-50 dark:bg-green-900/20 p-6 border border-green-100 dark:border-green-800/50 animate-in fade-in slide-in-from-top-2">
              <div className="flex">
                <div className="flex-shrink-0">
                  <CheckCircle className="h-6 w-6 text-green-500 dark:text-green-400" aria-hidden="true" />
                </div>
                <div className="ml-3">
                  <h3 className="text-sm font-medium text-green-800 dark:text-green-200">
                    {t('auth.forgotPasswordSuccessTitle')}
                  </h3>
                  <div className="mt-2 text-sm text-green-700 dark:text-green-300">
                    <p>{t('auth.forgotPasswordSuccessMessage')}</p>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <>
              {error && (
                <div className="mb-6 rounded-lg bg-red-50 dark:bg-red-900/20 p-4 border border-red-100 dark:border-red-800/50 animate-in fade-in slide-in-from-top-2">
                  <div className="flex">
                    <div className="flex-shrink-0">
                      <AlertCircle className="h-5 w-5 text-red-500 dark:text-red-400" aria-hidden="true" />
                    </div>
                    <div className="ml-3">
                      <h3 className="text-sm font-medium text-red-800 dark:text-red-200">
                        {t('auth.validationError')}
                      </h3>
                      <div className="mt-1 text-sm text-red-700 dark:text-red-300">
                        {error}
                      </div>
                    </div>
                  </div>
                </div>
              )}

              <form className="space-y-6" onSubmit={handleSubmit}>
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                    {t('auth.email')}
                  </label>
                  <div className="relative rounded-md shadow-sm">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                      <Mail className="h-5 w-5 text-gray-400" aria-hidden="true" />
                    </div>
                    <input
                      id="email"
                      name="email"
                      type="email"
                      autoComplete="email"
                      required
                      className="focus:ring-brand-500 focus:border-brand-500 block w-full pl-10 sm:text-sm border-gray-300 dark:border-gray-700 rounded-lg py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 transition-colors"
                      placeholder={t('auth.enterEmail')}
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      data-testid="email-input"
                    />
                  </div>
                </div>

                <button
                  type="submit"
                  disabled={forgotPasswordMutation.isPending}
                  className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 disabled:opacity-70 disabled:cursor-not-allowed transition-all duration-200 ease-in-out transform active:scale-[0.98]"
                  data-testid="submit-button"
                >
                  {forgotPasswordMutation.isPending ? (
                    <span className="flex items-center gap-2">
                      <Loader2 className="animate-spin h-5 w-5" />
                      {t('auth.sending')}
                    </span>
                  ) : (
                    <span>{t('auth.sendResetLink')}</span>
                  )}
                </button>
              </form>
            </>
          )}

          <div className="mt-6">
            <Link
              to="/login"
              className="flex items-center justify-center gap-2 text-sm font-medium text-brand-600 hover:text-brand-500 dark:text-brand-400 dark:hover:text-brand-300 transition-colors"
              data-testid="back-to-login"
            >
              <ArrowLeft className="h-4 w-4" />
              {t('auth.backToLogin')}
            </Link>
          </div>

          {/* Language Selector */}
          <div className="mt-8 flex justify-center">
            <LanguageSelector />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ForgotPassword;
