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, LinkPaymentFormData } from '@/entities/additional-service/model/link-pay/types';

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

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

    useSetHeaderTitle('메시지 미리보기');
    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,
            paymentExpiryDate: formData.paymentExpiryDate.replace(/\./g, ''),
            buyerName: formData.buyerName,
            email: formData.email,
            phoneNumber: formData.phoneNumber,
            isIdentity: formData.isIdentity,
            identityType: formData.identityType,
            identityValue: formData.identityValue,
            language: formData.language,
            linkContentType: formData.linkContentType
        };

        console.log("Link Payment 요청 파라미터: ", requestParams);

        linkPayRequest(requestParams)
            .then((response) => {
                console.log("Link Payment 성공 응답: ", response);
                navigate(PATHS.additionalService.linkPayment.confirmSuccess);
            })
            .catch((error) => {
                console.error("Link Payment 실패: ", error);
                // 에러 처리 로직 추가 가능
            });
    };

    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="주의" />
                        </div>
                        <h1 className="preview-title">발송 메시지를<br/>최종 확인하세요</h1>
                        <div className="preview-result">
                            <p className="preview-text">
                                TEST  고객님, 안녕하세요?<br/>
                                나이스페이먼츠 주식회사에서 <br/>
                                결제하실 내역 안내드립니다.<br/>
                                아래 URL로 접속하시면 상세 내역 확인과 결제 진행이 가능합니다.<br/><br/>
                                !$&#123;pay_url&#125;<br/><br/>
                                <b>
                                    가맹점 상호 : 나이스페이먼츠 주식회사<br/>
                                    상품명 : {formData.goodsName}<br/>
                                    금액 : {formData.amount}원
                                </b>
                            </p>
                        </div>
                    </div>
                </div>

                <div className="apply-row two-button">
                    <button
                        className="btn-50 btn-darkgray flex-1"
                        onClick={() => onClickToBack()}
                    >이전</button>
                    <button
                        className="btn-50 btn-blue flex-3"
                        onClick={() => onClickToConfirm()}
                    >결제 신청</button>
                </div>
            </main>
        </>
    );
};