import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import InputVerification from "@/components/Forms/InputVerification";
import Iframe from "@/components/Iframe";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
import { confimacaoTermos } from "@/requests/CRUD/Usuario/editarUsuario";
import {
  criarNovaSenha,
  enviarEmail,
  login,
  verificaCodigoEmail,
} from "@/requests/common/Login/login";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import { GetForm } from "@/utils";
import { encryptData } from "@/utils/cryptoUtils";
import Image from "next/image";
import router from "next/router";
import { useEffect, useState } from "react";
import { FieldValues } from "react-hook-form";
import { BiSolidLock } from "react-icons/bi";
import * as yup from "yup";
import EmailImage from "../public/images/geral/sendemail.png";
import LogoLinksun from "../public/images/logo/logo-linksun-4.png";
import EsqueceuSenha from "./mobile/esqueceuSenha";
//
function SignIn() {
  const [firstLogin, setFirstLogin] = useState(false);
  const [timer, setTimer] = useState(30);
  const [viewPassRecovery, setviewPassRecovery] = useState(false);
  const { authLogin, valuesSession, validateSession, localToken } = useAuth();
  const [isLoading, setIsLoading] = useState(false);
  const [siglaCliente, setSiglaCliente] = useState("");
  const [inserirCodigo, setInserirCodigo] = useState(false);
  const [guardarEmail, setGuardarEmail] = useState<any>([]);
  const [redefinePass, setRedefinePass] = useState(false);
  const [recoverYupSchema, setRecoverYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [passwordYupScheme, setPasswordYupScheme] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));
  const [loginYupSchema, setLoginYupSchema] = useState<
    yup.ObjectSchema<{}, yup.AnyObject, {}, "">
  >(yup.object().shape({}));

  const { handleSubmit: loginHandleSubmit, ...loginForm } = GetForm(
    loginYupSchema,
    setLoginYupSchema
  );

  const { handleSubmit: recoverHandleSubmit, ...recoverForm } = GetForm(
    recoverYupSchema,
    setRecoverYupSchema
  );

  const { handleSubmit: passwordHandleSubmit, ...validatePass } = GetForm(
    passwordYupScheme,
    setPasswordYupScheme
  );
  const { isMobile, isSmallDesktop } = useScreenContext();

  //Validação De Sessão caso exista redireciona para a homepage
  useEffect(() => {
    const esst = valuesSession();
    if (validateSession() && localToken) {
      const lastPathname = localStorage.getItem("@pathname");
      if (lastPathname) {
        router.push(`./${lastPathname}`);
      }
      // listarUsuarioPeloId(localToken.id_usuario).then((response) => {
      //   router.push(`./${response.pathname_usuario}`);
      // });
      // if (localToken.funil_favorito_usuario && localToken.funil_favorito_usuario != "0") {
      //   router.push(`./CXESCRM002?funil=${localToken.funil_favorito_usuario}`);
      // } else {
      //   router.push("./CXESCRM004");
      // }
    }
    if (validateSession() && esst.token) {
      const lastPathname = localStorage.getItem("@pathname");
      if (lastPathname) {
        router.push(`./${lastPathname}`);
      }
      // if (esst.token.funil_favorito_usuario && esst.token.funil_favorito_usuario != "0") {
      //   router.push(`./CXESCRM002?funil=${esst.token.funil_favorito_usuario}`);
      // } else {
      //   router.push("./CXESCRM004");
      // }
    }
  }, []);

  const handleLogin = async (data: FieldValues) => {
    // setIsLoading(true);
    setSiglaCliente(data["sigla_cliente_linksun"]);
    data["url"] = window.location.hostname;
    login(data)
      .then((response) => {
        const token: any = encryptData(JSON.stringify(response));
        authLogin(token);
        if (response["primeiro_login"] == 1) {
          (document.getElementById("openModal") as HTMLElement).click();
          setFirstLogin(true);
          setGuardarEmail(response["email_usuario"]);
        } else if (
          response["funil_favorito_usuario"] &&
          response["funil_favorito_usuario"] != "0"
        ) {
          router
            .push(`./CXESCRM002?funil=${response["funil_favorito_usuario"]}`)
            .then(() => window.location.reload());
        } else {
          router.push("./CXESCRM004").then(() => window.location.reload());
        }
      })
      .finally(() => setIsLoading(false));
  };

  const handleChangePass = (data: FieldValues) => {
    setSiglaCliente(data["sigla"]);

    setIsLoading(true);
    setGuardarEmail(data["email_usuario"]);
    enviarEmail(data)
      .then((result) => {
        setInserirCodigo(true);
      })
      .finally(() => {
        setIsLoading(false);
        setTimer(30);
      });
  };

  const handleChangeUserPass = (data: FieldValues) => {
    data["email"] = guardarEmail;
    data["sigla"] = siglaCliente;
    setIsLoading(true);
    criarNovaSenha(data)
      .then(() => {
        (document.getElementById("closeID") as HTMLElement).click();
      })
      .finally(() => setIsLoading(false));
  };

  const handleValidade = (data: FieldValues) => {
    const codigoEmailValues = {
      codigo_email: data
        ?.filter((value: any) => typeof value === "string")
        .join(""),
      sigla: siglaCliente,
    };
    setIsLoading(true);
    verificaCodigoEmail(codigoEmailValues)
      .then((result) => {
        setRedefinePass(true);
      })
      .finally(() => {
        setIsLoading(false);
      });
  };
  const handleResendPass = () => {
    enviarEmail({ email_usuario: guardarEmail });
  };

  const [termsChecked, setTermsChecked] = useState(false);

  const handleCheckboxChange = () => {
    setTermsChecked(!termsChecked);
  };

  const handleProceedClick = () => {
    confimacaoTermos({ email_usuario: guardarEmail });
    setFirstLogin(false);
    setRedefinePass(true);
  };
  const changeToPassRecovery = () => {
    setviewPassRecovery(true);
  };
  useEffect(() => {
    let interval: any;

    if (timer > 0) {
      interval = setInterval(() => {
        setTimer((prevTimer) => prevTimer - 1);
      }, 1000);
    }

    return () => clearInterval(interval);
  }, [timer]);

  return (
    <div className="flex items-center justify-center bg-no-repeat backgroundLogin rounded-md bg-cover h-screen overflow-hidden">
      <div className="rounded-3xl lg:m-0 m-1 lg:border lg:w-[600px] w-full h-auto  lg:border-stroke lg:bg-white lg:shadow-default dark:border-strokedark dark:bg-boxdark">
        {!viewPassRecovery ? (
          <div className="flex  items-center  justify-between">
            <div className="w-full justify-center h-[33rem] ">
              <div className="w-full p-4 sm:p-12.5 mt-5 relative xl:p-17.5 justify-center">
                <div className="lg:absolute relative lg:mt-5   w-full lg:w-3/4 -top-7">
                  <div className="justify-center  flex top-0 relative w-full">
                    <Image
                      className="md:w-50 w-55 lg:w-46"
                      src={LogoLinksun}
                      alt="Logo"
                    />
                  </div>
                </div>
                <span className=" block max-sm:hidden font-semibold text-center text-2xl  dark:text-white text-black">
                  Bem vindo
                </span>
                <span className="mb-5 block max-sm:hidden text-center text-sm dark:text-white text-black">
                  Digite seu usuário e senha para acessar o sistema.
                </span>

                <form
                  className="max-sm:mt-15 "
                  onSubmit={loginHandleSubmit(handleLogin)}
                >
                  <div className="max-sm:mb-8 mb-5">
                    <Input
                      formulario={loginForm}
                      name="sigla_cliente_linksun"
                      label={isMobile || isSmallDesktop ? "" : "Sigla"}
                      required
                      inputClassName="max-sm:!bg-white max-sm:!border-none"
                      placeholder={
                        isMobile || isSmallDesktop ? "Digite a sigla" : ""
                      }
                      error="Preencha a Sigla!"
                    />
                  </div>
                  <div className="max-sm:mb-8 mb-4">
                    <div className="relative">
                      <Input
                        formulario={loginForm}
                        name="login_usuario"
                        label={isMobile || isSmallDesktop ? "" : "Usuário"}
                        autoComplete="username"
                        required
                        inputClassName="max-sm:!bg-white max-sm:!border-none"
                        placeholder={
                          isMobile || isSmallDesktop ? "Digite o usuário" : ""
                        }
                        error="Preencha o Login"
                      />
                    </div>
                  </div>

                  <div className="lg:mb-6">
                    <Input
                      formulario={loginForm}
                      name="senha_usuario"
                      label={isMobile || isSmallDesktop ? "" : "Senha"}
                      type="password"
                      autoComplete="current-password"
                      required
                      inputClassName="max-sm:!bg-white max-sm:!border-none"
                      placeholder={
                        isMobile || isSmallDesktop ? "Digite a senha" : ""
                      }
                      error="Preencha a senha"
                    />
                  </div>
                  <span
                    onClick={changeToPassRecovery}
                    className="max-[770px]:block hidden font-semibold py-5 justify-self-end text-xs"
                  >
                    Esqueceu a senha?
                  </span>
                  <Button
                    loading={isLoading}
                    className="w-full max-sm:h-[55px] max-[770px]:h-[50px] max-sm:rounded-lg max-sm:mt-14 max-[770px]:mt-14 max-sm:text-sm bg-primary"
                  >
                    Entrar
                  </Button>
                </form>
                {!isSmallDesktop && !isMobile && (
                  <Dialog>
                    <DialogTrigger asChild>
                      <div className="flex justify-center max-sm:mt-6">
                        <button id="openModal" className="pt-3">
                          <a
                            href="#"
                            className="hover:underline max-sm:font-semibold text-sm "
                            onClick={() => {
                              setInserirCodigo(false);
                              setRedefinePass(false);
                              setFirstLogin(false);
                            }}
                          >
                            Esqueceu a senha?
                          </a>
                        </button>
                      </div>
                    </DialogTrigger>
                    <DialogContent
                      className={`w-full dark:bg-black ${
                        firstLogin
                          ? "sm:max-w-[900px] md:max-w-[1000px] max-h-[85vh] overflow-auto"
                          : "md:max-w-[425px]"
                      }`}
                      onInteractOutside={(e) => e.preventDefault()}
                    >
                      {!inserirCodigo && !firstLogin && !redefinePass && (
                        <>
                          <div className="flex flex-col justify-center w-full items-center gap-3">
                            <div className=" bg-primary w-30 h-30 flex flex-col items-center justify-center text-white rounded-full ">
                              <BiSolidLock size={75} />
                            </div>
                            <h1 className="text-2xl text-black-2 pt-3 dark:text-white">
                              <strong>Esqueceu Sua Senha?</strong>
                            </h1>
                            <h1 className="text-black-2  dark:text-white">
                              <span>
                                Insira um Email valido para a redefinição de
                                senha
                              </span>
                            </h1>
                          </div>

                          <form
                            onSubmit={recoverHandleSubmit(handleChangePass)}
                          >
                            <Input
                              name="sigla"
                              label="Sigla"
                              formulario={recoverForm}
                              required
                              error="Preencha a Sigla"
                            />
                            <Input
                              name="email_usuario"
                              label="email"
                              formulario={recoverForm}
                              type="email"
                              required
                              error="Preencha o Email"
                            />
                            <div className="flex items-center justify-center pt-10 ">
                              <Button
                                className="w-full bg-primary"
                                loading={isLoading}
                              >
                                Enviar Email
                              </Button>
                            </div>
                          </form>
                        </>
                      )}
                      {!redefinePass && inserirCodigo && (
                        <>
                          <div className="">
                            <Image alt="x" src={EmailImage} />
                            <div className=" text-black-2 flex flex-col justify-center items-center dark:text-white gap-3">
                              <h1 className="text-2xl pt-3">
                                <strong>Código De Segurança</strong>
                              </h1>
                              <span>
                                {" "}
                                Por Favor preencha o Código enviado ao
                              </span>
                              <span className="italic">
                                <strong> E-mail: {guardarEmail} </strong>
                              </span>
                            </div>
                          </div>

                          <InputVerification handleValidade={handleValidade}>
                            {" "}
                            <div className="flex justify-between mb-5 mt-2">
                              <button type="button" disabled={timer > 0}>
                                <span
                                  className="text-sm  dark:text-white"
                                  onClick={handleResendPass}
                                >
                                  Reenviar Código {timer > 0 && `(${timer}s)`}
                                </span>
                              </button>
                              <button type="button">
                                <span
                                  className="text-sm"
                                  onClick={() => {
                                    setInserirCodigo(!inserirCodigo);
                                  }}
                                >
                                  Trocar Email
                                </span>
                              </button>
                            </div>
                            <div className="flex items-center justify-center pt-6">
                              <Button
                                className="w-full bg-primary"
                                loading={isLoading}
                              >
                                Confirmar
                              </Button>
                            </div>
                          </InputVerification>
                        </>
                      )}
                      {firstLogin && (
                        <div className="flex flex-col text-center">
                          <h1 className="text-2xl text-black-2 pt-3 dark:text-white mb-5">
                            Termos e Condições
                          </h1>
                          <Iframe />
                          <label className="flex justify-center flex-col mt-5 gap-2 text-black-2">
                            Eu li e aceito os Termos e Condições
                            <input
                              type="checkbox"
                              checked={termsChecked}
                              onChange={handleCheckboxChange}
                            />
                          </label>
                          <br />
                          <div className="w-full flex justify-center">
                            <Button
                              className="bg-primary text-sm"
                              onClick={handleProceedClick}
                              disabled={termsChecked ? false : true}
                            >
                              Prosseguir
                            </Button>
                          </div>
                        </div>
                      )}
                      {redefinePass && !firstLogin && (
                        <>
                          <div className="flex flex-col justify-center w-full items-center">
                            <h1 className="text-2xl text-black-2 pt-3  dark:text-white">
                              <strong>Digite Sua Nova Senha!</strong>
                            </h1>
                            <h1 className="text-black-2  dark:text-white">
                              <span>Senha para o email: {guardarEmail}</span>
                            </h1>
                            <div className=" text-black-2 dark:text-white text-center bg-[#3b38f6] font-semibold border border-primary rounded-md bg-opacity-20 text-[15px] p-2 mt-6">
                              Deve conter pelo menos um caractere especial, uma
                              letra maiúscula, uma letra minúscula, um número e
                              8 digitos
                            </div>
                          </div>
                          <form
                            className="flex flex-col gap-4"
                            onSubmit={passwordHandleSubmit(
                              handleChangeUserPass
                            )}
                          >
                            <Input
                              name="senha_usuario"
                              label="Senha"
                              type="password"
                              placeholder="Digite sua senha"
                              isPassword
                              formulario={validatePass}
                              required
                              error="Digite sua senha!"
                            />
                            <Input
                              name="senha_usuario_confirmação"
                              label="Confirmar Senha"
                              placeholder="Digite sua senha"
                              equals={"senha_usuario"}
                              formulario={validatePass}
                              type="password"
                              isPassword
                              required
                              error="Digite sua senha!"
                            />
                            <div className="flex items-center justify-center pt-3 mt-3">
                              <Button
                                className="w-full bg-primary"
                                loading={isLoading}
                              >
                                Confirmar
                              </Button>
                            </div>
                          </form>
                        </>
                      )}
                    </DialogContent>
                  </Dialog>
                )}
              </div>
            </div>
          </div>
        ) : (
          <EsqueceuSenha
            form={recoverForm}
            handleSubmit={recoverHandleSubmit}
            submitFunction={handleChangePass}
            isLoading={isLoading}
            changeView={setviewPassRecovery}
          />
        )}
      </div>
    </div>
  );
}

export default SignIn;