import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { clearError } from '../store/reducers/authSlice';
import authService from '../services/authService';

const ForgotPassword = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const { loading, error } = useSelector(state => state.auth);
  
  const [formData, setFormData] = useState({
    email: ''
  });
  
  const [isFocused, setIsFocused] = useState({
    email: false
  });
  
  const [success, setSuccess] = useState(false);
  
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  
  const handleFocus = (field) => {
    setIsFocused({
      ...isFocused,
      [field]: true
    });
  };
  
  const handleBlur = (field) => {
    setIsFocused({
      ...isFocused,
      [field]: false
    });
  };
  
  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Prevent form submission if already loading
    if (loading === 'pending') {
      return;
    }
    
    try {
      await authService.forgotPassword(formData.email);
      setSuccess(true);
      // Clear form
      setFormData({ email: '' });
    } catch (err) {
      console.error('Password reset request failed:', err);
    }
  };
  
  const handleBackToLogin = () => {
    dispatch(clearError());
    navigate('/login');
  };
  
  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50 via-white to-accent-50 flex items-center justify-center p-3 sm:p-4 animate-fade-in">
      <div className="w-full max-w-sm sm:max-w-md">
        {/* Logo and Brand */}
        <div className="text-center mb-6 sm:mb-8 animate-slide-up">
          <div className="inline-flex items-center justify-center w-14 h-14 sm:w-16 sm:h-16 bg-gradient-to-br from-primary-600 to-primary-800 rounded-2xl shadow-lg mb-3 sm:mb-4">
            <span className="text-xl sm:text-2xl font-bold text-white">Lin</span>
          </div>
          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-1 sm:mb-2">Reset Password</h1>
          <p className="text-sm sm:text-base text-gray-600">
            {success 
              ? 'Check your email for password reset instructions' 
              : 'Enter your email to receive password reset instructions'}
          </p>
        </div>
        
        {/* Auth Card */}
        <div className="bg-white rounded-2xl shadow-xl p-4 sm:p-8 space-y-4 sm:space-y-6 animate-slide-up animate-delay-100">
          {/* Success Message */}
          {success && (
            <div className="bg-green-50 border border-green-200 rounded-lg p-3 sm:p-4 animate-slide-up animate-delay-200">
              <div className="flex items-start space-x-2">
                <svg className="w-4 h-4 sm:w-5 sm:h-5 text-green-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                </svg>
                <span className="text-green-700 text-xs sm:text-sm font-medium">
                  Password reset instructions sent to your email. Please check your inbox.
                </span>
              </div>
            </div>
          )}
          
          {/* Error Message */}
          {error && !success && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-3 sm:p-4 animate-slide-up animate-delay-200">
              <div className="flex items-start space-x-2">
                <svg className="w-4 h-4 sm:w-5 sm:h-5 text-red-500 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                </svg>
                <span className="text-red-700 text-xs sm:text-sm font-medium">{error}</span>
              </div>
            </div>
          )}
          
          {!success && (
            <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
              {/* Email Field */}
              <div className="space-y-2">
                <label htmlFor="email" className="block text-xs sm:text-sm font-semibold text-gray-700">
                  Email Address
                </label>
                <div className="relative">
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    onFocus={() => handleFocus('email')}
                    onBlur={() => handleBlur('email')}
                    className={`w-full px-3 sm:px-4 py-2 sm:py-3 rounded-xl border-2 transition-all duration-200 ${
                      isFocused.email
                        ? 'border-primary-500 shadow-md'
                        : 'border-gray-200 hover:border-gray-300'
                    } ${formData.email ? 'text-gray-900' : 'text-gray-500'} focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 touch-manipulation`}
                    placeholder="Enter your email"
                    required
                    aria-required="true"
                    aria-label="Email address"
                  />
                  <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                    <svg className="w-4 h-4 sm:w-5 sm:h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                    </svg>
                  </div>
                </div>
              </div>
              
              {/* Submit Button */}
              <button
                type="submit"
                disabled={loading === 'pending'}
                className="w-full bg-gradient-to-r from-primary-600 to-primary-800 text-white font-semibold py-2.5 sm:py-3 px-4 rounded-xl hover:from-primary-700 hover:to-primary-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none touch-manipulation"
                aria-busy={loading === 'pending'}
              >
                {loading === 'pending' ? (
                  <div className="flex items-center justify-center">
                    <svg className="animate-spin -ml-1 mr-2 sm:mr-3 h-4 w-4 sm:h-5 sm:w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span className="text-xs sm:text-sm">Sending...</span>
                  </div>
                ) : (
                  <span className="text-xs sm:text-sm">Send Reset Instructions</span>
                )}
              </button>
            </form>
          )}
          
          {/* Back to Login Link */}
          <div className="text-center">
            <button
              type="button"
              onClick={handleBackToLogin}
              className="font-semibold text-primary-600 hover:text-primary-500 transition-colors focus:outline-none focus:underline text-xs sm:text-sm"
              aria-label="Back to login"
            >
              Back to Sign In
            </button>
          </div>
        </div>
        
        {/* Footer */}
        <div className="text-center mt-6 sm:mt-8 text-xs text-gray-500">
          <p>&copy; 2024 Lin. All rights reserved.</p>
        </div>
      </div>
    </div>
  );
};

export default ForgotPassword;