"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, 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";

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

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

    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');
        if (code && state) {
            setCheckedAccounts((prevState) => ({
                ...prevState,
                tiktok: true,
            }));
        }
        else if (code && !state) {
            setCheckedAccounts((prevState) => ({
                ...prevState,
                instagram: true,
            }));
        }
    }, [searchParams]);

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

    // 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]);

    console.log("linkedYoutubeAccountDetails" ,linkedYoutubeAccountDetails);
    console.log("linkedXiaohongshuAccountDetails" ,linkedXiaohongshuAccountDetails);
    

    // 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 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) {
        return <Loader />
    }

    if (isPending) {
        return <Loader />
    }

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

                {connected?.instagram &&
                    <InstagramTab translations={translations} linkedInstagramAccountDetails={linkedInstagramAccountDetails} CountriesData={CountriesData} connected={connected} LinkMutate={LinkMutate} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} disabledAccounts={disabledAccounts} refetch={refetch} userDetails={loginUserDetail} />}

                {connected?.facebook &&
                    <FacebookTab linkedFacebookAccountDetails={linkedFacebookAccountDetails} translations={translations} CountriesData={CountriesData} LinkMutate={LinkMutate} connected={connected} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} disabledAccounts={disabledAccounts} refetch={refetch} userDetails={loginUserDetail} />}

                {connected?.youtube &&
                    <YoutubeTab linkedYoutubeAccountDetails={linkedYoutubeAccountDetails} translations={translations} CountriesData={CountriesData} LinkMutate={LinkMutate} connected={connected} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} disabledAccounts={disabledAccounts} refetch={refetch} userDetails={loginUserDetail} />}

                {connected?.tiktok &&
                    <TiktokTab linkedTiktokAccountDetails={linkedTiktokAccountDetails} translations={translations} CountriesData={CountriesData} LinkMutate={LinkMutate} connected={connected} handleUnlinkAccount={handleUnlinkAccount} checkedAccounts={checkedAccounts} handleCheckboxChange={handleCheckboxChange} disabledAccounts={disabledAccounts} refetch={refetch} userDetails={loginUserDetail} />}

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

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

export default SocialMediaAccount