document.addEventListener('DOMContentLoaded', function() {
    const listBody = document.getElementById('bo_list_body');
    const toggleBtn = document.getElementById('view-toggle-btn');

    if (!listBody || !toggleBtn) {
        return; // 필수 요소가 없으면 스크립트 중단
    }

    const toggleIcon = toggleBtn.querySelector('i');
    const savedViewMode = localStorage.getItem('board_view_mode') || 'list'; // 기본값은 'list'

    // 뷰 모드를 설정하고 버튼의 아이콘과 툴팁을 업데이트하는 함수
    function setViewMode(mode) {
        if (mode === 'card') {
            listBody.classList.remove('list-view');
            listBody.classList.add('card-view');
            // 현재 카드뷰 -> 다음 행동은 '목록형 보기'
            toggleIcon.className = 'fa fa-bars';
            toggleBtn.title = '목록형으로 보기';
        } else { // 'list'
            listBody.classList.remove('card-view');
            listBody.classList.add('list-view');
            // 현재 목록뷰 -> 다음 행동은 '카드형 보기'
            toggleIcon.className = 'fa fa-th-large';
            toggleBtn.title = '카드형으로 보기';
        }
        // 사용자의 선택을 로컬 스토리지에 저장
        localStorage.setItem('board_view_mode', mode);
    }


    // 토글 버튼 클릭 이벤트
    toggleBtn.addEventListener('click', function() {
        // 현재 뷰 모드를 확인하고 반대 모드로 전환
        const currentMode = listBody.classList.contains('card-view') ? 'list' : 'card';
        setViewMode(currentMode);
    });

    // 페이지 로드 시 저장된 뷰 모드를 적용
    setViewMode(savedViewMode);

    // 카드형 뷰에서 체크박스 클릭 시, 목록형 뷰의 동일한 체크박스도 동기화
    const cardCheckboxes = document.querySelectorAll('input[name="chk_wr_id_card[]"]');
    cardCheckboxes.forEach((cardChk, index) => {
        cardChk.addEventListener('change', function() {
            const listChk = document.getElementById('chk_wr_id_' + index);
            if (listChk) {
                listChk.checked = this.checked;
            }
        });
    });

    // ▼▼▼ [추가] 노출 상태 토글 기능 ▼▼▼
    $('#bo_list_body').on('click', '.btn-status-toggle', function(e) {
        e.preventDefault();

        const button = $(this);
        const wr_id = button.data('wr-id');
        const is_on = button.hasClass('status-on');
        const new_status = is_on ? 'hide' : 'show';
        const bo_table = $('input[name="bo_table"]').val();

        // 아이콘을 로딩 상태로 변경
        button.find('i').removeClass('fa-toggle-on fa-toggle-off').addClass('fa-spinner fa-spin');

        $.ajax({
            url: board_skin_url + '/ajax.status_update.php',
            type: 'POST',
            data: {
                bo_table: bo_table,
                wr_id: wr_id,
                status: new_status
            },
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    // 버튼 상태 업데이트
                    button.removeClass('status-on status-off');
                    button.find('i').removeClass('fa-spinner fa-spin');

                    if (data.new_status === 'hidden') {
                        button.addClass('status-off').attr('title', '노출 상태로 변경');
                        button.find('i').addClass('fa-toggle-off');
                    } else {
                        button.addClass('status-on').attr('title', '숨김 상태로 변경');
                        button.find('i').addClass('fa-toggle-on');
                    }
                    // 페이지를 새로고침하여 상태 배지 텍스트 등을 완전히 업데이트합니다.
                    location.reload();
                } else {
                    alert(data.error || '상태 변경에 실패했습니다.');
                    // 실패 시 아이콘 원상복구
                    button.find('i').removeClass('fa-spinner fa-spin').addClass(is_on ? 'fa-toggle-on' : 'fa-toggle-off');
                }
            },
            error: function() {
                alert('서버와 통신 중 오류가 발생했습니다.');
                // 실패 시 아이콘 원상복구
                button.find('i').removeClass('fa-spinner fa-spin').addClass(is_on ? 'fa-toggle-on' : 'fa-toggle-off');
            }
        });
    });
    // ▲▲▲ 여기까지 ▲▲▲

});