'use client';

import { useEffect, useState } from 'react';
import Modal from '@/Component/Common/Modal';
import BorderButton from '@/Component/Common/Forms/BorderButton';
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton';

export type NeedHelpConfirmType =
    | 'open_dispute'
    | 'request_revision'
    | 'escalate_dispute'
    | 'withdraw_from_job'
    | 'request_customer_support'
    | 'hide_influencer'
    | 'terminate_and_hide';

interface NeedHelpConfirmModalProps {
    modal: { type: NeedHelpConfirmType; onConfirm: () => void; onRequestRevision?: () => void; onWithdrawFromJob?: () => void } | null;
    setModal: (m: null) => void;
    translations: Record<string, string>;
}

const NeedHelpConfirmModal = (props: NeedHelpConfirmModalProps) => {
    const { modal, setModal, translations } = props;
    const [isWithdrawAgreementChecked, setIsWithdrawAgreementChecked] = useState(false);

    useEffect(() => {
        if (modal?.type === 'withdraw_from_job') {
            setIsWithdrawAgreementChecked(false);
        }
    }, [modal?.type]);

    if (!modal) return null;

    const config = {
        open_dispute: {
            title: translations?.openDisputeTitle,
            message: translations?.openDisputeCreatorUnresponsiveMessage,
            confirmLabel: translations?.openDispute,
            cancelLabel: translations?.cancel,
        },
        request_customer_support: {
            title: translations?.requestHelpFromCustomerServiceTitle,
            message: translations?.requestHelpFromCustomerServiceMessage,
            confirmLabel: translations?.requestHelpButtonTitle,
            cancelLabel: translations?.cancel,
        },
        hide_influencer: {
            title: translations?.hideThisInfluencer,
            message: translations?.hideThisInfluencerMessage,
            confirmLabel: translations?.hide,
            cancelLabel: translations?.cancel,
        },
        terminate_and_hide: {
            title: translations?.terminateAndHideCreatorTitle,
            message: <div dangerouslySetInnerHTML={{ __html: translations?.terminateAndHideCreatorMessage }} />,
            confirmLabel: translations?.terminateAndHide,
            cancelLabel: translations?.cancel,
        },
        request_revision: {
            title: translations?.requestRevisionFirstTitle,
            message: <div dangerouslySetInnerHTML={{ __html: translations?.requestRevisionFirstMessage }} />,
            confirmLabel: translations?.proceedToDispute,
            secondaryLabel: translations?.requestRevision,
            cancelLabel: translations?.cancel,
        },
        escalate_dispute: {
            title: translations?.escalateToDisputeTitle,
            message: translations?.escalateToDisputeMessage,
            confirmLabel: translations?.openDispute,
            cancelLabel: translations?.cancel,
        },
        withdraw_from_job: {
            title: translations?.withdrawFromJobTitle,
            message: translations?.withdrawFromJobMessage,
            confirmLabel: translations?.withdrawFromJob,
            cancelLabel: translations?.goBack,
        },
    };

    const c = config[modal.type];

    const handleConfirm = () => {
        modal.onConfirm();
        setModal(null);
    };

    const handleRequestRevision = () => {
        modal.onRequestRevision?.();
        setModal(null);
    };

    const handleWithdrawFromJob = () => {
        modal.onWithdrawFromJob?.();
        setModal(null);
    };

    const isTerminateAndHide = modal.type === 'terminate_and_hide';

    return (
        <Modal modalSize="w-full max-w-md" modal={modal} setModal={() => setModal(null)}>
            <div>
                <h3 className="text-xl font-semibold mb-5">{c.title}</h3>
                <p className="text-sm text-gray-700 md:text-base mb-5">{c.message}</p>
                {modal.type === 'withdraw_from_job' && (
                    <div className="mb-5">
                        <p className="text-sm md:text-base text-gray-700 mb-4">
                            {translations?.withdrawFromJobMessage2}
                        </p>
                        <label className="flex items-start gap-2 cursor-pointer">
                            <input
                                type="checkbox"
                                checked={isWithdrawAgreementChecked}
                                onChange={(e) => setIsWithdrawAgreementChecked(e.target.checked)}
                                className="mt-1 h-5 w-5 min-w-5"
                            />
                            <span className="text-sm text-red-500">
                                {translations?.withdrawFromJobMessage3}
                            </span>
                        </label>
                    </div>
                )}
                <div className="flex flex-wrap gap-2 justify-center">

                    {modal.type !== 'withdraw_from_job' && (
                        <BorderButton
                            buttonType="button"
                            onClick={handleConfirm}
                        >
                            {c.confirmLabel}
                        </BorderButton>
                    )}
                    {modal.type === 'withdraw_from_job' && (
                        <PrimaryButton
                            buttonType="button"
                            customClass={isWithdrawAgreementChecked
                                ? '!bg-red-500 !border-red-500'
                                : '!bg-gray !border-gray cursor-not-allowed'
                            }
                            disabled={!isWithdrawAgreementChecked}
                            onClick={handleWithdrawFromJob}
                        >
                            {translations?.withdrawFromJob}
                        </PrimaryButton>
                    )}
                    {modal.type === 'request_revision' && 'secondaryLabel' in c && c.secondaryLabel && (
                        <PrimaryButton
                            buttonType="button"
                            customClass="!bg-red-500 !border-red-500"
                            onClick={handleRequestRevision}
                        >
                            {'secondaryLabel' in c ? c.secondaryLabel : ''}
                        </PrimaryButton>
                    )}
                    {modal.type !== 'request_revision' &&
                        <PrimaryButton
                            buttonType="button"
                            customClass={isTerminateAndHide ? '!bg-red-500 !border-red-500' : ''}
                            onClick={() => setModal(null)}
                        >
                            {c.cancelLabel}
                        </PrimaryButton>}
                </div>
            </div>
        </Modal>
    );
};

export default NeedHelpConfirmModal;