'use client'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux';
import { useQuery } from '@tanstack/react-query';
import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
import { AppStore } from '@/lib/store';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { GroupContactsAPI, MarketingCampaignAPI } from '@/Utils/APIRequest/Endpoints';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import MarketingCampaignTable from './MarketingCampaignTable';
import usePost from '@/Utils/Hooks/usePost';
import CampaignSelectionModal from './CampaignSelectionModal';
import MarketingCampaignForm from './MarketingCampaignForm';

const MarketingCampaign = () => {
    const { translations } = useTranslation();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const [search, setSearch] = useState('');
    const [deleteModal, setDeleteModal] = useState<any>(null);
    const [showCampaignModal, setShowCampaignModal] = useState(false);
    const [selectedCampaigns, setSelectedCampaigns] = useState<any[]>([]);
    const [showForm, setShowForm] = useState(false);
    const [CampaignAPIData, setCampaignAPIData] = useState<any>(null);
    const [offset, setOffset] = useState(0);
    const [params, setParams] = useState({
        nextPageToken: "",
        per_page: 50,
        name: search,
        status: [],
        prevStack: [] as string[],
    });

    const { isPending, mutate } = usePost(`${MarketingCampaignAPI}/list`, null, (response) => {
        if (response.status == 201 || response.status == 200) {
            setCampaignAPIData(response.data);
        }
    }, null);

    useEffect(() => {
        let obj: any = { ...params, name: search };
        mutate(obj);
    }, [params, search]);

    const goNext = () => {
        if (!CampaignAPIData?.nextPageToken) return;
        setOffset(prev => prev + params.per_page); // ⭐ add this
        setParams(prev => ({
            ...prev,
            prevStack: [...prev.prevStack, prev.nextPageToken], // store previous token
            nextPageToken: CampaignAPIData?.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 callbackCreateCampaign = () => {
        setShowCampaignModal(true)
    }

    const handleSelectCampaign = (campaigns: any[]) => {
        // campaigns is an array of selected campaign objects from modal
        setSelectedCampaigns(campaigns || []);
        setShowCampaignModal(false);
        setShowForm(true);
    };

    const handleBackToSelection = () => {
        setShowForm(false);
        setSelectedCampaigns([]);
        setShowCampaignModal(true);
    };

    const handleFormClose = (result: any) => {
        setShowForm(false);
        setSelectedCampaigns([]);
        dataRefetch();
    };

    const dataRefetch = () => {
        let obj: any = { ...params, name: search };
        mutate(obj);
    }

    if (showForm && selectedCampaigns.length > 0) {
        return (
            <MarketingCampaignForm
                initialCampaigns={selectedCampaigns}
                onClose={handleFormClose}
                mutate={dataRefetch}
            />
        );
    }

    return (
        <>
            <MarketingCampaignTable
                searchBtnProps={{
                    setSearch: setSearch,
                    title: "Create Campaign",
                    callBack: callbackCreateCampaign
                }}
                apiData={{
                    userDetails: userDetails,
                    data: CampaignAPIData,
                    params: params,
                    setParams: setParams,
                    offset: offset,
                    isPending: isPending,
                    refetch: mutate
                }}
                search={search}
                deleteModal={deleteModal}
                setDeleteModal={setDeleteModal}
                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={!CampaignAPIData?.nextPageToken}
                    className={`flex items-center justify-center h-8 w-8 leading-tight rounded-md text-white ${!CampaignAPIData?.nextPageToken ? 'bg-gray' : 'bg-black '}`}
                >
                    <RiArrowRightSLine className={`text-2xl`} />
                </button>
            </div>
            {showCampaignModal && (
                <CampaignSelectionModal
                    modal={showCampaignModal}
                    setModal={setShowCampaignModal}
                    onSelectCampaign={handleSelectCampaign}
                    translations={translations}
                />
            )}
        </>
    )
}

export default MarketingCampaign