'use client'
import { Suspense, useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { usePathname, useRouter, useSearchParams } from 'next/navigation'
import moment from 'moment'
import Cookies from 'js-cookie';
import { useQuery } from '@tanstack/react-query'
import CustomFetch from '@/Utils/APIRequest/AxiosInstance'
import { AdminUserListAPI, BaseURL, DeleteAll, GetExportInfluencerAPI } from '@/Utils/APIRequest/Endpoints'
import { useTranslation } from '@/Utils/Hooks/useTranslate'
import InfluencerListingTable from './InfluencerListingTable'
import ExportModal from '@/Component/Common/ExportModal'
import { AppStore } from '@/lib/store'
import usePost from '@/Utils/Hooks/usePost'
import { CustomToast } from '@/Utils/CustomToast'
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal'
import ExportLoader from './ExportLoader'
import axios from 'axios';

export const AdminInfluencerListing = () => {
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const router = useRouter()
    const pathName = usePathname()
    const queryParams = useSearchParams()
    const newQueryParams = new URLSearchParams(queryParams.toString());
    const [search, setSearch] = useState('');
    const [deleteModal, setDeleteModal] = useState<any>(null);
    const [deleteAllModal, setDeleteAllModal] = useState<any>(null);
    const [exportLoader, setExportLoader] = useState(false);

    const [params, setParams] = useState({ page: Number(queryParams.get('page')) || 1, per_page: 100, sort_by: "", sort: "DESC", role: 'influencer' });

    const [openExportModal, setOpenExportModal] = useState(false)
    const [status, setStatus] = useState("")
    const [categoryId, setCategoryId] = useState("")
    const [exportSearch, setExportSearch] = useState("")
    const [dateRange, setDateRange] = useState<any>([moment().subtract(15, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]);
    const [excelData, setExcelData] = useState(false);
    const [selectedItems, setSelectedItems] = useState<any>([])

    useEffect(() => {
        const queryPage = Number(queryParams.get('page')) || 1;
        setParams((prev) => ({ ...prev, page: queryPage }));
    }, [queryParams]);

    useEffect(() => {
        newQueryParams.set('page', params.page.toString());
        router.push(`${pathName}?${newQueryParams.toString()}`);
    }, [params.page, pathName]);

    // API GET
    const { data: UserAPIData, isPending, fetchStatus: userFetchStatus, refetch } = useQuery({ queryKey: [AdminUserListAPI, search, params], queryFn: () => CustomFetch({ url: AdminUserListAPI, params: { search: search, ...params } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data })

    // const { data, isPending: exportPending, fetchStatus } = useQuery({
    //     queryKey: [GetExportInfluencerAPI, params, exportSearch], queryFn: () => CustomFetch({
    //         url: GetExportInfluencerAPI, params: { search: exportSearch ? exportSearch : null, start_date: moment(dateRange[0]).format('YYYY-MM-DD'), end_date: moment(dateRange[1]).format('YYYY-MM-DD'), status: status ? status == "Active" ? true : false : null, category_id: categoryId ? categoryId : null, access_token: Cookies.get('aat') || Cookies.get("verifyUAT") }
    //     }, null, false), enabled: excelData, refetchOnWindowFocus: false, select: (data) => data?.data
    // })

    // API DELETE ALL
    const { isPending: deleteAllLoader, mutate: mutateDeleteAll } = usePost(DeleteAll, null, (response) => {
        if (response.status == 200 || response.status == 204) {
            CustomToast("success", 'Selected Users deleted successfully')
            setSelectedItems([]);
            setDeleteAllModal(null);
            refetch();
        }
    }, 'delete');

    const handleMultiDelete = (items) => {
        setDeleteAllModal({ ids: items, })
    }

    const callbackFunctionDeleteAll = () => {
        let obj: any = { ids: deleteAllModal.ids }
        mutateDeleteAll(obj)
    }

    // const exportExcelFunction = () => {
    //     setExcelData(true)
    // }

    const downloadFiles = async (links: string[]) => {
        for (let i = 0; i < links.length; i++) {
            const link = links[i];
            const a = document.createElement("a");
            a.href = link;
            a.download = link.split("/").pop() || "file";

            // Delay between downloads to avoid issues
            setTimeout(() => {
                a.click();
            }, i * 1000); // 1 second delay between downloads (adjust as necessary)
        }

        // Reset states after downloads
        setExcelData(false);
        setOpenExportModal(false);
    };

    // useEffect(() => {
    //     if (data && data.length > 0) {
    //         // Trigger file download for each link in the response
    //         downloadFiles(data);
    //     }
    // }, [data]);

    const exportExcelFunction = async () => {
        setExportLoader(true);
        try {
            const response = await axios.get(`${BaseURL}${GetExportInfluencerAPI}`, {
                params: {
                    search: exportSearch || null,
                    start_date: moment(dateRange[0]).format('YYYY-MM-DD'),
                    end_date: moment(dateRange[1]).format('YYYY-MM-DD'),
                    status: status ? status === "Active" : null,
                    category_id: categoryId || null,
                    access_token: Cookies.get('aat') || Cookies.get("verifyUAT")
                }
            });

            const links = response?.data || [];

            console.log("links", links);
            

            if (links?.length > 0) {
                await downloadFiles(links); // assuming this function is already defined
            } else {
                CustomToast("error", "No record found for export data.");
            }
        } catch (error:any) {
            console.error("Export error:", error);
            // CustomToast("error", error?.message);
            CustomToast("error", "No record found for export data.");
        } finally {
            setExportLoader(false);
            setOpenExportModal(false);
        }
    };


    const callbackFunction = () => {
        setOpenExportModal(true)
    }

    if (exportLoader) return <ExportLoader />

    return (
        <>
            <InfluencerListingTable
                searchBtnProps={{
                    setSearch: setSearch,
                    title: "Export",
                    callBack: callbackFunction
                }}
                apiData={{
                    userDetails: userDetails,
                    data: UserAPIData,
                    params: params,
                    setParams: setParams,
                    isPending: isPending,
                    refetch: refetch,
                    newQueryParams: newQueryParams,
                    fetchStatus: userFetchStatus
                }}
                search={search}
                enableMultiDelete={true}
                selectedItems={selectedItems}
                onMultiDelete={handleMultiDelete}
                setSelectedItems={setSelectedItems}
                deleteModal={deleteModal}
                setDeleteModal={setDeleteModal}
                translations={translations}
            />
            {openExportModal && <ExportModal modal={openExportModal} setModal={setOpenExportModal} callbackFunction={exportExcelFunction} statusProps={true} status={status} setStatus={setStatus} dateRange={dateRange} setDateRange={setDateRange} categoryId={categoryId} setCategoryId={setCategoryId} categoryProps={true} industryProps={false} exportSearch={exportSearch} setExportSearch={setExportSearch} loader={exportLoader} headerTitle={"Export Influencer Data"} />}
            {deleteAllModal && <ConfirmationModal loader={deleteAllLoader} modal={deleteAllModal} args={{ message: 'Are you sure you want to delete selected user?' }} setModal={setDeleteAllModal} callbackFunction={callbackFunctionDeleteAll} translations={translations} />}
        </>
    )
}

const AdminInfluencerComponent = () => {
    return (
        <Suspense>
            <AdminInfluencerListing />
        </Suspense>
    )
}

export default AdminInfluencerComponent