'use client'
import * as Yup from 'yup';
import { Form, Formik } from "formik";
import { useDispatch, useSelector } from "react-redux";
import { AppStore } from "@/lib/store";
import { PhoneNumberSchemaRequired, RequiredField, RequiredWithOnlyAlphabetField, YupObject } from "@/Utils/ValidationSchema";
import { AdminBrandUserEditAPI, AdminInfluencerUserEditAPI, AdminUserEditAPI, CategoryAPI, CategoryKeywordAPI, CommonUploadAPI, CountriesAPI, GeneralSettingsAPI, KeywordAPI, SelfAPI } from "@/Utils/APIRequest/Endpoints";
import usePost from "@/Utils/Hooks/usePost";
import { CustomToast } from "@/Utils/CustomToast";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "@/Utils/Hooks/useTranslate";
import AdminUserEditForm from "@/Component/Common/AdminUserEdit/AdminUserEditForm";
import GradientButton from '@/Component/Common/Forms/GradientButton';
import { LoaderSVG } from '@/Component/Common/SVGs/CommonSVG';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { ImageLoaderSVG } from '@/Component/Common/SVGs/AuthSVG';
import GradientBorderButton from '@/Component/Common/Forms/GradientBorderButton';
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal';
import { useEffect, useState } from 'react';
import { getUserDetails } from '@/lib/Features/UserDetails/userDetails';
import Loader from '@/Layout/Loader';
import axios from 'axios';
import Link from 'next/link';

