import { useEffect, useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
import usersService from "../../../services/UsersService";
import InputCom from "../../Helpers/Inputs/InputCom";
import AuthLayout from "../AuthLayout";
import ForgetPwdResponse from "../ForgetPwdResponse";
import PasswordValidator from "../../../lib/PasswordValidator";
import LoadingSpinner from "../../Spinners/LoadingSpinner";

const VerifyPassword = () => {
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [requestStatus, setRequestStatus] = useState({loading: true, status:false, data: []})
  const [msgError, setMsgError] = useState("");
  const [linkLoader, setLinkLoader] = useState(false);
  const [linkSuccess, setLinkSuccess] = useState(null);
  const [showPassword, setShowPassword] = useState(false);
  const navigate = useNavigate();
  const location = useLocation();
  const queryParams = new URLSearchParams(location?.search);
  const token = queryParams.get("passlink");
  const userApi = new usersService();

  // To Show and Hide Password
  const togglePasswordVisibility = () => {
    setShowPassword(!showPassword);
  };

  // Password
  const handlePassword = (e) => {
    let { name, value } = e?.target;
    if (name == "password") setPassword(value);
    if (name == "confirm_password") setConfirmPassword(value);
  };

  const completeReset = async () => {
    if(!password || !confirmPassword){ // CHECKS IF PASSWORD IS EMPTY
      setMsgError("Please fill in fields");
      return setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }
    if(password != confirmPassword){ // CHECKS IF PASSWORD EQUALS CONFIRM PASSWORD
      setMsgError("Passwords does not match");
      return setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }
    if(password.length < 6){ // CHECKS IF PASSWORD LENGTH IS UPTO 6 CHARACTERS
      setMsgError("Password must be upto six characters");
      return setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }
    if(!PasswordValidator(password)){ // CHECKS IF PASSWORD IS VALID
      setMsgError("Password must contain alphanumeric, uppercase and special character: eg: Password1@");
      return setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_RESET_START_ERROR_TIMEOUT);
    }
    try {
          setLinkLoader(true);
          var reqData = {
            sessionid: "DUMMY-CANNOT_BE_EMPTY",
            reset_link: token,
            newpass: password,
            m_uid: requestStatus.data?.m_uid || '',
            reset_uid: requestStatus.data?.reset_uid || '',
            step: 300,
            action: 730,
          };
          const res = await userApi?.CompleteResetPassword(reqData);

          if (res.status == 200) {
            const { data } = res;
            if (data?.internal_return >= 0) {
              // setTimeout(() => {
              //   navigate("/login", { replace: true });
              //   setLinkLoader(false);
              // }, 2000);
              setLinkSuccess(true);
            } else {
              setLinkLoader(false);
              setMsgError("An error occurred");
              setLinkSuccess(false);
            }
          } else {
            setLinkLoader(false);
            setLinkSuccess(false);
          }
    } catch (error) {
      setLinkLoader(false);
      setLinkSuccess(false);
      throw new Error(error);
    } finally {
      setTimeout(() => {
        setMsgError(null);
      }, process.env.REACT_APP_SIGNUP_ERROR_TIMEOUT);
    }
  };

  const verifyResetPwd = () => { // FUNCTION TO VERIFY RESET PASSWORD LINK
    setRequestStatus({loading: true, status:false, data: []})
    var reqData = {
      sessionid: "DUMMY-CANNOT_BE_EMPTY",
      reset_link: token,
      step: 200,
      action: 730,
    };
    userApi.CompleteResetPassword(reqData).then(res => {
      if(res.status != 200 || res.data.internal_return < 0){
        return setRequestStatus({loading: false, status:false, data: []})
      }
      setRequestStatus({loading: false, status:true, data: res.data})
    }).catch(error => {
      setRequestStatus({loading: false, status:false, data: []})
    })
  }

  useEffect(()=>{
    // little checker for the validity of the token
  if (token==null || token?.length != 64) {
    return setRequestStatus({loading: false, status:false, data: []});
  }
  verifyResetPwd()
  },[])
  return (
    <>
      <AuthLayout slogan="Welcome to WrenchBoard">
        <div className="w-full">
          <div className="mb-12">
            <Link to="#">
              <img
                src={WrenchBoard}
                alt="wrenchboard"
                className="h-10 mx-auto"
              />
            </Link>
          </div>
          <div className="content-wrapper login shadow-md w-full lg:max-w-[500px] mx-auto flex justify-center items-center dark:bg-dark-white 2xl:w-[828px] rounded-[0.475rem] sm:p-7 p-5">
            {requestStatus.loading ?
            <LoadingSpinner color='sky-blue' size='16' height='h-300px' />
            :
            !requestStatus.loading && requestStatus.status ?
            <div className="w-full">
              {linkSuccess == null ?
              <>
                <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
                  <h1 className="text-[#181c32] font-semibold dark:text-white mb-3 leading-[27.3px] text-[22.75px]">
                    Password Reset
                  </h1>
                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                      Enter a new password to reset
                    </span>
                    <span className="text-gray-400 font-medium text-[16.25px] leading-[24.375px]">
                      We'll send an email to confirm reset
                    </span>
                </div>
                <div>
                  <p className="text-red-500 font-semibold mb-3 leading-[27.3px] text-[13px]">
                    Must include a special, numeric, uppercase and lowercase character
                  </p>
                </div>
                  <SuccessfulComponent
                    password={password}
                    confirmPassword={confirmPassword}
                    handlePassword={handlePassword}
                    onSubmit={completeReset}
                    msgErr={msgError}
                    loader={linkLoader}
                    showPassword={showPassword}
                    onClick={togglePasswordVisibility}
                    navigateHandler={() => navigate("/login")}
                  />
                </>
                :
                <ForgetPwdResponse 
                title={linkSuccess? 'Password Reset Complete' : 'Password Reset Error'}
                message={linkSuccess? 'Password Reset Complete. You can login now with your new credentials' : 'Password Reset Error. Please get in touch with support for further support'
                }
                type={linkSuccess}
              />
              }
            </div>
            :
            <div className="title-area flex flex-col justify-center items-center relative text-center mb-7">
              <ForgetPwdResponse 
                title={'Forget Password'}
                message={'We are unable to continue to reset process. This error is usually due to expired links. Please start all over or contact us'}
                type={requestStatus.status}
              />
            </div>
            }
          </div>
        </div>
      </AuthLayout>
    </>
  );
};

