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

const AdminBrandsListing = () => {
    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 [selectedItems, setSelectedItems] = useState<any>([])
    const [params, setParams] = useState({ page: Number(queryParams.get('page')) || 1, per_page: 50, sort_by: "", sort: "DESC", role: 'brand' });

    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);

    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, refetch } = useQuery({ queryKey: [AdminUserListAPI, search, params], queryFn: () => CustomFetch({ url: AdminUserListAPI, params: { search: search, ...params } }, null, false), 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 Brands deleted successfully')
            setSelectedItems([]);
            setDeleteAllModal(null);
            refetch();
        }
    }, 'delete');

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

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

    const { data, refetch: refetchExport, fetchStatus: GetExportInfluencerFetchStatus } = useQuery({
        queryKey: [GetExportBrandAPI, params, exportSearch], queryFn: () => CustomFetch({
            url: GetExportBrandAPI, 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: false, refetchOnWindowFocus: false, select: (data) => data?.data
    })


    useEffect(() => {
        const exportFile = async () => {
            try {
                const res = await refetchExport(); // run the query manually
                const exportData = res.data;

                if (!exportData) throw new Error("No data returned from export");

                const startDate = moment(dateRange[0]).format('YYYY-MM-DD');
                const endDate = moment(dateRange[1]).format('YYYY-MM-DD');
                const access_token = Cookies.get('aat') || Cookies.get("verifyUAT");

                let str = `${BaseURL}${GetExportBrandAPI}?start_date=${startDate}&end_date=${endDate}&access_token=${access_token}`;
                if (categoryId) str += `&category_id=${categoryId}`;
                if (status) str += `&status=${status === "Active"}`;
                if (exportSearch) str += `&search=${exportSearch}`;

                const check = await fetch(str, { method: 'GET' });
                const isJSON = check.headers.get('Content-Type')?.includes('application/json');

                if (!check.ok || isJSON) {
                    const errorText = await check.text();
                    throw new Error(errorText || "Export failed");
                }

                setOpenExportModal(false);
                window.location.href = str;
            } catch (err) {
                console.error("Export failed:", err);
                // alert("Export failed. Please try again or change filters.");
            } finally {
                setExcelData(false);
            }
        };

        if (excelData) exportFile();
    }, [excelData]);

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

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

    return (
        <>
            <BransListingTable
                searchBtnProps={{
                    setSearch: setSearch,
                    title: "Export",
                    callBack: callbackFunction
                }}
                apiData={{
                    userDetails: userDetails,
                    data: UserAPIData,
                    params: params,
                    setParams: setParams,
                    isPending: isPending,
                    refetch: refetch,
                    newQueryParams: newQueryParams,
                    fetchStatus: fetchStatus
                }}
                search={search}
                deleteModal={deleteModal}
                setDeleteModal={setDeleteModal}
                enableMultiDelete={true}
                selectedItems={selectedItems}
                onMultiDelete={handleMultiDelete}
                setSelectedItems={setSelectedItems}
                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={false} industryProps={true} exportSearch={exportSearch} setExportSearch={setExportSearch} loader={GetExportInfluencerFetchStatus == "fetching"} headerTitle={"Export Brand Data"} />}
            {deleteAllModal && <ConfirmationModal loader={deleteAllLoader} modal={deleteAllModal} args={{ message: 'Are you sure you want to delete selected user?' }} setModal={setDeleteAllModal} callbackFunction={callbackFunctionDeleteAll} translations={translations} />}
        </>
    )
}

export default AdminBrandsListing