'use client'
import { useCallback, useEffect, useRef, useState } from 'react';
import DraftModal from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail/DraftInfo/DraftModal';
import JobDetailSidebar from './JobDetailSidebar';
import UploadDraftModal from './UploadDraftModal';
import { useQuery } from '@tanstack/react-query';
import { CampaignAPI } from '@/Utils/APIRequest/Endpoints';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import UploadPost from './UploadPost';
import Cookies from 'js-cookie';
import ConfirmModal from './ConfirmModal';
import QuickApply from '../QuickApply';
import DisputeModal from '@/Component/Common/DisputeModal';
import NeedHelpConfirmModal from '@/Component/Common/NeedHelpConfirmModal';
import useOutsideDropdown from '@/Utils/Hooks/useOutsideDropdown';
import { AppStore } from '@/lib/store';
import { useDispatch, useSelector } from 'react-redux';
import { setNotificationDetailState } from '@/lib/Features/UserDetailSidebar/userDetailSidebar';
import BankModal from './BankModal';
import Modal from '@/Component/Common/Modal';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import { setTimeout } from 'timers';
import { useSearchParams } from 'next/navigation';
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal';
import { useCometChatReady } from '@/Utils/Hooks/useCometChatReady';
import Loader from '@/Layout/Loader';
import { InfoCircleSVG } from '@/Component/Common/SVGs/CommonSVG';
import ChatAttachmentChoiceModal from '@/Component/Common/CampaignChatInfo/ChatAttachmentChoiceModal';
import { notifyCometChatRead } from '@/Utils/notifyCometChatRead';

