import { formatNumber } from '@/Utils/Other/FormateNumbers';
import { useEffect, useState } from 'react'
import { FacebookSVG, InstagramSVG, TiktokSVG, XiaohongshuSVG } from '../SVGs/CommonSVG';
import { YoutubeSVG } from '../SVGs/AuthSVG';
import Link from 'next/link';

const DetailTabs = (props) => {
    const { UserDetailData, setSocialMediaType, socialMediaType, setPostId, translations, fromCampaign = false } = props;
    const [instagramData, setInstagramData] = useState<any>({});
    const [facebookData, setFacebookData] = useState<any>([]);
    const [youtubeData, setYoutubeData] = useState<any>({});
    const [tiktokData, setTiktokData] = useState<any>({});
    const [xiaohongshuData, setXiaohongshuData] = useState<any>({});
    const [averageViews, setAverageViews] = useState(0);

    useEffect(() => {
        setSocialMediaType(UserDetailData?.social_medias?.[0]?.social_type);
        if (UserDetailData?.social_medias?.[0]?.social_type === 'instagram') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'instagram');
            setAverageViews(data?.reel_average);
            data?.instagramProfiles?.map((profile) => {
                setPostId(profile?.id);
                setInstagramData(profile);
            })
        }
        if (UserDetailData?.social_medias?.[0]?.social_type === 'facebook') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'facebook');
            setFacebookData(data?.facebookPages);
            setPostId(data?.facebookPages?.[0]?.id);
        }
        if (UserDetailData?.social_medias?.[0]?.social_type === 'youtube') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'youtube');
            data?.youtubeChannels?.map((profile) => {
                setPostId(profile?.id);
                setYoutubeData(profile);
            })
        }
        if (UserDetailData?.social_medias?.[0]?.social_type === 'tiktok') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'tiktok');
            data?.tikTokProfiles?.map((profile) => {
                setPostId(profile?.id);
                setTiktokData(profile);
            })
        }
        if (UserDetailData?.social_medias?.[0]?.social_type === 'xiaohongshu') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'xiaohongshu');
            data?.xiaohongshuProfiles?.map((profile) => {
                setPostId(profile?.id);
                setXiaohongshuData(profile);
            })
        }

    }, [UserDetailData]);

    const socialIcons = {
        instagram: <InstagramSVG />,
        facebook: <FacebookSVG />,
        youtube: <YoutubeSVG />,
        tiktok: <TiktokSVG />,
        xiaohongshu: <XiaohongshuSVG />
    };

    const handleTabSwitch = (socialType) => {
        setSocialMediaType(socialType);
        if (socialType === 'instagram') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'instagram');
            setAverageViews(data?.reel_average);
            data?.instagramProfiles?.map((profile) => {
                setPostId(profile?.id);
                setInstagramData(profile);
            })
        }
        if (socialType === 'facebook') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'facebook');
            setFacebookData(data?.facebookPages);
            setPostId(data?.facebookPages?.[0]?.id);
        }
        if (socialType === 'youtube') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'youtube');
            data?.youtubeChannels?.map((profile) => {
                setPostId(profile?.id);
                setYoutubeData(profile);
            })
        }
        if (socialType === 'tiktok') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'tiktok');
            data?.tikTokProfiles?.map((profile) => {
                setPostId(profile?.id);
                setTiktokData(profile);
            })
        }
        if (socialType === 'xiaohongshu') {
            let data = UserDetailData?.social_medias?.find(media => media.social_type === 'xiaohongshu');
            data?.xiaohongshuProfiles?.map((profile) => {
                setPostId(profile?.id);
                setXiaohongshuData(profile);
            })
        }
    };

    return (
        <div className='flex flex-col gap-6'>
            <div className='flex items-center'>
                {
                    UserDetailData?.social_medias?.map((media, index) => {
                        return (
                            <div onClick={() => { handleTabSwitch(media.social_type) }} className={`${socialMediaType == media.social_type ? 'border-primary text-primary font-bold' : 'text-black border-transparent font-medium'} sm:text-sm text-xs cursor-pointer capitalize py-1.5 mr-5 text-lg border-b-2 flex items-center gap-1`} key={index}>
                                {socialIcons[media.social_type]} {media?.social_type}
                            </div>
                        )
                    })
                }
            </div>

            <div className={`${!fromCampaign ? 'max-h-80 overflow-y-auto ' : ''} h-full flex flex-col gap-6 [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray/10 [&::-webkit-scrollbar-thumb]:bg-gray/50 pr-1`}>
                {
                    socialMediaType === 'instagram' &&
                    <div className={`grid ${averageViews > 0 ? 'lg:grid-cols-4' : 'lg:grid-cols-3'}  grid-cols-2 gap-5 bg-lightGray/50 rounded-xl p-5`}>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold break-all text-sm '><Link href={instagramData?.url} target="_blank" rel="noopener noreferrer" className='hover:text-primary'>{instagramData?.user_name}</Link></label>
                            <span className='text-xs'>{translations?.instagramlabel1}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{formatNumber(instagramData?.followers_count)}</label>
                            <span className='text-xs'>{translations?.instagramlabel2}</span>
                        </div>
                        {averageViews > 0 &&
                            <div className='flex flex-col gap-0.5'>
                                <label className='font-bold text-sm'>{formatNumber(Math.round(averageViews))}</label>
                                <span className='text-xs'>Reels Average Views</span>
                            </div>
                        }
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{formatNumber(instagramData?.media_count)}</label>
                            <span className='text-xs'>{translations?.instagramlabel4}</span>
                        </div>
                    </div>
                }
                {
                    socialMediaType === 'facebook' &&
                    <>
                        {
                            facebookData?.map((data, index) => (
                                <div key={index} className='grid lg:grid-cols-4 grid-cols-2 gap-5 bg-lightGray/50 rounded-xl p-5 hover:bg-primary/10 cursor-pointer' onClick={() => { setPostId(data?.id) }}>
                                    <div className='flex flex-col gap-0.5'>
                                        <label className='font-bold text-sm break-words cursor-pointer '><Link href={data?.url} target="_blank" rel="noopener noreferrer" className='hover:text-primary'>{data?.name}</Link></label>
                                        <span className='text-xs'>{translations?.facebooklabel1}</span>
                                    </div>
                                    <div className='flex flex-col gap-0.5'>
                                        <label className='font-bold text-sm cursor-pointer '>{formatNumber(data?.followers_count)}</label>
                                        <span className='text-xs'>{translations?.facebooklabel2}</span>
                                    </div>
                                    <div className='flex flex-col text-sm gap-0.5'>
                                        <label className='font-bold text-sm cursor-pointer '>{formatNumber(data?.fan_count)}</label>
                                        <span className='text-xs'>{translations?.facebooklabel3}</span>
                                    </div>
                                    <div className='flex flex-col gap-0.5'>
                                        <label className='font-bold text-sm cursor-pointer break-words '>{data?.category}</label>
                                        <span className='text-xs'>{translations?.facebooklabel4}</span>
                                    </div>
                                </div>
                            ))}
                    </>
                }
                {
                    socialMediaType === 'youtube' &&
                    <div className='grid lg:grid-cols-4 grid-cols-2 gap-5 bg-lightGray/50 rounded-xl p-5'>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm break-all'><Link href={youtubeData?.url} target="_blank" rel="noopener noreferrer" className='hover:text-primary'>{youtubeData?.channel_name}</Link></label>
                            <span className='text-xs'>{translations?.youtubelabel1}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{formatNumber(youtubeData?.subscriber_count)}</label>
                            <span className='text-xs'>{translations?.youtubelabel2}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{formatNumber(youtubeData?.video_count)}</label>
                            <span className='text-xs'>{translations?.youtubelabel3}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{formatNumber(youtubeData?.view_counts)}</label>
                            <span className='text-xs'>{translations?.youtubelabel4}</span>
                        </div>
                    </div>
                }
                {
                    socialMediaType === 'tiktok' &&
                    <div className='grid lg:grid-cols-4 grid-cols-2 gap-5 bg-lightGray/50 rounded-xl p-5'>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold break-all'><Link href={tiktokData?.url} target="_blank" rel="noopener noreferrer" className='hover:text-primary'>{tiktokData?.username}</Link></label>
                            <span className='text-xs'>{translations?.tiktoklabel1}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{formatNumber(tiktokData?.follower_count)}</label>
                            <span className='text-xs'>{translations?.tiktoklabel2}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{formatNumber(tiktokData?.following_count)}</label>
                            <span className='text-xs'>{translations?.tiktoklabel3}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{formatNumber(tiktokData?.video_count)}</label>
                            <span className='text-xs'>{translations?.tiktoklabel4}</span>
                        </div>
                    </div>
                }
                {
                    socialMediaType === 'xiaohongshu' &&
                    <div className='grid lg:grid-cols-4 grid-cols-2 gap-5 bg-lightGray/50 rounded-xl p-5'>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm break-all'>{xiaohongshuData?.user_name}</label>
                            <span className='text-xs'>{translations?.tiktoklabel1}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{xiaohongshuData?.follower_count}</label>
                            <span className='text-xs'>{translations?.tiktoklabel2}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm '>{xiaohongshuData?.following_count}</label>
                            <span className='text-xs'>{translations?.tiktoklabel3}</span>
                        </div>
                        <div className='flex flex-col gap-0.5'>
                            <label className='font-bold text-sm'>{xiaohongshuData?.post_count}</label>
                            <span className='text-xs'>{translations?.instagramlabel4}</span>
                        </div>
                    </div>
                }
            </div>
        </div>
    )
}

export default DetailTabs