import { useEffect, useState, useRef, useCallback, useLayoutEffect } from 'react';
import { useParams, useSearchParams } from 'next/navigation';
import Image from 'next/image';
import CampaignDetailTabsHeader from '../CampaignDetailTabsHeader'
import usePost from '@/Utils/Hooks/usePost';
import { InfluencerListAPI } from '@/Utils/APIRequest/Endpoints';
import InfluencerPoolBox from './InfluencerPoolBox';
import SidebarModal from '@/Component/Brand/BrowseInfluencer/SidebarModal';
import CampaignForm from '../../../CreateCampaign/CampaignForm';
import GradientButton from '@/Component/Common/Forms/GradientButton';
import { ArchiveFillSVG, ArchiveSVG, LoaderSVG } from '@/Component/Common/SVGs/CommonSVG';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import InfluencerPoolBoxSkeleton from './InfluencerPoolBoxSkeleton';
import useOutsideDropdown from '@/Utils/Hooks/useOutsideDropdown';
import CampaignManagementDetail from '../CampaignManagement/CampaignManagementDetail';
import { useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import SearchInput from '@/Component/Common/Forms/SearchInput';
import InfluencerPoolAiReport from './InfluencerPoolAiReport';

const dedupeApplicants = (items: any[]) => {
    const seen = new Set<number | string>();
    return items.filter((item) => {
        const id = item?.id;
        if (!id || seen.has(id)) return false;
        seen.add(id);
        return true;
    });
};

const InfluencerPoolCampaignAd = (props) => {
    const { poolActiveTab, setPoolActiveTab, skeletonLoading, startSkeletonLoading, stopSkeletonLoading, activeTab, data, campaignDetailRefetch, translations, filteredValue, setFilteredValue, setRestrictModalOpen, applicantMode, isAiReportGenerating, aiReportRefreshKey, onRegenerateReport, isRegenerating } = props;
    const searchParams = useSearchParams();
    const linkParams = useParams();
    const { locale } = useTranslation();
    const [listingData, setListingData] = useState(false);
    const [platforms, setPlatforms] = useState([]);
    const [openSideModal, setOpenSideModal] = useState(null)
    const [openQuoteSideModal, setOpenQuoteSideModal] = useState(null);
    const [search, setSearch] = useState('');
    const [switchPublic, setSwitchPublic] = useState<any>(false);
    const [buttonText, setButtonText] = useState<Record<string, string>>({});
    const [bookmarkIcon, setBookmarkIcon] = useState<Record<string, any>>({});
    const [influencerListData, setInfluencerListData] = useState<any>([]);
    const [hasMoreResults, setHasMoreResults] = useState(1);
    const campaignId: any = searchParams.get("id");
    const applicantSortBy = applicantMode === 'ai' ? 'ai_score' : 'is_recommended';
    const { ref, isComponentVisible, setIsComponentVisible } = useOutsideDropdown();
    const [isLoading, setIsLoading] = useState(false);
    const [firstLoadDone, setFirstLoadDone] = useState(false);
    const { ref: quoteRef, isComponentVisible: isQuoteComponentVisible, setIsComponentVisible: setIsQuoteComponentVisible } = useOutsideDropdown();
    const loadMoreRef = useRef<HTMLDivElement>(null);
    const initialLoadDoneRef = useRef(false);
    const prevLocaleRef = useRef(locale);
    const prevProfilePrivacyRef = useRef<string | undefined>(undefined);
    const searchInitializedRef = useRef(false);
    const sidebarWasOpenRef = useRef(false);
    const quoteSidebarWasOpenRef = useRef(false);
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    useEffect(() => {
        setIsComponentVisible(openSideModal ? true : false)
    }, [openSideModal]);

    const openInfluencerSidebar = (influencerOrUpdater) => {
        setOpenSideModal(influencerOrUpdater);
        if (typeof influencerOrUpdater !== 'function') {
            setIsComponentVisible(true);
        }
    };

    useEffect(() => {
        if (!isComponentVisible && openSideModal) {
            setOpenSideModal(null);
        }
    }, [isComponentVisible, openSideModal]);

    useEffect(() => {
        setIsQuoteComponentVisible(openQuoteSideModal ? true : false)
    }, [openQuoteSideModal]);

    const [params, setParams] = useState<any>({
        campaign_id: campaignId,
        page: 1,
        per_page: 12,
        sort_by: applicantSortBy,
        sort: "DESC",
        is_campaign_ad: true
    });



    const applyListResponse = (response: any) => {
        const items = dedupeApplicants(response?.data?.data ?? []);
        const newButtonTexts: Record<string, string> = {};
        const newBookmarkIcon: Record<string, any> = {};
        items.forEach((element) => {
            newButtonTexts[element.id] =
                element.isCampaignAdded === 1 ? 'Added to Campaign' : 'Add to Campaign';
            newBookmarkIcon[element.id] =
                element.isBookmarkAdded === 1 ? (
                    <ArchiveFillSVG customClass="h-8" />
                ) : (
                    <ArchiveSVG customClass="h-8" />
                );
        });
        setButtonText(newButtonTexts);
        setBookmarkIcon(newBookmarkIcon);
        setHasMoreResults(response?.data?.hasMoreResults ?? 0);
        return items;
    };

    // Post API
    const { data: ListData, isPending, mutate } = usePost(`${InfluencerListAPI}/campaign`, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
            applyListResponse(response);
        }
    }, null);

    const refetchApplicantsSilently = useCallback(async () => {
        if (!campaignId || applicantMode === 'ai') return;
        const perPage = params.per_page || 12;
        const pagesLoaded = Math.max(params.page || 1, 1);
        const postBody = {
            ...params,
            campaign_id: campaignId,
            page: 1,
            per_page: pagesLoaded * perPage,
            is_campaign_ad: true,
        };
        try {
            const response = await CustomFetch(
                {
                    url: `${InfluencerListAPI}/campaign`,
                    data: postBody,
                    method: "post"
                },
                null,
                false,
                null
            );
            if (response?.status === 200 || response?.status === 201) {
                setInfluencerListData(applyListResponse(response));
            }
        } catch (err) {
            console.error("Applicant refetch failed:", err);
        }
    }, [campaignId, applicantMode, params]);

    useEffect(() => {
        if (openSideModal) {
            sidebarWasOpenRef.current = true;
            return;
        }
        if (!sidebarWasOpenRef.current) return;
        sidebarWasOpenRef.current = false;
        campaignDetailRefetch?.();
        refetchApplicantsSilently();
    }, [openSideModal, campaignDetailRefetch, refetchApplicantsSilently]);

    useEffect(() => {
        if (openQuoteSideModal) {
            quoteSidebarWasOpenRef.current = true;
            return;
        }
        if (!quoteSidebarWasOpenRef.current) return;
        quoteSidebarWasOpenRef.current = false;
        campaignDetailRefetch?.();
        refetchApplicantsSilently();
    }, [openQuoteSideModal, campaignDetailRefetch, refetchApplicantsSilently]);

    const fetchApplicants = useCallback(
        (postBody: any, replaceList = true) => {
            if (!campaignId || !mutate || applicantMode === 'ai') return;
            initialLoadDoneRef.current = false;
            if (replaceList) {
                setInfluencerListData([]);
                setHasMoreResults(1);
            }
            mutate(postBody);
        },
        [campaignId, mutate, applicantMode]
    );

    useEffect(() => {
        if (!campaignId || !mutate || applicantMode === 'ai') return;
        const postBody = {
            campaign_id: campaignId,
            page: 1,
            per_page: 12,
            sort_by: applicantSortBy,
            sort: 'DESC',
            is_campaign_ad: true,
            search: undefined,
        };
        setParams(postBody);
        setFirstLoadDone(false);
        fetchApplicants(postBody);
    }, [campaignId, applicantMode]);

    useEffect(() => {
        if (isPending) {
            startSkeletonLoading();
            setFirstLoadDone(false);
            setInfluencerListData([]);
        } else {
            stopSkeletonLoading();
            initialLoadDoneRef.current = true;
            setFirstLoadDone(true);
            if (ListData?.data?.data?.length > 0) {
                setInfluencerListData(dedupeApplicants([...ListData?.data?.data]));
            } else {
                setInfluencerListData([]);
            }
        }
    }, [isPending, ListData?.data?.data]);

    useEffect(() => {
        if (!aiReportRefreshKey || !campaignId || applicantMode === 'ai') return;
        const postBody = {
            campaign_id: campaignId,
            page: 1,
            per_page: 12,
            sort_by: applicantSortBy,
            sort: 'DESC',
            is_campaign_ad: true,
            search: search || undefined,
        };
        setParams(postBody);
        fetchApplicants(postBody);
    }, [aiReportRefreshKey]);

    useEffect(() => {
        if (!campaignId || !mutate || applicantMode === 'ai') return;
        if (!searchInitializedRef.current) {
            searchInitializedRef.current = true;
            if (!search) return;
        }
        initialLoadDoneRef.current = false;
        setFirstLoadDone(false);
        setInfluencerListData([]);
        setHasMoreResults(1);
        setParams((prev) => {
            const postBody = { ...prev, page: 1, search: search || undefined, campaign_id: campaignId };
            mutate(postBody);
            return postBody;
        });
    }, [search]);

    useEffect(() => {
        if (!campaignId || !mutate || applicantMode === 'ai') return;
        if (prevLocaleRef.current === locale) return;
        prevLocaleRef.current = locale;
        const postBody = { ...params, page: 1, campaign_id: campaignId };
        fetchApplicants(postBody);
    }, [locale]);

    useEffect(() => {
        const prevPrivacy = prevProfilePrivacyRef.current;
        prevProfilePrivacyRef.current = data?.profile_privacy;
        if (prevPrivacy === undefined || prevPrivacy === 'public' || data?.profile_privacy !== 'public') return;
        const postBody = {
            campaign_id: campaignId,
            page: 1,
            per_page: 12,
            sort_by: applicantSortBy,
            sort: 'DESC',
            is_campaign_ad: true,
            search: search || undefined,
        };
        setParams(postBody);
        fetchApplicants(postBody);
    }, [data?.profile_privacy]);

    const loadMore = useCallback(async () => {
        if (isLoading || isPending || isAiReportGenerating || applicantMode === 'ai' || !hasMoreResults || !initialLoadDoneRef.current || !campaignId) return;
        setIsLoading(true);
        const nextPage = params.page + 1;
        const nextPageParams = { ...params, page: nextPage, campaign_id: campaignId };

        try {
            const response = await CustomFetch(
                {
                    url: `${InfluencerListAPI}/campaign`,
                    data: nextPageParams,
                    method: "post"
                },
                null,
                false,
                null
            );

            if (response?.status === 200 || response?.status === 201) {
                const newInfluencers = response?.data?.data || [];
                setInfluencerListData((prev) => {
                    const merged = dedupeApplicants([...prev, ...newInfluencers]);
                    const newButtonTexts = { ...buttonText };
                    const newBookmarkIcon = { ...bookmarkIcon };
                    newInfluencers.forEach((element) => {
                        newButtonTexts[element.id] =
                            element.isCampaignAdded === 1 ? 'Added to Campaign' : 'Add to Campaign';
                        newBookmarkIcon[element.id] =
                            element.isBookmarkAdded === 1 ? (
                                <ArchiveFillSVG customClass="h-8" />
                            ) : (
                                <ArchiveSVG customClass="h-8" />
                            );
                    });
                    setButtonText(newButtonTexts);
                    setBookmarkIcon(newBookmarkIcon);
                    return merged;
                });
                setHasMoreResults(response?.data?.hasMoreResults ?? 0);
                setParams(nextPageParams);
            }
        } catch (err) {
            console.error("Load More failed:", err);
        } finally {
            setIsLoading(false);
        }
    }, [isLoading, isPending, isAiReportGenerating, hasMoreResults, params, campaignId, buttonText, bookmarkIcon]);

    const isLoadingRef = useRef(isLoading);
    const isPendingRef = useRef(isPending);
    const hasMoreResultsRef = useRef(hasMoreResults);
    const loadMoreRefFunc = useRef(loadMore);
    const initialLoadDoneRefVal = useRef(initialLoadDoneRef.current);
    const hasInfluencers = influencerListData.length > 0;
    const hasInfluencersRef = useRef(hasInfluencers);

    useLayoutEffect(() => {
        isLoadingRef.current = isLoading;
    }, [isLoading]);

    useLayoutEffect(() => {
        isPendingRef.current = isPending;
    }, [isPending]);

    useLayoutEffect(() => {
        hasMoreResultsRef.current = hasMoreResults;
    }, [hasMoreResults]);

    useLayoutEffect(() => {
        loadMoreRefFunc.current = loadMore;
    }, [loadMore]);

    useLayoutEffect(() => {
        initialLoadDoneRefVal.current = initialLoadDoneRef.current;
    }, [initialLoadDoneRef.current]);

    useLayoutEffect(() => {
        hasInfluencersRef.current = hasInfluencers;
    }, [hasInfluencers]);

    useEffect(() => {
        if (!firstLoadDone) return;

        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (
                        entry.isIntersecting &&
                        !isLoadingRef.current &&
                        !isPendingRef.current &&
                        hasMoreResultsRef.current === 1 &&
                        initialLoadDoneRefVal.current &&
                        hasInfluencersRef.current
                    ) {
                        setTimeout(() => {
                            if (
                                loadMoreRef.current &&
                                !isLoadingRef.current &&
                                !isPendingRef.current &&
                                hasMoreResultsRef.current === 1 &&
                                initialLoadDoneRefVal.current &&
                                hasInfluencersRef.current
                            ) {
                                const rect = loadMoreRef.current.getBoundingClientRect();
                                const isStillVisible = rect.top < window.innerHeight && rect.bottom >= 0;
                                if (isStillVisible) {
                                    loadMoreRefFunc.current();
                                }
                            }
                        }, 200);
                    }
                });
            },
            {
                root: null,
                rootMargin: '50px',
                threshold: 0.1
            }
        );

        const sentinel = loadMoreRef.current;
        if (sentinel) {
            observer.observe(sentinel);
        }

        return () => {
            if (sentinel) {
                observer.unobserve(sentinel);
            }
        };
    }, [firstLoadDone]);

    useEffect(() => {
        setHasMoreResults(ListData?.hasMoreResults);
    }, [ListData?.hasMoreResults]);

    return (
        <>
            {data?.profile_privacy == 'public' || userDetails?.email == "jeni@yopmail.com" ?
                <>
                    {applicantMode === 'ai' ? (
                        isAiReportGenerating ?
                            <div className='w-full bg-lightPrimary p-10 rounded-lg flex items-center justify-center flex-col gap-4 min-h-[240px]'>
                                <LoaderSVG customClass='!w-8 !h-8 !text-primary' />
                                <span className='text-base font-medium'>{translations?.aiReportGenerating}</span>
                                <span className='text-sm text-gray-500'>{translations?.aiReportGeneratingDescription}</span>
                            </div>
                            :
                            <InfluencerPoolAiReport campaign={data} translations={translations} onRegenerateReport={onRegenerateReport} isRegenerating={isRegenerating} campaignDetailRefetch={campaignDetailRefetch} setRestrictModalOpen={setRestrictModalOpen} aiReportRefreshKey={aiReportRefreshKey} onOpenInfluencer={openInfluencerSidebar} />
                    ) : (
                        <>
                            <div className="mb-4">
                                <SearchInput customInputMainClass="md:w-96" setSearch={setSearch} setParams={setParams} customClass="!bg-white" />
                            </div>
                            <CampaignDetailTabsHeader poolActiveTab={poolActiveTab} setPoolActiveTab={setPoolActiveTab} setListingData={setListingData} listingData={listingData} setPlatforms={setPlatforms} platforms={platforms} activeTab={activeTab} mutate={mutate} setSearch={setSearch} campaignDetailData={data} search={search} filteredValue={filteredValue} setFilteredValue={setFilteredValue} params={params} setParams={setParams} translations={translations} isFromCampaignAd={true} listingCount={influencerListData?.length ?? 0} listSearch={search} onClearSearch={() => setSearch('')} />
                            {isPending ?
                                <div className={`${listingData ? 'grid-cols-1' : '3xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'} grid gap-2.5 mt-4`}>
                                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                                </div>
                                :
                                <>
                                    {(influencerListData?.length > 0) ?
                                        <>
                                            <div className={`${listingData ? 'grid-cols-1' : '3xl:grid-cols-4 2xl:grid-cols-3 md:grid-cols-2 grid-cols-1'} grid gap-2.5 mt-4`}>
                                                {influencerListData?.map((influencer, index) => (
                                                    <div key={influencer?.id ?? index} className='h-full'>
                                                        <InfluencerPoolBox poolActiveTab={poolActiveTab} setOpenSideModal={openInfluencerSidebar} data={influencer} listingData={listingData} index={index} campaignDetailData={data} setButtonText={setButtonText} buttonText={buttonText[influencer.id] || "Add to Campaign"} bookmarkIcon={bookmarkIcon[influencer.id] || <ArchiveSVG customClass="h-8" />} setBookmarkIcon={setBookmarkIcon} campaignId={campaignId} setOpenQuoteSideModal={setOpenQuoteSideModal} linkParams={linkParams} listMutate={mutate} params={params} setParams={setParams} activeTab={activeTab} translations={translations} setRestrictModalOpen={setRestrictModalOpen} />
                                                    </div>
                                                ))}

                                            </div>
                                        </>
                                        :
                                        <>
                                            {!isPending && influencerListData?.length == 0 &&
                                                <div className='w-full bg-lightPrimary p-5 rounded-lg flex items-center justify-center mt-4'>{translations?.noDataFound}</div>
                                            }
                                        </>
                                    }
                                </>
                            }
                        </>
                    )}

                    <div ref={loadMoreRef}>
                        {isLoading && hasMoreResults == 1 && influencerListData.length > 0 && !isPending && !(applicantMode === 'ai' && isAiReportGenerating) && (
                            applicantMode === 'ai' ? (
                                <div className="flex items-center justify-center py-4">
                                    <LoaderSVG customClass='!w-6 !h-6 !text-primary' />
                                </div>
                            ) : (
                                <div className={`${listingData ? 'grid-cols-1' : '3xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1'} grid gap-2.5 mt-4`}>
                                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                                    <InfluencerPoolBoxSkeleton listingData={listingData} />
                                </div>
                            )
                        )}
                    </div>
                    {isComponentVisible && <SidebarModal openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} ref={ref} isComponentVisible={isComponentVisible} setIsComponentVisible={setIsComponentVisible} translations={translations} setPoolActiveTab={setPoolActiveTab} filteredValue={filteredValue} setFilteredValue={setFilteredValue} setRestrictModalOpen={setRestrictModalOpen} campaignDetailData={data} isSeen />}
                    {isQuoteComponentVisible && <CampaignManagementDetail openSideModal={openQuoteSideModal} setOpenSideModal={setOpenQuoteSideModal} ref={ref} isComponentVisible={isComponentVisible} setIsComponentVisible={setIsComponentVisible} campaignDetailRefetch={campaignDetailRefetch} translations={translations} params={params} setRestrictModalOpen={setRestrictModalOpen} />}
                </> :
                <>
                    {switchPublic ? <CampaignForm setSwitchPublic={setSwitchPublic} data={data} campaignDetailRefetch={campaignDetailRefetch} translations={translations} userDetails={userDetails} /> :
                        <div className='h-[calc(100vh-350px)] flex items-center justify-center flex-col gap-7'>
                            <Image src="/assets/images/padlock.svg" width={54} height={54} alt="" />
                            <p className='text-2xl max-w-screen-sm text-center' dangerouslySetInnerHTML={{ __html: translations?.privateCampaignMessage }}></p>
                            <GradientButton customClass='!py-3.5' onClick={() => {
                                if (!data?.is_active) {
                                    setRestrictModalOpen(true);
                                    return
                                }
                                setSwitchPublic(true)
                            }}>{translations?.switchToPublic}</GradientButton>
                        </div>
                    }
                </>
            }
        </>
    )
}

export default InfluencerPoolCampaignAd