import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Input } from '../../Inputs/Input/Input';
import { Button } from '../../Atoms/Button/Button';
import { Alert } from '../../Atoms/Alert/Alert';

export const ChangePasswordForm = ({
  onSubmit,
  className = '',
  ...props
}) => {
  const { t } = useTranslation();
  const [formData, setFormData] = useState({
    currentPassword: '',
    newPassword: '',
    confirmPassword: '',
  });
  const [errors, setErrors] = useState({});
  const [success, setSuccess] = useState(false);

  const handleChange = (field, value) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors((prev) => ({ ...prev, [field]: null }));
    }
    setSuccess(false);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = {};

    if (!formData.currentPassword) {
      newErrors.currentPassword = t('form.currentPassword') + ' is required';
    }
    if (!formData.newPassword) {
      newErrors.newPassword = t('form.newPassword') + ' is required';
    } else if (formData.newPassword.length < 8) {
      newErrors.newPassword = 'Password must be at least 8 characters';
    }
    if (!formData.confirmPassword) {
      newErrors.confirmPassword = 'Please confirm your password';
    } else if (formData.newPassword !== formData.confirmPassword) {
      newErrors.confirmPassword = 'Passwords do not match';
    }

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    if (onSubmit) {
      onSubmit(formData);
    }
    setSuccess(true);
    setFormData({
      currentPassword: '',
      newPassword: '',
      confirmPassword: '',
    });
  };

  return (
    <form
      onSubmit={handleSubmit}
      className={`max-w-md mx-auto bg-white p-6 rounded-lg shadow-md ${className}`}
      {...props}
    >
      <h2 className="text-2xl font-bold mb-6 text-center">
        {t('form.changePassword')}
      </h2>

      {success && (
        <Alert variant="success" className="mb-4">
          Password changed successfully!
        </Alert>
      )}

      <div className="space-y-4">
        <Input
          label={t('form.currentPassword')}
          type="password"
          placeholder={t('placeholder.password')}
          value={formData.currentPassword}
          onChange={(e) => handleChange('currentPassword', e.target.value)}
          error={errors.currentPassword}
          required
        />

        <Input
          label={t('form.newPassword')}
          type="password"
          placeholder={t('placeholder.password')}
          value={formData.newPassword}
          onChange={(e) => handleChange('newPassword', e.target.value)}
          error={errors.newPassword}
          helperText="Must be at least 8 characters"
          required
        />

        <Input
          label={t('form.confirmPassword')}
          type="password"
          placeholder={t('placeholder.password')}
          value={formData.confirmPassword}
          onChange={(e) => handleChange('confirmPassword', e.target.value)}
          error={errors.confirmPassword}
          required
        />

        <div className="flex space-x-4">
          <Button type="submit" variant="primary" className="flex-1">
            {t('form.changePassword')}
          </Button>
          <Button type="button" variant="outline" className="flex-1">
            {t('common.cancel')}
          </Button>
        </div>
      </div>
    </form>
  );
};

export default ChangePasswordForm;

