"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 successIcon from "@/assets/auth/success-icon.svg";
import LanguageDropdown from "@/components/dashboard/UserDropdown/LanguageDropdown";
import { useSettings } from "@/context/settingsContext";
import { useT } from "@/context/TranslationContext";
import ApiPath from "@/network/api/apiPath";
import NetworkService from "@/network/service/networkService";
import { getSettingValue } from "@/utils/utils";
import Cookies from "js-cookie";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { isMobile } from "react-device-detect";

const SuccessStatus = () => {
  const network = new NetworkService();
  const router = useRouter();
  const [user, setUser] = useState(null);
  // console.log("user", user);
  const landingUrl = process.env.NEXT_PUBLIC_LANDING_PAGE || "/";
  const { settings } = useSettings();
  const siteLogo = getSettingValue(settings, "site_logo");
  const siteLogoHeight = getSettingValue(settings, "site_logo_height");
  const t = useT();

  const userData = async () => {
    try {
      const res = await network.get(ApiPath.user);
      if (res.status === "completed") {
        setUser(res.data.data.user);
      }
    } finally {
    }
  };

  useEffect(() => {
    userData();
  }, []);

  const steps = [
    {
      step: 1,
      title: t("authPages.emailVerification"),
      completed: true,
      icon: "fi fi-rr-at",
    },
    {
      step: 2,
      title: t("authPages.setupPasswordTitle"),
      completed: true,
      icon: "fi fi-rr-password-lock",
    },
    {
      step: 3,
      title: t("authPages.personalInfo"),
      completed: user?.boarding_steps?.personal_info || false,
      icon: "fi fi-rr-user",
    },
    {
      step: 4,
      title: t("authPages.idVerification"),
      completed: user?.boarding_steps?.completed || false,
      icon: "fi fi-rr-id-badge",
    },
  ];

  //pick icons dynamically
  // const getIcon = (stepObj) => {
  //   if (stepObj.completed) return "basil:check-outline";
  //   if (stepObj.step === 2) return "basil:lock-solid";
  //   if (stepObj.step === 4) return "basil:document-solid";
  //   return "basil:user-solid";
  // };
  // const getBgClass = (completed) =>
  //   completed ? "bg-agent-success" : "bg-gray-200";
  // const getIconColorClass = (completed) =>
  //   completed ? "text-white" : "text-[#A3A3A3]";

  const renderNextButton = () => {
    if (user?.agent?.is_rejected && user?.kyc == "3") {
      return (
        <Link
          href="/auth/step-verification/id-verification-choose"
          className="group primary-button w-full"
        >
          <span className="primary-button-hover-effect"></span>
          <span className="primary-button-text">
            {t("authPages.submitAgain")}
          </span>
        </Link>
      );
    } else if (user?.boarding_steps?.completed) {
      return (
        <Link href="/dashboard" className="group primary-button w-full">
          <span className="primary-button-hover-effect"></span>
          <span className="primary-button-text">
            {t("sidebarNav.dashboard")}
          </span>
        </Link>
      );
    } else if (user?.kyc == "0" || user?.kyc == "4") {
      const link = !isMobile
        ? "/auth/step-verification/scan-qrcode"
        : "/auth/step-verification/id-verification-choose";
      return (
        <Link href={link} className="group primary-button w-full">
          <span className="primary-button-hover-effect"></span>
          <span className="primary-button-text">{t("authPages.nextStep")}</span>
        </Link>
      );
    }
    return null;
  };

  useEffect(() => {
    if (user?.boarding_steps?.completed) {
      localStorage.removeItem("register_personal_info");
      localStorage.removeItem("register_additional_info");
      if (user?.boarding_steps?.completed === true) {
        Cookies.set("kycVerify", "true");
      }
    }
  }, [user?.boarding_steps?.completed]);

  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.welcomeSubText2")}
              </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.agentRegister")}
              </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="mb-[30px] md:mb-[50px]">
                <p className="text-[16px] sm:text-[24px] md:text-[30px] font-bold text-agent-text text-center">
                  {t("authPages.setupText1")}
                  <br /> {t("authPages.setupText2")}
                </p>
              </div>
              <div className="w-full">
                <div className="border border-[rgba(12,3,16,0.10)] rounded-[40px] p-[20px]">
                  {steps.map((item, index) => (
                    <div
                      className={`flex justify-between items-center gap-2 p-[10px] border ${
                        item.completed
                          ? "border-agent-primary"
                          : "border-transparent"
                      } rounded-[30px] mb-[14px] last:mb-0`}
                      key={index}
                    >
                      <div className="flex gap-[16px] items-center">
                        <div
                          className={`w-[40px] h-[40px] rounded-full flex justify-center items-center ${
                            item.completed
                              ? "bg-agent-primary"
                              : "bg-[rgba(12,3,16,0.06)]"
                          }`}
                        >
                          <i
                            className={`${
                              item.icon
                            } text-[#959197] text-[18px] flex justify-center items-center ${
                              item.completed ? "text-white" : "text-[#959197]"
                            }`}
                          ></i>
                        </div>
                        <p className="text-[14px] font-bold text-[rgba(12,3,16,0.40)]">
                          {item.title}
                        </p>
                      </div>
                      <div>
                        {item.step === 4 && (
                          <>
                            {user?.kyc == "3" ? (
                              <span className="text-red-500 font-medium text-sm mt-1">
                                Rejected
                              </span>
                            ) : user?.kyc == "1" ? (
                              <span className="text-agent-success font-medium text-sm mt-1"></span>
                            ) : user?.kyc == "2" ? (
                              <span className="text-[#FFAA00] font-medium text-sm mt-1">
                                In Review
                              </span>
                            ) : (
                              <span className="text-[#FFAA00] font-medium text-sm mt-1"></span>
                            )}
                          </>
                        )}
                        {item.completed && (
                          <Image
                            src={successIcon}
                            height={100}
                            width={100}
                            alt="success icon"
                            className="w-[30px] h-[30px]"
                          />
                        )}
                      </div>
                    </div>
                  ))}
                </div>
                {/* Rejection Reason */}
                {user?.agent?.is_rejected && user?.agent?.kyc == "4" && (
                  <div className="mt-[20px] w-full">
                    <p className="text-user-text text-center">
                      {user?.agent?.rejection_reason}
                    </p>
                  </div>
                )}

                <div className="mt-[30px] lg:mt-[40px]">
                  {renderNextButton()}
                </div>

                {user?.kyc == "0" ||
                user?.kyc == "3" ||
                user?.kyc == "2" ? null : (
                  <>
                    {user?.boarding_steps?.personal_info &&
                      !user?.boarding_steps?.completed && (
                        <div className="mt-5 w-full">
                          <Link
                            href="/auth/step-verification/setup-personal-info"
                            className="group primary-button primary-border w-full"
                          >
                            <span className="primary-button-hover-effect"></span>
                            <span className="primary-button-text">
                              {t("authPages.back")}
                            </span>
                          </Link>
                        </div>
                      )}
                  </>
                )}

                {/* Refresh Button */}
                {user?.kyc == "2" && (
                  <div className="mt-[20px] w-full">
                    <button
                      className="group primary-button primary-border w-full"
                      onClick={() => window.location.reload()}
                    >
                      <span className="primary-button-hover-effect"></span>
                      <span className="primary-button-text">
                        {t("authPages.refresh")}
                      </span>
                    </button>
                  </div>
                )}
              </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 SuccessStatus;