(function() {
    'use strict';

    class NewPatientPage {
        constructor() {
            this.choicesInstances = new Map();
            this.data = {
                nationality: '',
                nationalityCode: '', // 선택된 국적 코드 저장용
                visitPath: ''
            };
            this.isInitialized = false;
            this.KOREA_CODE = 'C202404180007'; 
            this.allowSystemCheck = false;     
        }

        init() {
            if (this.isInitialized) return;
            if (!this.validateDependencies() || !this.validateDOM()) {
                this.scheduleRetry();
                return;
            }
            this.initChoices();
            this.loadCommonCategories();
            this.bindEvents();
            this.isInitialized = true;
			
        }

        validateDependencies() { return !!($ && window.Choices); }
        validateDOM() { return !!(document.querySelector('#selectNationality')); }
        scheduleRetry() { setTimeout(() => this.init(), 150); }

        bindEvents() {
            const $rrn1 = $('input[name="modalUserRrn1"]');
            const $rrn2 = $('input[name="modalUserRrn2"]');

            $rrn2.on('keyup input', (e) => {
                const rrn1Val = $rrn1.val();
                const rrn2Val = $(e.target).val();
                if (rrn1Val.length === 6 && rrn2Val.length >= 1) {
                    this.handleRrnInput(rrn1Val, rrn2Val.charAt(0));
                }
            });

            const nationalityInstance = this.choicesInstances.get('nationality');
            if (nationalityInstance) {
                const element = nationalityInstance.passedElement.element;
                element.addEventListener('change', (event) => {
                    this.data.nationalityCode = event.detail.value; // 국적 코드 업데이트
                    this.updateUIByNationality(event.detail.value);
                });
            }
			
			$('#modalAddress, #btnSearchAddress').on('click', () => {
		        this.openAddrSearch();
		    });

            // 체크박스 직접 클릭 방지 및 안내 문구 출력
            const consentIds = ['#agreePrivacy', '#agreeProcedure', '#agreeTerms', '#refusePhoto'];
            $(consentIds.join(', ')).on('click', (e) => {
                if (!this.allowSystemCheck) {
                    e.preventDefault();
                    alert('동의서 보기 버튼을 클릭하여 내용을 확인하신 후 [동의함] 버튼을 눌러주세요.');
                }
            });
			
			
        }

        updateUIByNationality(selectedCode) {
            const $rrnLabel = $('label[for="modalUserRrn1"], .form-row:has(input[name="modalUserRrn1"]) label').first();
            const $passportBox = $('.foreigner_box');
            if (selectedCode === this.KOREA_CODE) {
                $rrnLabel.text('주민등록번호');
                $passportBox.hide();
            } else {
                $rrnLabel.text('외국인등록번호');
                $passportBox.show();
            }
        }

        handleRrnInput(rrn1, genderDigitStr) {
            const genderDigit = parseInt(genderDigitStr, 10);
            const isMale = [1, 3, 5, 7].includes(genderDigit);
            if (isMale) $('#genderM').prop('checked', true);
            else $('#genderF').prop('checked', true);

            let yearPrefix = [1, 2, 5, 6].includes(genderDigit) ? '19' : '20';
            const year = yearPrefix + rrn1.substring(0, 2);
            const month = rrn1.substring(2, 4);
            const day = rrn1.substring(4, 6);
            $('#modalBirthday').val(`${year}${month}${day}`);
            
            const today = new Date();
            let age = today.getFullYear() - parseInt(year);
            const birthDate = new Date(year, month - 1, day);
            const m = today.getMonth() - birthDate.getMonth();
            if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) age--;
            $('.txtAge').text(`만 ${age}세`);
        }

        initChoices() {
            const choicesConfig = { searchEnabled: true, itemSelectText: '', shouldSort: false, placeholderValue: '선택하세요' };
            ['nationality', 'channel'].forEach(key => {
                const selector = key === 'nationality' ? '#selectNationality' : '#selectChannel';
                this.choicesInstances.set(key, new Choices(selector, choicesConfig));
            });
        }

        loadCommonCategories() {
            const categories = [{ code: 'C202404110001', key: 'nationality' }, { code: 'C202404110003', key: 'channel' }];
            categories.forEach(({ code, key }) => this.fetchCategory(code, key));
        }

        fetchCategory(code, choicesKey) {
            $.post('/kiosk/getCategoryItem.do', { categoryCode: code }, (data) => {
                if (data.rows?.length > 0) {
                    const choices = data.rows.map(item => ({ value: item.categoryItemCode || item.commonCode, label: item.categoryItemName || item.codeName }));
                    const instance = this.choicesInstances.get(choicesKey);
                    if (instance) {
                        instance.setChoices(choices, 'value', 'label', true);
                        if (choicesKey === 'nationality') {
                            instance.setChoiceByValue(this.KOREA_CODE);
                            this.data.nationalityCode = this.KOREA_CODE; // 초기 국적 설정
                            this.updateUIByNationality(this.KOREA_CODE);
                        }
                    }
                }
            });
        }
		
		openAddrSearch() {
		            // 1. 다이얼로그를 담을 컨테이너 생성 (없으면 생성)
		            let $addrDialog = $('#addrSearchDialog');
		            if ($addrDialog.length === 0) {
		                $addrDialog = $('<div id="addrSearchDialog" style="display:none; overflow:hidden;"></div>').appendTo('body');
		            }

		            // 2. jQuery UI Dialog 초기화
		            $addrDialog.dialog({
		                modal: true,
		                title: '주소 검색',
		                width: 500,
		                height: 500,
		                resizable: false,
		                draggable: true,
		                open: function() {
		                    const guideElement = document.getElementById('addrSearchDialog');
		                    // 3. daum.Postcode를 해당 div 내(embed)에 실행
		                    new daum.Postcode({
		                        oncomplete: (data) => {
		                            let addr = data.userSelectedType === 'R' ? data.roadAddress : data.jibunAddress;
		                            document.getElementById("modalAddress").value = addr;
		                            document.getElementById("modalAddressDetail").focus();
		                            
		                            // 선택 완료 후 다이얼로그 닫기
		                            $addrDialog.dialog('close');
		                        },
		                        width: '100%',
		                        height: '100%'
		                    }).embed(guideElement);
		                },
		                close: function() {
		                    $(this).dialog('destroy').empty();
		                }
		            });
		        }
    }
	
	
	/**
	 * [Modal] 고객 검색 팝업 클래스
	 * 작성일 : 2024. 04. 02.
	 * 작성자 : NTsoft (Refactored to Class)
	 */
	/**
	 * [Modal] 고객 검색 팝업 클래스 (jQuery UI Dialog 버전)
	 */
	class UserIntroSelectModal {
	    constructor() {
	        this.callback = null;
	        this.dataList = null;
	        this.modalId = 'userIntroSelectModal';
	    }

	    init() {
	        $(`#${this.modalId}`).remove();
	        $('body').append(this.getHtmlTemplate());

	        $(`#${this.modalId}`).dialog({
	            autoOpen: false,
	            modal: true,
	            width: 450, // 3개 항목이므로 너비를 좀 더 슬림하게 조정
	            resizable: false,
	            draggable: true,
	            dialogClass: 'user-select-dialog', // CSS 커스텀 클래스 연결
	            open: function() {
	                $(".ui-dialog-titlebar").hide(); // 타이틀바 숨김
	                $('.ui-widget-overlay').css({ 'opacity': 0.5, 'background': '#000' });
	            }
	        });

	        this.setEvent();
	    }

	    setEvent() {
	        const $modal = $(`#${this.modalId}`);
	        $modal.find('.btnCancle').on("click", () => $modal.dialog("close"));
	        
	        $modal.find('#searchIntroUserBtn').on('click', () => this.searchIntroUserList());
	        $modal.find('#introUserSearchKeyword').on('keypress', (e) => {
	            if (e.which === 13) this.searchIntroUserList();
	        });
	    }

	    searchIntroUserList() {
	        const searchKeyword = document.querySelector("#introUserSearchKeyword").value;
	        if (searchKeyword.length < 2) {
	            alert("검색어를 2자 이상 입력해주세요.");
	            return;
	        }

	        const formData = new FormData();
	        formData.append("menuClass", window.menuClass || "");
	        formData.append("userSearchKeywordParam", searchKeyword);
			// 정렬 파라미터 추가
			formData.append("userSort", "BIRTHDAY DESC");

	        $.ajax({
	            url: encodeURI('/webuser/selectListUserOption.do'),
	            data: formData,
	            dataType: "json",
	            processData: false,
	            contentType: false,
	            type: 'POST',
	            success: (data) => {
	                if (data.msgCode === '0') this.renderTable(data.rows);
	            }
	        });
	    }

	    renderTable(rows) {
	        const tbody = document.querySelector(`#${this.modalId} tbody`);
	        tbody.innerHTML = "";
	        this.dataList = rows;

	        if (!rows || rows.length === 0) {
	            tbody.innerHTML = '<tr><td colspan="3" style="text-align: center; padding: 40px 0; color: #adb5bd;">조회 결과가 없습니다.</td></tr>';
	            return;
	        }

	        rows.forEach((user, index) => {
	            const genderClass = (user.gender === '남' || user.gender === 'M') ? 'gender-M' : 'gender-F';
	            const tr = document.createElement('tr');
	            tr.innerHTML = `
	                <td class="user-name">${user.userName}</td>
	                <td>${this.convertDateFormat(user.birthday)}</td>
	                <td><span class="gender-tag ${genderClass}">${user.gender}</span></td>
	            `;
	            tr.onclick = () => {
	                if (this.callback) this.callback(user);
	                $(`#${this.modalId}`).dialog("close");
	            };
	            tbody.appendChild(tr);
	        });
	    }

	    popup(callback) {
	        this.init();
	        this.callback = callback;
	        $(`#${this.modalId}`).dialog("open");
	    }

	    convertDateFormat(input) {
	        if (!input) return '-';
	        const dateMatch = input.match(/\d{4}-\d{2}-\d{2}/);
	        return dateMatch ? dateMatch[0].replace(/-/g, '.') : input;
	    }

	    getHtmlTemplate() {
	        return `
	        <div id="${this.modalId}" style="display:none;">
	            <div class="search-header">
	                <div class="search-input-wrapper">
	                    <input id="introUserSearchKeyword" type="text" placeholder="고객명 또는 생년월일" />
	                    <button id="searchIntroUserBtn" class="btn-search">검색</button>
	                </div>
	            </div>
	            <div class="table-wrapper">
	                <table class="user-table">
	                    <thead>
	                        <tr>
	                            <th>성함</th>
	                            <th>생년월일</th>
	                            <th>성별</th>
	                        </tr>
	                    </thead>
	                    <tbody>
	                        <tr>
	                            <td colspan="3" style="text-align: center; padding: 40px 0; color: #adb5bd;">검색어를 입력하세요.</td>
	                        </tr>
	                    </tbody>
	                </table>
	            </div>
	            <div class="modal-footer-ui">
	                <button type="button" class="btn-close-ui btnCancle">닫기</button>
	            </div>
	        </div>`;
	    }
	}

		/**
	 * [Utility] 서명 다이얼로그 관리 클래스 (jQuery UI 버전)
	 */
	class SignatureDialogManager {
	    constructor(modalId = 'agreementInsertModal') {
	        this.modalId = modalId;
	        this.callback = null;
	        this.signaturePad = null;
	    }

	    /**
	     * 다이얼로그 초기화 및 DOM 생성
	     */
	    init() {
	        $(`#${this.modalId}`).remove();
	        $('body').append(this.getHtmlTemplate());

	        const $modal = $(`#${this.modalId}`);

	        // jQuery UI Dialog 설정
	        $modal.dialog({
	            autoOpen: false,
	            modal: true,
	            width: 500,
	            resizable: false,
	            draggable: true,
	            dialogClass: 'signature-ui-dialog',
	            open: () => {
	                this.initSignaturePad();
	                // 기본 타이틀바 숨기기 (커스텀 헤더 사용 시)
	                $(".ui-dialog-titlebar").hide();
	            }
	        });

	        this.setEvent();
	    }

	    /**
	     * 서명 패드 라이브러리 초기화
	     */
	    initSignaturePad() {
	        const canvas = document.querySelector(`#${this.modalId} canvas`);
	        if (!canvas) return;

	        try {
	            this.signaturePad = new SignaturePad(canvas, {
	                backgroundColor: 'rgb(255, 255, 255)',
	                penColor: 'rgb(0, 0, 0)'
	            });
	            this.resizeCanvas(canvas);
	        } catch (e) {
	            console.error("SignaturePad 로드 실패. 라이브러리를 확인하세요.");
	        }
	    }

	    /**
	     * 캔버스 크기 최적화
	     */
	    resizeCanvas(canvas) {
	        const ratio = Math.max(window.devicePixelRatio || 1, 1);
	        canvas.width = canvas.offsetWidth * ratio;
	        canvas.height = canvas.offsetHeight * ratio;
	        canvas.getContext("2d").scale(ratio, ratio);
	        if (this.signaturePad) this.signaturePad.clear();
	    }

	    /**
	     * 이벤트 바인딩
	     */
	    setEvent() {
	        const $modal = $(`#${this.modalId}`);

	        // 취소/닫기
	        $modal.find('.btnCancle').on('click', () => $modal.dialog('close'));

	        // 지우기 (초기화)
	        $modal.find('.btnReset').on('click', () => {
	            if (this.signaturePad) this.signaturePad.clear();
	        });

	        // 등록 완료 (저장)
	        $modal.find('.btnSave').on('click', () => {
	            if (this.signaturePad && this.signaturePad.isEmpty()) {
	                alert("서명을 진행해 주세요.");
	                return;
	            }

	            const dataUrl = this.signaturePad.toDataURL();
	            if (this.callback) this.callback(dataUrl);
	            $modal.dialog('close');
	        });
	    }

	    /**
	     * 다이얼로그 오픈
	     * @param {Function} callback 서명 완료 후 실행될 함수
	     */
	    open(callback) {
	        this.init();
	        this.callback = callback;
	        $(`#${this.modalId}`).dialog('open');
	    }

	    /**
	     * HTML 템플릿
	     */
	    getHtmlTemplate() {
	        return `
	        <div id="${this.modalId}" title="서명 확인" style="display:none; padding:0;">
	            <style>
	                .signature-ui-dialog { border-radius: 12px; overflow: hidden; border: none; box-shadow: 0 5px 20px rgba(0,0,0,0.2); }
	                .sig-header { padding: 15px; background: #339af0; color: #fff; font-weight: bold; }
	                .sig-body { padding: 20px; text-align: center; }
	                .canvas-area { border: 1px solid #dee2e6; background: #f8f9fa; border-radius: 4px; margin-bottom: 10px; }
	                .canvas-area canvas { width: 100%; height: 200px; cursor: crosshair; }
	                .sig-footer { padding: 15px; background: #f8f9fa; text-align: right; border-top: 1px solid #eee; }
	                .sig-btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; margin-left: 5px; }
	                .sig-btn-primary { background: #339af0; color: #fff; }
	                .sig-btn-secondary { background: #adb5bd; color: #fff; }
	            </style>
	            <div class="sig-header">본인 서명 확인</div>
	            <div class="sig-body">
	                <p style="margin-bottom: 10px; color: #495057;">아래 영역에 서명해 주세요.</p>
	                <div class="canvas-area">
	                    <canvas></canvas>
	                </div>
	                <button type="button" class="sig-btn sig-btn-secondary btnReset" style="font-size: 12px; padding: 4px 10px;">지우기</button>
	            </div>
	            <div class="sig-footer">
	                <button type="button" class="sig-btn sig-btn-secondary btnCancle">취소</button>
	                <button type="button" class="sig-btn sig-btn-primary btnSave">등록 완료</button>
	            </div>
	        </div>`;
	    }
	}
	
	
    $(document).ready(() => {
        
		// 클래스 인스턴스 생성 (기존 소스와 호환성을 위해 변수명 유지 가능)
		const userIntroSelectModal = new UserIntroSelectModal();
		
		const signatureDialog = new SignatureDialogManager();
		$('.registration_bth').on('click', (e) => {
	        e.preventDefault();


	        // 2. 서명 모달 오픈 (jQuery UI 기반으로 커스텀한 경우)
	        if (typeof signatureDialog !== 'undefined') {
	            signatureDialog.open((signatureData) => {
	                // 서명 완료 시 실행될 콜백: 여기서 실제 서버 전송(Ajax) 함수 호출
	                this.savePatientData(signatureData);
	            });
	        }
	    });
		const pageApp = new NewPatientPage();
        window.newPatientPage = pageApp;
        pageApp.init();
		
		$('.consent-link').on('click', function(e) {
	        e.preventDefault();
	        openConsentDialog($(this).data('type'));
	    });
		$('.searchIntroUser').on('click', function() {
	        // 모달 팝업 호출
	        userIntroSelectModal.popup(function(data) {
	            // [Callback] 고객을 선택했을 때 실행될 로직
	            console.log("선택된 추천인 정보:", data);
	            
	            // 1. input 필드에 선택된 사용자의 이름 표시
	            $('input[name="modalRecommendId"]').val(data.userName);
	            
	            // 2. (옵션) 실제 DB 저장을 위한 ID값 등을 hidden 필드에 저장할 경우
	            // if ($('#recommendUserNo').length > 0) {
	            //     $('#recommendUserNo').val(data.muUserId);
	            // }

	        }, { type: "recommend" }); // 필요 시 요청 파라미터 전달
	    });
		function openConsentDialog(type) {
		    if ($('#dynamicConsentDialog').length) $('#dynamicConsentDialog').dialog('destroy').remove();

		    const $dialog = $('<div id=\"dynamicConsentDialog\" style=\"overflow-y: auto; padding: 20px; line-height: 1.6;\"></div>');
            let isAgreed = false; 
		    
		    $dialog.dialog({
		        modal: true, width: 800, height: 700,
		        title: getDialogTitle(type),
		        resizable: false, draggable: true,
		        buttons: [
		            {
		                text: "동의함", class: "registration_bth",
		                click: function() {
                            isAgreed = true;
                            pageApp.allowSystemCheck = true;
		                    $('#' + type).prop('checked', true);
                            pageApp.allowSystemCheck = false;
		                    $(this).dialog('close');
		                }
		            },
		            { text: "닫기", class: "cancel_btn", click: function() { $(this).dialog('close'); } }
		        ],
                close: function() {
                    if (!isAgreed) {
                        pageApp.allowSystemCheck = true;
                        $('#' + type).prop('checked', false);
                        pageApp.allowSystemCheck = false;
                    }
                    $(this).dialog('destroy').remove();
                }
		    });

            $dialog.html('<div style=\"text-align:center; padding:50px;\">내용을 불러오는 중입니다...</div>');
            
            $.ajax({
                url: '/kiosk/getConsentForm.do', 
                type: 'POST',
				contentType: 'application/json',
                data: JSON.stringify({ 
                    consentFormTypeCd: getConsentFormTypeCd(type), // 코드로 변환하여 전송
                    nationalCd: pageApp.data.nationalityCode // 현재 국적 코드 전송
                }),
                success: function(res) {
                    if(res && res.consentFormContent) {
                        $dialog.html(res.consentFormContent);
                    } else {
                        $dialog.html('<div style=\"text-align:center; color:red;\">등록된 동의서 내용이 없습니다.</div>');
                    }
                },
                error: function() {
                    $dialog.html('<div style=\"text-align:center; color:red;\">서버 통신 중 오류가 발생했습니다.</div>');
                }
            });
		}

	    function getDialogTitle(type) {
	        const titles = { 
                'agreePrivacy': '개인정보 수집 및 이용안내', 
                'agreeProcedure': '시술동의서', 
                'agreeTerms': '이용약관', 
                'refusePhoto': '사진촬영동의서' 
            };
	        return titles[type] || '동의서';
	    }

        /**
         * type 명칭을 DB consentFormTypeCd 코드로 변환
         */
        function getConsentFormTypeCd(type) {
            const typeMapping = {
                'agreePrivacy':   'C202601180001',
                'agreeProcedure': 'C202601180002',
                'agreeTerms':     'C202601180003',
                'refusePhoto':    'C202601180004'
            };
            return typeMapping[type] || '';
        }
    });
})();