// 쿠폰함 페이지로 이동하는 함수
function goToCouponPage() {
    // 쿠폰함 페이지 URL로 이동
    window.location.href = '/sopmal/coupon/list';
}

// 새로운 캡슐 만들기 시작하는 함수
function startNewCapsule() {
    // 제품 선택 페이지로 이동
    window.location.href = '/sopmal/bnft/selectCapsule';
}

// 다른 선물로 다시 시작하는 함수 (리셋 확인 모달에서 호출)
function resetCapsule() {
    // Ajax 요청으로 현재 진행 상태 초기화
    $.ajax({
        url: '/sopmal/bnft/resetCapsule',
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            bnfInnb: $('#bnfInnb').val(),
            bnfSttusInnb: $('#bnfSttusInnb').val()
        }),
        success: function(response) {
            // 응답 구조 변경에 맞게 처리
            const result = JSON.parse(response.resBody.result);
            
            if (result.success) {
                // 제품 선택 페이지로 이동
                window.location.href = '/sopmal/bnft/selectCapsule';
            } else {
                alert('초기화 중 오류가 발생했습니다. 다시 시도해주세요.');
            }
        },
        error: function() {
            alert('서버 오류가 발생했습니다. 다시 시도해주세요.');
        }
    });
}

// 모달 초기화 함수
function initModals() {
    // modal-2(다시 시작 확인) 버튼 이벤트 등록
    $('#modal-2 .microModal__btn:first-child').on('click', function() {
        resetCapsule();
    });
    
    // 애니메이션 효과 초기화
    // initCompletionAnimation();
}

// 모달 데이터 로드 및 초기화
$(document).ready(function() {
    // 모달 초기화: onShow 콜백과 다른 옵션들을 함께 설정
    MicroModal.init({
        disableScroll: true,
        awaitCloseAnimation: true,
        onShow: function(modal) {
            console.log(`Modal shown: ${modal.id}`);
            if (modal.id === 'modal-1') {
                console.log('Loading data for modal-1...');
                loadModalData();
            }
        }
    });

    // 🔥 문제 부분: 이 코드를 제거하거나 수정해야 함
    // 모달2(다시 시작 확인) 버튼 이벤트 등록을 제거
    // $(document).off('click', '#modal-2 .microModal__btn:first-child').on('click', '#modal-2 .microModal__btn:first-child', function() {
    //     resetCapsule();
    // });
    
    // 대신 "다른선물로 다시 시작" 버튼에만 resetCapsule을 바인딩
    $(document).off('click', '#restartGameButton').on('click', '#restartGameButton', function(e) {
        e.preventDefault();
        showRestartConfirmModal();
    });
});

// 모달 데이터 로드 함수
function loadModalData() {
    const bnfInnb = $('#bnfInnb').val() || $('input[name="bnfInnb"]').val();
    
    if (!bnfInnb) {
        console.error('bnfInnb 값을 찾을 수 없습니다.');
        return;
    }
    
    // AJAX로 최신 진행 상태 데이터 요청
    $.ajax({
        url: '/sopmal/bnft/getProgressStatus',
        type: 'GET',
        data: {
            bnfInnb: bnfInnb
        },
        success: function(response) {
            if (response.resultCode === '0000') {
                // 응답 데이터로 모달 내용 업데이트
                updateModalContent(response.content);
            } else {
                console.error('데이터 로드 실패:', response.message);
            }
        },
        error: function(xhr, status, error) {
            console.error('AJAX 요청 실패:', error);
        }
    });
}

