'use client'
import { useEffect, useMemo, useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { PreviewAsCreatorAPI, ViewAsCreatorAPI } from '@/Utils/APIRequest/Endpoints';
import JobsBox from '@/Component/Common/JobsBox';
import JobBoxSkeleton from '@/Component/Influencer/InfluencerJobs/JobListing/JobBoxSkeleton';
import CreatorPreviewDetailPanel from './CreatorPreviewDetailPanel';
import {
    mapBrandLiveCampaign,
    mapOtherBrandCampaign,
    buildBrandDetailFromUser,
    buildBrandDetailFromCampaign,
    parseCreatorPreviewListing,
} from './mapCreatorPreviewCampaign';

const PER_PAGE = 9;

type CreatorPreviewSource = 'listing' | 'create';

interface Props {
    setModal: (v: any) => void;
    userDetails: any;
    translations: any;
    source?: CreatorPreviewSource;
    draftCampaign?: any;
    previewPayload?: any;
    search?: string;
}

const CreatorPreviewModal = ({
    setModal,
    userDetails,
    translations,
    source = 'listing',
    draftCampaign,
    previewPayload,
    search = '',
}: Props) => {
    const [detailPanel, setDetailPanel] = useState<any>(null);
    const isCreatePreview = source === 'create';

    const { data: pageData, isPending } = useQuery({
        queryKey: isCreatePreview
            ? [PreviewAsCreatorAPI, previewPayload]
            : [ViewAsCreatorAPI, search],
        queryFn: () => {
            if (isCreatePreview) {
                return CustomFetch(
                    {
                        url: PreviewAsCreatorAPI,
                        params: { page: 1, per_page: PER_PAGE },
                        data: previewPayload,
                        method: 'post',
                    },
                    null,
                    false,
                );
            }
            return CustomFetch(
                { url: ViewAsCreatorAPI, params: { page: 1, per_page: PER_PAGE, search } },
                null,
                false,
            );
        },
        refetchOnWindowFocus: false,
        enabled: isCreatePreview
            ? !!userDetails && !!previewPayload
            : !!userDetails,
        select: (d: any) => parseCreatorPreviewListing(d?.data, userDetails?.id),
    });

    const ownedCards = useMemo(() => {
        const live = Array.isArray(pageData?.own)
            ? pageData.own.map(mapBrandLiveCampaign)
            : [];
        return draftCampaign ? [draftCampaign, ...live] : live;
    }, [pageData?.own, draftCampaign]);

    const otherCards = useMemo(() => {
        if (!Array.isArray(pageData?.other)) return [];
        return pageData.other.map(mapOtherBrandCampaign);
    }, [pageData?.other]);

    const isInitialLoading = isPending;

    const resolveBrandDetail = (campaign: any) =>
        campaign?.__isBrandOwned
            ? buildBrandDetailFromUser(userDetails)
            : buildBrandDetailFromCampaign(campaign);

    const handleOwnedClick = (target: any) => {
        const matched =
            ownedCards.find((c: any) => c.__previewDraft && target?.slug === c.slug) ||
            ownedCards.find((c: any) => target?.campaignDetailId && target.campaignDetailId === c.id);
        if (matched) setDetailPanel(matched);
    };

    useEffect(() => {
        const handleKey = (e: KeyboardEvent) => {
            if (e.key === 'Escape' && !detailPanel) setModal(null);
        };
        document.addEventListener('keydown', handleKey);
        return () => document.removeEventListener('keydown', handleKey);
    }, [detailPanel, setModal]);

    const showOwnedSkeleton = isInitialLoading && ownedCards.length === 0 && !draftCampaign;
    const showOtherSkeleton = isInitialLoading && otherCards.length === 0;

    return (
        <>
            <div
                id="creator-preview-overlay"
                className="fixed inset-0 z-[70] flex items-start sm:items-center justify-center bg-neutral-900/40 backdrop-blur-xl animate-fade-in overflow-y-auto py-6"
                onClick={(e) => { if ((e.target as HTMLElement).id === 'creator-preview-overlay') setModal(null); }}
            >
                <div className="relative bg-white rounded-modal shadow-pop w-[min(1200px,94vw)] max-h-[90vh] flex flex-col animate-scale-in">
                    <div className="flex items-start justify-between border-b border-neutral-100 px-6 py-4 gap-4 shrink-0">
                        <div className="min-w-0">
                            <h2 className="text-display text-lg sm:text-xl font-bold text-neutral-900">
                                {translations?.creatorPreview ?? 'Creator preview'}
                            </h2>
                            <p className="text-xs sm:text-sm text-neutral-500 mt-1">
                                {translations?.creatorPreviewDescription}
                            </p>
                        </div>
                        <button
                            type="button"
                            aria-label="Close"
                            onClick={() => setModal(null)}
                            className="shrink-0 rounded-full h-9 w-9 flex items-center justify-center hover:bg-neutral-100 border border-neutral-100"
                        >
                            <span className="text-xl leading-none -mt-0.5">×</span>
                        </button>
                    </div>
                    <div className="overflow-y-auto px-6 py-5 flex-1 min-h-0">
                        <div className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 sm:gap-4 gap-3">
                            {ownedCards.map((item: any) => (
                                <div key={item.__key} className="relative ring-2 ring-primary/40 rounded-card">
                                    <span className="absolute top-3 right-3 z-10 bg-gradient-to-br from-secondary to-primary text-white text-[11px] font-semibold px-2.5 py-1 rounded-full shadow-soft">
                                        {item.__previewDraft ? translations?.yourDraftBadge : translations?.yourCampaignBadge}
                                    </span>
                                    <JobsBox
                                        data={item}
                                        userDetails={userDetails}
                                        translations={translations}
                                        setOpenSideModal={handleOwnedClick}
                                        isFromCreate={true}
                                    />
                                </div>
                            ))}
                            {showOwnedSkeleton && Array.from({ length: 2 }).map((_, i) => (
                                <JobBoxSkeleton key={`own-skel-${i}`} />
                            ))}
                            {otherCards.map((item: any) => (
                                <div
                                    key={item.__key}
                                    className="relative rounded-card"
                                    title={translations?.creatorPreviewOtherDisabled}
                                >
                                    <div className="pointer-events-none select-none h-full" aria-hidden>
                                        <JobsBox
                                            data={item}
                                            userDetails={userDetails}
                                            translations={translations}
                                            setOpenSideModal={() => { /* read-only in preview */ }}
                                            isFromCreate={true}
                                        />
                                    </div>
                                </div>
                            ))}
                            {showOtherSkeleton && Array.from({ length: 3 }).map((_, i) => (
                                <JobBoxSkeleton key={`other-skel-${i}`} />
                            ))}
                        </div>
                        {!isInitialLoading && ownedCards.length === 0 && otherCards.length === 0 && (
                            <div className="w-full bg-lightPrimary p-5 rounded-lg flex items-center justify-center mt-4">
                                {translations?.noDataFound}
                            </div>
                        )}
                        <p className="text-sm  text-neutral-500 mt-5 text-center">
                            {translations?.showingLimitedSample}
                        </p>
                    </div>
                </div>
            </div>
            {detailPanel && (
                <CreatorPreviewDetailPanel
                    campaign={detailPanel}
                    brandDetail={resolveBrandDetail(detailPanel)}
                    translations={translations}
                    onClose={() => setDetailPanel(null)}
                />
            )}
        </>
    );
};

export default CreatorPreviewModal;