import BorderButton from '@/Component/Common/Forms/BorderButton';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import Modal from '@/Component/Common/Modal';
import { SearchSVG } from '@/Component/Common/SVGs/CommonSVG';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AdminCampaignAPI } from '@/Utils/APIRequest/Endpoints';
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';

const CampaignSelectionModal = ({ modal, setModal, onSelectCampaign, translations }: any) => {
    const [search, setSearch] = useState('');
    const [params, setParams] = useState({ page: 1, per_page: 50, sort_by: "created_at", sort: "DESC", status: "running", is_active: 1 });
    const [selectedCampaigns, setSelectedCampaigns] = useState<Record<string, any>>({});

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

    const handleSearch = (value: string) => {
        setSearch(value);
    };

    const toggle = (campaign: any) => {
        setSelectedCampaigns(prev => {
            const copy = { ...prev };
            if (copy[campaign.id]) {
                delete copy[campaign.id];     // unselect
            } else {
                copy[campaign.id] = campaign; // select
            }
            return copy;
        });
    };

    const handleUseSelected = () => {
        const sel = Object.values(selectedCampaigns); // array of campaign objects

        if (!sel.length) {
            setModal(false);
            return;
        }

        onSelectCampaign(sel);
        setModal(false);
    };

    if (!modal) return null;

    return (
        <Modal modalSize='md:w-1/4 w-1/1' setModal={setModal}>
            <h2 className='text-xl font-medium mb-3'>Select Campaign</h2>
            <div className={`relative mb-3`}>
                <div className="absolute start-4 inset-y-0 flex items-center pointer-events-none z-20">
                    <SearchSVG />
                </div>
                <input
                    type='text'
                    placeholder='Search campaigns...'
                    value={search}
                    onChange={(e) => handleSearch(e.target.value)}
                    className={`pl-10 w-full bg-lightGray/50  focus:outline-primary border border-transparent placeholder:text-darkGray py-3 px-4 text-sm rounded-3xl`}
                />
            </div>

            {isPending ? (
                <p>{translations?.loading || 'Loading...'}</p>
            ) : AdminCampaignData?.data?.length > 0 ? (
                <div className='space-y-2 max-h-80 overflow-y-auto'>
                    {AdminCampaignData?.data?.map((c: any) => (
                        <label key={c.id} className='flex items-center justify-between gap-3 p-3 border border-lightGray rounded-lg cursor-pointer hover:bg-gray-50'>
                            <div className='flex items-center gap-2'>
                                <input type='checkbox' checked={!!selectedCampaigns[c.id]}
                                    onChange={() => toggle(c)} />
                                <div className='font-semibold text-sm'>{c.campaign_name}</div>
                            </div>
                            {c.profile_privacy == 'private' && <div className='text-xs text-white bg-primary rounded-full py-0.5 px-3'>Private</div>}
                        </label>
                    ))}
                </div>
            ) : (
                <p>{translations?.no_campaigns || 'No campaigns found'}</p>
            )}

            <div className='mt-4 flex justify-end gap-3'>
                <BorderButton buttonType='button' onClick={() => setModal(false)}>
                    {translations?.cancel || 'Cancel'}
                </BorderButton>
                <PrimaryButton buttonType='button' onClick={handleUseSelected}>
                    {translations?.use_selected || 'Use Selected'}
                </PrimaryButton>
            </div>
        </Modal>
    );
};

export default CampaignSelectionModal;