// 모달 내용 업데이트 함수
function updateModalContent(data) {
    console.log("updateModalContent 호출됨:", data); // 디버깅용
    
    const progressInfo = data.progressInfo;
    
    if (!progressInfo) {
        console.error("progressInfo가 없습니다:", data);
        return;
    }
    
    // progressStep이 유효한지 확인
    if (!progressInfo.progrsStep || isNaN(parseInt(progressInfo.progrsStep))) {
        console.error("유효하지 않은 progrsStep:", progressInfo.progrsStep);
        progressInfo.progrsStep = 1; // 기본값 설정
    } else {
        // 숫자로 변환
        progressInfo.progrsStep = parseInt(progressInfo.progrsStep);
    }
    
    console.log("현재 단계:", progressInfo.progrsStep);
    
    // 쇼핑몰 코드에 따른 텍스트 설정
    const brandName = (data.sopmalCd === 'NC') ? '뉴트리' : '닥터린';
    
    // 모달 컨테이너 참조
    const $modalContent = $('#modal-1 .microModal__content');
    if ($modalContent.length === 0) {
        console.error("모달 컨테이너를 찾을 수 없습니다");
        return;
    }
    
    // 모달 컨텐츠 초기화
    $modalContent.empty();
    
    // 게임 상태 요소 생성
    const $gameStatus = $('<div class="gameStatus"></div>');
    $modalContent.append($gameStatus);
    
    // 진행 상태에 따라 다른 UI 표시
    // 수정: 5단계 완성 여부를 stepProgressPercentage로 판단
    const isGameCompleted = progressInfo.progrsStep === 5 && progressInfo.stepProgressPercentage >= 100;

    if (!isGameCompleted) {
        // 진행 중 UI (5단계 진행 중 포함)
        $gameStatus.append(`<p class="tit">${brandName} 캡슐 만들기<br><b>${progressInfo.progrsStep}단계</b> 진행중!!</p>`);
        
        // 진행 바 추가 - 실제 진행률 전달
        $gameStatus.append(createStatusBar(progressInfo.progrsStep, progressInfo.stepProgressPercentage || 0));
        
        // 선물 정보 추가
        const $gameGift = $('<div class="gameGift"></div>');
        $gameGift.append(`<p class="tit">${brandName} 캡슐을 완성하면 받는 선물이예요.</p>`);
        
        const $gameGiftInbox = $('<div class="gameGiftInbox"></div>');
        $gameGiftInbox.append(`<p class="img"><img src="${data.cdnurl}${data.thumbnailPath}" alt="상품 이미지"></p>`);
        
        const $txtDiv = $('<div class="txt"></div>');
        $txtDiv.append(`<p class="txt1">${data.productDesc || ''}</p>`);
        $txtDiv.append(`<p class="txt2">${data.productName || ''}</p>`);
        
        $gameGiftInbox.append($txtDiv);
        $gameGift.append($gameGiftInbox);
        
        // 다른 선물로 다시 시작 버튼 추가
        $gameGift.append(`<div class="alignR">
            <a href="#" class="btn giftReset" id="restartGameButton">
                <i class="ico_giftReset"></i>다른선물로 다시 시작
            </a>
        </div>`);
        
        $gameStatus.append($gameGift);
    } else {
        // 완료 상태 UI 구성 (5단계 100% 완성 시에만)
        $gameStatus.append(`
            <p class="tit">${brandName} 캡슐 만들기 최종 완료!</p>
            <p class="tit2">진짜 영양제 선물받고<br>새로운 캡슐 만들기 시작하세요.</p>
        `);
        
        // 진행 바 추가 - 5단계 완료 (100% 전달)
        $gameStatus.append(createStatusBar(5, 100));
        
        // 쿠폰 영역 추가
        const $gameCoupon = $('<div class="gameCoupon"></div>');
        $gameCoupon.append(`
            <p class="tit">
                <a href="javascript:goToCouponPage()"><i class="ico_present"></i>쿠폰함에 교환권이 전달되었습니다.</a>
            </p>
            <div class="gameCouponInbox">
                <div class="barcode">
                    <img src="/mobile/images/bnft/ico_barcode.svg" width="80" height="80" alt="바코드">
                </div>
                <p class="img"><img src="${data.cdnurl}${data.thumbnailPath}" alt="상품 이미지"></p>
                <div class="txt">
                    <p class="txt1">${data.productName || ''}</p>
                    <p class="txt2">${data.productDesc || ''}</p>
                </div>
            </div>
        `);
        
        $gameStatus.append($gameCoupon);
        
        // 새로운 캡슐 만들기 시작하기 버튼 추가
        $gameStatus.append(`
            <div class="btnBox alignC" style="margin-top: 20px;">
                <button type="button" class="btn lg theme newStartButton" onclick="startNewCapsule()">
                    새로운 캡슐 만들기 시작하기
                </button>
            </div>
        `);
    }
    
    // 알림 박스 추가 - notice2 사용 (디버깅 로그 추가)
    console.log("importantNotice 데이터:", data.importantNotice);
    console.log("notice2 내용:", data.importantNotice?.notice2);
    
    const $commentBox = $('<div class="comment-box"></div>');
    const notice2Content = data.importantNotice?.notice2?.replace(/<[^>]*>/g, '') || '';
    
    $commentBox.html(`
        <p style="font-size:14px; font-weight:bold; margin-bottom:5px;">참여방법안내</p>
        <p style="color:rgba(0,0,0,0.6); font-size:14px;">${notice2Content}</p>
    `);
    
    // CSS 문제 해결을 위한 강제 스타일 적용
    $commentBox.css({
        'background': '#fff',
        'padding': '16px',
        'padding-bottom': '16px',  // 정상적인 패딩으로 수정
        'margin-bottom': '0',      // 음수 마진 제거
        'min-height': 'auto',
        'display': 'block'
    });
    
    $modalContent.append($commentBox);
    
    // 렌더링 후 확인용 로그
    console.log("comment-box 렌더링 완료:", $commentBox);
}

