'use client'
import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { AdminPaymentListAPI } from "@/Utils/APIRequest/Endpoints";
import { useTranslation } from "@/Utils/Hooks/useTranslate";
import AdminPaymentTable from "./AdminPaymentTable";
import AdminPaymentModal from "./AdminPaymentModal";
import AdminPaymentCompletedTable from "./AdminPaymentCompletedTable";
import AdminPaymentFailedTable from "./AdminPaymentFailedTable";
import AdminPaymentHistory from "./AdminPaymentHistory";
import AdminPaymentOfflineTable from "./AdminPaymentOfflineTable";
import AdminPaymentFailedModal from "./AdminPaymentFailedModal";
import AdminPaymentForcedOfflineTable from "./AdminPaymentForcedOfflineTable";

const AdminPayments = () => {
    const { translations } = useTranslation();
    const [search, setSearch] = useState('');
    const [activeTab, setActiveTab] = useState("pending");
    const [modal, setModal] = useState<any>(null);
    const [failedModal, setFailedModal] = useState<any>(null);
    const [params, setParams] = useState({ payment_status: 'pending', page: 1, per_page: 50, sort_by: "created_at", sort: 'DESC' });

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

    const handleTabClick = (tabName) => {
        setActiveTab(tabName);
        setParams({ ...params, sort: 'DESC', payment_status: tabName, page: 1, })
    }

    return (
        <>
            <div className="flex items-center border-b border-lightGray *:py-1 mb-5 *:whitespace-nowrap overflow-hidden overflow-x-auto pb-5 gap-3">
                <span onClick={() => handleTabClick("pending")} className={`${activeTab == 'pending' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border rounded-full px-5`}>
                    Pending
                </span>
                <span onClick={() => handleTabClick("force_offline")} className={`${activeTab == 'force_offline' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border rounded-full px-5`}>
                    By Connector Club
                </span>
                <span onClick={() => handleTabClick("offline")} className={`${activeTab == 'offline' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border !mx-0 rounded-full px-5 py-2 `}>
                    Offline
                </span>
                <span onClick={() => handleTabClick("completed")} className={`${activeTab == 'completed' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border !mx-0 rounded-full px-5 py-2 `}>
                    Completed
                </span>
                <span onClick={() => handleTabClick("failed")} className={`${activeTab == 'failed' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border !mx-0 rounded-full px-5 py-2 `}>
                    Failed
                </span>
                <span onClick={() => setActiveTab("history")} className={`${activeTab == 'history' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border !mx-0 rounded-full px-5 py-2 `}>
                    History
                </span>
            </div>
            {activeTab == 'pending' &&
                <AdminPaymentTable
                    searchBtnProps={{
                        setSearch: setSearch,
                        buttonRequired: false
                    }}
                    apiData={{
                        data: AdminPaymentData,
                        params: params,
                        setParams: setParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setModal}
                    search={search}
                    translations={translations}
                    refetch={refetch}
                />}
            {activeTab == 'force_offline' &&
                <AdminPaymentForcedOfflineTable
                    searchBtnProps={{
                        setSearch: setSearch,
                        buttonRequired: false
                    }}
                    apiData={{
                        data: AdminPaymentData,
                        params: params,
                        setParams: setParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setModal}
                    search={search}
                    translations={translations}
                    refetch={refetch}
                />}
            {activeTab == 'offline' &&
                <AdminPaymentOfflineTable
                    searchBtnProps={{
                        setSearch: setSearch,
                        buttonRequired: false
                    }}
                    apiData={{
                        data: AdminPaymentData,
                        params: params,
                        setParams: setParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setModal}
                    search={search}
                    translations={translations}
                    refetch={refetch}
                />}
            {activeTab == 'completed' &&
                <AdminPaymentCompletedTable
                    searchBtnProps={{
                        setSearch: setSearch,
                        buttonRequired: false
                    }}
                    apiData={{
                        data: AdminPaymentData,
                        params: params,
                        setParams: setParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setModal}
                    search={search}
                    translations={translations}
                    refetch={refetch}
                />}
            {activeTab == 'failed' &&
                <AdminPaymentFailedTable
                    searchBtnProps={{
                        setSearch: setSearch,
                        buttonRequired: false
                    }}
                    apiData={{
                        data: AdminPaymentData,
                        params: params,
                        setParams: setParams,
                        isPending: isPending,
                        fetchStatus: fetchStatus
                    }}
                    setModal={setFailedModal}
                    search={search}
                    translations={translations}
                    refetch={refetch}
                />}
            {activeTab == 'history' && <AdminPaymentHistory />}

            {modal && <AdminPaymentModal modal={modal} setModal={setModal} refetch={refetch} />}
            {failedModal && <AdminPaymentFailedModal modal={failedModal} setModal={setFailedModal} refetch={refetch} />}
        </>
    )
}

export default AdminPayments