"use client";
import { Input } from "@heroui/input";
import React, { useState } from "react";
import { EyeFilledIcon, EyeSlashFilledIcon } from "../icons";
import { Button } from "@heroui/button";
import Link from "next/link";
import Cookies from "js-cookie";
import { close, error, loading } from "@/config/swal";
import {
  checkUsernames,
  getProfile,
  otpRequest,
  otpValidation,
  postSignIn,
} from "@/service/master-user";
import { useRouter } from "next/navigation";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";
import { saveActivity } from "@/service/activity-log";
import { Image } from "@heroui/react";
import { InputOtp } from "@heroui/input-otp";
import PasswordChecklist from "react-password-checklist";

export default function Login() {
  const router = useRouter();
  const [isVisible, setIsVisible] = useState(false);
  const [isVisibleSetup, setIsVisibleSetup] = useState([false, false]);
  const [emailSetup, setEmailSetup] = useState("");
  const [passwordSetup, setPasswordSetup] = useState("");
  const [confPasswordSetup, setConfPasswordSetup] = useState("");

  const toggleVisibility = () => setIsVisible(!isVisible);
  const [needOtp, setNeedOtp] = useState(false);
  const [isFirstLogin, setFirstLogin] = useState(false);
  const [otpValue, setOtpValue] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [accessData, setAccessData] = useState<any>();
  const [profile, setProfile] = useState<any>();
  const [isValidPassword, setIsValidPassword] = useState(false);

  const onSubmit = async () => {
    const data = {
      username: username,
      password: password,
    };

    if (!username || !password) {
      error("Username & Password Wajib Diisi !");
    } else {
      loading();
      const response = await postSignIn(data);
      if (response?.error) {
        error("Username / Password Tidak Sesuai");
      } else {
        setAccessData(response?.data?.data);
        const profile = await getProfile(response?.data?.data?.access_token);
        console.log("PROFILE : ", profile?.data?.data);
        // setEmailSetup(profile?.data?.data?.email);
        // setProfile(profile?.data?.data);
        // setFirstLogin(true);

        // if (profile?.data?.data?.isFirstLogin) {
        //   setFirstLogin(true);
        // } else {
        //   const res = await otpRequest(
        //     profile?.data?.data?.email,
        //     profile?.data?.data?.fullname
        //   );
        //   setNeedOtp(true);
        // }

        const dateTime: any = new Date();

        const newTime: any = dateTime.getTime() + 10 * 60 * 1000;

        Cookies.set("access_token", response?.data?.data?.access_token, {
          expires: 1,
        });
        Cookies.set("refresh_token", response?.data?.data?.refresh_token, {
          expires: 1,
        });
        Cookies.set("time_refresh", newTime, {
          expires: 1,
        });
        Cookies.set("is_first_login", "true", {
          secure: true,
          sameSite: "strict",
        });
        const resActivity = await saveActivity(
          {
            activityTypeId: 1,
            url: "https://kontenhumas.com/auth",
            userId: profile?.data?.data?.id,
          },
          accessData?.id_token
        );
        Cookies.set("profile_picture", profile?.data?.data?.profilePictureUrl, {
          expires: 1,
        });
        Cookies.set("uie", profile?.data?.data?.id, {
          expires: 1,
        });
        Cookies.set("ufne", profile?.data?.data?.fullname, {
          expires: 1,
        });
        Cookies.set("ulie", profile?.data?.data?.userLevelGroup, {
          expires: 1,
        });
        Cookies.set("username", profile?.data?.data?.username, {
          expires: 1,
        });
        Cookies.set("urie", profile?.data?.data?.roleId, {
          expires: 1,
        });
        Cookies.set("roleName", profile?.data?.data?.roleName, {
          expires: 1,
        });
        Cookies.set("masterPoldaId", profile?.data?.data?.masterPoldaId, {
          expires: 1,
        });
        Cookies.set("ulne", profile?.data?.data?.userLevelId, {
          expires: 1,
        });
        Cookies.set("urce", profile?.data?.data?.roleCode, {
          expires: 1,
        });
        Cookies.set("email", profile?.data?.data?.email, {
          expires: 1,
        });
        router.push("/admin/dashboard");
        Cookies.set("status", "login", {
          expires: 1,
        });

        close();
      }
    }
    // }
  };

  const setValUsername = (e: any) => {
    const uname = e.replaceAll(/[^\w.-]/g, "");
    setUsername(uname.toLowerCase());
  };

  const [isResetPassword, setIsResetPassword] = useState(false);
  const [checkUsernameValue, setCheckUsernameValue] = useState("");
  const MySwal = withReactContent(Swal);

  const checkUsername = async () => {
    const res = await checkUsernames(checkUsernameValue);
    if (res?.error) {
      error("Username tidak ditemukan");
      return false;
    }
    MySwal.fire({
      title: "",
      text: "",
      html: (
        <>
          <p>
            Kami telah mengirimkan tautan untuk mengatur ulang kata sandi ke
            email Anda
          </p>
          <p className="text-xs">
            Apakah Anda sudah menerima emailnya? Jika belum, periksa folder spam
            Anda
          </p>
        </>
      ),
      icon: "info",
      cancelButtonColor: "#d33",
      confirmButtonColor: "#3085d6",
      confirmButtonText: "Oke",
    }).then((result) => {
      if (result.isConfirmed) {
      }
    });
  };

  const submitOtp = async () => {
    loading();
    const validation = await otpValidation(profile?.email, otpValue);
    if (validation?.error) {
      error("OTP Tidak Sesuai");
      return false;
    }
    const dateTime: any = new Date();

    const newTime: any = dateTime.getTime() + 10 * 60 * 1000;

    Cookies.set("access_token", accessData?.access_token, {
      expires: 1,
    });
    Cookies.set("refresh_token", accessData?.refresh_token, {
      expires: 1,
    });
    Cookies.set("time_refresh", newTime, {
      expires: 1,
    });
    Cookies.set("is_first_login", "true", {
      secure: true,
      sameSite: "strict",
    });
    const resActivity = await saveActivity(
      {
        activityTypeId: 1,
        url: "https://kontenhumas.com/auth",
        userId: profile?.data?.data?.id,
      },
      accessData?.id_token
    );
    Cookies.set("profile_picture", profile?.profilePictureUrl, {
      expires: 1,
    });
    Cookies.set("uie", profile?.id, {
      expires: 1,
    });
    Cookies.set("ufne", profile?.fullname, {
      expires: 1,
    });
    Cookies.set("ulie", profile?.userLevelGroup, {
      expires: 1,
    });
    Cookies.set("username", profile?.username, {
      expires: 1,
    });
    Cookies.set("urie", profile?.roleId, {
      expires: 1,
    });
    Cookies.set("roleName", profile?.roleName, {
      expires: 1,
    });
    Cookies.set("masterPoldaId", profile?.masterPoldaId, {
      expires: 1,
    });
    Cookies.set("ulne", profile?.userLevelId, {
      expires: 1,
    });
    Cookies.set("urce", profile?.roleCode, {
      expires: 1,
    });
    Cookies.set("email", profile?.email, {
      expires: 1,
    });
    router.push("/admin/dashboard");
    Cookies.set("status", "login", {
      expires: 1,
    });
    close();
  };

  const generatePassword = () => {
    const length = Math.floor(Math.random() * 9) + 8;

    const upperCaseChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    const lowerCaseChars = "abcdefghijklmnopqrstuvwxyz";
    const numberChars = "0123456789";
    const specialChars = "!@#$%^&*";
    const allChars =
      upperCaseChars + lowerCaseChars + numberChars + specialChars;

    let generatedPassword = "";

    generatedPassword +=
      upperCaseChars[Math.floor(Math.random() * upperCaseChars.length)];
    generatedPassword +=
      specialChars[Math.floor(Math.random() * specialChars.length)];
    generatedPassword +=
      numberChars[Math.floor(Math.random() * numberChars.length)];
    generatedPassword +=
      lowerCaseChars[Math.floor(Math.random() * lowerCaseChars.length)];

    for (let i = generatedPassword.length; i < length; i++) {
      generatedPassword +=
        allChars[Math.floor(Math.random() * allChars.length)];
    }

    generatedPassword = generatedPassword
      .split("")
      .sort(() => 0.5 - Math.random())
      .join("");

    setPasswordSetup(generatedPassword);
  };

  return (
    <div className="flex flex-row h-full">
      <div
        // style={{
        //   backgroundImage: "url(headerbanner1.png)",
        //   backgroundRepeat: "no-repeat",
        //   backgroundSize: "cover",
        //   backgroundPosition: "left center",
        // }}
        className="h-screen hidden md:block md:w-3/5"
      >
        <Image
          src="/headerbanner1.png"
          alt="login-image"
          className="w-full h-screen rounded-none object-cover"
        />
        <Link href="/" className="absolute left-5 top-5">
          <Image
            width={480}
            height={480}
            alt="icon"
            src="/divhumas.png"
            className="w-[240px] !h-[240px]"
          />
        </Link>
      </div>
      {isFirstLogin ? (
        <div className="bg-[#1F1A17] w-full md:w-2/5 p-8  md:px-24 justify-center flex flex-col">
          <p className="text-[72px] text-[#DD8306] font-semibold mb-10">
            Setting Account
          </p>
          <p className="my-2 text-white">Email</p>
          <Input
            isRequired
            type="email"
            label=""
            placeholder=""
            className="my-2"
            classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
            value={emailSetup}
            onValueChange={setEmailSetup}
          />
          <p className="my-2 text-white">Password Baru</p>
          <Input
            isRequired
            className="my-2"
            classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
            endContent={
              <button
                className="focus:outline-none"
                type="button"
                onClick={() =>
                  setIsVisibleSetup([!isVisibleSetup[0], isVisibleSetup[1]])
                }
              >
                {isVisibleSetup[0] ? (
                  <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                ) : (
                  <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                )}
              </button>
            }
            type={isVisibleSetup[0] ? "text" : "password"}
            label=""
            placeholder=""
            value={passwordSetup}
            onValueChange={setPasswordSetup}
          />
          <p className="my-2 text-white">Konfirmasi Password Baru</p>
          <Input
            isRequired
            className="my-2"
            classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
            endContent={
              <button
                className="focus:outline-none"
                type="button"
                onClick={() =>
                  setIsVisibleSetup([isVisibleSetup[0], !isVisibleSetup[1]])
                }
              >
                {isVisibleSetup[1] ? (
                  <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                ) : (
                  <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                )}
              </button>
            }
            type={isVisibleSetup[1] ? "text" : "password"}
            label=""
            placeholder=""
            value={confPasswordSetup}
            onValueChange={setConfPasswordSetup}
          />
          <a
            className="cursor-pointer text-[#DD8306]"
            onClick={generatePassword}
          >
            Generate Password
          </a>
          <PasswordChecklist
            rules={["minLength", "specialChar", "number", "capital", "match"]}
            minLength={8}
            value={passwordSetup}
            valueAgain={confPasswordSetup}
            onChange={(isValid) => {
              setIsValidPassword(isValid);
            }}
            className="text-white text-sm my-3"
            messages={{
              minLength: "Kata sandi harus lebih dari 8 karakter",
              specialChar: "Kata sandi harus mengandung karakter khusus",
              number: "Kata sandi harus mengandung angka",
              capital: "Kata sandi harus mengandung huruf kapital",
              match: "Kata sandi cocok",
            }}
          />
          <Button
            size="lg"
            className="w-fit bg-[#DD8306] rounded-md font-semibold my-3 text-white"
            onPress={submitOtp}
          >
            Submit
          </Button>
        </div>
      ) : needOtp ? (
        <div className="bg-[#1F1A17] w-full md:w-2/5 p-8  md:px-24 justify-center flex flex-col">
          <p className="text-[72px] text-[#DD8306] font-semibold mb-10">
            Login
          </p>
          <p className="my-2 text-white">OTP</p>
          <InputOtp length={6} value={otpValue} onValueChange={setOtpValue} />

          <Button
            size="lg"
            className="w-fit bg-[#DD8306] rounded-md font-semibold my-3 text-white"
            onPress={submitOtp}
          >
            Submit
          </Button>
          <div className="flex justify-between md:justify-end my-2 text-white">
            <Link
              href={`/`}
              className="text-[#DD8306] cursor-pointer md:hidden"
            >
              Beranda
            </Link>
          </div>
        </div>
      ) : isResetPassword ? (
        <div className="bg-[#1F1A17] w-full md:w-2/5 p-8  md:px-24 justify-center flex flex-col">
          <p className="text-[72px] text-[#DD8306] font-semibold mb-10">
            Reset Password
          </p>
          <p className="my-2 text-white">Username</p>
          <Input
            isRequired
            type="text"
            label=""
            placeholder=""
            className="my-2"
            classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
            value={checkUsernameValue}
            onChange={(e: any) => {
              setCheckUsernameValue(e.target.value.trim());
            }}
            onPaste={(e: any) => {
              setCheckUsernameValue(e.target.value.trim());
            }}
            onCopy={(e: any) => {
              setCheckUsernameValue(e.target.value.trim());
            }}
          />

          <Button
            size="lg"
            className="w-full bg-[#DD8306] rounded-md font-semibold my-3 text-white"
            onPress={checkUsername}
            isDisabled={checkUsernameValue == ""}
          >
            Check Username
          </Button>
          <div className="flex justify-between md:justify-end my-2 text-white">
            <Link
              href={`/`}
              className="text-[#DD8306] cursor-pointer md:hidden"
            >
              Beranda
            </Link>

            <a
              className="text-[#DD8306] cursor-pointer"
              onClick={() => setIsResetPassword(false)}
            >
              Login
            </a>
          </div>
        </div>
      ) : (
        <div className="bg-[#1F1A17] w-full md:w-2/5 p-8  md:px-24 justify-center flex flex-col">
          <p className="text-[72px] text-[#DD8306] font-semibold mb-10">
            Login
          </p>
          <p className="my-2 text-white">Username</p>
          <Input
            isRequired
            type="text"
            label=""
            placeholder=""
            className="my-2"
            classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
            value={username}
            onChange={(e: any) => {
              setValUsername(e.target.value.trim());
            }}
            onPaste={(e: any) => {
              setValUsername(e.target.value.trim());
            }}
            onCopy={(e: any) => {
              setValUsername(e.target.value.trim());
            }}
          />
          <p className="text-white my-2">Password</p>
          <Input
            isRequired
            className="my-2"
            classNames={{ input: "rounded-md", inputWrapper: "rounded-md" }}
            endContent={
              <button
                className="focus:outline-none"
                type="button"
                onClick={toggleVisibility}
              >
                {isVisible ? (
                  <EyeSlashFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                ) : (
                  <EyeFilledIcon className="text-2xl text-default-400 pointer-events-none" />
                )}
              </button>
            }
            type={isVisible ? "text" : "password"}
            label=""
            placeholder=""
            onChange={(event) => setPassword(event.target.value)}
          />

          <Button
            size="lg"
            className="w-full bg-[#DD8306] rounded-md font-semibold my-3 text-white"
            onPress={onSubmit}
          >
            Login
          </Button>
          <div className="flex justify-between md:justify-end my-2 text-white">
            <Link
              href={`/`}
              className="text-[#DD8306] cursor-pointer md:hidden"
            >
              Beranda
            </Link>
            {/* <div>
            <Checkbox color="warning"></Checkbox> Remember me
          </div> */}
            <a
              className="text-[#DD8306] cursor-pointer"
              onClick={() => setIsResetPassword(true)}
            >
              Reset Password
            </a>
          </div>
        </div>
      )}
    </div>
  );
}