// 진행 상태 바 생성 함수 - 단계별로 색상 변경
function createStatusBar(progressStep, progressPercent) {
    const $statusBarWrap = $('<div class="gameStatusBarWrap"></div>');
    const $statusBar = $('<div class="gameStatusBar"></div>');
    
    // 디버깅 로그 추가
    console.log(`createStatusBar 호출: progressStep=${progressStep}, progressPercent=${progressPercent}`);
    
    // 수정: 게이지 바 너비 계산 (6개 구간으로 나누기)
    // 시작(0%) → 1단계(16.67%) → 2단계(33.33%) → 3단계(50%) → 4단계(66.67%) → 5단계(83.33%) → 완료(100%)
    let widthPercent;
    
    if (progressStep < 5) {
        // 1~4단계: 각 단계당 16.67%씩 할당
        widthPercent = progressStep * 16.67;
    } else if (progressStep === 5) {
        // 5단계: stepProgressPercentage에 따라 83.33%~100% 사이
        const basePercent = 83.33; // 5단계 시작점
        const additionalPercent = (progressPercent || 0) * 0.1667; // 5단계 내 진행률 (최대 16.67%)
        widthPercent = basePercent + additionalPercent;
    } else {
        // 완료 상태
        widthPercent = 100;
    }
    
    console.log(`게이지 바 너비: ${widthPercent}%`);
    
    // 진행률 표시 바 - 단계에 맞게 너비 조정
    $statusBar.append(`<div class="per" style="width:${widthPercent}%;"></div>`);
    
    // 시작 지점
    $statusBar.append('<span class="first">시작</span>');
    
    // 각 단계 표시
    for (let i = 1; i <= 4; i++) {
        // 현재 단계 이상인 경우 'on' 클래스 추가
        const isActive = progressStep >= i;
        console.log(`단계 ${i}: ${isActive ? '활성화' : '비활성화'}`);
        
        $statusBar.append(`<span class="step0${i} ${isActive ? 'on' : ''}">${i}단계</span>`);
    }
    
    // 마지막 단계 - 5단계 완료(100%)일 때만 활성화
    const isLastActive = progressStep === 5 && (progressPercent >= 100);
    console.log(`최종 단계: ${isLastActive ? '활성화' : '비활성화'}`);
    $statusBar.append(`<span class="last ${isLastActive ? 'on' : ''}">5단계</span>`);
    
    $statusBarWrap.append($statusBar);
    return $statusBarWrap;
}

