import { useEffect, useState } from 'react'
import { useQuery } from '@tanstack/react-query';
import moment from 'moment';
import Cookies from 'js-cookie';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AdminPaymentHistoryAPI, BaseURL, GetExportCampaignPaymentAPI } from '@/Utils/APIRequest/Endpoints';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import AdminPaymentHistoryAllTable from './AdminPaymentHistoryAllTable';
import AdminPaymentHistoryTable from './AdminPaymentHistoryTable';
import ExportModal from '@/Component/Common/ExportModal';
import { CustomToast } from '@/Utils/CustomToast';
import axios from 'axios';

const AdminPaymentHistory = () => {
    const { translations } = useTranslation();
    const [historySearch, setHistorySearch] = useState('');
    const [historyTab, setHistoryTab] = useState("all");
    const [modal, setModal] = useState<any>(null);
    const [historyParams, setHistoryParams] = useState({ payment_status: 'all', page: 1, per_page: 10, sort_by: "created_at", sort: 'DESC' });

    const [openExportModal, setOpenExportModal] = useState(false)
    const [paymentStatus, setPaymentStatus] = useState("all")
    const [campaignId, setCampaignId] = useState("")
    const [exportSearch, setExportSearch] = useState("")
    const [dateRange, setDateRange] = useState<any>([moment().subtract(15, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]);
    const [loader, setLoader] = useState(false);

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

    const handleHistoryTabClick = (tabName) => {
        setHistoryTab(tabName);
        setHistoryParams({ ...historyParams, payment_status: tabName, page: 1, })
    }

    const getExportData = async () => {
        let startDate = moment(dateRange[0]).format('YYYY-MM-DD')
        let endDate = moment(dateRange[1]).format('YYYY-MM-DD')
        let access_token = Cookies.get('aat') || Cookies.get("verifyUAT")
        let str = `${BaseURL}${GetExportCampaignPaymentAPI}?start_date=${startDate}&end_date=${endDate}&access_token=${access_token}`
        setLoader(true)
        try {
            const response = await axios.get(GetExportCampaignPaymentAPI, {
                baseURL: BaseURL,
                headers: {
                    Authorization: `Bearer ${access_token}`
                },
                params: {
                    search: exportSearch || null,
                    start_date: startDate,
                    end_date: endDate,
                    payment_status: paymentStatus,
                    campaign_id: campaignId || null,
                    access_token: access_token
                }
            },);
            if (response.status === 200) {
                setLoader(false);
                console.log("response", response);
                if (campaignId) {
                    str = `${str}&campaign_id=${campaignId}`
                }
                if (paymentStatus) {
                    str = `${str}&payment_status=${paymentStatus}`
                }
                if (exportSearch) {
                    str = `${str}&search=${exportSearch ? exportSearch : null}`
                }
                setOpenExportModal(false);
                window.location.href = str;
                setCampaignId('');
            }

            return response;
        } catch (error: any) {
            setLoader(false);
            CustomToast("error", error?.response?.data?.message || "Export failed");

            // Return mock error response so React Query doesn't crash
            return {
                statusCode: error?.response?.status || 500,
                message: error?.response?.data?.message || "Unknown error",
                data: null,
            };
        }
    };

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

    const exportExcelFunction = () => {
        getExportData()
    }

    return (
        <>
            <div className="flex items-center mb-5 *:whitespace-nowrap overflow-hidden overflow-x-auto gap-2.5">
                <span onClick={() => handleHistoryTabClick("all")} className={`${historyTab == 'all' ? 'text-white bg-primary font-medium' : 'text-black font-medium bg-primary/10'} text-xs cursor-pointer rounded px-3 py-1`}>
                    All
                </span>
                <span onClick={() => handleHistoryTabClick("credited")} className={`${historyTab == 'credited' ? 'text-white bg-primary font-medium' : 'text-black font-medium bg-primary/10'} text-xs cursor-pointer !mx-0 rounded px-3 py-1`}>
                    Credit
                </span>
                <span onClick={() => handleHistoryTabClick("debited")} className={`${historyTab == 'debited' ? 'text-white bg-primary font-medium' : 'text-black font-medium bg-primary/10'} text-xs cursor-pointer !mx-0 rounded px-3 py-1`}>
                    Debit
                </span>
                <span onClick={() => handleHistoryTabClick("refunded")} className={`${historyTab == 'refunded' ? 'text-white bg-primary font-medium' : 'text-black font-medium bg-primary/10'} text-xs cursor-pointer !mx-0 rounded px-3 py-1`}>
                    Refund
                </span>
            </div>
            {historyTab == 'all' ?
                <AdminPaymentHistoryAllTable
                    searchBtnProps={{
                        setSearch: setHistorySearch,
                        title: "Export",
                        callBack: callbackFunction
                    }}
                    apiData={{
                        data: AdminPaymentData,
                        params: historyParams,
                        setParams: setHistoryParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setModal}
                    search={historySearch}
                    translations={translations}
                    refetch={refetch}
                /> :
                <AdminPaymentHistoryTable
                    searchBtnProps={{
                        setSearch: setHistorySearch,
                        buttonRequired: false
                    }}
                    apiData={{
                        data: AdminPaymentData,
                        params: historyParams,
                        setParams: setHistoryParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setModal}
                    search={historySearch}
                    translations={translations}
                    refetch={refetch}
                />
            }
            {openExportModal && <ExportModal modal={openExportModal} setModal={setOpenExportModal} callbackFunction={exportExcelFunction} statusProps={false} paymentStatusProps={true} paymentStatus={paymentStatus} setPaymentStatus={setPaymentStatus} dateRange={dateRange} setDateRange={setDateRange} campaignId={campaignId} setCampaignId={setCampaignId} categoryProps={false} industryProps={false} exportSearch={exportSearch} setExportSearch={setExportSearch} loader={loader} headerTitle={"Export Payment Data"} />}
        </>
    )
}

export default AdminPaymentHistory