import React, { useState } from 'react';
import axios from 'axios';
import { BaseUrl } from '../BaseUrl';
import toast, { Toaster } from 'react-hot-toast';
import { FiEye, FiEyeOff, FiLock, FiCheckCircle } from 'react-icons/fi';
import { useParams } from 'react-router-dom';

const UserChangePassword = () => {
  const { id } = useParams(); // آیدی کاربر

  const [formData, setFormData] = useState({
    newPassword: '',
    confirmPassword: '',
  });
  const [showPassword, setShowPassword] = useState({
    new: false,
    confirm: false,
  });
  const [loading, setLoading] = useState(false);
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
    if (errors[name]) setErrors((prev) => ({ ...prev, [name]: '' }));
  };

  const togglePasswordVisibility = (field) => {
    setShowPassword((prev) => ({ ...prev, [field]: !prev[field] }));
  };

  const validatePassword = (password) => {
    const errors = [];
    if (password.length < 8) errors.push('حداقل 8 کاراکتر');
    if (!/[A-Z]/.test(password)) errors.push('حداقل یک حرف بزرگ');
    if (!/[a-z]/.test(password)) errors.push('حداقل یک حرف کوچک');
    if (!/[0-9]/.test(password)) errors.push('حداقل یک عدد');
    return errors;
  };

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

    // اعتبارسنجی پسورد جدید
    const passwordErrors = validatePassword(formData.newPassword);
    if (passwordErrors.length > 0) {
      newErrors.newPassword = passwordErrors.join('، ');
    }

    // تطابق پسوردها
    if (formData.newPassword !== formData.confirmPassword) {
      newErrors.confirmPassword = 'پسوردها مطابقت ندارند';
    }

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

    setLoading(true);

    try {
      await axios.post(
        `https://app.modstagram.ir/api/v1/panel/users/change-password`,
        {
          userId: id,
          password: formData.newPassword, // فقط پسورد جدید
        }
       
      );

      // toast.success('رمز عبور کاربر با موفقیت تغییر کرد', {
      //   icon: <FiCheckCircle className="text-green-500" />,
      //   style: { background: '#10b981', color: 'white' },
      // });

      // ریست فرم
      setFormData({ newPassword: '', confirmPassword: '' });
    } catch (err) {
      const message = err.response?.data?.message || 'خطا در تغییر رمز عبور';
      toast.error(message, { style: { background: '#ef4444', color: 'white' } });
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      
      <div className="min-h-screen bg-gradient-to-br flex items-center justify-center p-4">
        <div className="w-full max-w-md">
          <div className="bg-slate-800/50 backdrop-blur-xl rounded-2xl shadow-2xl border border-slate-700 p-8">
            <div className="text-center mb-8">
              <div className="mx-auto w-16 h-16 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-full flex items-center justify-center mb-4">
                <FiLock className="text-white text-2xl" />
              </div>
              <h1 className="text-2xl font-bold text-white">تغییر رمز عبور کاربر</h1>
              <p className="text-slate-400 mt-2">
                آیدی کاربر: <span className="text-cyan-400 font-mono">{id}</span>
              </p>
            </div>

            <form onSubmit={handleSubmit} className="space-y-6">

              {/* پسورد جدید */}
              <div>
                <label className="block text-sm font-medium text-slate-300 mb-2">
                  رمز عبور جدید
                </label>
                <div className="relative">
                  <input
                    type={showPassword.new ? 'text' : 'password'}
                    name="newPassword"
                    value={formData.newPassword}
                    onChange={handleChange}
                    className={`w-full px-4 py-3 bg-slate-700/50 border ${
                      errors.newPassword ? 'border-red-500' : 'border-slate-600'
                    } rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-all`}
                    placeholder="••••••••"
                  />
                  <button
                    type="button"
                    onClick={() => togglePasswordVisibility('new')}
                    className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
                  >
                    {showPassword.new ? <FiEyeOff /> : <FiEye />}
                  </button>
                </div>
                {errors.newPassword && (
                  <p className="mt-1 text-xs text-red-400">{errors.newPassword}</p>
                )}
                <div className="mt-2 space-y-1 text-xs text-slate-400">
                  <p className={formData.newPassword.length >= 8 ? 'text-green-400' : ''}>
                    حداقل 8 کاراکتر
                  </p>
                  <p className={/[A-Z]/.test(formData.newPassword) ? 'text-green-400' : ''}>
                    یک حرف بزرگ
                  </p>
                  <p className={/[a-z]/.test(formData.newPassword) ? 'text-green-400' : ''}>
                    یک حرف کوچک
                  </p>
                  <p className={/[0-9]/.test(formData.newPassword) ? 'text-green-400' : ''}>
                    یک عدد
                  </p>
                </div>
              </div>

              {/* تأیید پسورد */}
              <div>
                <label className="block text-sm font-medium text-slate-300 mb-2">
                  تکرار رمز عبور جدید
                </label>
                <div className="relative">
                  <input
                    type={showPassword.confirm ? 'text' : 'password'}
                    name="confirmPassword"
                    value={formData.confirmPassword}
                    onChange={handleChange}
                    className={`w-full px-4 py-3 bg-slate-700/50 border ${
                      errors.confirmPassword ? 'border-red-500' : 'border-slate-600'
                    } rounded-xl text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-all`}
                    placeholder="••••••••"
                  />
                  <button
                    type="button"
                    onClick={() => togglePasswordVisibility('confirm')}
                    className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-white"
                  >
                    {showPassword.confirm ? <FiEyeOff /> : <FiEye />}
                  </button>
                </div>
                {errors.confirmPassword && (
                  <p className="mt-1 text-xs text-red-400">{errors.confirmPassword}</p>
                )}
              </div>

              {/* دکمه ارسال */}
              <button
                type="submit"
                disabled={loading}
                className={`w-full py-3 px-4 rounded-xl font-medium text-white transition-all duration-300 flex items-center justify-center gap-2 ${
                  loading
                    ? 'bg-slate-600 cursor-not-allowed'
                    : 'bg-gradient-to-r from-cyan-500 to-purple-600 hover:from-cyan-600 hover:to-purple-700 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5'
                }`}
              >
                {loading ? (
                  <>
                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                    در حال تغییر...
                  </>
                ) : (
                  <>
                    <FiLock />
                    تغییر رمز عبور کاربر
                  </>
                )}
              </button>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default UserChangePassword;