// 다른선물로 다시 시작 확인 모달을 표시하는 함수
function showRestartConfirmModal() {
    console.log("다시 시작 확인 모달 표시 시도");
    
    // 모달 HTML 정의
    const restartModalHtml = `
        <div class="microModal microAlert" id="restart-modal" aria-hidden="true">
            <div class="microModal__overlay" tabindex="-1">
                <div class="microModal__container" role="dialog" aria-modal="true">
                    <div class="microModal__body">
                        <div class="microModal__top">
                            <h2 class="microModal__title">
                               새로운 선물로 변경하여<br>만들기를 처음부터 다시 시작할까요?
                            </h2>
                        </div>
                        <div class="microModal__content">
                            <p>
                              현재 보유중인 초록잎은 유지되지만<br>
                              진행한 내용은 모두 삭제되며<br>
                              다시 복구할 수 없습니다.
                            </p>
                        </div>
                    </div>
                    <div class="microModal__btnContainer">
                        <button class="microModal__btn" id="restartConfirmBtn">처음부터 다시시작</button>
                        <button class="microModal__btn microModal__btn-primary" id="restartCancelBtn">그대로 계속할게요</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // 이미 존재하는 restart-modal 제거 (중복 방지)
    $('#restart-modal').remove();
    
    // 모달 HTML을 body에 추가
    $('body').append(restartModalHtml);
    
    // 모달 표시
    MicroModal.show('restart-modal', {
        onShow: function() {
            console.log("다시 시작 확인 모달이 표시됨");
        }
    });
    
    // 버튼 이벤트 핸들러 연결
    $('#restartConfirmBtn').off('click').on('click', function() {
        console.log("처음부터 다시시작 버튼 클릭됨");
        MicroModal.close('restart-modal');
        
        // 사용자 선택 확정을 위한 두 번째 확인 모달 표시
        showFinalConfirmModal();
    });
    
    $('#restartCancelBtn').off('click').on('click', function() {
        console.log("그대로 계속하기 버튼 클릭됨");
        MicroModal.close('restart-modal');
    });
}

// 최종 확인 모달을 표시하는 함수
function showFinalConfirmModal() {
    // 모달 HTML 정의
    const finalConfirmModalHtml = `
        <div class="microModal microAlert" id="final-confirm-modal" aria-hidden="true">
            <div class="microModal__overlay" tabindex="-1">
                <div class="microModal__container" role="dialog" aria-modal="true">
                    <div class="microModal__body">
                        <div class="microModal__top">
                            <h2 class="microModal__title">
                                정말 처음부터 다시 시작하시겠습니까?
                            </h2>
                        </div>
                        <div class="microModal__content">
                            <p>
                                지금까지 진행한 내용이 모두 삭제됩니다.
                            </p>
                        </div>
                    </div>
                    <div class="microModal__btnContainer">
                        <button class="microModal__btn" id="finalCancelBtn">취소</button>
                        <button class="microModal__btn microModal__btn-primary" id="finalConfirmBtn">다시 시작하기</button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // 이미 존재하는 final-confirm-modal 제거 (중복 방지)
    $('#final-confirm-modal').remove();
    
    // 모달 HTML을 body에 추가
    $('body').append(finalConfirmModalHtml);
    
    // 모달 표시
    MicroModal.show('final-confirm-modal');
    
    // 버튼 이벤트 핸들러 연결
    $('#finalConfirmBtn').off('click').on('click', function() {
        console.log("최종 다시 시작하기 버튼 클릭됨");
        MicroModal.close('final-confirm-modal');
        
        // 캡슐 선택 페이지로 이동
        resetCapsule();
    });
    
    $('#finalCancelBtn').off('click').on('click', function() {
        console.log("최종 취소 버튼 클릭됨");
        MicroModal.close('final-confirm-modal');
    });
}