'use client'
import { AppStore } from '@/lib/store';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { DeleteAll, GroupContactsAPI } from '@/Utils/APIRequest/Endpoints';
import { CustomToast } from '@/Utils/CustomToast';
import usePost from '@/Utils/Hooks/usePost';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import { useQuery } from '@tanstack/react-query';
import moment from 'moment';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux';
import GroupListingTable from './GroupListingTable';
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal';
import { off } from 'process';
import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
import { InfoSVG } from '@/Component/Common/SVGs/CommonSVG';
import { MdInfoOutline } from 'react-icons/md';

const GroupContacts = () => {
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const [search, setSearch] = useState('');
    const [deleteModal, setDeleteModal] = useState<any>(null);
    const [selectedItems, setSelectedItems] = useState<any>([]);
    const [addGroupModal, setAddGroupModal] = useState<any>(null);
    const [offset, setOffset] = useState(0);
    const [params, setParams] = useState({
        nextPageToken: "",
        per_page: 50,
        prevStack: [] as string[],
    });

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

    const goNext = () => {
        if (!GroupAPIData?.nextPageToken) return;
        setOffset(prev => prev + params.per_page); // ⭐ add this
        setParams(prev => ({
            ...prev,
            prevStack: [...prev.prevStack, prev.nextPageToken], // store previous token
            nextPageToken: GroupAPIData?.nextPageToken || ""
        }));
    };

    // ⭐ PREVIOUS PAGE
    const goPrev = () => {
        if (offset === 0) return;
        setOffset(prev => Math.max(prev - params.per_page, 0)); // ⭐ subtract page size

        const lastToken = params.prevStack[params.prevStack.length - 1];

        setParams(prev => ({
            ...prev,
            nextPageToken: lastToken,
            prevStack: prev.prevStack.slice(0, -1)
        }));
    };

    const callbackAddGroup = () => {
        setAddGroupModal(true)
    }

    return (
        <>
            <div className="bg-blue-600/10 py-4 px-3 rounded-lg flex items-center justify-between mb-5">
                <div className="flex items-center gap-2">
                    <MdInfoOutline size={20} className='text-blue-600' />
                    <p className="text-blue-600 font-medium text-sm">Just to let you know — SendGrid processes these actions through their internal Job Queue, so the updates may take 1–2 minutes to appear. This small delay is normal and nothing to worry about.
                    </p>
                </div>

            </div>
            <GroupListingTable
                searchBtnProps={{
                    setSearch: false,
                    title: "Add Group",
                    callBack: callbackAddGroup
                }}
                apiData={{
                    userDetails: userDetails,
                    data: GroupAPIData,
                    params: params,
                    setParams: setParams,
                    offset: offset,
                    isPending: isPending,
                    refetch: refetch,
                    fetchStatus: fetchStatus
                }}
                search={search}
                deleteModal={deleteModal}
                setDeleteModal={setDeleteModal}
                enableMultiDelete={true}
                selectedItems={selectedItems}
                setSelectedItems={setSelectedItems}
                addGroupModal={addGroupModal}
                setAddGroupModal={setAddGroupModal}
                translations={translations}
            />

            <div className="flex py-4 gap-3 justify-end items-center">
                <button
                    onClick={goPrev}
                    disabled={params.prevStack.length === 0}
                    className={`flex items-center justify-center h-8 w-8 leading-tight rounded-md text-white ${params.prevStack.length === 0 ? 'bg-gray' : 'bg-black'}`}
                >
                    <RiArrowLeftSLine className={`text-2xl`} />
                </button>

                <button
                    onClick={goNext}
                    disabled={!GroupAPIData?.nextPageToken}
                    className={`flex items-center justify-center h-8 w-8 leading-tight rounded-md text-white ${!GroupAPIData?.nextPageToken ? 'bg-gray' : 'bg-black '}`}
                >
                    <RiArrowRightSLine className={`text-2xl`} />
                </button>
            </div>
        </>
    )
}

export default GroupContacts