import { useTranslation } from 'react-i18next';
import { ProcessStep } from "@/entities/transaction/model/types";
import { useSetOnBack } from "@/widgets/sub-layout/use-sub-layout";
import { IdentityType, Language } from '@/entities/additional-service/model/types'
import { LinkContentType, LinkPaymentFormData } from "@/entities/additional-service/model/link-pay/types";
import { PatternFormat } from 'react-number-format';

export interface LinkPaymentStep2Props {
    setProcessStep: ((processStep: ProcessStep) => void);
    formData: LinkPaymentFormData;
    setFormData: (formData: LinkPaymentFormData) => void;
}

export const LinkPaymentStep2 = ({
    setProcessStep,
    formData,
    setFormData
}: LinkPaymentStep2Props) => {
    const { t } = useTranslation();

    useSetOnBack(() => {
        setProcessStep(ProcessStep.One);
    });

    // 전화번호 형식 검증
    const isValidPhoneNumber = (phone: string) => {
        const phoneRegex = /^01[0|1|6|7|8|9][0-9]{7,8}$/;
        return phoneRegex.test(phone);
    };

    const handleInputChange = (field: string, value: string) => {
        setFormData({ ...formData, [field]: value });
    };

    const handleIdendityTypeChange = (type: IdentityType) => {
        setFormData({ ...formData, identityType: type });
    }

    const handleLanguageType = (type: Language) => {
        setFormData({ ...formData, language: type });
    }

    const handleLinkContent = (content: LinkContentType) => {
        setFormData({ ...formData, linkContentType: content });
    }

    const handleIdentityToggle = (isChecked: boolean) => {
        setFormData({ ...formData, isIdentity: isChecked });
    }

    return (
        <>
            <div className="issue-form">
                <div className="issue-row gap-10">
                    <div className="issue-label wid-105">{t('transaction.fields.buyerName')}</div>
                    <div className="issue-field">
                        <input
                            type="text"
                            placeholder=""
                            value={formData.buyerName}
                            onChange={(e) => handleInputChange('buyerName', e.target.value)}
                        />
                    </div>
                </div>

                {formData.sendMethod === 'EMAIL' &&
                    <div className="issue-row gap-10">
                        <div className="issue-label wid-105">{t('additionalService.linkPayment.buyerEmail')}</div>
                        <div className="issue-field">
                            <input
                                type="text"
                                placeholder="test@nicepay.co.kr"
                                value={formData.email}
                                onChange={(e) => handleInputChange('email', e.target.value)}
                            />
                        </div>
                    </div>
                }

                {(formData.sendMethod === 'SMS' || formData.sendMethod === 'KAKAO') &&
                    <div className="issue-row gap-10">
                        <div className="issue-label wid-105" dangerouslySetInnerHTML={{ __html: t('additionalService.linkPayment.buyerPhoneNumber') }}></div>
                        <div className="issue-field">
                            <input
                                type="tel"
                                placeholder="01012345678"
                                value={formData.phoneNumber}
                                onChange={(e) => {
                                    const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
                                    handleInputChange('phoneNumber', onlyNumbers);
                                }}
                                className={formData.phoneNumber && !isValidPhoneNumber(formData.phoneNumber) ? 'error' : ''}
                                inputMode="numeric"
                                pattern="[0-9]*"
                                maxLength={11}
                            />
                        </div>
                    </div>
                }


                <div className="issue-row gap-10 beetween">
                    <div className="issue-label wid-105">{t('additionalService.linkPayment.buyerInfoVerification')}</div>
                    <label className="settings-switch">
                        <input type="checkbox" checked={formData.isIdentity} onChange={(e) => handleIdentityToggle(e.target.checked)} />
                        <span className="slider"></span>
                    </label>
                </div>
                <div className="issue-row gap-10">
                    <div className="issue-label wid-105"></div>
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.INDIVIDUAL ? 'active' : ''} ${!formData.isIdentity ? 'disabled' : ''}`}
                                onClick={() => formData.isIdentity && handleIdendityTypeChange(IdentityType.INDIVIDUAL)}
                                style={!formData.isIdentity ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
                            >
                                {t('additionalService.linkPayment.individual')}
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${formData.identityType === IdentityType.CORPORATE ? 'active' : ''} ${!formData.isIdentity ? 'disabled' : ''}`}
                                onClick={() => formData.isIdentity && handleIdendityTypeChange(IdentityType.CORPORATE)}
                                style={!formData.isIdentity ? { opacity: 0.5, cursor: 'not-allowed' } : {}}
                            >
                                {t('additionalService.linkPayment.corporate')}
                            </span>
                        </div>
                    </div>
                </div>

                <div className="issue-row gap-10">
                    <div className="issue-label wid-105"></div>
                    <div className='issue-field'>
                        {formData.identityType === IdentityType.CORPORATE ? (
                            <PatternFormat
                                format="##########"
                                placeholder={t('additionalService.linkPayment.businessNumber10Digits')}
                                value={formData.identityValue}
                                valueIsNumericString
                                onValueChange={(values) => {
                                    const { value } = values;
                                    handleInputChange('identityValue', value);
                                }}
                                disabled={!formData.isIdentity}
                            />
                        ) : (
                            <PatternFormat
                                format="######"
                                placeholder={t('additionalService.linkPayment.birthDate6Digits')}
                                value={formData.identityValue}
                                valueIsNumericString
                                onValueChange={(values) => {
                                    const { value } = values;
                                    handleInputChange('identityValue', value);
                                }}
                                disabled={!formData.isIdentity}
                            />
                        )}
                    </div>
                </div>

                <div className="issue-row gap-10">
                    <div className="issue-label wid-105">{t('additionalService.linkPayment.language')}</div>
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
                                className={`keyword-tag flex-1 ${formData.language === Language.KR ? 'active' : ''}`}
                                onClick={() => handleLanguageType(Language.KR)}
                            >
                                {t('additionalService.linkPayment.korean')}
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${formData.language === Language.EN ? 'active' : ''}`}
                                onClick={() => handleLanguageType(Language.EN)}
                            >
                                {t('additionalService.linkPayment.english')}
                            </span>
                        </div>
                    </div>
                </div>
                <div className="issue-row gap-10">
                    <div className="issue-label wid-105">{t('additionalService.linkPayment.linkContent')}</div>
                    <div className="issue-field">
                        <div className="chip-row">
                            <span
                                className={`keyword-tag flex-1 ${formData.linkContentType === LinkContentType.BASIC ? 'active' : ''}`}
                                onClick={() => handleLinkContent(LinkContentType.BASIC)}
                            >
                                {t('additionalService.linkPayment.basic')}
                            </span>
                            <span
                                className={`keyword-tag flex-1 ${formData.linkContentType === LinkContentType.ADDITIONAL ? 'active' : ''}`}
                                onClick={() => handleLinkContent(LinkContentType.ADDITIONAL)}
                            >
                                {t('additionalService.linkPayment.additional')}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </>
    )
}