import React, { useState } from 'react';
import { authService } from '../../services/auth/auth.service';
import { useUser } from '../../contexts/UserContext';

interface ChangePasswordModalProps {
  onClose: () => void;
  onSuccess: () => void;
}

const ChangePasswordModal: React.FC<ChangePasswordModalProps> = ({
  onClose,
  onSuccess,
}) => {
  const { user } = useUser();
  const [currentPassword, setCurrentPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState('');
  const [loading, setLoading] = useState(false);

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

    // Validation
    if (!currentPassword || !newPassword || !confirmPassword) {
      setError('All fields are required');
      setLoading(false);
      return;
    }

    if (newPassword.length < 6) {
      setError('New password must be at least 6 characters long');
      setLoading(false);
      return;
    }

    if (newPassword !== confirmPassword) {
      setError('New passwords do not match');
      setLoading(false);
      return;
    }

    if (currentPassword === newPassword) {
      setError('New password must be different from current password');
      setLoading(false);
      return;
    }

    try {
      await authService.changePassword(user!._id, currentPassword, newPassword);
      onSuccess();
      onClose();
    } catch (error: unknown) {
      setError(
        error instanceof Error ? error.message : 'Failed to change password'
      );
    } finally {
      setLoading(false);
    }
  };

  // Don't show for OAuth users
  if (!user?.password) {
    return (
      <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'>
        <div className='bg-white dark:bg-slate-800 rounded-lg p-6 max-w-md'>
          <h2 className='text-xl font-bold text-slate-800 dark:text-slate-100 mb-4'>
            Password Change Not Available
          </h2>
          <p className='text-slate-600 dark:text-slate-300 mb-4'>
            This account was created using OAuth (Google/GitHub). Password
            changes are not available for OAuth accounts.
          </p>
          <button
            onClick={onClose}
            className='w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-md'
          >
            Close
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'>
      <div className='bg-white dark:bg-slate-800 rounded-lg p-6 max-w-md w-full mx-4'>
        <div className='flex justify-between items-center mb-6'>
          <h2 className='text-xl font-bold text-slate-800 dark:text-slate-100'>
            Change Password
          </h2>
          <button
            onClick={onClose}
            className='text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200'
          >
            <svg
              className='w-6 h-6'
              fill='none'
              stroke='currentColor'
              viewBox='0 0 24 24'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                strokeWidth={2}
                d='M6 18L18 6M6 6l12 12'
              />
            </svg>
          </button>
        </div>

        <form onSubmit={handleSubmit} className='space-y-4'>
          <div>
            <label
              htmlFor='currentPassword'
              className='block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1'
            >
              Current Password
            </label>
            <input
              type='password'
              id='currentPassword'
              value={currentPassword}
              onChange={e => setCurrentPassword(e.target.value)}
              className='w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white'
              placeholder='Enter your current password'
            />
          </div>

          <div>
            <label
              htmlFor='newPassword'
              className='block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1'
            >
              New Password
            </label>
            <input
              type='password'
              id='newPassword'
              value={newPassword}
              onChange={e => setNewPassword(e.target.value)}
              className='w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white'
              placeholder='Enter new password (min 6 characters)'
            />
          </div>

          <div>
            <label
              htmlFor='confirmPassword'
              className='block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1'
            >
              Confirm New Password
            </label>
            <input
              type='password'
              id='confirmPassword'
              value={confirmPassword}
              onChange={e => setConfirmPassword(e.target.value)}
              className='w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white'
              placeholder='Confirm your new password'
            />
          </div>

          {error && (
            <div className='bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded'>
              {error}
            </div>
          )}

          <div className='flex space-x-3 pt-4'>
            <button
              type='submit'
              disabled={loading}
              className='flex-1 bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200'
            >
              {loading ? 'Changing...' : 'Change Password'}
            </button>
            <button
              type='button'
              onClick={onClose}
              className='flex-1 bg-slate-300 hover:bg-slate-400 text-slate-700 font-medium py-2 px-4 rounded-md transition-colors duration-200'
            >
              Cancel
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default ChangePasswordModal;