/**
 * Hlthset.js
 *
 * 건강 관심분야 설정 기능을 관리하는 모듈
 * 사용자가 건강 관심분야를 선택하고 저장하여 맞춤 정보 및 마일리지를 받을 수 있는 기능 구현
 */
$(document).ready(function() {

    // 전역 변수 - 관심분야 목록 데이터
    var interestAreas = [];

    // 전역 변수 - 기본 정보 (마일리지 등)
    var basicInfo = {};

    // 전역 변수 - 혜택 고유 번호
    var bnfInnb = null;

    // CDN URL (JSP에서 전달받은 값 사용)
    var cdnUrl = '${cdnurl}';

    /**
     * 관심건강분야 설정 정보 조회 함수
     * 서버에서 관심분야 목록 데이터를 가져옴
     */
    function loadHealthInterestInfo() {
        console.log('=== loadHealthInterestInfo 시작 ===');

        // 서버 API 호출 - 빈 값 또는 null로 요청
        $.ajax({
            url: '/sopmal/bnft/selectHealthInterestInfo',  // 관심건강분야 설정 정보 조회 API
            method: 'POST',                               // HTTP 메서드
            contentType: 'application/json',              // 요청 콘텐츠 타입
            data: JSON.stringify({}),                     // 빈 객체로 요청
            beforeSend: function() {
                console.log('API 요청 시작 - URL:', '/sopmal/bnft/selectHealthInterestInfo');
                console.log('요청 데이터:', {});
            },
            success: function(response) {
                console.log('=== API 응답 성공 ===');
                console.log('전체 응답 데이터:', response);

                try {
                    // 응답에서 관심분야 데이터 추출 및 전역 변수에 저장
                    if (response && response.resBody && response.resBody.result) {
                        // JSON 문자열을 파싱
                        const resultData = JSON.parse(response.resBody.result);
                        console.log('파싱된 resultData:', resultData);

                        // 기본 정보 (마일리지, 이벤트 설명 등) 저장
                        if (resultData.basicInfo) {
                            basicInfo = resultData.basicInfo;
                            console.log('기본 정보:', basicInfo);

                            // bnfInnb 값을 전역 변수에 저장
                            if (basicInfo.bnfInnb) {
                                bnfInnb = basicInfo.bnfInnb;
                                console.log('bnfInnb 값 설정:', bnfInnb);
                            }

                            // 마일리지 정보 화면에 업데이트
                            updateMileageDisplay(basicInfo.mlgRwdAmt);

                            // 이벤트 설명 화면에 업데이트
                            updateEventDescription(basicInfo.bnfWordsCn);

                            // 동의 여부에 따라 체크박스 상태 설정
                            updateAgreementCheckbox(basicInfo.agreAt);
                        }

                        // 관심분야 데이터 처리
                        if (resultData.interestAreas && resultData.interestAreas.length > 0) {
                            console.log('관심분야 개수:', resultData.interestAreas.length);

                            // 서버 데이터를 클라이언트에서 사용할 형태로 변환 (choiseAt 포함)
                            interestAreas = resultData.interestAreas.map(function(item, index) {
                                console.log(`관심분야 ${index + 1}:`, item);

                                const mappedItem = {
                                    id: item.bnfIntrstInnb,              // 관심분야 ID
                                    name: item.intrstNm,                 // 관심분야 이름
                                    beforeImageUrl: window.cdnUrl + item.bfeImgFilCours,  // 이미지 URL
                                    sortOrder: item.sortOrdr,            // 정렬 순서
                                    choiseAt: item.choiseAt || 'N'       // 사용자 선택 여부 (기본값 N)
                                };

                                console.log(`변환된 관심분야 ${index + 1}:`, mappedItem);
                                return mappedItem;
                            });

                            console.log('변환 완료된 interestAreas:', interestAreas);

                            // 정렬 순서대로 정렬
                            interestAreas.sort(function(a, b) {
                                return a.sortOrder - b.sortOrder;
                            });

                            console.log('정렬 완료된 interestAreas:', interestAreas);
                        } else {
                            console.warn('관심분야 데이터가 없습니다.');
                            interestAreas = [];
                        }
                    } else {
                        console.warn('응답 구조가 올바르지 않습니다.');
                        interestAreas = [];
                    }
                } catch (e) {
                    console.error('응답 데이터 파싱 실패:', e);
                    interestAreas = [];
                }

                console.log('최종 interestAreas:', interestAreas);
                console.log('최종 bnfInnb:', bnfInnb);

                // 관심분야 목록 렌더링
                console.log('renderInterestList 호출 시작');
                renderInterestList();

                // 사용자 선택 상태로 UI 업데이트 (choiseAt 값 활용)
                console.log('updateUIWithUserInterests 호출 시작');
                updateUIWithUserInterests(interestAreas);

                console.log('=== loadHealthInterestInfo 완료 ===');
            },
            error: function(xhr, status, error) {
                console.error('=== API 호출 실패 ===');
                console.error('xhr:', xhr);
                console.error('status:', status);
                console.error('error:', error);

                showToast('관심분야 정보를 불러오는데 실패했습니다.');

                // 오류 발생 시 빈 배열로 초기화하여 에러 방지
                interestAreas = [];
                renderInterestList();
            }
        });
    }

    /**
     * 마일리지 표시 업데이트 함수
     * 화면의 마일리지 관련 텍스트를 동적으로 업데이트
     * @param {number} mileageAmount - 마일리지 금액
     */
    function updateMileageDisplay(mileageAmount) {
        if (mileageAmount && mileageAmount > 0) {
            // 정수로 변환하여 표시
            const mileageInt = Math.floor(mileageAmount);

            console.log('마일리지 업데이트:', mileageInt);

            // 상단 마일리지 안내 텍스트 업데이트
            $('.topupPoint.noSticky span').html(
                '정보받기 동의하고 저장하면 <i class="ico_mile"></i><b>' +
                mileageInt.toLocaleString() + ' 원</b>적립'
            );
        }
    }

    /**
     * 이벤트 설명 업데이트 함수
     * 화면의 이벤트 설명 텍스트를 동적으로 업데이트
     * @param {string} eventDescription - 이벤트 설명 내용 (HTML 형태)
     */
    function updateEventDescription(eventDescription) {
        if (eventDescription) {
            console.log('이벤트 설명 업데이트:', eventDescription);
            
            // 이벤트 설명 HTML 업데이트 (.text() 대신 .html() 사용)
            $('.comment-box p:last-child').html(eventDescription);
        } else {
            console.log('이벤트 설명이 없습니다.');
            // 설명이 없는 경우 기본 메시지 표시 (텍스트는 .text() 사용)
            $('.comment-box p:last-child').text('이벤트 설명을 불러오는 중입니다...');
        }
    }

    /**
     * UI 업데이트 함수
     * 관심분야 데이터의 choiseAt 값으로 UI 상태 업데이트
     * @param {Array} interests - 관심분야 배열 (choiseAt 포함)
     */
    function updateUIWithUserInterests(interests) {
        // 모든 관심분야 항목 선택 해제 (초기화)
        $('.favoriteList li').removeClass('on');

        // choiseAt이 'Y'인 관심분야를 선택 상태로 변경
        interests.forEach(function(interest) {
            if (interest.choiseAt === 'Y') {
                // 관심분야 ID로 매칭되는 요소 찾아 선택 상태로 설정
                $('.favoriteList li img[data-interest-id="' + interest.id + '"]')
                    .closest('li')
                    .addClass('on');

                console.log('Selected interest:', interest.name, 'ID:', interest.id);
            }
        });
    }

    /**
     * 관심분야 목록 렌더링 함수
     * 서버에서 받아온 관심분야 데이터를 화면에 동적으로 표시
     */
    function renderInterestList() {
        const $favoriteList = $('.favoriteList');  // 관심분야 목록을 표시할 컨테이너
        $favoriteList.empty();                    // 기존 목록 초기화 (중복 방지)

        // 관심분야 데이터가 없는 경우 처리
        if (!interestAreas || interestAreas.length === 0) {
            $favoriteList.append('<li><p style="text-align:center; padding:20px;">관심분야 정보를 불러오는 중입니다...</p></li>');
            return;
        }

        // 각 관심분야에 대해 리스트 아이템 생성 및 추가
        interestAreas.forEach(function(interest) {
            // 관심분야별 리스트 아이템 구조 생성
            const $li = $('<li>');                                 // 리스트 아이템
            const $a = $('<a>').attr('href', '#');                 // 클릭 가능한 링크 요소
            const $imgP = $('<p>').addClass('img');                // 이미지 컨테이너
            const $img = $('<img>')                                // 이미지 요소
                .attr('src', interest.beforeImageUrl)              // 초기 이미지 URL
                .attr('alt', interest.name)                        // 대체 텍스트
                .attr('data-interest-id', interest.id);            // 관심분야 ID 데이터 속성
            const $titleP = $('<p>').addClass('tit').text(interest.name);  // 관심분야 이름 요소

            // 요소들 조합하여 DOM에 추가
            $imgP.append($img);                   // 이미지를 이미지 컨테이너에 추가
            $a.append($imgP).append($titleP);     // 컨테이너와 제목을 링크에 추가
            $li.append($a);                       // 링크를 리스트 아이템에 추가
            $favoriteList.append($li);            // 완성된 아이템을 목록에 추가
        });

        // 클릭 이벤트 리스너 추가 - 관심분야 선택/해제 토글
        $('.favoriteList li a').on('click', function(e) {
            e.preventDefault();                   // 기본 링크 동작 방지
            $(this).closest('li').toggleClass('on');  // 선택 상태 토글 (선택: on 클래스 추가)
        });
    }

    // 초기 로딩 함수 호출
    loadHealthInterestInfo();

    /**
     * 동의 체크박스 상태 업데이트 함수
     * 서버에서 받아온 동의 여부에 따라 체크박스 상태를 설정
     * @param {string} agreementStatus - 동의 여부 ('Y' 또는 'N')
     */
    function updateAgreementCheckbox(agreementStatus) {
        const $agreementCheckbox = $('#agreementCheckbox');
        
        if (agreementStatus === 'Y') {
            // 동의 상태인 경우 체크박스 체크
            $agreementCheckbox.prop('checked', true);
            console.log('동의 상태로 체크박스 설정: Y');
        } else {
            // 비동의 상태인 경우 체크박스 해제
            $agreementCheckbox.prop('checked', false);
            console.log('비동의 상태로 체크박스 설정: N');
        }
    }

    /**
     * 저장 버튼 클릭 이벤트 핸들러
     * 선택된 관심분야와 동의 여부 확인 후 서버에 저장 요청
     */
    $('#saveBtn').on('click', function() {
        // bnfInnb 값이 없으면 저장 불가
        if (!bnfInnb) {
            showToast('데이터 로딩 중입니다. 잠시 후 다시 시도해주세요.');
            console.error('bnfInnb 값이 없어서 저장할 수 없습니다.');
            return;
        }

        // 동의 체크박스 상태 확인
        var agreementChecked = $('#agreementCheckbox').is(':checked');

        // 동의 체크박스 미선택 시 알림
        if (!agreementChecked) {
            showToast('관심분야 정보받기에 동의해주세요.');
            return;
        }

        // 선택된 관심분야 정보 수집 - on 클래스가 있는 항목만 필터링
        var selectedInterests = $('.favoriteList li.on').map(function() {
            return {
                bnfIntrstInnb: $(this).find('img').data('interest-id'),  // 관심분야 ID
                selected: true                                            // 선택 여부
            };
        }).get();  // jQuery 객체를 일반 배열로 변환

        // 최소 1개 이상의 관심분야 선택 여부 확인
        if (selectedInterests.length === 0) {
            showToast('최소 1개 이상의 관심분야를 선택해주세요.');
            return;
        }

        // 서버로 전송할 데이터 준비
        var data = {
            bnfInnb: bnfInnb,                    // 전역 변수 사용
            interestAreas: selectedInterests,     // 선택된 관심분야 목록
            agreAt: agreementChecked ? 'Y' : 'N'  // 동의 여부를 Y/N으로 변환
        };

        console.log('저장할 데이터:', data);  // 디버깅용 로그

        // 관심분야 저장 API 호출
        $.ajax({
            url: '/sopmal/bnft/saveUserInterests',  // 관심분야 저장 API
            method: 'POST',                        // HTTP 메서드
            contentType: 'application/json',       // 요청 콘텐츠 타입
            data: JSON.stringify(data),            // 요청 데이터
            success: function(response) {
                // 응답 데이터 파싱
                const result = JSON.parse(response.resBody.result);
                
                if (result.success) {
                    // 저장 성공 시 알림 표시
                    showToast(result.message);

                    // 마일리지 적립 여부 확인 및 처리
                    if (result.mileageAccumulated && result.mlgRwdAmt) {
                        const mileageAmount = Math.floor(result.mlgRwdAmt);
                        showToast('마일리지 ' + mileageAmount.toLocaleString() + '원이 적립되었습니다.');
                    }

                    // 사용자 관심분야 정보 다시 로드하여 UI 갱신
                    loadHealthInterestInfo();
                } else {
                    // 저장 실패 시 오류 메시지 표시
                    showToast('저장 중 오류가 발생했습니다: ' + result.message);
                }
            },
            error: function(xhr, status, error) {
                // 통신 오류 처리
                showToast('서버와의 통신 중 오류가 발생했습니다.');
                console.error('Error:', error);
            }
        });
    });

    /**
     * 토스트 메시지 표시 함수
     * 사용자에게 일시적인 알림 메시지 표시
     * @param {string} message - 표시할 메시지 내용
     */
    function showToast(message) {
        var $toastPop = $('#toastPop');          // 토스트 팝업 요소
        $toastPop.find('.txt').text(message);     // 메시지 설정
        $toastPop.addClass('show');               // 토스트 표시

        // 2초 후 토스트 메시지 자동 숨김
        setTimeout(function() {
            $toastPop.removeClass('show');
        }, 2000);
    }
});