import { usePathname, useSearchParams } from 'next/navigation';
import ImageWithFallback from '../ImageWithFallback';
import BookmarkToggle from '../InfluencerBox/BookmarkToggle';
import FavoriteToggle from '../InfluencerBox/FavoriteToggle';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';
import { setInfluencerToCampaign, setIsBookMarkedList, setIsFavoriteList } from '@/lib/Features/UserDetailSidebar/userDetailSidebar';
import { formatNumber } from '@/Utils/Other/FormateNumbers';
import { FaShareAlt } from 'react-icons/fa';
import { CustomToast } from '@/Utils/CustomToast';
import Link from 'next/link';
import PrimaryButton from '../Forms/PrimaryButton';
import BorderButton from '../Forms/BorderButton';
import { CampaignAPI } from '@/Utils/APIRequest/Endpoints';
import usePost from '@/Utils/Hooks/usePost';
import { ImageLoaderSVG } from '../SVGs/AuthSVG';
import { LoaderSVG } from '../SVGs/CommonSVG';

const DetailHeader = (props) => {
    const { UserDetailData, translations, userDetails, isStar = true, openSideModal, setOpenSideModal, setRestrictModalOpen, campaignDetailData } = props;
    const pathName = usePathname()
    const searchParams = useSearchParams();
    const isMyCampaign = pathName.includes('my-campaigns')
    const dispatch = useDispatch();
    const campaignId: any = searchParams.get("id");
    const isBookMarkedList: any = useSelector((state: AppStore) => state.userDetailSidebar.isBookMarkedList);
    const isFavoriteList: any = useSelector((state: AppStore) => state.userDetailSidebar.isFavoriteList);

    const handleCopyLink = () => {
        navigator.clipboard.writeText(`${process.env.WEBSITE_URL}influencers/${UserDetailData?.slug}`);
        CustomToast("info", "Share link copied successfully");
    }

    useEffect(() => {
        // -------------------------------------------------------- For Favorite
        let tempFavList = [...isFavoriteList];
        const influencerId = UserDetailData?.id;
        const favoritesCount = UserDetailData?.favoritesCount;

        if (favoritesCount === 1) {
            if (!tempFavList.includes(influencerId)) {
                tempFavList.push(influencerId);
            }
        } else {
            tempFavList = tempFavList.filter(id => id !== influencerId);
        }

        dispatch(setIsFavoriteList(tempFavList));

        // -------------------------------------------------------- For BookMark
        let tempData: any = new Set([...isBookMarkedList]); // Initialize tempData as a Set to avoid duplicates

        let updated = false; // Flag to track if the list has changed

        if (UserDetailData?.campaignBookmarks?.length > 0) {
            if (!tempData.has(UserDetailData?.campaignBookmarks?.[0]?.id)) {
                UserDetailData?.campaignBookmarks?.[0]?.id && tempData.add(UserDetailData?.campaignBookmarks?.[0]?.id);
                updated = true; // Mark that an update was made
            }
        }
        // Only dispatch the update if there was a change
        if (updated) {
            dispatch(setIsBookMarkedList([...tempData]));
        }
    }, [UserDetailData]);

    const handleAddToCampaign = () => {
        if (!campaignDetailData?.is_active) {
            setRestrictModalOpen(true)
            return
        }
        let arr: any = []
        arr.push(UserDetailData?.id);
        let obj: any = {
            campaign_id: campaignId,
            influencer_id: arr,
        }
        mutate(obj);
    };

    const { isPending, mutate } = usePost(`${CampaignAPI}/add-influencer`, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
            dispatch(setInfluencerToCampaign({ influencerId: UserDetailData?.id, isAddedToCampaign: openSideModal?.isCampaignAdded == 1 ? 0 : 1 }));
            setOpenSideModal({ ...openSideModal, isCampaignAdded: 1 });
        }
    }, null);

    return (
        <div className='md:py-10 py-5 px-5 bg-gradient-to-br from-secondary to-primary flex md:items-center justify-between max-md:flex-col max-md:gap-5'>
            <div className='flex items-center gap-5 text-white flex-1'>
                <div className='min-w-[70px] w-[70px] h-[70px] rounded-full overflow-hidden bg-gray'>
                    <ImageWithFallback src={UserDetailData?.image} alt='Profile' className='w-full h-full object-cover' height={70} width={70} />
                </div>
                <div className='flex flex-col gap-1.5'>
                    <h5 className='font-semibold lg:text-2xl text-xl leading-7 text-white'>{UserDetailData?.display_name}</h5>
                    {UserDetailData?.country && <span className='lg:text-xl md:text-lg text-base leading-6 text-white'>{UserDetailData?.country}</span>}
                </div>
            </div>
            <div className='flex items-center lg:gap-16 gap-8 text-white md:justify-end justify-between'>
                <div className='flex flex-col gap-0.5'>
                    <h6 className='font-semibold md:text-lg leading-5 text-white'>{UserDetailData?.total_followers ? formatNumber(UserDetailData?.total_followers) : '-'}</h6>
                    <span className='md:text-sm text-sx text-white'>{translations?.totalFollowers}</span>
                </div>
                {!pathName?.includes('profile') &&
                    <div className='flex flex-col gap-0.5'>
                        <h6 className='font-semibold md:text-lg leading-5 text-white'>{UserDetailData?.engagement_ratio === '0.00' ? '--' : Number(UserDetailData?.engagement_ratio).toFixed(1)}%</h6>
                        <span className='md:text-sm text-sx text-white'>{translations?.engagementRate}</span>
                    </div>}
                <div className='flex flex-col gap-2 items-end'>
                    {!pathName?.includes('profile') &&
                        <div className='flex items-center gap-2'>
                            {(isStar && userDetails?.role !== 'admin') &&
                                <>
                                    {isMyCampaign ?
                                        <div className='flex gap-2 items-center'>
                                            <FavoriteToggle data={UserDetailData} />
                                            |
                                            <BookmarkToggle data={UserDetailData} bookmarkId={UserDetailData?.campaignBookmarks?.[0]?.id} />
                                        </div>
                                        :
                                        <FavoriteToggle data={UserDetailData} />
                                    }
                                </>
                            }
                            <span onClick={handleCopyLink} className='cursor-pointer'>
                                <FaShareAlt className='text-lg' />
                            </span>
                        </div>
                    }
                    {pathName?.includes('my-campaigns') &&
                        <BorderButton customClass={`!border-white flex items-center gap-1.5 justify-center !py-1 !rounded-md`} disabled={isPending || openSideModal?.isCampaignAdded == 1 || UserDetailData?.isCampaignAdded == 1} onClick={handleAddToCampaign}>
                            {openSideModal?.isCampaignAdded == 1 || UserDetailData?.isCampaignAdded == 1 ? translations?.addedToCampaign : translations?.addToCampaign}
                            {isPending && <LoaderSVG />}
                        </BorderButton>}
                </div>

                {pathName?.includes('profile') && <Link href={`/${userDetails?.role}/profile/profile-settings`} className="flex items-center border border-transparent rounded-xl py-3.5 px-8 text-base font-medium focus-visible:outline-none text-white bg-black text-center justify-center">{translations?.updateProfile}</Link>}
            </div>
        </div>
    )
}

export default DetailHeader