const PersonalInformation = () => {
    const dispatch = useDispatch()
    const { translations, locale } = useTranslation();
    const [imageResponse, setImageResponse] = useState<any>(null);
    const [phoneChangeConfirmModal, setPhoneChangeConfirmModal] = useState(false);
    const [countryChangeConfirmModal, setCountryChangeConfirmModal] = useState(false);
    const [pendingSubmitValues, setPendingSubmitValues] = useState<any>(null);
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    const [currentKeyword, setCurrentKeyword] = useState("");
    const userKeywords = userDetails?.userKeywords ?? [];
    const existingKeywords = userKeywords.map((keywordObj) => keywordObj?.keywords?.translations?.[0]?.keyword);

    const APIEndPoint = userDetails?.role == "brand" ? AdminBrandUserEditAPI : userDetails?.role == "influencer" ? AdminInfluencerUserEditAPI : AdminUserEditAPI

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

    const { data: UserData, refetch: selfRefetch, fetchStatus } = useQuery({
        queryKey: [SelfAPI], queryFn: () => CustomFetch({ url: SelfAPI }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data
    });

    useEffect(() => {
        if (userDetails?.image) {
            setImageResponse((prev) => ({ ...prev, filepath: userDetails?.image }))
        }
    }, [userDetails])

    useEffect(() => {
        if (UserData?.image) {
            dispatch(getUserDetails({ ...UserData, image: UserData?.image }))
        }
    }, [UserData])

    useEffect(() => {
        if (!phoneChangeConfirmModal && !countryChangeConfirmModal) {
            setPendingSubmitValues(null);
        }
    }, [phoneChangeConfirmModal, countryChangeConfirmModal]);

    // Put API
    const { isPending, mutate } = usePost(`${APIEndPoint}/${userDetails?.slug}`, null, async (response) => {
        if (response?.status == 200 || response?.status == 201) {
            CustomToast("success", `Personal information updated successfully`);
            let name = response?.data?.data?.display_name ? response?.data?.data?.display_name : `${response?.data?.data?.first_name} ${response?.data?.data?.last_name}`;
            let obj = { name: name }
            console.log("obj", obj);
            const updateUser = await axios.put('/api/chat', { data: obj, endpoint: userDetails?.id })
            selfRefetch();
        }
    }, "Put");

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

    // const { data: KeywordData, isPending: KeywordLoader } = useQuery({ queryKey: [KeywordAPI], queryFn: () => CustomFetch({ url: KeywordAPI, params: { page: 1, per_page: 150 } }, 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 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?.filter(category => category != null && !category.is_hidden)?.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 = userDetails?.role === 'brand' ?
        userDetails?.brandIndustries?.filter(industry => industry?.category != null)?.map((industry) => ({
            label: industry?.category?.translations?.[0]?.title,
            value: industry?.category?.id
        })) : [];

    const initialCategories = userDetails?.role === 'influencer' ?
        userDetails?.influencerCategories
            ?.filter(category => category?.category != null)
            ?.map((category) => ({
                label: category?.category?.translations?.[0]?.title,
                value: category?.category?.id
            })) : [];
    const initialKeywords = userDetails?.role === 'influencer' ?
        userDetails?.userKeywords?.map((keywordObj: any) => ({
            label: keywordObj?.keywords?.translations?.[0]?.keyword,
            value: keywordObj?.keywords?.id
        })) : [];


    const { mutate: mutateUploadFile, isPending: uploadLoader } = usePost(CommonUploadAPI, null, async (response) => {
        if (response?.status === 200 || response?.status === 201) {
            setImageResponse(response?.data);
            selfRefetch();
            let obj = {
                avatar: response?.data?.filepath
            }
            const updateUser = await axios.put('/api/chat', { data: obj, endpoint: userDetails?.id })
        }
    }, 'POST');

    const onFileChange = async (event: any) => {
        if (event?.target?.files && event.target.files.length > 0) {
            const file = event.target.files[0];
            const allowedTypes = ['image/png', 'image/jpeg', 'image/jpg'];
            const maxSize = 10 * 1024 * 1024; // 5 MB in bytes

            // Check file type
            if (!allowedTypes.includes(file.type)) {
                CustomToast("error", translations?.onlyImageMessage);
                return;
            }

            // Check file size
            if (file.size > maxSize) {
                CustomToast("error", translations?.fileSizeMessage);
                return;
            }

            let formData: any = new FormData()
            formData.append('file', file);
            formData.append('type', 'profile');
            formData.append('root', "images");

            // Call the mutation function
            mutateUploadFile(formData);
        }
    };

    const submitPersonalInformation = (values: any) => {
        const preparedValues: any = { ...values };
        delete preparedValues.email;
        preparedValues.country = values.country[0].value;
        // const newKeywords = values.keywords.filter((keywordObj: any) => !existingKeywords.includes(keywordObj?.keywords?.translations?.[0]?.keyword));
        // const removedKeywords = existingKeywords.filter((keywordObj: any) => !values.keywords.includes(keywordObj?.keywords?.translations?.[0]?.keyword));
        if (userDetails?.role === 'brand') {
            preparedValues.industries = preparedValues.industries.map(industry => industry.value);
            delete preparedValues.category_ids;
            delete preparedValues.display_name;
        }
        if (userDetails?.role === 'influencer') {
            console.log("preparedValues keywords", preparedValues?.keywords);
            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 });
    };

    const handlePhoneChangeConfirmation = () => {
        if (!pendingSubmitValues) {
            setPhoneChangeConfirmModal(false);
            return;
        }

        submitPersonalInformation(pendingSubmitValues);
        setPhoneChangeConfirmModal(false);
    };

    const handleCountryChangeConfirmation = () => {
        if (!pendingSubmitValues) {
            setCountryChangeConfirmModal(false);
            return;
        }

        submitPersonalInformation(pendingSubmitValues);
        setCountryChangeConfirmModal(false);
    };

    // 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 loadKeywordOptions = async (inputValue: string) => {
        if (!inputValue) return [];

        const res = await CustomFetch({
            url: KeywordAPI,
            params: {
                search: inputValue,
                page: 1,
                per_page: 50
            }
        }, 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
        }));
    };

    if ((CategoryLoader || fetchStatus == "fetching" || userDetails?.first_name == undefined)) return <Loader />

    return (
        <>
            <div className='flex items-center justify-between'>
                <h2 className="text-primary text-lg mb-7 font-medium leading-6">🔧 {translations?.personalInformation}</h2>
                {userDetails?.role !== 'admin' && <Link href={`/${userDetails?.role}/profile`} className="flex items-center border border-transparent rounded-xl py-2 px-4 text-sm font-medium focus-visible:outline-none text-white bg-black text-center justify-center">{translations?.viewProfile}</Link>}
            </div>
            <div className='flex items-center mb-3'>
                <div className='w-24 h-24 bg-lightSecondary rounded-full relative flex items-center justify-center overflow-hidden md:mr-6 mr-3'>
                    {
                        (uploadLoader) ?
                            <ImageLoaderSVG /> :
                            <ImageWithFallback src={imageResponse?.filepath} alt='Profile Image' className='w-full h-full object-cover' height={120} width={120} />
                    }
                </div>
                <div className='flex items-center'>
                    <GradientBorderButton buttonType='button' customClass='flex items-center !text-sm !capitalize !py-2 !px-6 ' disabled={uploadLoader}>
                        <input type='file' hidden id='image' accept="image/png, image/jpeg, image/jpg" onChange={onFileChange} />
                        <label className={`${uploadLoader ? 'cursor-not-allowed' : ''} cursor-pointer`} htmlFor='image'>{uploadLoader ? `${translations?.uploading}...` : translations?.uploadPicture}</label>
                    </GradientBorderButton>
                </div>
            </div>
            <Formik
                enableReinitialize
                initialValues={{
                    first_name: userDetails?.first_name ?? "",
                    last_name: userDetails?.last_name ?? "",
                    display_name: userDetails?.display_name ?? "",
                    email: userDetails?.email ?? "",
                    phone_number: userDetails?.phone_number ?? "",
                    country_code: userDetails?.country_code ?? "",
                    company_name: userDetails?.company_name ?? "",
                    about_me: userDetails?.about_me ?? "",
                    business_type: userDetails?.business_type,
                    currency: userDetails?.currency ?? "USD",
                    working_people: userDetails?.working_people,
                    industries: initialIndustries,
                    category_ids: initialCategories,
                    keywords: initialKeywords,
                    country: CountryList?.find(country => country.value === userDetails?.country) ?
                        [CountryList.find(country => country.value === userDetails?.country)] : [],
                    gender: userDetails?.gender ?? ""
                }}
                validationSchema={YupObject({
                    first_name: RequiredWithOnlyAlphabetField(translations),
                    display_name: userDetails?.role == 'influencer' ? RequiredField(translations.displayNameRequired) : null,
                    // last_name: RequiredWithOnlyAlphabetField(translations),
                    country_code: RequiredField(translations),
                    phone_number: PhoneNumberSchemaRequired(translations),
                    country: Yup.array().required(translations?.countryValidation),
                    currency: RequiredField(translations),
                    // gender: RequiredField(translations?.genderValidation),
                    company_name: userDetails?.role == 'brand' ? RequiredField(translations) : null,
                    category_ids: userDetails?.role == 'influencer' ? Yup.array()
                        .min(minCategorySelection, `${translations?.selectAtLeast} ${minCategorySelection} ${translations?.categoryHeaderTitle}`)
                        .max(maxCategorySelection, `${translations?.selectUpTo} ${maxCategorySelection} ${translations?.categoryHeaderTitle}`)
                        .nullable() : null,
                    industries: userDetails?.role == 'brand' ? Yup.array()
                        .min(minIndustrySelection, `${translations?.selectAtLeast} ${minIndustrySelection} ${translations?.industries}`)
                        .max(maxIndustrySelection, `${translations?.selectUpTo} ${maxIndustrySelection} ${translations?.industries}`)
                        .nullable() : null
                })}
                onSubmit={(values: any) => {
                    const selectedCountry = values?.country?.[0]?.value;
                    const hasCountryChanged =
                        userDetails?.role === 'influencer' &&
                        !!selectedCountry &&
                        selectedCountry !== userDetails?.country;

                    if (hasCountryChanged) {
                        setPendingSubmitValues(values);
                        setCountryChangeConfirmModal(true);
                        return;
                    }

                    const hasPhoneChanged =
                        (values?.phone_number ?? "").trim() !== (userDetails?.phone_number ?? "").trim() ||
                        (values?.country_code ?? "").trim() !== (userDetails?.country_code ?? "").trim();

                    if (hasPhoneChanged) {
                        setPendingSubmitValues(values);
                        setPhoneChangeConfirmModal(true);
                        return;
                    }

                    submitPersonalInformation(values);
                }}
            >
                {({ values, errors, 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'>
                            <AdminUserEditForm translations={translations} setFieldValue={setFieldValue} values={values} handlePhoneChange={handlePhoneChange} UserDetailData={userDetails} categoryOptions={categoryOptions} errors={errors} currentKeyword={currentKeyword} setCurrentKeyword={setCurrentKeyword} CountryList={CountryList} keywordOptions={mergedKeywordOptions} loadKeywordOptions={loadKeywordOptions} loadCategoryOptions={loadCategoryOptions} />
                            <div className="col-span-12 mt-2 md:mt-20 flex justify-end">
                                <GradientButton buttonType="submit" customClass="gap-2 flex items-center justify-center" disabled={isPending}>
                                    {translations?.saveNow} {isPending && <LoaderSVG />}
                                </GradientButton>
                            </div>
                        </Form>
                    )
                }}
            </Formik>
            {phoneChangeConfirmModal && (
                <ConfirmationModal
                    modal={phoneChangeConfirmModal}
                    setModal={setPhoneChangeConfirmModal}
                    loader={isPending}
                    args={{
                        message: translations?.phoneNumberChangeConfirmation ?? "You changed your phone number. Do you want to save these changes?",
                        buttonText: translations?.ok
                    }}
                    callbackFunction={handlePhoneChangeConfirmation}
                />
            )}
            {countryChangeConfirmModal && (
                <ConfirmationModal
                    modal={countryChangeConfirmModal}
                    setModal={setCountryChangeConfirmModal}
                    loader={isPending}
                    args={{ message: translations?.confirmCountryChangeMessage, buttonText: translations?.yes }}
                    callbackFunction={handleCountryChangeConfirmation}
                />
            )}
        </>

    );
}

export default PersonalInformation;