import { ChangeEvent, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useLocation } from 'react-router';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { useExtensionKeyinApplyMutation } from '@/entities/additional-service/api/use-extension-keyin-apply-mutation';
import {
    useSetHeaderTitle,
    useSetHeaderType,
    useSetFooterMode,
    useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useStore } from '@/shared/model/store';
import { snackBar } from '@/shared/lib';
import { NumericFormat, PatternFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { showAlert } from '@/widgets/show-alert';
import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';

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

    const userMid = useStore.getState().UserStore.mid;
    const midOptions = useStore.getState().UserStore.selectOptionsMids

    const [mid, setMid] = useState<string>(userMid || '');
    const [productName, setProductName] = useState<string>('');
    const [amount, setAmount] = useState<number>(0);
    const [customerName, setCustomerName] = useState<string>('');
    const [email, setEmail] = useState<string>('');
    const [phoneNumber, setPhoneNumber] = useState<string>('');
    const [cardNo1, setCardNo1] = useState<string>('');
    const [cardNo2, setCardNo2] = useState<string>('');
    const [cardNo3, setCardNo3] = useState<string>('');
    const [cardNo4, setCardNo4] = useState<string>('');
    const [expMon, setExpMon] = useState<string>('');
    const [expYear, setExpYear] = useState<string>('');
    const [instmnt, setInstmnt] = useState<string>('00');
    const [orderNumber, setOrderNumber] = useState<string>('');

    const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
    const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();

    useSetHeaderTitle(t('additionalService.keyIn.title'));
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
        navigate(PATHS.additionalService.keyInPayment.list);
    });

    const resetForm = () => {
        setProductName('');
        setAmount(0);
        setCustomerName('');
        setEmail('');
        setPhoneNumber('');
        setCardNo1('');
        setCardNo2('');
        setCardNo3('');
        setCardNo4('');
        setExpMon('');
        setExpYear('');
        setInstmnt('00');
        setOrderNumber('');
    };

    const callKeyInPaymentRequest = () => {
        const cardNo = `${cardNo1}${cardNo2}${cardNo3}${cardNo4}`;
        const cardExpire = `${expMon}${expYear}`
        let keyInApplyParams = {
            mid: mid,
            cardNo: cardNo,
            cardExpire: cardExpire,
            instmnt: instmnt,
            amount: amount,
            productName: productName,
            orderNumber: orderNumber,
            customerName: customerName,
            phoneNumber: phoneNumber,
            email: email,
        };

        keyInApply(keyInApplyParams).then((rs) => {
            console.log('KEY-IN 결제 응답:', rs);
            console.log('rs.data:', rs.data);
            console.log('rs.data?.resultMessage:', rs.data?.resultMessage);

            if (rs.status && rs.data?.success) {
                // 성공: 화면 유지 & 입력 내용 초기화
                snackBar(t('additionalService.keyIn.requestSuccess'))
                resetForm();
            } else {
                // 실패: 화면 유지 & 입력 내용 유지
                const errorMessage = rs.data?.resultMessage ||
                    rs.error?.message ||
                    rs.resultMessage ||
                    t('additionalService.keyIn.requestFailed');
                console.log('최종 errorMessage:', errorMessage);
                // HTML 태그 제거
                const cleanMessage = errorMessage.replace(/<br\s*\/?>/gi, ' ').trim();
                snackBar(`[${t('common.failed')}] ${cleanMessage}`);
            }
        }).catch((error) => {
            console.error(error);
            const errorMessage = error?.response?.data?.data?.resultMessage ||
                error?.response?.data?.error?.message ||
                error?.message ||
                t('additionalService.keyIn.requestError');
            if (error.response?.data?.error?.root !== "SystemErrorCode") {
                snackBar(`[${t('common.failed')}] ${errorMessage}`);
            } else {
                showAlert(`[${t('common.failed')}] ${errorMessage}`)
            }
        });
    };


    const isValidPhoneNumber = (phone: string) => {
        const phoneRegex = /^01[0|1|6|7|8|9][0-9]{7,8}$/;
        return phoneRegex.test(phone);
    };

    const isValidEmail = (email: string) => {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    };

    const isValidCardNumber = () => {
        // 실제 숫자만 추출 (포맷팅 문자 제거)
        const cleanCardNo1 = cardNo1.replace(/\D/g, '');
        const cleanCardNo2 = cardNo2.replace(/\D/g, '');
        const cleanCardNo3 = cardNo3.replace(/\D/g, '');
        const cleanCardNo4 = cardNo4.replace(/\D/g, '');

        return cleanCardNo1.length === 4 && cleanCardNo2.length === 4 &&
            cleanCardNo3.length === 4 && cleanCardNo4.length === 4;
    };

    const isFormValid = () => {
        return (
            mid.trim() !== '' &&
            productName.trim() !== '' &&
            amount > 0 &&
            customerName.trim() !== '' &&
            expMon.trim() !== '' &&
            expYear.trim() !== '' &&
            orderNumber.trim() !== '' &&
            isValidEmail(email) &&
            isValidPhoneNumber(phoneNumber) &&
            isValidCardNumber()
        );
    };

    const onClickToRequest = () => {
        callKeyInPaymentRequest();
    };

    return (
        <>
            <main>
                <div className="tab-content">
                    <div className="tab-pane sub active">
                        <div className="option-list">
                            <div className="billing-form gap-16">
                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.merchant')} <span>*</span></div>
                                    <div className="billing-field">
                                        <select
                                            value={mid}
                                            onChange={(e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value)}
                                        >
                                            {
                                                midOptions.map((value) => (
                                                    <option
                                                        key={value.value}
                                                        value={value.value}
                                                    >{value.name}</option>
                                                ))
                                            }
                                        </select>
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.productName')} <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value={productName}
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
                                            onFocus={handleInputFocus}
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.productPrice')} <span>*</span></div>
                                    <div className="billing-field">
                                        <NumericFormat
                                            value={amount}
                                            thousandSeparator={true}
                                            allowNegative={false}
                                            displayType="input"
                                            onValueChange={(values) => {
                                                const { floatValue } = values;
                                                setAmount(floatValue ?? 0);
                                            }}
                                        ></NumericFormat>
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.buyerName')} <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value={customerName}
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setCustomerName(e.target.value)}
                                            onFocus={handleInputFocus}
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.buyerEmail')} <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="email"
                                            value={email}
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
                                            className={email && !isValidEmail(email) ? 'error' : ''}
                                            onFocus={handleInputFocus}
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.buyerPhoneNumber')} <span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="tel"
                                            value={phoneNumber}
                                            placeholder={t('additionalService.keyIn.phoneNumberPlaceholder')}
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => {
                                                const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
                                                setPhoneNumber(onlyNumbers);
                                            }}
                                            className={phoneNumber && !isValidPhoneNumber(phoneNumber) ? 'error' : ''}
                                            inputMode="numeric"
                                            pattern="[0-9]*"
                                            maxLength={11}
                                            onFocus={handleInputFocus}
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.cardNumber')} <span>*</span></div>
                                </div>
                                <div className="billing-row" style={{ gap: '10px'}}>
                                    <div className="billing-field">
                                        <PatternFormat
                                            className='card-format-input'
                                            value={cardNo1}
                                            allowEmptyFormatting
                                            valueIsNumericString
                                            format="####"
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo1(e.target.value)}
                                            onFocus={handleInputFocus}
                                        >
                                        </PatternFormat>
                                    </div>
                                    <div className="billing-field">
                                        <PatternFormat
                                            className='card-format-input'
                                            value={cardNo2}
                                            allowEmptyFormatting
                                            valueIsNumericString
                                            format="####"
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo2(e.target.value)}
                                            onFocus={handleInputFocus}
                                        >
                                        </PatternFormat>
                                    </div>
                                    <div className="billing-field">
                                        <PatternFormat
                                            className='card-format-input'
                                            value={cardNo3}
                                            allowEmptyFormatting
                                            valueIsNumericString
                                            format="####"
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo3(e.target.value)}
                                            onFocus={handleInputFocus}
                                        >
                                        </PatternFormat>
                                    </div>
                                    <div className="billing-field">
                                        <PatternFormat
                                            className='card-format-input'
                                            value={cardNo4}
                                            allowEmptyFormatting
                                            valueIsNumericString
                                            format="####"
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setCardNo4(e.target.value)}
                                            onFocus={handleInputFocus}
                                        >
                                        </PatternFormat>
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.expiryDate')}<span>*</span></div>
                                    <div className="billing-field" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                                        <PatternFormat
                                            placeholder='MM'
                                            value={expMon}
                                            valueIsNumericString
                                            format='##'
                                            isAllowed={(values) => {
                                                const { value } = values;
                                                if (!value) return true;
                                                const numValue = parseInt(value);
                                                return numValue >= 1 && numValue <= 12;
                                            }}
                                            onValueChange={(values) => {
                                                const { value } = values;
                                                setExpMon(value);
                                            }}
                                            onFocus={handleInputFocus}
                                            onBlur={() => {
                                                if (expMon.length === 1 && parseInt(expMon) >= 1 && parseInt(expMon) <= 9) {
                                                    setExpMon(expMon.padStart(2, '0'));
                                                }
                                            }}
                                            style={{ flex: 1 }}
                                            inputMode="numeric"
                                        />
                                        <span>/</span>
                                        <PatternFormat
                                            placeholder='YY'
                                            value={expYear}
                                            valueIsNumericString
                                            format='##'
                                            onValueChange={(values) => {
                                                const { value } = values;
                                                setExpYear(value);
                                            }}
                                            onFocus={handleInputFocus}
                                            style={{ flex: 1 }}
                                            inputMode="numeric"
                                        />
                                    </div>
                                </div>

                                <div className="billing-row">
                                    <div className="billing-label">{t('additionalService.keyIn.installmentPeriod')}<span>*</span></div>
                                    <div className="billing-field">
                                        <select
                                            disabled={amount < 50000}
                                            value={instmnt}
                                            onChange={(e: ChangeEvent<HTMLSelectElement>) => setInstmnt(e.target.value)}
                                        >
                                            <option value="00">{t('additionalService.keyIn.lumpSum')}</option>
                                            {amount >= 50000 && (
                                                <>
                                                    <option value="02">2개월</option>
                                                    <option value="03">3개월</option>
                                                    <option value="04">4개월</option>
                                                    <option value="05">5개월</option>
                                                    <option value="06">6개월</option>
                                                    <option value="07">7개월</option>
                                                    <option value="08">8개월</option>
                                                    <option value="09">9개월</option>
                                                    <option value="10">10개월</option>
                                                    <option value="11">11개월</option>
                                                    <option value="12">12개월</option>
                                                    <option value="13">13개월</option>
                                                    <option value="14">14개월</option>
                                                    <option value="15">15개월</option>
                                                    <option value="16">16개월</option>
                                                    <option value="17">17개월</option>
                                                    <option value="18">18개월</option>
                                                    <option value="19">19개월</option>
                                                    <option value="20">20개월</option>
                                                    <option value="21">21개월</option>
                                                    <option value="22">22개월</option>
                                                    <option value="23">23개월</option>
                                                    <option value="24">24개월</option>
                                                </>
                                            )}
                                        </select>
                                    </div>
                                </div>

                                <div
                                    className="billing-row"
                                    style={keyboardAwarePadding}
                                >
                                    <div className="billing-label">{t('additionalService.keyIn.orderNumber')}<span>*</span></div>
                                    <div className="billing-field">
                                        <input
                                            type="text"
                                            value={orderNumber}
                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
                                            onFocus={handleInputFocus}
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="apply-row">
                            <button
                                className="btn-50 btn-blue flex-1"
                                onClick={() => onClickToRequest()}
                                disabled={!isFormValid()}
                            >{t('additionalService.keyIn.paymentRequest')}</button>
                        </div>
                    </div>
                </div>
            </main>
        </>
    )
}