'use client'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux';
import { useQuery } from '@tanstack/react-query';
import Cookies from 'js-cookie';
import SkeletonLoader from '@/Layout/SkeletonLoader';
import { setIsBookMarkedList } from '@/lib/Features/UserDetailSidebar/userDetailSidebar';
import { BaseURL, CampaignAPI, PermissionAPI } from '@/Utils/APIRequest/Endpoints';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import useOutsideDropdown from '@/Utils/Hooks/useOutsideDropdown';
import { useLoading } from '@/Utils/Hooks/useLoading';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import { AppStore } from '@/lib/store';
import SidebarModal from '../../BrowseInfluencer/SidebarModal';
import SaveBox from '../savebox';
import { GradientGridViewSVG, GradientListViewSVG, GridViewSVG, ListViewSVG } from '@/Component/Common/SVGs/CommonSVG';
import { CustomToast } from '@/Utils/CustomToast';
import ExportLoader from '@/Component/Admin/AdminInfluencersListing/ExportLoader';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import LimitExceedModal from '@/Component/Common/Modal/LimitExceedModal';

const BookmarkDetail = (props) => {
    const { slug } = props;
    const dispatch = useDispatch();
    const { translations } = useTranslation();
    const isBookMarkedList: any = useSelector((state: AppStore) => state.userDetailSidebar.isBookMarkedList);
    const [params, setParams] = useState({ slug: slug });
    const { skeletonLoading, startSkeletonLoading, stopSkeletonLoading } = useLoading();
    const { ref, isComponentVisible, setIsComponentVisible } = useOutsideDropdown();
    const [openSideModal, setOpenSideModal] = useState(null);
    const [listingData, setListingData] = useState(false);
    const [exportLoader, setExportLoader] = useState(false);
    const [modal, setModal] = useState(false);
    const [filteredValue, setFilteredValue] = useState<any>({});
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    // Get API
    const { data: PermissionData, isPending: PermissionLoader } = useQuery({ queryKey: [PermissionAPI], queryFn: () => CustomFetch({ url: PermissionAPI }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.permissions });

    // Get API
    const { data: BookmarkListData, fetchStatus, isPending } = useQuery({ queryKey: [CampaignAPI, params], queryFn: () => CustomFetch({ url: `${CampaignAPI}/bookmarks`, params: { ...params } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data?.data });

    useEffect(() => {
        if (fetchStatus === "fetching" || isPending) {
            startSkeletonLoading();
        } else {
            stopSkeletonLoading();
        }
    }, [fetchStatus, isPending]);

    useEffect(() => {
        setIsComponentVisible(openSideModal ? true : false)
    }, [openSideModal]);

    useEffect(() => {
        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 (BookmarkListData?.length > 0) {
            BookmarkListData.forEach((item) => {
                if (item?.campaignBookmarks?.length > 0) {
                    item?.campaignBookmarks?.forEach((result) => {
                        let value = result?.id
                        if (!tempData.has(value)) {
                            value && tempData.add(value);
                            updated = true; // Mark that an update was made
                        }
                    })
                }
            });
        }

        // Only dispatch the update if there was a change
        if (updated) {
            dispatch(setIsBookMarkedList([...tempData]));
        }
    }, [BookmarkListData]);

    const handleGridList = (value) => {
        setListingData(value == "list" ? true : false);
        const newParams = { ...params, page: 1, is_list_view: value == "list" ? true : false, };
        setParams(newParams);
    }

    const exportList = async () => {

        if (userDetails?.subscription?.[0]?.plan?.plan_type == 'free') {
            setModal(true);
            return
        }

        setExportLoader(true);
        try {

            const access_token = Cookies.get('bat') || Cookies.get("verifyUAT");
            const url = `${BaseURL}${CampaignAPI}/bookmarks/export?slug=${slug}&access_token=${access_token}`;

            // Fetch the file as a blob
            const response = await fetch(url, { method: 'GET' });

            // Check if it's a JSON error (not a file)
            const contentType = response.headers.get('Content-Type');
            if (!response.ok || (contentType && contentType.includes('application/json'))) {
                let errorMessage = 'Export failed.';
                if (contentType && contentType.includes('application/json')) {
                    const errorData = await response.json();
                    errorMessage = errorData?.message || errorMessage;
                    if (errorData?.statusCode === 400 && PermissionData?.upgrade_plan) {
                        setModal(true);
                        return;
                    }
                } else {
                    errorMessage = await response.text() || errorMessage;
                }
                CustomToast("error", errorMessage);
                return;
            }

            // Get filename from headers or fallback
            let filename = `bookmark-influencer-${Date.now()}`;

            const blob = await response.blob();

            // Create a link and trigger download
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.setAttribute('download', filename);
            document.body.appendChild(link);
            link.click();
            link.remove();

            // Optional: revoke the object URL after a delay
            setTimeout(() => window.URL.revokeObjectURL(link.href), 1000);
        } catch (error: any) {
            console.error("Export error:", error);
            CustomToast("error", error?.message);
            // CustomToast("error", "No record found for export data.");
        } finally {
            setExportLoader(false);
        }
    };

    if (exportLoader) return <ExportLoader />

    return (
        <>
            {
                skeletonLoading ?
                    <div className="grid md:grid-cols-4 grid-cols-1 items-center gap-3 mt-3" >
                        <SkeletonLoader width="100%" height={178} rows={1} />
                        <SkeletonLoader width="100%" height={178} rows={1} />
                        <SkeletonLoader width="100%" height={178} rows={1} />
                    </div> :
                    BookmarkListData?.length > 0 ?
                        <div className="relative pb-12">
                            {BookmarkListData?.map((campaign, ind) => (
                                <>
                                    <div className="flex items-end justify-between">
                                        <div>
                                            <h2 className="capitalize text-xl font-bold text-black">{campaign?.campaign_name}</h2>
                                            {skeletonLoading ? <SkeletonLoader width={150} height={24} rows={1} /> : BookmarkListData?.length > 0 && <h3 className="text-black capitalize text-base font-medium">{campaign?.campaignBookmarks?.length} {translations?.influencer}</h3>}
                                        </div>
                                        <div className='flex items-center gap-3'>
                                            <PrimaryButton buttonType='button' disabled={skeletonLoading || exportLoader} customClass='!rounded-full flex items-center gap-2' onClick={() => exportList()}>
                                                {translations?.export}
                                            </PrimaryButton>
                                            <div className='border border-lightGray rounded-full divide-x-2 divide-lightGray hidden lg:flex'>
                                                <button onClick={() => handleGridList("grid")} className={`text-base px-4 md:py-2 py-1.5 font-semibold flex items-center gap-2 whitespace-nowrap ${!listingData ? 'text-black' : 'text-gray'}`}>
                                                    {!listingData ? <GradientGridViewSVG /> : <GridViewSVG />}
                                                    {translations?.grid}
                                                </button>
                                                <button onClick={() => handleGridList("list")} className={`text-base px-4 md:py-2 py-1.5 font-semibold flex items-center gap-2 whitespace-nowrap ${listingData ? 'text-black' : 'text-gray'}`}>
                                                    {listingData ? <GradientListViewSVG /> : <ListViewSVG />}
                                                    {translations?.list}
                                                </button>
                                            </div>
                                        </div>
                                    </div>

                                    <div className={`mt-3 ${listingData ? "grid-cols-1" : "grid 2xl:grid-cols-4 md:grid-cols-3 grid-cols-1"} items-center`}>
                                        {campaign.campaignBookmarks?.map((list, ind) => (
                                            <div className="p-1 box-border" key={ind} >
                                                <SaveBox data={list} setOpenSideModal={setOpenSideModal} translations={translations} campaignDetailData={campaign} listingData={listingData} />
                                            </div>
                                        ))}
                                    </div>
                                </>
                            ))}
                        </div> :
                        !isPending && BookmarkListData?.length == 0 &&
                        <div className='w-full h-[178px] bg-lightPrimary p-5 rounded-lg flex items-center justify-center mt-4'>{translations?.noDataFound}</div>


            }
            {isComponentVisible && <SidebarModal openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} ref={ref} isComponentVisible={isComponentVisible} setIsComponentVisible={setIsComponentVisible} translations={translations} filteredValue={filteredValue} setFilteredValue={setFilteredValue} />}
            {modal && <LimitExceedModal setModal={setModal} modal={modal} args={{ message: "You have reached the maximum number of campaigns" }} translations={translations} />}
        </>
    )
}

export default BookmarkDetail