import { useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import moment from 'moment'
import { formatNumber } from '@/Utils/Other/FormateNumbers';
import QuickApply from '@/Component/Influencer/InfluencerJobs/QuickApply';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import CampaignStatus from '@/Component/Brand/MyCampaigns/CampaignListing/CampaignStatus';
import { translateJobRequirements } from '@/Utils/Other/TranslateJobRequirement';

const MyJobBox = (props) => {
    const { data, userDetails, refetch, setOpenSideModal, translations, isFromAdmin = false, UserDetailData } = props;
    const router = useRouter();
    const [modal, setModal] = useState<any>(null);

    const handleBoxClick = (event) => {
        if (event.target.tagName === 'BUTTON' || event.target.tagName === 'A' || event.target.closest('button') || event.target.closest('a')) {
            return;
        }
        if (isFromAdmin) {
            const sectionInfluencer = data?.campaignInfluencers || [];
            const currentIndex = sectionInfluencer?.findIndex((item) => item?.id === UserDetailData?.id);
            setOpenSideModal({
                slug: data?.slug,
                status: data?.campaignInfluencers?.[0]?.influencer_status,
                campaignDetailId: data?.id,
                influencerData: { influencer: UserDetailData },
                sectionInfluencer,
                currentIndex: currentIndex >= 0 ? currentIndex : 0,
            });
        } else {
            setOpenSideModal({ slug: data?.slug, campaignDetailId: data?.id });
        }
    };

    const handleRequest = (campaign) => {
        let tempTrigger = null;

        if (campaign?.campaignInfluencers?.[0]?.influencer_status == 'drafting_deliverables') {
            const setTriggerUploadDraft = (fn) => {
                tempTrigger = fn;
                // Auto-trigger it when set
                setTimeout(() => fn?.(), 0); // optional if you want to defer triggering
            };
            setOpenSideModal({ slug: campaign?.slug, campaignDetailId: campaign?.id, setTriggerUploadDraft })
        }

        if (campaign?.campaignInfluencers?.[0]?.influencer_status == 'posting_deliverables') {
            const setTriggerUploadPost = (fn) => {
                // Just store the function, don't invoke it
                setTimeout(() => fn?.(), 0); // optional if you want to defer triggering
            };
            setOpenSideModal({ slug: campaign?.slug, campaignDetailId: campaign?.id, setTriggerUploadPost })
        }

    }

    return (
        <>
            <div className='border border-lightGray rounded-2xl lg:px-6 lg:py-4 p-4 mb-2.5 hover:bg-primary/5 cursor-pointer bg-white shadow' onClick={handleBoxClick}>
                <div className='flex items-center justify-between gap-3'>
                    <span className='font-semibold text-sm'>{moment(data?.campaignInfluencers?.[0]?.draft_due_date).format('DD MMM YYYY')} - {moment(data?.campaignInfluencers?.[0]?.post_due_date).format('DD MMM YYYY')}</span>
                    {data?.campaignInfluencers?.[0]?.influencer_status == 'drafting_deliverables' && <span className='font-semibold text-sm'>{translations?.dueBy} {moment(data?.campaignInfluencers?.[0]?.draft_due_date).format('DD MMM YYYY')}</span>}
                    {data?.campaignInfluencers?.[0]?.influencer_status == 'posting_deliverables' && <span className='font-semibold text-sm'>{translations?.dueBy} {moment(data?.campaignInfluencers?.[0]?.post_due_date).format('DD MMM YYYY')}</span>}
                </div>
                <div className='flex md:items-center justify-between mt-4 mb-5 max-md:flex-col gap-3'>
                    <div className='flex items-center gap-2.5'>
                        <div className='min-w-12 w-12 h-12 rounded-full overflow-hidden'>
                            <ImageWithFallback src={data?.users?.image} alt="Logo" width={48} height={48} className='w-full h-full object-cover' />
                        </div>
                        <div className='flex flex-col'>
                            <h4 className='text-base font-medium cursor-pointer hover:text-primary'>{data?.campaign_name}</h4>
                            <div className='flex items-center gap-2'>
                                <span className='line-clamp-1 text-xs'>{translateJobRequirements(data?.job_requirement, translations)}</span>
                                {/* {data?.content_type?.length > 0 && <span className="rounded-full overflow-hidden">•</span>}
                                <span className='line-clamp-1'>{Array.isArray(data?.content_type) ? data?.content_type.join(', ') : data?.content_type}</span> */}
                            </div>
                        </div>
                    </div>
                </div>
                <div className='flex items-center justify-between'>
                    {(data?.campaignInfluencers?.[0]?.job_status == 'closed' && data?.campaignInfluencers?.[0]?.is_terminate_job_request) ?
                        <span className="py-1.5 px-4 text-center font-semibold capitalize rounded-md bg-red-500/10 text-red-500 text-xs">
                            {translations?.terminatedByBrand}
                        </span> : (data?.campaignInfluencers?.[0]?.job_status == 'closed' && !data?.campaignInfluencers?.[0]?.is_withdraw_job) ?
                            <span className="py-1.5 px-4 text-center font-semibold capitalize rounded-md bg-closed/10 text-closed text-xs">
                                {translations?.completedOn} {moment(data?.campaignInfluencers?.[0]?.updatedAt).format('DD MMM YYYY')}
                            </span> : (data?.campaignInfluencers?.[0]?.job_status == 'closed' && data?.campaignInfluencers?.[0]?.is_withdraw_job) ?
                                <span className="py-1.5 px-4 text-center font-semibold capitalize rounded-md bg-red-500/10 text-red-500 text-xs">
                                    {translations?.withdrawnOn} {moment(data?.campaignInfluencers?.[0]?.updatedAt).format('DD MMM YYYY')}
                                </span> :
                                <CampaignStatus itemData={data} translations={translations} />}
                    {!isFromAdmin && <div className='flex items-center gap-2'>
                        <BorderButton buttonType="button" customClass="max-md:!py-1.5 !text-sm" onClick={() => setOpenSideModal({ slug: data?.slug, campaignDetailId: data?.id })}>{translations?.message}</BorderButton>
                        {(data?.campaignInfluencers?.[0]?.influencer_status == 'drafting_deliverables' || data?.campaignInfluencers?.[0]?.influencer_status == 'posting_deliverables') &&
                            <PrimaryButton buttonType="button" customClass="max-md:!py-1.5 !text-sm" onClick={() => handleRequest(data)}>{data?.campaignInfluencers?.[0]?.influencer_status == 'drafting_deliverables' ? translations?.submitDraft : data?.campaignInfluencers?.[0]?.influencer_status == 'posting_deliverables' ? translations?.submitPost : ''}</PrimaryButton>}
                    </div>}
                </div>
            </div>
        </>
    )
}

export default MyJobBox