import { useTranslation } from 'react-i18next';
import { HeaderType } from '@/entities/common/model/types';
import { useSetFooterMode, useSetHeaderTitle, useSetHeaderType } from '@/widgets/sub-layout/use-sub-layout';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useLocation } from 'react-router';
import { IMAGE_ROOT } from "@/shared/constants/common";
import { PATHS } from '@/shared/constants/paths';
import { useExtensionLinkPayRequestMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-request-mutation';
import { ExtensionLinkPayRequestParams, ExtensionLinkPayRequestResponse, LinkPaymentFormData } from '@/entities/additional-service/model/link-pay/types';
import { snackBar } from '@/shared/lib';

export const LinkPaymentApplyConfirmPage = () => {
    const { t } = useTranslation();
    const { navigate } = useNavigate();
    const location = useLocation();

    const formData: LinkPaymentFormData = location.state?.formData;
    const { mutateAsync: linkPayRequest } = useExtensionLinkPayRequestMutation();

    useSetHeaderTitle(t('additionalService.linkPayment.messagePreview'));
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);

    const onClickToConfirm = () => {
        if (!formData) {
            console.error('Form data is missing');
            return;
        }

        const requestParams: ExtensionLinkPayRequestParams = {
            mid: formData.mid,
            sendMethod: formData.sendMethod,
            goodsName: formData.goodsName,
            amount: formData.amount,
            moid: formData.moid,
            paymentLimitDate: formData.paymentLimitDate.replace(/\./g, ''),
            buyerName: formData.buyerName,
            ...(formData.sendMethod === 'EMAIL' && {
                email: formData.email
            }),
            ...((formData.sendMethod === 'SMS' || formData.sendMethod === 'KAKAO') && {
                phoneNumber: formData.phoneNumber,
            }),
            isIdentity: formData.isIdentity,
            ...(formData.isIdentity && {
                identityType: formData.identityType,
                identityValue: formData.identityValue,
            }),
            language: formData.language,
            linkContentType: formData.linkContentType
        };
        linkPayRequest(requestParams)
            .then((rs: ExtensionLinkPayRequestResponse) => {
                if (rs.status) {
                    navigate(PATHS.additionalService.linkPayment.confirmSuccess);
                } else {
                    // 일반 에러 메시지
                    const errorMessage = rs.error?.message || t('additionalService.linkPayment.requestProcessingError');
                    snackBar(`[${t('common.failed')}] ${errorMessage}`);
                }
            })
            .catch((error) => {
                // 네트워크 에러 등 예외 상황
                const errorMessage = error?.response?.data?.error?.message ||
                    error?.message ||
                    t('additionalService.linkPayment.requestError');
                snackBar(`[${t('common.failed')}] ${errorMessage}`);
            });
    };

    const onClickToBack = () => {
        navigate(-1);
    };

    return (
        <>
            <main className="pop">
                <div className="sub-wrap">
                    <div className="preview-body">
                        <div className="attention-icon" aria-hidden="true">
                            <img src={IMAGE_ROOT + '/ico_alert.svg'} alt={t('common.confirm')} />
                        </div>
                        <h1 className="preview-title">{t('additionalService.linkPayment.confirmSendMessage')}</h1>
                        <div className="preview-result">
                            <p className="preview-text">
                                {t('additionalService.linkPayment.customerGreeting', { buyerName: formData.buyerName })}<br />
                                {t('additionalService.linkPayment.paymentGuideMessage')}<br /><br />
                                !$&#123;pay_url&#125;<br /><br />
                                <b>
                                    {t('additionalService.linkPayment.merchantName')} : 나이스페이먼츠 주식회사<br />
                                    {t('transaction.fields.productName')} : {formData.goodsName}<br />
                                    {t('transaction.fields.amount')} : {formData.amount.toLocaleString()}{t('common.currencyUnit')}
                                </b>
                            </p>
                        </div>
                    </div>
                </div>

                <div className="apply-row two-button">
                    <button
                        className="btn-50 btn-darkgray flex-1"
                        onClick={() => onClickToBack()}
                    >{t('additionalService.linkPayment.previous')}</button>
                    <button
                        className="btn-50 btn-blue flex-3"
                        onClick={() => onClickToConfirm()}
                    >{t('additionalService.linkPay.paymentRequest')}</button>
                </div>
            </main>
        </>
    );
};