document.addEventListener('DOMContentLoaded', function() {
    const journalBoard = document.getElementById('journal-board');
    if (!journalBoard) return;

    // 💡 [최종 수정] data-view-mode 속성이 있는 실제 요소인 .board-list-wrapper를 선택합니다.
    const boardListWrapper = journalBoard.querySelector('.board-list-wrapper');
    if (!boardListWrapper) return;

    const viewModeButtons = document.querySelectorAll('.btn-view-mode');
    const paginationWrapper = document.querySelector('.pagination-wrapper');
    const loadMoreWrapper = document.querySelector('.load-more-wrapper');

    viewModeButtons.forEach(button => {
        button.addEventListener('click', function() {
            const mode = this.dataset.mode;
            viewModeButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // 💡 [최종 수정] boardListWrapper의 data-view-mode 속성을 변경합니다.
            boardListWrapper.dataset.viewMode = mode;
            
            // PHP에서 전달받은 JavaScript 전역 변수를 사용합니다.
            if (typeof journal_skin_options !== 'undefined') {
                set_cookie('board_' + journal_skin_options.bo_table + '_view_mode', mode, 365, journal_skin_options.cookie_domain, journal_skin_options.cookie_path);
            }

            // 뷰 모드에 따라 페이지네이션/더보기 버튼 보이기/숨기기
            if (paginationWrapper) paginationWrapper.style.display = (mode === 'list') ? 'block' : 'none';
            if (loadMoreWrapper) loadMoreWrapper.style.display = (mode === 'card') ? 'block' : 'none';
        });
    });

    // --- '더보기' 버튼 기능 ---
    const loadMoreButton = document.getElementById('btn-load-more');
    if (loadMoreButton) {
        loadMoreButton.addEventListener('click', function() {
            let currentPage = parseInt(this.dataset.page, 10);
            this.textContent = '로딩 중...';
            this.disabled = true;

            const url = new URL(window.location.href);
            url.searchParams.set('page', currentPage);

            fetch(url)
                .then(response => response.text())
                .then(html => {
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    
                    const newItems = doc.querySelectorAll('#board-list-wrapper .card-item');
                    const cardList = boardListWrapper.querySelector('#board-list-wrapper .card-list'); // boardListWrapper 안에서 찾음

                    if (newItems.length > 0 && cardList) {
                        newItems.forEach(item => {
                            cardList.appendChild(item);
                        });

                        currentPage++;
                        this.dataset.page = currentPage;
                        this.textContent = '더보기';
                        this.disabled = false;

                        const nextLoadMoreButton = doc.getElementById('btn-load-more');
                        if (!nextLoadMoreButton) {
                            this.style.display = 'none';
                        }
                    } else {
                        this.textContent = '마지막 페이지입니다.';
                        this.disabled = true;
                    }
                })
                .catch(error => {
                    console.error('Error loading more items:', error);
                    this.textContent = '오류 발생';
                });
        });
    }

    function set_cookie(name, value, time, domain, path) {
        let expires = "";
        if (time) {
            const date = new Date();
            date.setTime(date.getTime() + (time * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "")  + expires + "; path=" + path + "; domain=" + domain;
    }
});