export default VerifyPassword;

const SuccessfulComponent = ({
  onSubmit,
  navigateHandler,
  showPassword,
  onClick,
  password,
  confirmPassword,
  handlePassword,
  msgErr,
  loader,
}) => (
  <div className="input-area">
    {/* INPUT */}
    <div className="mb-5">
      <InputCom
        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
        value={password}
        inputHandler={handlePassword}
        placeholder="● ● ● ● ● ●"
        label="Password"
        name="password"
        type={showPassword ? "text" : "password"}
        onClick={onClick}
        passIcon={showPassword ? "show-password" : "hide-password"}
      />
    </div>
    <div className="mb-5">
      <InputCom
        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
        value={confirmPassword}
        inputHandler={handlePassword}
        placeholder="● ● ● ● ● ●"
        label="Confirm Password"
        name="confirm_password"
        type="password"
      />
    </div>
    {msgErr && (
      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
        {msgErr}
      </div>
    )}
    <div className="signin-area mb-3.5">
      <button
        onClick={onSubmit}
        type="button"
        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
      >
        {loader ? (
          <div className="signup btn-loader"></div>
        ) : (
          <span>Continue</span>
        )}
      </button>
    </div>
    <div className="signin-area mb-3.5">
      <button
        onClick={navigateHandler}
        type="button"
        className={`rounded-[0.475rem] mb-6 text-[15px] font-semibold text-[#009ef7] hover:text-white flex justify-center bg-[#f1faff] hover:bg-[#009ef7] transition-all duration-300 items-center py-[0.8875rem] px-[1.81rem] btn-login`}
      >
        <span>Return Home</span>
      </button>
    </div>
  </div>
);