import { useSelector } from "react-redux";
import { AppStore } from "@/lib/store";

const CampaignStatus = (props) => {
    const { itemData, isFromDashboard = false, isFromBrand = false, translations } = props;
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    const InfluencerStatus = {
        UNCONTACTED: 'uncontacted',
        QUOTATION_AVAILABLE: 'quotation_available',
        DRAFTING_DELIVERABLES: 'drafting_deliverables',
        DRAFT_AVAILABLE: 'draft_available',
        POSTING_DELIVERABLES: 'posting_deliverables',
        COMPLETION_REQUEST: 'completion_request',
        CLOSED: 'closed',
        ARCHIVED: 'archived',
        WAITING_FOR_QUOTATION: 'waiting_for_quotations'
    };

    const statusStyles = {
        [InfluencerStatus.UNCONTACTED]: 'bg-unContacted/10 text-unContacted',
        [InfluencerStatus.QUOTATION_AVAILABLE]: userDetails?.role === 'brand' ? 'bg-quoteAvailable text-white' : 'bg-quoteAvailable/10 text-quoteAvailable',
        [InfluencerStatus.DRAFTING_DELIVERABLES]: 'bg-draftDeliverables/10 text-draftDeliverables',
        [InfluencerStatus.DRAFT_AVAILABLE]: userDetails?.role === 'brand' ? 'bg-draftAvailable text-white' : 'bg-draftAvailable/10 text-draftAvailable',
        [InfluencerStatus.POSTING_DELIVERABLES]: 'bg-postingDeliverables/10 text-postingDeliverables',
        [InfluencerStatus.COMPLETION_REQUEST]: userDetails?.role === 'brand' ? 'bg-completionRequest text-white' : 'bg-completionRequest/10 text-completionRequest',
        [InfluencerStatus.CLOSED]: 'bg-closed/10 text-closed',
        [InfluencerStatus.ARCHIVED]: 'bg-red-500/10 text-red-500',
        [InfluencerStatus.WAITING_FOR_QUOTATION]: 'bg-waitingQuote/10 text-waitingQuote'
    };

    const statusLabels = {
        [InfluencerStatus.UNCONTACTED]: translations?.unContacted,
        [InfluencerStatus.QUOTATION_AVAILABLE]: userDetails?.role === 'brand' ? translations?.quotationAvailable : translations?.waitingForQuotationApproval,
        [InfluencerStatus.DRAFTING_DELIVERABLES]: userDetails?.role === 'brand' ? translations?.draftDeliverables : translations?.pendingDraft,
        [InfluencerStatus.DRAFT_AVAILABLE]: userDetails?.role === 'brand' ? translations?.draftAvailable : translations?.waitingForDraftApproval,
        [InfluencerStatus.POSTING_DELIVERABLES]: userDetails?.role === 'brand' ? translations?.postingDeliverables : translations?.pendingPost,
        [InfluencerStatus.COMPLETION_REQUEST]: userDetails?.role === 'brand' ? translations?.completionRequest : translations?.waitingForCompletion,
        [InfluencerStatus.CLOSED]: translations?.closed,
        [InfluencerStatus.ARCHIVED]: translations?.archived,
        [InfluencerStatus.WAITING_FOR_QUOTATION]: translations?.waitingForQuotations
    };

    const influencerStatus = itemData?.campaignInfluencers?.[0]?.influencer_status || itemData?.status;
    const isTerminatedByBrand = itemData?.campaignInfluencers?.[0]?.is_terminate_job_request;

    return (
        <span className={`${isFromDashboard ? 'text-xs leading-6 px-2.5 py-1' : 'py-1.5 px-4'} ${isFromBrand ? 'w-full block' : ''} text-center font-semibold capitalize rounded-md text-xs ${isTerminatedByBrand ? 'bg-red-500/10 text-red-500' : (statusStyles[influencerStatus] || '')}`}>
            {isTerminatedByBrand ? translations?.terminatedByBrand : (statusLabels[influencerStatus] || '')}
        </span>
    );
};

export default CampaignStatus;