import React, { useEffect, useState } from 'react'
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { InfluencerListAPI } from '@/Utils/APIRequest/Endpoints';
import { useQuery } from '@tanstack/react-query';
import CampaignBoxSkeleton from '../../InfluencerDashboard/CampaignBoxSkeleton';
import TrendingInfluencerBox from './TrendingInfluencerBox';
import SectionHeader from '../../SectionHeader';
import SidebarModal from '@/Component/Brand/BrowseInfluencer/SidebarModal';
import { useDispatch, useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';
import { setIsFavoriteList } from '@/lib/Features/UserDetailSidebar/userDetailSidebar';
import useOutsideDropdown from '@/Utils/Hooks/useOutsideDropdown';

const TrendingInfluencer = (props) => {
    const { userDetails, translations } = props;
    const dispatch = useDispatch()
    const isFavoriteList: any = useSelector((state: AppStore) => state.userDetailSidebar.isFavoriteList);
    const [categories, setCategories] = useState<any>([]);
    const [activeCategory, setActiveCategory] = useState<any>(null);
    const [favoriteList, setFavoriteList] = useState<any>([])
    const [openSideModal, setOpenSideModal] = useState(null)

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

    // API GET
    const { data, isPending, fetchStatus } = useQuery({ queryKey: [InfluencerListAPI], queryFn: () => CustomFetch({ url: InfluencerListAPI }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data })

    useEffect(() => {
        if (data?.length > 0) {
            const validCategories = data?.filter(c => c?.category?.translations?.[0]?.slug && c?.category?.translations?.[0]?.title);
            if (validCategories?.length > 0) {
                setCategories(validCategories);
                setActiveCategory(validCategories[0].category.translations?.[0]?.slug);
            }

            let tempFavList = [...isFavoriteList]; // Get the existing Redux state for favorite list

            data.forEach((list) => {
                list?.category?.influencerCategories1?.forEach((influencer) => {
                    const influencerId = influencer?.id;
                    const favoritesCount = influencer?.favoritesCount;

                    if (favoritesCount === 1) {
                        // Add influencer ID if not already in the list
                        if (!tempFavList.includes(influencerId)) {
                            tempFavList.push(influencerId);
                        }
                    } else {
                        // Remove influencer ID if favoritesCount is 0
                        tempFavList = tempFavList.filter(id => id !== influencerId);
                    }
                });
            });

            // Dispatch the updated favorite list to Redux store
            dispatch(setIsFavoriteList(tempFavList));
        }
    }, [data]);

    const selectedCategory = categories.find((cat) => cat?.category?.translations?.[0]?.slug === activeCategory);
    return (
        <>
            {fetchStatus == 'fetching' ?
                <>
                    <div className="flex items-center justify-between mb-5">
                        <div className="flex flex-col gap-2">
                            <span className="h-3 w-16 bg-neutral-200 animate-pulse rounded"></span>
                            <span className="h-7 w-44 bg-neutral-200 animate-pulse rounded"></span>
                        </div>
                        <span className="h-9 w-24 bg-neutral-200 animate-pulse rounded-full"></span>
                    </div>
                    <div className='grid 2xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4'>
                        <CampaignBoxSkeleton />
                        <CampaignBoxSkeleton />
                        <CampaignBoxSkeleton />
                    </div>
                </> :
                <>
                    <SectionHeader
                        kicker={'🔥 ' + (translations?.trending || 'Trending')}
                        title={translations?.trendingInfluencer}
                        actionLabel={translations?.viewAll}
                        actionHref="/brand/browse-influencer"
                    />
                    {data?.length > 0 ?
                        <>
                            <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide pb-1 mb-4">
                                {categories
                                    ?.filter((category: any) => category?.category && category?.category?.translations?.[0]?.slug && category?.category?.translations?.[0]?.title)
                                    ?.map((category: any) => {
                                        const isActive = activeCategory === category?.category?.translations?.[0]?.slug
                                        return (
                                            <button
                                                key={category.id}
                                                onClick={() => setActiveCategory(category?.category?.translations?.[0]?.slug)}
                                                className={`rounded-full px-4 h-9 inline-flex items-center 2xl:text-sm text-xs font-semibold transition-all whitespace-nowrap ${isActive ? 'bg-gradient-to-br from-primary to-accent text-white shadow-float' : 'bg-white border border-neutral-200 text-neutral-700 hover:border-primary/40 hover:text-primaryDark'}`}
                                            >
                                                {category?.category?.translations?.[0]?.title}
                                            </button>
                                        )
                                    })}
                            </div>
                            {selectedCategory?.category?.influencerCategories1?.length > 0 ?
                                <div className='grid 2xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-4 stagger-children'>
                                    {selectedCategory?.category?.influencerCategories1?.slice(0, 9).map((categoryUser, index) => (
                                        <TrendingInfluencerBox key={index} data={categoryUser} userDetails={userDetails} setOpenSideModal={setOpenSideModal} favoriteList={favoriteList} setFavoriteList={setFavoriteList} translations={translations} />
                                    ))}
                                </div> :
                                <div className='w-full bg-white border border-neutral-100 shadow-soft p-8 rounded-card flex items-center justify-center flex-col gap-3'>
                                    <div className="h-12 w-12 rounded-2xl bg-brand-gradient-soft text-primary flex items-center justify-center text-xl">🔍</div>
                                    <span className='text-base font-medium text-neutral-500'>{translations?.noDataFound}</span>
                                </div>
                            }
                        </>
                        :
                        !isPending &&
                        <div className='w-full bg-white border border-neutral-100 shadow-soft p-8 rounded-card flex items-center justify-center flex-col gap-3'>
                            <div className="h-12 w-12 rounded-2xl bg-brand-gradient-soft text-primary flex items-center justify-center text-xl">🔍</div>
                            <span className='text-base font-medium text-neutral-500'>{translations?.noDataFound}</span>
                        </div>
                    }
                </>
            }
            {isComponentVisible && <SidebarModal openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} ref={ref} isComponentVisible={isComponentVisible} setIsComponentVisible={setIsComponentVisible} translations={translations} />}
        </>
    )
}

export default TrendingInfluencer