'use client'
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Form, Formik } from 'formik';
import { useQuery } from '@tanstack/react-query';
import * as Yup from 'yup';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import { LoaderSVG } from '@/Component/Common/SVGs/CommonSVG';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AdminBrandUserEditAPI, AdminInfluencerUserEditAPI, AdminUserListAPI, CategoryAPI, CategoryKeywordAPI, CountriesAPI, GeneralSettingsAPI, KeywordAPI } from '@/Utils/APIRequest/Endpoints';
import { CustomToast } from '@/Utils/CustomToast';
import usePost from '@/Utils/Hooks/usePost';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import { PhoneNumberSchemaRequired, RequiredField, YupObject } from '@/Utils/ValidationSchema';
import { useLoading } from '@/Utils/Hooks/useLoading';
import AdminUserEditForm from './AdminUserEditForm';
import SkeletonLoader from '@/Layout/SkeletonLoader';
import SocialMediaAccount from './SocialMediaAccounts';
import { useDispatch } from 'react-redux';
import { getInfluencerDetails, setLoading } from '@/lib/Features/InfluencerDataSlice/influencerDataSlice';

const AdminUserEdit = (props) => {
    const { userSlug } = props;
    const router = useRouter();
    const { translations, locale } = useTranslation();
    const { skeletonLoading, startSkeletonLoading, stopSkeletonLoading } = useLoading();
    const [params, setParams] = useState({ page: 1, per_page: 150 });
    const [showSocialMedia, setShowSocialMedia] = useState({ instagram: false, facebook: false, youtube: false, tiktok: false });
    const [currentKeyword, setCurrentKeyword] = useState("");
    const [existingKeywords, setExistingKeywords] = useState<any>([]);
    const dispatch = useDispatch();

    // Get UserDetails API
    const { data: UserDetailData, isPending: DetailLoader, refetch } = useQuery({ queryKey: [AdminUserListAPI, userSlug], queryFn: () => CustomFetch({ url: `${AdminUserListAPI}/${userSlug}` }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    // Get Category API
    const { data: CategoryData, refetch: refetchCategory } = useQuery({ queryKey: [CategoryAPI, params, locale], queryFn: () => CustomFetch({ url: CategoryAPI, params: { ...params, } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data });

    // const { data: KeywordData, isPending: KeywordLoader } = useQuery({ queryKey: [KeywordAPI, params], queryFn: () => CustomFetch({ url: KeywordAPI, params: { ...params, } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data });

    const { data: KeywordData } = useQuery({ queryKey: [CategoryKeywordAPI, locale], queryFn: () => CustomFetch({ url: CategoryKeywordAPI }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data });

    const APIUrl = UserDetailData?.role == "brand" ? `${AdminBrandUserEditAPI}/${userSlug}` : `${AdminInfluencerUserEditAPI}/${userSlug}`

    // Put API
    const { isPending, mutate } = usePost(APIUrl, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
            CustomToast("success", `${UserDetailData?.role == "brand" ? "Brand" : "Influencer"} updated successfully`);
            refetch();
            if (UserDetailData?.role == "brand") {
                router.push(`/admin/brands/`);
            } else {
                router.push(`/admin/influencers/`);
            }
        }
    }, "Put");

    // Get Country API
    const { data: CountryData, isPending: CountryPending } = useQuery({ queryKey: [CountriesAPI], queryFn: () => CustomFetch({ url: `${CountriesAPI}?search=` }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    const CountryList = CountryData?.map((country) => ({
        label: country?.country_name,
        value: country?.two_digit_code
    }));

    const categoryKeywordMap =
        KeywordData?.categories
            ? Object.entries(KeywordData?.categories).reduce(
                (acc: any, [categoryName, keywords]) => {
                    acc[categoryName] = (Array.isArray(keywords) ? keywords : []).map(k => ({
                        label: k.keyword,
                        value: k.id
                    }));
                    return acc;
                },
                {}
            )
            : {};

    // Settings API
    const { data: SettingsData } = useQuery({ queryKey: [GeneralSettingsAPI], queryFn: () => CustomFetch({ url: GeneralSettingsAPI }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    const minIndustrySelection = parseInt(SettingsData?.find(setting => setting.type === 'industry_min')?.value);
    const maxIndustrySelection = parseInt(SettingsData?.find(setting => setting.type === 'industry_max')?.value);
    const minCategorySelection = parseInt(SettingsData?.find(setting => setting.type === 'category_min')?.value);
    const maxCategorySelection = parseInt(SettingsData?.find(setting => setting.type === 'category_max')?.value);

    // const categoryOptions = CategoryData?.data?.map((category) => ({
    //     label: category.title,
    //     value: category.id,
    // }));

    const categoryOptions = CategoryData?.data
        ?.filter(category => category != null && !category.is_hidden && category?.is_active)
        ?.map(category => ({
            label: category.translations?.[0]?.title,
            value: category.id,
        })) ?? [];

    const keywordOptions = KeywordData?.data?.map((keyword) => ({
        label: keyword?.translations?.[0]?.keyword,
        value: keyword?.id,
    }));


    const initialIndustries = UserDetailData?.role === 'brand' ?
        UserDetailData?.brandIndustries
            ?.filter(industry => industry?.category)
            ?.map(industry => ({
                label: industry?.category?.translations?.[0]?.title,
                value: industry?.category?.id
            }))
        : [];

    const initialCategories = UserDetailData?.role === 'influencer' ?
        UserDetailData?.influencerCategories
            ?.filter(category => category?.category != null)
            ?.map(category => ({
                label: category?.category?.translations?.[0]?.title,
                value: category?.category?.id
            }))
        : [];

    const initialKeywords = UserDetailData?.role === 'influencer' ?
        UserDetailData?.userKeywords?.map((keywordObj: any) => ({
            label: keywordObj?.keywords?.translations?.[0]?.keyword,
            value: keywordObj?.keywords?.id
        })) : [];

    useEffect(() => {
        startSkeletonLoading();
        if (UserDetailData) {
            stopSkeletonLoading();
            let userWords = UserDetailData?.userKeywords;
            let existingWords = userWords?.map((keywordObj) => keywordObj?.keywords?.translations?.[0]?.keyword)
            setExistingKeywords(existingWords);

        }
    }, [UserDetailData]);

    const handlePhoneChange = (value, country, setFieldValue) => {
        setFieldValue("country_code", `+${country.dialCode}`)
    }

    useEffect(() => {
        if (isPending) {
            dispatch(setLoading(true));
        } else {
            dispatch(getInfluencerDetails(UserDetailData));
            dispatch(setLoading(false));
        }
    }, [UserDetailData, isPending]);

    const loadKeywordOptions = async (inputValue: string) => {
        if (!inputValue) return [];

        const res = await CustomFetch({
            url: KeywordAPI,
            params: {
                search: inputValue,
                page: 1,
                per_page: 20
            }
        }, null, false);

        return res?.data?.data?.map(keyword => ({
            label: keyword?.translations?.[0]?.keyword,
            value: keyword?.id
        }));
    };

    const loadCategoryOptions = async (inputValue: string) => {
        if (!inputValue) return [];

        const res = await CustomFetch({
            url: CategoryAPI,
            params: { search: inputValue, page: 1, per_page: 50 }
        }, null, false);

        return res?.data?.data?.map(category => ({
            label: category?.translations?.[0]?.title,
            value: category?.id
        }));
    };


    return (
        <>
            <Formik
                enableReinitialize
                initialValues={{
                    first_name: UserDetailData?.first_name,
                    last_name: UserDetailData?.last_name,
                    display_name: UserDetailData?.display_name,
                    country_code: UserDetailData?.country_code ? UserDetailData?.country_code : '+852',
                    email: UserDetailData?.email,
                    phone_number: UserDetailData?.phone_number,
                    company_name: UserDetailData?.company_name,
                    working_people: UserDetailData?.working_people,
                    business_type: UserDetailData?.business_type,
                    currency: UserDetailData?.currency ?? "USD",
                    industries: initialIndustries,
                    category_ids: initialCategories,
                    keywords: initialKeywords ?? [],
                    country: CountryList?.find(country => country.value === UserDetailData?.country) ?
                        [CountryList.find(country => country.value === UserDetailData?.country)] : [],
                    gender: UserDetailData?.gender ?? "",
                    offline_payment_allowed: UserDetailData?.offline_payment_allowed ?? "no",
                    is_updated_by_cron: UserDetailData?.is_updated_by_cron ?? true
                }}
                validationSchema={
                    YupObject({
                        first_name: RequiredField(translations?.firstNameRequired),
                        // last_name: RequiredField(translations?.lastNameRequired),
                        display_name: UserDetailData?.role == 'influencer' ? RequiredField(translations?.displayNameRequired) : null,
                        country_code: RequiredField("Country code is required"),
                        currency: RequiredField("Currency is required"),
                        phone_number: PhoneNumberSchemaRequired(translations),
                        company_name: UserDetailData?.role == 'brand' ? RequiredField(translations?.companyNameRequired) : null,
                        country: Yup.array().required('Country is required'),
                        // gender: RequiredField('Gender is required'),
                        category_ids: UserDetailData?.role == 'influencer' ? Yup.array()
                            .min(minCategorySelection, `Select at least ${minCategorySelection} categories`)
                            .max(maxCategorySelection, `You can select up to ${maxCategorySelection} categories`)
                            .nullable() : null,
                        industries: UserDetailData?.role == 'brand' ? Yup.array()
                            .min(minIndustrySelection, `Select at least ${minIndustrySelection} industries`)
                            .max(maxIndustrySelection, `You can select up to ${maxIndustrySelection} industries`)
                            .nullable() : null
                    })
                }
                onSubmit={(values) => {
                    // console.log("Submitted Values:", values); return;

                    const preparedValues: any = { ...values };
                    delete preparedValues.email;
                    preparedValues.country = values.country?.[0]?.value ?? "";
                    let newKeywords;
                    let removedKeywords;
                    if (UserDetailData?.role === 'brand') {
                        preparedValues.industries = preparedValues.industries.map(industry => industry.value);
                        delete preparedValues.category_ids;
                        delete preparedValues.display_name;
                    }
                    if (UserDetailData?.role === 'influencer') {
                        // newKeywords = values.keywords.filter((keyword) => !existingKeywords.includes(keyword));
                        // removedKeywords = existingKeywords.filter((keyword) => !values.keywords.includes(keyword));
                        preparedValues.category_ids = preparedValues.category_ids.map(category => category.value);
                        preparedValues.keywords = preparedValues.keywords.map(keywordObj => keywordObj?.label);
                        delete preparedValues.company_name;
                        delete preparedValues.industries;
                        delete preparedValues.working_people;
                        delete preparedValues.business_type;
                    }

                    mutate({ ...preparedValues });
                }}
            >
                {({ values, errors, touched, setFieldValue }) => {

                    const selectedCategoryLabels =
                        values.category_ids?.map((c: any) => c.label) || [];

                    const matchedKeywords = selectedCategoryLabels.flatMap(
                        label => categoryKeywordMap[label] || []
                    );

                    const mergedKeywordOptions = [
                        ...matchedKeywords,
                        ...(values.keywords || [])
                    ].filter(
                        (v, i, arr) =>
                            arr.findIndex(o => o.value === v.value) === i
                    );

                    useEffect(() => {
                        const allowedKeywordIds = matchedKeywords.map(k => k.value);

                        const filteredSelectedKeywords =
                            values.keywords?.filter(k =>
                                allowedKeywordIds.includes(k.value)
                            ) || [];

                        if (filteredSelectedKeywords.length !== values.keywords?.length) {
                            setFieldValue('keywords', filteredSelectedKeywords);
                        }
                    }, [values.category_ids]);

                    return (
                        <Form className='flex-1' >
                            <div className='flex items-center justify-between pb-4 border-b border-lightGray mb-8'>
                                {skeletonLoading ? <SkeletonLoader height={36} rows={1} width="200" /> : <h1 className='lg:text-3xl md:text-2xl text-xl font-bold'>Edit {UserDetailData?.role == 'brand' ? 'Brand' : 'Influencer'}</h1>}
                                <PrimaryButton buttonType="submit" customClass='bg-primary !px-10 flex items-center gap-2' skeletonLoading={skeletonLoading} disabled={isPending}>
                                    Save
                                    {isPending && <LoaderSVG />}
                                </PrimaryButton>
                            </div>
                            <AdminUserEditForm translations={translations} skeletonLoading={skeletonLoading} setFieldValue={setFieldValue} values={values} handlePhoneChange={handlePhoneChange} UserDetailData={UserDetailData} categoryOptions={categoryOptions} errors={errors} currentKeyword={currentKeyword} setCurrentKeyword={setCurrentKeyword} CountryList={CountryList} keywordOptions={mergedKeywordOptions} loadKeywordOptions={loadKeywordOptions} loadCategoryOptions={loadCategoryOptions} />
                        </Form>
                    )
                }}
            </Formik >
            {(UserDetailData?.role == "influencer" && UserDetailData?.social_medias?.length > 0) &&
                <div className='mt-10'>
                    <SocialMediaAccount refetch={refetch} userDetails={UserDetailData} />
                </div>
            }
        </>
    )
}

export default AdminUserEdit