import { useCallback, useState } from 'react';
import Image from 'next/image';
import axios from 'axios';
import { LoginSocialFacebook } from 'reactjs-social-login';
import Loader from '@/Layout/Loader';
import { FACEBOOK_CLIENT_ID, REDIRECT_URL } from '@/Utils/Other/Constant';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { PlatformSettingsAPI } from '@/Utils/APIRequest/Endpoints';
import { CustomToast } from '@/Utils/CustomToast';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import EligibilityLoader from '@/Component/Auth/Register/InfluencersSteps/LinkedAccounts/EligibilityLoader';
import markImage from '@/assets/images/mark.png';

const FacebookTab = (props) => {
    const { translations, selectedSocialId, LinkMutate} = props
    const [loader, setLoader] = useState(false);
    const [eligibilityLoader, setEligibilityLoader] = useState(false);

    const LoginWithFacebook = async (provider, data) => {
        try {
            const result = await CustomFetch({ url: PlatformSettingsAPI }, null, false)

            if (result?.data?.data) {
                const facebookMin = parseInt(result?.data?.data?.find(setting => setting.type === 'facebook_followers_count')?.value);

                if (data.accessToken) {

                    setEligibilityLoader(true);
                    const stateResponse: any = await axios.post('/api/facebook-stats', {
                        accessToken: data.accessToken
                    });
                    const stateResponseData = stateResponse?.data?.data;
                    if (stateResponseData?.accounts) {
                        let isEligibility = false;
                        for (let item of stateResponseData.accounts.data) {
                            const followersCount = parseInt(item?.followers_count);
                            if (followersCount >= facebookMin) {
                                isEligibility = true
                            }
                        }
                        if (isEligibility) {
                            setEligibilityLoader(false);
                            const response: any = await axios.post('/api/facebook-exchange-code', {
                                accessToken: data.accessToken
                            });

                            const longLivedToken = response?.data?.data?.access_token;
                            if (longLivedToken) {
                                const obj: any = {
                                    id: selectedSocialId,
                                    social_id: data?.id,
                                    social_media_type: 'facebook',
                                    social_user_name: data?.email,
                                    access_token: data.accessToken,
                                    refresh_token: longLivedToken
                                };
                                LinkMutate(obj)
                            }
                        } else {
                            setEligibilityLoader(false);
                            CustomToast('error', `Your account does not meet the required criteria. Please try with a different account.`);
                        }
                        setLoader(false);
                    }

                    if (!stateResponseData?.accounts) {
                        setEligibilityLoader(false);
                        setLoader(false);
                        CustomToast('error', `Your Facebook account doesn’t manage any Pages. A managed Page (not a personal profile) is required.`);
                    }
                }
            }
        } catch (error) {
            console.error('Error during Facebook login:', error);
            CustomToast('error', 'Error during Facebook login');
            setLoader(false);
            setEligibilityLoader(false);
        }
    };
    const onLoginStart = useCallback(() => {
        setLoader(true)
    }, []);

    const onLogoutSuccess = useCallback(() => {

    }, []);

    const onLoginFailure = useCallback((err) => {
        setLoader(false);
    }, [])

    return (
        <>
            {loader && <Loader />}
            {eligibilityLoader && <EligibilityLoader />}
            <div className="min-h-[calc(100vh-220px)] flex items-center justify-center flex-col">
                <Image src={markImage} alt="Logo" width={512} height={512} className="w-12 h-12" />
                <p className='text-xl font-bold mt-5 max-w-sm text-center'>
                    {translations?.yourFacebookSessionHasExpired}<br /> {translations?.pleaseLogInAgainToContinue}<br /> {translations?.usingYourAccount}.</p>
                <LoginSocialFacebook
                    appId={FACEBOOK_CLIENT_ID}
                    fieldsProfile={'id,first_name,last_name,middle_name,name,name_format,picture,short_name,email,gender'}
                    onLoginStart={onLoginStart}
                    onLogoutSuccess={onLogoutSuccess}
                    redirect_uri={REDIRECT_URL}
                    scope='email,pages_show_list,public_profile'
                    onResolve={({ provider, data }: any) => LoginWithFacebook(provider, data)}
                    onReject={err => { onLoginFailure(err); }}
                >
                    <PrimaryButton customClass='!bg-green-500 !border-green-500 !rounded-md max-w-[150px] w-full mt-5'>
                        {translations?.loginNowNow}
                    </PrimaryButton>
                </LoginSocialFacebook>
            </div>
        </>
    );
}

export default FacebookTab;