import { useGoogleLogin } from "@react-oauth/google";
import Link from "next/link";
import { useContext, useEffect, useState } from "react";
import { FieldValues, SubmitHandler, useForm } from "react-hook-form";
import { Triangle } from "react-loader-spinner";
import { TokenResponse } from "../..";
import { AuthContextType } from "../../";
import { AuthContext } from "../../contexts/auth";
import useShowToast from "../../hooks/useShowToast";
import { AuthMethod, ExtraLoginValus } from "../../types/auth";
import {
  useCandidateRegister,
  useCompanyRegister,
  useLogin,
} from "../../utils/hooks";
import DefaulHeader2 from "../header/DefaulHeader2";
import MobileMenu from "../header/MobileMenu";
import { useRouter } from "next/router";
import UseFullScreenLoader from "../../hooks/UseFullScreenLoader";
import PasswordInput from "./PasswordInput";

const LoginForm = ({ referrer }: { referrer: string }) => {
  const router = useRouter();
  const { setTokenCookie, setProfileType } = useContext(
    AuthContext
  ) as AuthContextType;
  const [getKeepSignedIn, setKeepSignedIn] = useState<boolean>(false);
  const [getExtraValues, setExtraValues] = useState<ExtraLoginValus>({
    isCandidate: true,
    isLoading: false,
  });
  const [getMessage, setMessage] = useState<string>();
  const [getGoogleLoading, setGoogleLoading] = useState<boolean>(false);
  const [googleLoginText, setGoogleLoginText] = useState<string>("");
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
    setValue,
  } = useForm();

  useEffect(() => {
    reset();
  }, [getExtraValues.isCandidate]);

  const handleGoogleLogin = useGoogleLogin({
    onSuccess: async (tokenResponse) => {
      setGoogleLoading(true);
      // Fetch user info or proceed with your custom auth process
      try {
        setGoogleLoginText("Please wait...");
        // Fetch user info from Google
        const userInfoResponse = await fetch(
          "https://www.googleapis.com/oauth2/v3/userinfo",
          {
            headers: {
              Authorization: `Bearer ${tokenResponse.access_token}`,
            },
          }
        );
        const userInfo = await userInfoResponse.json();
        //register
        setGoogleLoginText("Checking user...");
        getExtraValues.isCandidate
          ? await useCandidateRegister({
            candidateFirstName: userInfo.given_name || "",
            candidateLastName: userInfo.family_name || "",
            candidateEmail: userInfo.email,
            candidatePassword: userInfo.sub + userInfo.email,
            loginMethod: AuthMethod.Google,
          })
          : await useCompanyRegister({
            companyEmail: userInfo.email,
            companyPassword: userInfo.sub + userInfo.email,
            companyName: userInfo.given_name || "",
            companyPhone: "1234567890",
            loginMethod: AuthMethod.Google,
          });
        //then login
        setGoogleLoginText("Logging in with Google");
        await handleLoginSubmit({
          email: userInfo.email,
          password: userInfo.sub + userInfo.email,
          isCandidate: getExtraValues.isCandidate,
          loginMethod: "google",
        });
      } catch (error) {
        console.error("Failed to fetch Google user info:", error);
      }
      setGoogleLoading(false);
    },
    onError: () => {
      console.log("Google Sign In Failed");
    },
  });

  const handleLoginSubmit: SubmitHandler<FieldValues> = async (
    formData: any
  ) => {
    console.log("formData", formData);
    try {
      setExtraValues({ ...getExtraValues, isLoading: true });
      const {
        status,
        jwtToken,
        refreshToken,
        exception,
        message,
        name,
        profileType,
      } = (await useLogin({
        ...formData,
        isCandidate: getExtraValues.isCandidate,
      })) as TokenResponse;
      if (jwtToken && refreshToken) {
        await setTokenCookie({
          jwtToken,
          refreshToken,
          name,
          profileType,
          referrer,
        });
      }
      if (status == 200) {
        useShowToast({ message });
      } else if (status == 401) {
        setMessage(message);
      }
    } catch (error) {
      console.error("Login failed:", error);
    } finally {
      setExtraValues({
        isCandidate: true,
        isLoading: false,
      });
    }
  };
  return (
    <>
      {/* <ToastContainer /> */}
      <DefaulHeader2 />
      {/* <!--End Main Header -->  */}
      {getGoogleLoading && (
        <UseFullScreenLoader
          text={googleLoginText || "Logging you in, please wait..."}
        />
      )}

      <MobileMenu />
      {/* End MobileMenu */}

      <div className="login-section">
        <div
          className="image-layer"
          style={{ backgroundImage: "url(/images/background/12.jpg)" }}
        ></div>
        <div className="outer-box">
          {/* <!-- Login Form --> */}
          <div className="login-form default-form">
            <div className="form-inner">
              <h3>Login to your Jobrator Account</h3>

              <form onSubmit={handleSubmit(handleLoginSubmit)}>
                <div className="row">
                  <div className="employer_or_candidate d-flex justify-content-around gap-5">
                    <button
                      className={`
                            theme-btn 
                            btn-style-four 
                            w-100
                            ${getExtraValues.isCandidate && "bg-34a853"}
                        `}
                      type="button"
                      onClick={() => {
                        setExtraValues({
                          ...getExtraValues,
                          isCandidate: true,
                        });
                      }}
                    >
                      Candidate
                    </button>
                    <button
                      className={`
                            theme-btn 
                            btn-style-four 
                            w-100
                            ${!getExtraValues.isCandidate && "bg-34a853"}
                        `}
                      type="button"
                      onClick={() => {
                        setExtraValues({
                          ...getExtraValues,
                          isCandidate: false,
                        });
                      }}
                    >
                      Employer
                    </button>
                  </div>
                </div>
                <div className="row">
                  <div className="login_with_google">
                    <button
                      type="button"
                      onClick={() => handleGoogleLogin()}
                      className="theme-btn btn-style-three w-100 d-flex gap-2 mt-3"
                    >
                      <i className="fab fa-google"></i>
                      <span>Sign In with Google</span>
                    </button>
                    <div className="d-flex justify-content-center pt-2">
                      <span>Or</span>
                    </div>
                  </div>
                </div>
                <div className="row">
                  <div className="col-md-12 mt-2">
                    <div className="form-group">
                      <label>Email</label>
                      <input
                        type="text"
                        placeholder="Email"
                        autoComplete="email"
                        onInput={(e) =>
                          setValue("email", e.currentTarget.value)
                        }
                        {...register("email", {
                          required: true,
                          pattern: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
                          onChange: () => setMessage(""),
                        })}
                      />
                      {/* displaying validation error messages for email */}
                      {errors.email && errors.email.type === "required" && (
                        <p className="text-danger">Email is required.</p>
                      )}
                      {errors.email && errors.email.type === "pattern" && (
                        <p className="text-danger">Email is not valid.</p>
                      )}
                    </div>
                  </div>
                  <div className="col-md-12 mt-2">
                    <div className="form-group">
                      <label>Password</label>
                      {/* <div className="password-wrapper">
                        <input
                          type="password"
                          placeholder="Password"
                          autoComplete="password"
                          onInput={(e) =>
                            setValue("password", e.currentTarget.value)
                          } // Update form value on input
                          {...register("password", {
                            required: true,
                            onChange: () => setMessage(""),
                          })}
                        />
                        <span className="show-password">
                          <i className="fas fa-eye-slash" onClick={togglePassword}></i>
                        </span>
                      </div> */}
                      <PasswordInput
                        name="password"
                        placeholder="Password"
                        autoComplete="password"
                        setValue={setValue}
                        register={register}
                        settings={{
                          required: true,
                          onChange: () => setMessage(""),
                        }}
                      />

                      {/* displaying validation error messages for password */}

                      {getMessage && (
                        <p className="text-danger">{getMessage}</p>
                      )}

                      {errors.password &&
                        errors.password.type === "required" && (
                          <p className="text-danger">Password is required.</p>
                        )}
                    </div>
                  </div>
                  <div className="col-md-12 ">
                    <div className="form-group d-flex justify-content-end py-1">
                      <Link href="/forget-password" className="text-black">
                        Forget Password?
                      </Link>
                    </div>
                  </div>

                  <div className="ready_to_start py-2">
                    <div className="checkbox-wrapper ">
                      <input
                        id="checkbox-ready"
                        name="checkbox-ready"
                        type="checkbox"
                        onChange={() => {
                          setKeepSignedIn(!getKeepSignedIn);
                        }}
                      />
                      <label className="terms-label" htmlFor="checkbox-ready">
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 200 200"
                          className="checkbox-svg"
                        >
                          <mask fill="white" id="path-1-inside-1_476_5-37">
                            <rect height="200" width="200"></rect>
                          </mask>
                          <rect
                            mask="url(#path-1-inside-1_476_5-37)"
                            stroke-width="40"
                            className="checkbox-box"
                            height="200"
                            width="200"
                          ></rect>
                          <path
                            stroke-width="15"
                            d="M52 111.018L76.9867 136L149 64"
                            className="checkbox-tick"
                          ></path>
                        </svg>
                        <span className="label-text">Keep me signed in</span>
                      </label>
                    </div>
                  </div>

                  <div className="col-md-12 mt-4">
                    <div className="form-group d-flex justify-content-end align-items-center">
                      <button
                        className="theme-btn btn-style-one d-flex gap-3 mb-0"
                        type="submit"
                      >
                        {getExtraValues.isLoading ? "Logging in..." : "Log In"}
                        {getExtraValues.isLoading && (
                          <Triangle
                            visible={true}
                            height="30"
                            width="30"
                            color="#fff"
                            ariaLabel="triangle-loading"
                            wrapperStyle={{}}
                            wrapperClass=""
                          />
                        )}
                      </button>
                    </div>
                  </div>
                </div>
                {/* login */}
              </form>
              <div className="bottom-box">
                <div className="">
                  Don't have an account?{" "}
                  <Link
                    href="/register"
                    className="call-modal login text-decoration-underline fw-bold"
                  >
                    Register
                  </Link>
                </div>
              </div>
              {/* End bottom-box LoginWithSocial */}
            </div>
          </div>
          {/* <!--End Login Form --> */}
        </div>
      </div>
      {/* <!-- End Info Section --> */}
    </>
  );
};

export default LoginForm;