'use client';

import { useEffect, useMemo, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import SearchInput from '@/Component/Common/Forms/SearchInput';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import Modal from '@/Component/Common/Modal';
import { LoaderSVG } from '@/Component/Common/SVGs/CommonSVG';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { AdminCampaignAPI } from '@/Utils/APIRequest/Endpoints';
import { useSelector } from 'react-redux';
import { AppStore } from '@/lib/store';
import CampaignListSkeleton from './CampaignListSkeleton';

interface AddCampaignModalProps {
    modal: boolean;
    setModal: (open: boolean) => void;
    existingCampaignIds: string[];
    isSubmitting: boolean;
    onAddCampaign: (campaignId: string) => void;
}

const PER_PAGE = 20;

const AddCampaignModal = ({
    modal,
    setModal,
    existingCampaignIds,
    isSubmitting,
    onAddCampaign,
}: AddCampaignModalProps) => {
    const [search, setSearch] = useState('');
    const [params, setParams] = useState({
        page: 1,
        per_page: PER_PAGE,
        sort_by: 'created_at',
        sort: 'DESC',
        status: 'running',
        is_active: 1,
        profile_privacy: 'public',
    });
    const [allCampaigns, setAllCampaigns] = useState<any[]>([]);
    const [selectedCampaignId, setSelectedCampaignId] = useState<string | null>(null);
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    const { data: campaignData, isPending, isFetching } = useQuery({
        queryKey: [AdminCampaignAPI, search, params, modal],
        queryFn: () =>
            CustomFetch({ url: AdminCampaignAPI, params: { search, ...params } }, null, false),
        refetchOnWindowFocus: false,
        enabled: modal,
        select: (data) => data?.data,
    });

    useEffect(() => {
        if (!modal) {
            setSearch('');
            setParams((prev) => ({ ...prev, page: 1 }));
            setAllCampaigns([]);
            setSelectedCampaignId(null);
        }
    }, [modal]);

    useEffect(() => {
        const list = campaignData?.data ?? [];
        if (params.page === 1) {
            setAllCampaigns(list);
        } else if (list.length > 0) {
            setAllCampaigns((prev) => {
                const existingIds = new Set(prev.map((c) => String(c.id)));
                const newItems = list.filter((c: any) => !existingIds.has(String(c.id)));
                return [...prev, ...newItems];
            });
        }
    }, [campaignData, params.page]);

    const visibleCampaigns = useMemo(
        () => allCampaigns.filter((c) => !existingCampaignIds.includes(String(c.id))),
        [allCampaigns, existingCampaignIds]
    );

    const total = campaignData?.total ?? 0;
    const hasMore = allCampaigns.length < total;

    const handleLoadMore = () => {
        if (!hasMore || isFetching) return;
        setParams((prev) => ({ ...prev, page: prev.page + 1 }));
    };

    const handleAdd = () => {
        if (!selectedCampaignId) return;
        onAddCampaign(selectedCampaignId);
    };

    const isInitialLoading = isPending && params.page === 1;
    const isLoadingMore = isFetching && params.page > 1;

    if (!modal) return null;

    return (
        <Modal modalSize="md:w-[32rem] w-full" setModal={() => setModal(false)} headerTitle="Add Campaign" childMainClass="max-h-[90vh] overflow-y-auto">
            <SearchInput customInputMainClass="w-full" setSearch={setSearch} setParams={setParams} />

            <div className="mt-4 max-h-80 overflow-y-auto pr-1">
                {isInitialLoading ? (
                    <CampaignListSkeleton variant="modal" />
                ) : visibleCampaigns.length > 0 ? (
                    <div className="space-y-2">
                        {visibleCampaigns.map((campaign) => {
                            const isSelected = selectedCampaignId === String(campaign.id);
                            return (
                                <button
                                    key={campaign.id}
                                    type="button"
                                    onClick={() => setSelectedCampaignId(String(campaign.id))}
                                    className={`w-full flex items-center gap-3 p-3 border rounded-xl text-left transition-colors ${
                                        isSelected
                                            ? 'border-primary bg-primary/5'
                                            : 'border-lightGray hover:bg-lightGray/30'
                                    }`}
                                >
                                    <div className="w-10 h-10 rounded-lg overflow-hidden bg-lightGray shrink-0">
                                        <ImageWithFallback
                                            src={campaign?.attachment?.[0] ? `${userDetails?.campaign_path}${campaign.attachment?.[0]}` : ''}
                                            alt={campaign.campaign_name}
                                            width={500}
                                            height={500}
                                            className="w-full h-full object-cover"
                                        />
                                    </div>
                                    <div className="flex-1 min-w-0">
                                        <p className="text-sm font-medium text-neutral-900 truncate">
                                            {campaign.campaign_name}
                                        </p>
                                        {(campaign?.users?.company_name || campaign?.users?.display_name) && (
                                            <p className="text-xs text-neutral-500 truncate">
                                                {campaign?.users?.company_name ?? campaign?.users?.display_name}
                                            </p>
                                        )}
                                    </div>
                                    {campaign.profile_privacy === 'private' && (
                                        <span className="text-xs text-white bg-primary rounded-full py-0.5 px-2.5 shrink-0">
                                            Private
                                        </span>
                                    )}
                                </button>
                            );
                        })}

                        {isLoadingMore && <CampaignListSkeleton rows={3} variant="modal" />}
                    </div>
                ) : (
                    <p className="text-sm text-neutral-500 text-center py-6">No campaigns found</p>
                )}

                {hasMore && !isInitialLoading && (
                    <div className="flex justify-center pt-4 pb-1">
                        <BorderButton
                            buttonType="button"
                            customClass="flex items-center justify-center gap-2 min-w-32"
                            disabled={isLoadingMore}
                            onClick={handleLoadMore}
                        >
                            Load More
                        </BorderButton>
                    </div>
                )}
            </div>

            <div className="mt-6 flex justify-end gap-3">
                <BorderButton buttonType="button" onClick={() => setModal(false)}>
                    Cancel
                </BorderButton>
                <PrimaryButton
                    buttonType="button"
                    customClass="flex items-center justify-center min-w-28"
                    disabled={!selectedCampaignId || isSubmitting}
                    onClick={handleAdd}
                >
                    Add {isSubmitting && <LoaderSVG customClass="ml-2" />}
                </PrimaryButton>
            </div>
        </Modal>
    );
};

export default AddCampaignModal;