"use client";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { AppStore } from "@/lib/store";
import { useTranslation } from "@/Utils/Hooks/useTranslate";
import { useQuery } from "@tanstack/react-query";
import { CountriesAPI, SelfAPI, SocialLinkAPI } from "@/Utils/APIRequest/Endpoints";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import Loader from "@/Layout/Loader";
import { useRouter, useSearchParams } from "next/navigation";
import { CustomToast } from "@/Utils/CustomToast";
import usePost from "@/Utils/Hooks/usePost";
import dynamic from "next/dynamic";
import ConfirmationModal from "@/Component/Common/Modal/ConfirmationModal";
import { getUserDetails } from "@/lib/Features/UserDetails/userDetails";

const FacebookTab = dynamic(() => import('./FacebookTab'), { ssr: false });
const TiktokTab = dynamic(() => import('./TiktokTab'), { ssr: false });
const InstagramTab = dynamic(() => import('./InstagramTab'), { ssr: false });
const YoutubeTab = dynamic(() => import('./YoutubeTab'), { ssr: false });
const XiaohongshuTab = dynamic(() => import('./XiaohongshuTab'), { ssr: false });

const SocialMediaAccount = () => {
  const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
  const { translations } = useTranslation();
  const dispatch = useDispatch()
  const searchParams = useSearchParams();
  const router = useRouter();

  const [linkedFacebookAccountDetails, setLinkedFacebookAccountDetails] = useState<any>(null);
  const [linkedInstagramAccountDetails, setLinkedInstagramAccountDetails] = useState<any>(null);
  const [linkedYoutubeAccountDetails, setLinkedYoutubeAccountDetails] = useState<any>(null);
  const [linkedTiktokAccountDetails, setLinkedTiktokAccountDetails] = useState<any>(null);
  const [linkedXiaohongshuAccountDetails, setLinkedXiaohongshuAccountDetails] = useState<any>(null);

  const [connected, setConnected] = useState({ instagram: false, facebook: false, youtube: false, tiktok: false, xiaohongshu: false });
  const [checkedAccounts, setCheckedAccounts] = useState({ instagram: false, facebook: false, youtube: false, tiktok: false, xiaohongshu: false });
  const [disabledAccounts, setDisabledAccounts] = useState({ instagram: false, facebook: false, youtube: false, tiktok: false, xiaohongshu: false });

  useEffect(() => {
    const code = searchParams.get('code');
    const state = searchParams.get('state');
    const scopes = searchParams.get('scopes');

    // Only clean URL if scopes parameter exists (to prevent infinite loop)
    if (scopes) {
      const cleanRedirectURL = (url) => {
        const urlObj = new URL(url);
        urlObj.searchParams.delete('scopes');  // This removes the scopes parameter
        return urlObj.toString();
      };

      const cleanedURL = cleanRedirectURL(window.location.href);
      const currentURL = window.location.href;

      // Only replace if URLs are different to prevent infinite loop
      if (cleanedURL !== currentURL) {
        // Use replace instead of push to avoid adding to history and prevent loop
        router.replace(cleanedURL);
        return; // Exit early to prevent state updates during URL cleanup
      }
    }

    // Handle OAuth callback codes
    if (code && state) {
      setCheckedAccounts((prevState) => ({
        ...prevState,
        tiktok: true,
      }));
    }
    else if (code && !state) {
      setCheckedAccounts((prevState) => ({
        ...prevState,
        instagram: true,
      }));
    }
  }, [searchParams, router]);

  const handleCheckboxChange = (account) => {

    // Toggle checked state only if the account checkbox is not disabled
    if (!disabledAccounts[account]) {
      setCheckedAccounts({
        ...checkedAccounts,
        [account]: !checkedAccounts[account],
      });
    }
  };

  // Self API
  const { data: selfData, refetch, isPending: SelfLoader, fetchStatus } = useQuery({ queryKey: [SelfAPI], queryFn: () => CustomFetch({ url: SelfAPI, }, null, false), refetchOnWindowFocus: false, enabled: false, select: (data) => data?.data });

  useEffect(() => {
    if (selfData) {
      dispatch(getUserDetails(selfData))
    }
  }, [selfData, SelfLoader])

  // API GET
  const { data: CountriesData, isPending } = useQuery({ queryKey: [CountriesAPI], queryFn: () => CustomFetch({ url: CountriesAPI, params: { search: "" } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data?.map((elem) => ({ label: elem?.country_name ?? "", value: elem?.two_digit_code ?? "", metaData: elem })) })

  useEffect(() => {

    if (userDetails?.social_medias?.length > 0) {
      userDetails?.social_medias.map((item) => {
        let type = item?.social_type;
        let id = item?.id;

        setCheckedAccounts((prevState) => ({
          ...prevState,
          [type]: true,
        }));
        setDisabledAccounts((prevState) => ({
          ...prevState,
          [type]: true,
        }));

        setConnected((prevState) => ({
          ...prevState,
          [type]: { id: id, type: type, connected: true },
        }));

        if (item?.social_type == 'facebook') {
          setLinkedFacebookAccountDetails(item);
        }
        if (item?.social_type == 'youtube') {
          setLinkedYoutubeAccountDetails(item);
        }
        if (item?.social_type == 'instagram') {
          setLinkedInstagramAccountDetails(item);
        }
        if (item?.social_type == 'tiktok') {
          setLinkedTiktokAccountDetails(item);
        }
        if (item?.social_type == 'xiaohongshu') {
          setLinkedXiaohongshuAccountDetails(item);
        }
      })
    }
  }, [userDetails]);


  // Link API
  const { mutate: LinkMutate, isPending: LinkPending } = usePost(SocialLinkAPI, null, (response) => {
    if (response.status == 200 || response.status == 201) {
      refetch();
      CustomToast("success", translations.linkedMessage)
    }
    if (response.status == 205) {
      refetch();
      CustomToast("error", translations.accountAlreadyLinked)
    }
    if (response.status == 206) {
      refetch();
      CustomToast("error", translations.accountNotMatchCriteria)
    }
  }, null);

  const [openUnLinkModal, setOpenUnLinkModal] = useState<any>(null)

  const handleUnlinkAccount = (account) => {

    const connectedAccountsCount = Object.values(connected).filter((acc: any) => acc.connected).length;

    // If there's only one connected account, prevent unlinking
    if (connectedAccountsCount <= 1) {
      CustomToast("error", "You must have at least one social media account connected.");
      return;
    }

    const accountData = connected[account];  // Get the data from the connected state
    if (accountData) {
      setOpenUnLinkModal({ open: true, accountId: accountData.id, accountType: accountData.type }); // Pass id and type to modal
    }
  };

  // Unlink API
  const { isPending: isPendingUnlink, status, mutate } = usePost(`${SocialLinkAPI}/${openUnLinkModal?.accountId}`, null, (response) => {
    if (response.status == 200 || response.status == 204) {
      refetch();
      CustomToast("success", translations.unLinkedMessage)

      setCheckedAccounts((prevState) => ({
        ...prevState,
        [openUnLinkModal?.accountType]: false,
      }));
      setDisabledAccounts((prevState) => ({
        ...prevState,
        [openUnLinkModal?.accountType]: false,
      }));
      setConnected((prevState) => ({
        ...prevState,
        [openUnLinkModal?.accountType]: false,
      }));
      setOpenUnLinkModal(false);
    }
  }, 'delete')
  const callbackFunction = () => {
    let obj: any = {
      social_type: openUnLinkModal.accountType
    }
    mutate(obj)
  }

  if (LinkPending || isPendingUnlink || isPending) {
    return <Loader />
  }

  return (
    <>

      <div className="rounded-xl relative">
        <h2 className="text-primary text-xl mb-4 font-medium leading-6">📱 {translations?.socialMediaAccounts}</h2>

        <InstagramTab translations={translations} linkedInstagramAccountDetails={linkedInstagramAccountDetails} CountriesData={CountriesData} connected={connected} LinkMutate={LinkMutate} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} refetch={refetch} disabledAccounts={disabledAccounts} userDetails={userDetails} />

        <FacebookTab linkedFacebookAccountDetails={linkedFacebookAccountDetails} translations={translations} CountriesData={CountriesData} LinkMutate={LinkMutate} connected={connected} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} disabledAccounts={disabledAccounts} userDetails={userDetails} />

        <YoutubeTab linkedYoutubeAccountDetails={linkedYoutubeAccountDetails} translations={translations} CountriesData={CountriesData} LinkMutate={LinkMutate} connected={connected} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} disabledAccounts={disabledAccounts} userDetails={userDetails} />

        <TiktokTab linkedTiktokAccountDetails={linkedTiktokAccountDetails} translations={translations} CountriesData={CountriesData} LinkMutate={LinkMutate} connected={connected} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} disabledAccounts={disabledAccounts} userDetails={userDetails} />

        {connected?.xiaohongshu &&
          <XiaohongshuTab linkedXiaohongshuAccountDetails={linkedXiaohongshuAccountDetails} translations={translations} CountriesData={CountriesData} LinkMutate={LinkMutate} connected={connected} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} disabledAccounts={disabledAccounts} userDetails={userDetails} />
        }

      </div>
      {openUnLinkModal && <ConfirmationModal setModal={setOpenUnLinkModal} modal={openUnLinkModal} callbackFunction={callbackFunction} loader={isPendingUnlink} args={{ size: "sm", message: translations.unLinkConfirmationMessage }} translations={translations} />}
    </>
  );
};
export default SocialMediaAccount;