const JobDetails = (props) => {
    const { openSideModal, setOpenSideModal, onCloseSidebar, syncCampaignUrl, mainListRefetch, setActiveTab, setParams, params, isFromAdmin = false, UserDetailData } = props;
    const dispatch = useDispatch();
    const searchParams = useSearchParams();
    const [draftModalOpen, setDraftModalOpen] = useState<any>(null);
    const [uploadDraftModalOpen, setUploadDraftModalOpen] = useState(null);
    const [uploadPost, setUploadPost] = useState<any>(null);
    const [confirmModalOpen, setConfirmModalOpen] = useState<any>(null);
    const [bankModalOpen, setBankModalOpen] = useState<any>(null);
    const [applyModal, setApplyModal] = useState<any>(null);
    const [uploadLoader, setUploadLoader] = useState(false);
    const [disputeModal, setDisputeModal] = useState<any>(null);
    const [needHelpConfirmModal, setNeedHelpConfirmModal] = useState<any>(null);
    const [uploadPostNoDraftConfirmOpen, setUploadPostNoDraftConfirmOpen] = useState(false);
    const [attachmentChoiceType, setAttachmentChoiceType] = useState<'draft' | 'post' | null>(null);
    const [pendingChatAttachmentPicker, setPendingChatAttachmentPicker] = useState(false);
    const openChatAttachmentRef = useRef<(() => void) | null>(null);
    const cometNotifiedRef = useRef<string | null>(null);
    const chatUploadHandlersRef = useRef<{ onUploadDraft?: () => void; onUploadPost?: () => void }>({});
    const { ref, isComponentVisible, setIsComponentVisible } = useOutsideDropdown();
    const { translations } = useTranslation();
    const notificationDetailState: any = useSelector((state: AppStore) => state.userDetailSidebar.notificationDetailState);
    const [mediaUploading, setMediaUploading] = useState(false);
    const [pendingRedirectHandled, setPendingRedirectHandled] = useState(false);
    const isCometChatReady = useCometChatReady();
    const campaignId = openSideModal?.campaignDetailId;
    const unreadCounts = useSelector((state: AppStore) => state.unreadCountSlice?.counts || {});

    // Get API — backend requires campaign_id (not slug)
    const { data: JobDetailData, fetchStatus, refetch } = useQuery({
        queryKey: [CampaignAPI, openSideModal?.slug, campaignId],
        queryFn: ({ queryKey }) => {
            const id = queryKey[2];
            // Never hit the API with a missing id (avoids campaign_id=undefined 400s)
            if (id == null || id === '' || id === 'undefined') {
                return Promise.resolve({ data: { data: null } });
            }
            return CustomFetch({
                url: `${CampaignAPI}/influencer/campaign-brand?campaign_id=${id}`,
            }, null, false);
        },
        enabled: !!(openSideModal?.slug && campaignId),
        refetchOnWindowFocus: false,
        select: (data) => data?.data?.data,
    });

    const campaignQueryPending = Boolean(openSideModal && campaignId && fetchStatus === 'fetching');
    const influencerStatus = JobDetailData?.campaign?.campaignInfluencers?.[0]?.status;
    const needsCometChat =
        (JobDetailData?.campaign?.campaignInfluencers?.length ?? 0) > 0 &&
        influencerStatus !== 'uncontacted';
    const waitingForCometChat = Boolean(openSideModal && needsCometChat && !isCometChatReady);
    const isPreparingSidebar = campaignQueryPending || waitingForCometChat;
    const showSidebar = Boolean(openSideModal && !isPreparingSidebar);

    const [commentDrafts, setCommentDrafts] = useState({});
    const handleCommentChange = (draftId, text) => {
        setCommentDrafts((prev) => ({
            ...prev,
            [draftId]: text, // Store comment per draft
        }));
    };

    useEffect(() => {
        setIsComponentVisible(showSidebar);
    }, [showSidebar]);

    useEffect(() => {
        if (notificationDetailState !== null) {
            // Require campaignDetailId — slug-only payloads cause campaign_id=undefined
            if (!notificationDetailState?.slug || !notificationDetailState?.campaignDetailId) return;
            setIsComponentVisible(true)
            setOpenSideModal(notificationDetailState)
            syncCampaignUrl?.(notificationDetailState.slug);
        }
    }, [notificationDetailState])

    // Handle opening sidebar from URL parameters (email links or pending redirects)
    useEffect(() => {
        if (!pendingRedirectHandled) {
            const hasPendingRedirect = Cookies.get('pending_redirect_handled');
            const metadataParam = searchParams.get("metadata");

            // Check if we should open sidebar from URL parameters
            // Works for both: logged-in users clicking email links OR after login redirect
            if (metadataParam) {
                try {
                    const metadata = JSON.parse(decodeURIComponent(metadataParam));
                    const campaignSlug = metadata?.redirect_slug;
                    const campaignId = metadata?.redirect_id;

                    if (campaignSlug && campaignId) {
                        const obj = {
                            slug: campaignSlug,
                            campaignDetailId: campaignId
                        };

                        setTimeout(() => {
                            setOpenSideModal(obj);
                            setIsComponentVisible(true);
                            syncCampaignUrl?.(campaignSlug);
                            setPendingRedirectHandled(true);
                        }, 1000);
                    }
                } catch (error) {
                    console.error("Error parsing metadata:", error);
                }
            }
        }
    }, [searchParams, pendingRedirectHandled])

    const clickOut = () => {
        setIsComponentVisible((prev) => false)
        setOpenSideModal(null)
        setUploadPost(null)
        setAttachmentChoiceType(null)
        setPendingChatAttachmentPicker(false)
        dispatch(setNotificationDetailState(null))
        onCloseSidebar?.()
    }

    const handleRegisterChatUploadHandlers = useCallback((handlers: { onUploadDraft: () => void; onUploadPost: () => void }) => {
        chatUploadHandlersRef.current = handlers;
    }, []);

    const handleRegisterOpenChatAttachment = useCallback((fn: () => void) => {
        openChatAttachmentRef.current = fn;
    }, []);

    // Composer unmounts while the choice modal is open; open picker after it remounts
    useEffect(() => {
        if (!attachmentChoiceType && pendingChatAttachmentPicker) {
            const timer = setTimeout(() => {
                openChatAttachmentRef.current?.();
                setPendingChatAttachmentPicker(false);
            }, 50);
            return () => clearTimeout(timer);
        }
    }, [attachmentChoiceType, pendingChatAttachmentPicker]);

    const brandName = JobDetailData?.campaign?.users?.company_name
        || [JobDetailData?.brandDetails?.first_name, JobDetailData?.brandDetails?.last_name].filter(Boolean).join(' ')
        || 'the brand';

    const handleRequestUploadPost = () => {
        const hasDrafts = (JobDetailData?.campaign?.campaignInfluencers?.[0]?.drafts?.length ?? 0) > 0;
        if (hasDrafts) {
            setUploadPost(true);
        } else {
            setUploadPostNoDraftConfirmOpen(true);
        }
    };

    const handleConfirmUploadPostNoDraft = () => {
        setUploadPost(true);
        setUploadPostNoDraftConfirmOpen(false);
    };

    useEffect(() => {
        const campaignInfluencer = JobDetailData?.campaign?.campaignInfluencers?.[0];
        const groupId = String(campaignInfluencer?.id || '').replace(/^group_/, '');
        const brandId = JobDetailData?.campaign?.users?.id || JobDetailData?.brandDetails?.id;
        const openCampaignId = JobDetailData?.campaign?.id;
        if (!groupId || !brandId || !openCampaignId) return;

        // const unread = Number(unreadCounts[groupId] || 0);
        // if (unread <= 0 || cometNotifiedRef.current === groupId) return;
        // cometNotifiedRef.current = groupId;

        // Influencer opened a campaign sidebar that still has unread — sender_id is the brand.
        notifyCometChatRead({ campaign_id: openCampaignId, sender_id: brandId });
    }, [JobDetailData?.campaign?.campaignInfluencers?.[0]?.id, JobDetailData?.campaign?.id, JobDetailData?.campaign?.users?.id, JobDetailData?.brandDetails?.id, unreadCounts]);

    useEffect(() => {
        if (openSideModal?.setTriggerUploadPost) {
            openSideModal.setTriggerUploadPost(handleRequestUploadPost);
        }
    }, [openSideModal, JobDetailData]);

    useEffect(() => {
        const code = searchParams.get('code');
        const campaignData = Cookies.get('campaign_data') ? JSON.parse(Cookies.get('campaign_data')) : null;
        if (code && campaignData?.slug && campaignData?.id) {
            setOpenSideModal({ slug: campaignData?.slug, campaignDetailId: campaignData?.id });
            syncCampaignUrl?.(campaignData.slug);
            setUploadPost(true);
        }
    }, [searchParams]);

    // Call it ONLY ONCE when you want to trigger
    useEffect(() => {
        if (openSideModal?.setTriggerUploadDraft) {
            openSideModal.setTriggerUploadDraft(); // This calls fileInputRef.current.click()
            // Clear it so it doesn't fire again
            setTimeout(() => openSideModal.setTriggerUploadDraft = null, 1000);
        }
    }, [openSideModal]);

    return (
        <>
            {isPreparingSidebar && (
                <div className="z-[62] fixed inset-0 flex items-center justify-center bg-black/40">
                    <Loader />
                </div>
            )}
            <div ref={ref} className={`z-[63] fixed top-0 right-0 2xl:w-2/3 xl:w-4/5 w-full h-full bg-white shadow-lg transform transition-all ${showSidebar ? 'translate-x-0' : 'translate-x-full transition-all'}`}>
                <div className="h-screen lg:px-6 lg:pb-8 pb-4 px-4 w-full overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-lightGray [&::-webkit-scrollbar-thumb]:bg-gray/75 relative transition-all pt-20">
                    {!uploadPost ?
                        <>
                            {openSideModal && <JobDetailSidebar openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} draftModalOpen={draftModalOpen} setDraftModalOpen={setDraftModalOpen} uploadDraftModalOpen={uploadDraftModalOpen} setUploadDraftModalOpen={setUploadDraftModalOpen} JobDetailData={JobDetailData} JobDetailDataRefetch={refetch} mainListRefetch={mainListRefetch} fetchStatus={fetchStatus} setUploadPost={setUploadPost} uploadPost={uploadPost} onRequestUploadPost={handleRequestUploadPost} setConfirmModalOpen={setConfirmModalOpen} setApplyModal={setApplyModal} applyModal={applyModal} setUploadLoader={setUploadLoader} setDisputeModal={setDisputeModal} setNeedHelpConfirmModal={setNeedHelpConfirmModal} needHelpConfirmModal={needHelpConfirmModal} disputeModal={disputeModal} ref={ref} isComponentVisible={isComponentVisible} setIsComponentVisible={setIsComponentVisible} setBankModalOpen={setBankModalOpen} translations={translations} mediaUploading={mediaUploading} setMediaUploading={setMediaUploading} setAttachmentChoiceType={setAttachmentChoiceType} onRegisterChatUploadHandlers={handleRegisterChatUploadHandlers} registerOpenChatAttachment={handleRegisterOpenChatAttachment} attachmentChoiceModalOpen={!!attachmentChoiceType} isFromAdmin={isFromAdmin} />}
                        </>
                        :
                        <UploadPost JobDetailData={JobDetailData} JobDetailDataRefetch={refetch} setUploadPost={setUploadPost} mainListRefetch={mainListRefetch} translations={translations} />
                    }
                </div>
            </div>

            {draftModalOpen && <DraftModal draftModalOpen={draftModalOpen} setDraftModalOpen={setDraftModalOpen} refetch={refetch} uploadDraftModalOpen={uploadDraftModalOpen} setUploadDraftModalOpen={setUploadDraftModalOpen} setUploadLoader={setUploadLoader} ManagementDetailData={JobDetailData?.campaign} translations={translations} commentText={commentDrafts[draftModalOpen?.item?.id] || ""} setCommentText={(text) => handleCommentChange(draftModalOpen?.item?.id, text)} />}

            {/* {draftModalOpen && <DraftModal draftModalOpen={draftModalOpen} setDraftModalOpen={setDraftModalOpen} refetch={refetch} uploadDraftModalOpen={uploadDraftModalOpen} setUploadDraftModalOpen={setUploadDraftModalOpen} setUploadLoader={setUploadLoader} ManagementDetailData={JobDetailData?.campaign} translations={translations} />} */}

            {uploadDraftModalOpen && <UploadDraftModal uploadDraftModalOpen={uploadDraftModalOpen} setUploadDraftModalOpen={setUploadDraftModalOpen} setDraftModalOpen={setDraftModalOpen} JobDetailDataRefetch={refetch} uploadLoader={uploadLoader} mainListRefetch={mainListRefetch} translations={translations} />}

            {confirmModalOpen && <ConfirmModal confirmModalOpen={confirmModalOpen} setConfirmModalOpen={setConfirmModalOpen} translations={translations} />}

            {bankModalOpen && <BankModal bankModalOpen={bankModalOpen} setBankModalOpen={setBankModalOpen} setOpenSideModal=
                {setOpenSideModal} translations={translations} />}

            {applyModal && <QuickApply modal={applyModal} setModal={setApplyModal} refetch={refetch} mainListRefetch={mainListRefetch} setOpenSideModal={setOpenSideModal} setActiveTab={setActiveTab} translations={translations} setParams={setParams} params={params} onCloseSidebar={onCloseSidebar} />}

            {disputeModal && <DisputeModal modal={disputeModal} setModal={setDisputeModal} refetch={refetch} translations={translations} />}
            {needHelpConfirmModal && <NeedHelpConfirmModal modal={needHelpConfirmModal} setModal={setNeedHelpConfirmModal} translations={translations} />}

            {uploadPostNoDraftConfirmOpen && <ConfirmationModal modal={uploadPostNoDraftConfirmOpen} setModal={setUploadPostNoDraftConfirmOpen} loader={false} args={{ message: translations?.uploadPostNoDraftConfirmMessage, buttonText: translations?.ok, icon: <InfoCircleSVG customClass="h-14 w-14 text-yellow-400" /> }} callbackFunction={handleConfirmUploadPostNoDraft} />}

            {attachmentChoiceType && (
                <ChatAttachmentChoiceModal
                    type={attachmentChoiceType}
                    setType={setAttachmentChoiceType}
                    brandName={brandName}
                    translations={translations}
                    onUploadAttachment={() => setPendingChatAttachmentPicker(true)}
                    onUploadDraft={() => chatUploadHandlersRef.current?.onUploadDraft?.()}
                    onPostDeliverable={() => chatUploadHandlersRef.current?.onUploadPost?.()}
                />
            )}

            {showSidebar && <div onClick={clickOut} className='z-[61] fixed before:fixed before:top-0 before:left-0 before:w-full before:h-full before:bg-black/50'></div>}
        </>
    );
}

export default JobDetails