
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { FaEye, FaEyeSlash } from 'react-icons/fa';
import 'bootstrap/dist/css/bootstrap.min.css';

const ResetPassword = () => {
  const [oldPassword, setOldPassword] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [reenterPassword, setReenterPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const navigate = useNavigate();

  const isFormValid =
    oldPassword.trim() &&
    newPassword.trim().length >= 3 &&
    reenterPassword.trim();

  const toggleShowPassword = () => {
    setShowPassword(!showPassword);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    navigate('/error404'); // Assuming your route path is /error404
  };

  return (
    <div
      className="d-flex justify-content-center align-items-center vh-100"
      style={{ backgroundColor: '#f7f7f7' }}
    >
      <div
        className="p-5 shadow bg-white rounded"
        style={{ maxWidth: '500px', width: '100%' }}
      >
        <h3 className="text-center mb-3">Please Reset Your Password</h3>
        <p className="text-center text-muted mb-4">you're signed in as sysadmin</p>

        <form onSubmit={handleSubmit}>
          {[
            { label: 'Enter Old Password', value: oldPassword, setter: setOldPassword },
            { label: 'Enter New Password', value: newPassword, setter: setNewPassword },
            { label: 'Re-Enter New Password', value: reenterPassword, setter: setReenterPassword },
          ].map(({ label, value, setter }, index) => (
            <div key={index} className="form-group position-relative mb-3">
              <label>{label}</label>
              <input
                type={showPassword ? 'text' : 'password'}
                className="form-control"
                placeholder={label}
                value={value}
                onChange={(e) => setter(e.target.value)}
              />
              <span
                className="position-absolute"
                onClick={toggleShowPassword}
                style={{
                  top: '38px',
                  right: '15px',
                  cursor: 'pointer',
                  color: '#999',
                }}
              >
                {showPassword ? <FaEyeSlash /> : <FaEye />}
              </span>
            </div>
          ))}

          <button
            type="submit"
            className="btn w-100"
            style={{
              backgroundColor: isFormValid ? '#6c63ff' : '#d6d6ff',
              color: '#fff',
              textTransform: 'uppercase',
              letterSpacing: '1px',
            }}
            disabled={!isFormValid}
          >
            Continue
          </button>
          
        </form>
        <div className="d-flex justify-content-between mt-4">
          <button
            className="btn btn-outline-primary w-50 me-2"
            onClick={() => navigate('/admin/index')}
          >
            Go to Home
          </button>

          <button
            className="btn btn-outline-primary w-50 ms-2"
            onClick={() => navigate('/auth/login')}
          >
            Login
          </button>
          </div>
        </div>
    </div>
  );
};

export default ResetPassword;
