"use client";
import element1 from "@/assets/auth/auth-element-1.png";
import element2 from "@/assets/auth/auth-element-2.svg";
import element3 from "@/assets/auth/auth-element-3.svg";
import authImage from "@/assets/auth/auth-image.png";
import line from "@/assets/auth/auth-line.svg";
import { useSettings } from "@/context/settingsContext";
import { useT } from "@/context/TranslationContext";
import ApiPath from "@/network/api/apiPath";
import NetworkService from "@/network/service/networkService";
import { decrypt } from "@/utils/crypto";
import { getSettingValue } from "@/utils/utils";
import { Icon } from "@iconify/react";
import Image from "next/image";
import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { toast } from "react-toastify";
import LanguageDropdown from "../dashboard/UserDropdown/LanguageDropdown";

const ChangePassword = () => {
  const network = new NetworkService();
  const searchParams = useSearchParams();
  const encryptedEmail = searchParams.get("email");
  const otp = searchParams.get("otp");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [showNewPassword, setShowNewPassword] = useState(false);
  const [loading, setLoading] = useState(false);
  const router = useRouter();
  const { settings } = useSettings();
  const siteFaVerification = getSettingValue(settings, "fa_verification");
  const landingUrl = process.env.NEXT_PUBLIC_LANDING_PAGE || "/";
  const siteLogo = getSettingValue(settings, "site_logo");
  const siteLogoHeight = getSettingValue(settings, "site_logo_height");
  const t = useT();
  const pathname = usePathname();
  const decryptedEmail = encryptedEmail ? decrypt(encryptedEmail) : null;

  const handlePasswordChange = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      const requestBody = {
        email: decryptedEmail,
        otp: otp,
        password: password,
        password_confirmation: confirmPassword,
      };
      const res = await network.post(ApiPath.resetPassword, requestBody);
      if (res.status === "completed") {
        toast.success(res.data.message);
        router.push("/auth/login");
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="flex">
      <div className="left w-[40%] xl:w-[35%] 3xl:w-[30%] bg-agent-primary min-h-screen fixed hidden lg:block">
        <div className="left-content">
          <div className="content-part px-[70px] pt-[130px]">
            <div className="ps-[10px] xl:ps-[45px] 2xl:ps-[75px]">
              <h2 className="text-[26px] 2xl:text-[30px] font-bold text-white mb-[10px]">
                {t("authPages.welcomeText")}
              </h2>
              <p className="text-[14px] 2xl:text-[16px] font-medium text-[rgba(255,255,255,0.80)]">
                {t("authPages.welcomeSubText")}
              </p>
            </div>
            <div className="mt-[80px] xl:mt-[123px]">
              <div className="w-full h-auto">
                <Image
                  src={authImage}
                  height={400}
                  width={400}
                  alt="auth image"
                  className="w-full h-auto"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div className="right w-full lg:w-[60%] xl:w-[65%] 3xl:w-[70%] lg:rtl:mr-[40%] xl:rtl:mr-[35%] 3xl:rtl:mr-[30%] lg:ltr:ml-[40%] xl:ltr:ml-[35%] 3xl:ltr:ml-[30%] min-h-screen relative">
        <div className="absolute top-4 rtl:left-4 ltr:right-4 z-50">
          <LanguageDropdown />
        </div>
        <div className="right-content flex justify-center items-center min-h-screen pt-8 xl:pt-24 pb-8 xl:pb-24">
          <div className="min-w-full sm:min-w-[535px] mx-auto px-4 xl:px-0">
            <div>
              <Link
                href={landingUrl}
                className={`logo block h-[${siteLogoHeight}px] w-auto mb-[40px]`}
              >
                {siteLogo ? (
                  <Image
                    src={siteLogo}
                    unoptimized
                    alt="logo"
                    width={205}
                    height={50}
                    style={{ height: `${siteLogoHeight}px`, width: "auto" }}
                    className="h-full"
                  />
                ) : (
                  <div className="h-[30px] w-[100px] bg-gray-100 animate-pulse rounded"></div>
                )}
              </Link>
              <h3 className="text-[22px] sm:text-[24px] md:text-[30px] font-bold text-agent-text mb-[30px] md:mb-[50px]">
                {t("authPages.changePassword")}
              </h3>
              <div className="mb-[30px] md:mb-[50px]">
                <Image
                  src={line}
                  height={100}
                  width={100}
                  alt="element"
                  className="w-full h-auto"
                />
              </div>
              <div className="w-full">
                <form onSubmit={handlePasswordChange}>
                  <div className="grid grid-cols-12 gap-3.5 sm:gap-5">
                    <div className="col-span-12">
                      <div>
                        <div className="relative">
                          <input
                            type={showPassword ? "text" : "password"}
                            id="password"
                            name="password"
                            placeholder={t("authPages.newPassword")}
                            className={`user-input user-input-left user-input-right peer`}
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                          />
                          <div className="icon absolute top-[50%] -translate-y-1/2 rtl:right-4 ltr:left-4">
                            <Icon
                              icon="hugeicons:square-lock-02"
                              width="24"
                              height="24"
                              className="w-[18px] h-[18px] text-[#9E9A9F]"
                            />
                          </div>
                          <div className="absolute top-[50%] -translate-y-1/2 rtl:right-[45px] ltr:left-[45px]">
                            <span className="block w-[2px] h-[16px] bg-[rgba(12,3,16,0.20)]"></span>
                          </div>

                          <button
                            type="button"
                            onClick={() => setShowPassword(!showPassword)}
                            className="icon absolute rtl:left-4 ltr:right-4 top-1/2 -translate-y-1/2 text-[rgba(45,45,45,0.44)] peer-focus:text-[rgba(116,69,255,0.60)]"
                          >
                            <Icon
                              icon={
                                showPassword
                                  ? "hugeicons:view"
                                  : "hugeicons:view-off-slash"
                              }
                              width="18"
                              height="18"
                            />
                          </button>
                        </div>
                      </div>
                    </div>
                    <div className="col-span-12">
                      <div>
                        <div className="relative">
                          <input
                            type={showNewPassword ? "text" : "password"}
                            id="password"
                            name="password"
                            placeholder={t("authPages.confirmPassword")}
                            className={`user-input user-input-left user-input-right peer`}
                            value={confirmPassword}
                            onChange={(e) => setConfirmPassword(e.target.value)}
                          />
                          <div className="icon absolute top-[50%] -translate-y-1/2 rtl:right-4 ltr:left-4">
                            <Icon
                              icon="hugeicons:square-lock-02"
                              width="24"
                              height="24"
                              className="w-[18px] h-[18px] text-[#9E9A9F]"
                            />
                          </div>
                          <div className="absolute top-[50%] -translate-y-1/2 rtl:right-[45px] ltr:left-[45px]">
                            <span className="block w-[2px] h-[16px] bg-[rgba(12,3,16,0.20)]"></span>
                          </div>

                          <button
                            type="button"
                            onClick={() => setShowNewPassword(!showNewPassword)}
                            className="icon absolute rtl:left-4 ltr:right-4 top-1/2 -translate-y-1/2 text-[rgba(45,45,45,0.44)] peer-focus:text-[rgba(116,69,255,0.60)]"
                          >
                            <Icon
                              icon={
                                showNewPassword
                                  ? "hugeicons:view"
                                  : "hugeicons:view-off-slash"
                              }
                              width="18"
                              height="18"
                            />
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <button
                    type="submit"
                    className="group primary-button w-full mt-5 sm:mt-[30px] lg:mt-[40px]"
                    disabled={loading}
                  >
                    <span className="primary-button-hover-effect"></span>
                    <span className="primary-button-text">
                      {t("authPages.changePassword")}
                    </span>
                  </button>
                </form>
              </div>
              <div className="path-switch mt-[30px] md:mt-[40px]">
                <p className="text-center text-[14px] sm:text-[16px] font-medium text-agent-paragraph">
                  {t("authPages.notRegisteredYet")}{" "}
                  <Link href="/auth/register" className="text-agent-primary">
                    {t("authPages.createAnAccount")}
                  </Link>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div className="auth-elements">
          <div className="elem1 absolute top-0 rtl:right-0 ltr:left-0 z-[-1]">
            <Image
              src={element1}
              height={100}
              width={100}
              alt="element"
              className="w-[500px] 3xl:w-[610px] h-auto rtl:rotate-180 rtl:scale-y-[-1]"
            />
          </div>
          <div className="elem2 absolute top-0 rtl:left-0 ltr:right-0 hidden sm:block">
            <Image
              src={element2}
              height={100}
              width={100}
              alt="element"
              className="w-[170px] 3xl:w-[223px] h-auto rtl:rotate-180"
            />
          </div>
          <div className="elem3 absolute bottom-0 rtl:right-0 ltr:left-0 hidden lg:block">
            <Image
              src={element3}
              height={100}
              width={100}
              alt="element"
              className="w-[170px] 3xl:w-[223px] h-auto rtl:rotate-180"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ChangePassword;