"use client";
export const dynamic = "force-dynamic";
import useAxios from "@/hooks/useAxios";
import eyeClose from "@/public/assest/eye-close.svg";
import eyeOpen from "@/public/assest/eye-open.svg";
import logo from "@/public/assest/logo.svg";
import mail from "@/public/assest/mail.svg";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
import { useSelector, useDispatch } from "react-redux";
import { login } from "@/store/slices/userSlice";
import { BASE_URL } from "@/Constant";
import { Loader } from "lucide-react"; // 👈 Loader import karo

const LoginPage = () => {
  const router = useRouter();
  const user = useSelector((state: any) => state.user);
  const dispatch = useDispatch();
  const { postData } = useAxios();
  const [show, setShow] = useState(false);
  const [isLoading, setIsLoading] = useState(false); // 👈 Loading state add karo
  const toggleShow = () => setShow(!show);

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errors, setErrors] = useState({ email: "", password: "" });
  const [logType, setLogType] = useState("");
  const [innerType, setInnerType] = useState("");
  const [userType, setUserType] = useState("");

  useEffect(() => {
    if (typeof window !== "undefined") {
      const loginType = localStorage.getItem("loginType") || "";
      const innermemberlogin = localStorage.getItem("innermemberlogin") || "";
      setLogType(loginType);
      setInnerType(innermemberlogin);

      if (loginType === "member") {
        setUserType(innermemberlogin + "-" + loginType);
      } else if (
        loginType === "ab" ||
        loginType === "cb" ||
        loginType === "pcb" ||
        loginType === "personal"
      ) {
        setUserType(loginType);
      }
    }
  }, []);

  const handleLogin = async () => {
    // Basic validation
    if (!email || !password) {
      toast.error("Please fill in all fields");
      return;
    }

    setIsLoading(true); // 👈 Loading start karo

    const payload = { email, password, userType };

    try {
      const res: any = await postData("userLogin/loginUser", payload);

      if (res?.success) {
        if (res?.data?.published === false) {
          toast.error(
            "Your account is not activated. Please contact administrator."
          );
          setIsLoading(false);
          return;
        }

        // ✅ CHECK: Agar data array mein hai to published field check karo
        if (res?.data?.data && Array.isArray(res?.data?.data)) {
          const userData = res?.data?.data[0];
          if (userData?.published === false) {
            toast.error("Your account is deactivated. Please contact support.");
            setIsLoading(false);
            return;
          }
        }

        // ✅ CHECK: Agar direct user object mein published false hai
        if (res?.data?.user?.published === false) {
          toast.error("Account is not active. Please contact administrator.");
          setIsLoading(false);
          return;
        }
        if (userType === "ab") {
          dispatch(login(res?.data));
          router.push("/ab");
        } else if (userType === "cb") {
          dispatch(login(res?.data));
          router.push("/cb");
        } else if (userType === "pcb") {
          dispatch(login(res?.data));
          router.push("/pcb");
        } else if (userType === "personal") {
          dispatch(login(res?.data));
          router.push("/personal/settings");
        } else if (userType === "association-member") {
          dispatch(login(res?.data));
          router.push("/association-member/settings");
        } else if (userType === "organisation-member") {
          dispatch(login(res?.data));
          router.push("/organisation-member/settings");
        } else if (userType === "professional-member") {
          dispatch(login(res?.data));
          router.push("/professional-member/settings");
        }
        toast.success(res?.message);
      } else {
        toast.error(res?.message);
      }
    } catch (error) {
      console.error("Login error:", error);
      toast.error("An error occurred during login");
    } finally {
      setIsLoading(false); // 👈 Loading stop karo
    }
  };

  const [websiteData, setWebsiteData] = useState<any>(null);

  useEffect(() => {
    async function fetchWebsiteData() {
      try {
        const res = await fetch(
          `${BASE_URL}website/getWebsiteById?websiteId=66e3e5bfcdfd3a17049f0279`,
          {
            next: { revalidate: 60 },
          }
        );

        console.log("Response object:", res);

        if (!res.ok) throw new Error("Failed to fetch website data");

        const json = await res.json();
        console.log("Website data received:", json);

        setWebsiteData(json?.data);
      } catch (error) {
        console.error("Error fetching website data:", error);
      }
    }

    fetchWebsiteData();
  }, []);

  return (
    <div className="flex justify-center items-center">
      <div className="bg-white rounded-3xl p-11 w-[550px]">
        <div className="flex justify-center">
          {websiteData?.headerLogo ? (
            <Image
              src={`${BASE_URL}${websiteData.headerLogo}`}
              alt="IAAB Logo"
              width={135}
              height={125}
              className="w-auto h-auto max-h-32 object-contain transition-transform hover:scale-105"
              unoptimized={true}
            />
          ) : (
            <div className="w-32 h-8 bg-gray-200 animate-pulse rounded"></div>
          )}
        </div>
        <div className="text-2xl text-center my-5">
          Welcome to{" "}
          {logType === "ab"
            ? "AB"
            : logType === "cb"
            ? "CB"
            : logType === "pcb"
            ? "PCB"
            : logType === "personal"
            ? "Certified Personal"
            : `${
                innerType.charAt(0).toUpperCase() + innerType.slice(1)
              } Member`}{" "}
          Dashboard
        </div>

        <div className="text-center font-normal">
          Please enter your credentials to continue
        </div>

        {/* Email Field */}
        <div className="my-4">
          <label className="text-sm">
            Email <span className="text-red-500"> *</span>
          </label>
          <div className="border border-gray-300 rounded-xl flex items-center p-2 px-4">
            <input
              type="text"
              className="outline-none flex-grow"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              disabled={isLoading} // 👈 Loading time pe disabled
            />
            <Image src={mail} alt="mail" unoptimized={true} />
          </div>
          {errors.email && (
            <small className="text-red-500">{errors.email}</small>
          )}
        </div>

        {/* Password Field */}
        <div className="my-4">
          <label className="text-sm">
            Password <span className="text-red-500"> *</span>
          </label>
          <div className="border border-gray-300 rounded-xl flex items-center p-2 px-4">
            <input
              type={show ? "text" : "password"}
              autoComplete="current-password"
              className="outline-none flex-grow"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              disabled={isLoading} // 👈 Loading time pe disabled
            />
            <Image
              onClick={toggleShow}
              className="cursor-pointer"
              src={show ? eyeOpen : eyeClose}
              alt="toggle password"
              unoptimized={true}
            />
          </div>
          {errors.password && (
            <small className="text-red-500">{errors.password}</small>
          )}
        </div>

        <div
          className="flex justify-end text-blue cursor-pointer"
          onClick={() => !isLoading && router.push("/forgot-password")} // 👈 Loading time pe disable
        >
          Forgot password?
        </div>

        <button
          className={`p-2 w-full rounded-3xl text-black text-center font-bold my-4 flex items-center justify-center transition-all duration-300 ${
            isLoading
              ? "bg-gray-400 cursor-not-allowed"
              : "bg-btn hover:bg-btnhover"
          }`}
          onClick={handleLogin}
          disabled={isLoading} // 👈 Loading time pe disabled
        >
          {isLoading ? (
            <>
              <Loader className="w-5 h-5 text-white animate-spin mr-2" />
              Logging in...
            </>
          ) : (
            "Login"
          )}
        </button>
      </div>
    </div>
  );
};

export default LoginPage;