<?php

// --- Bắt đầu nội dung file tab của bạn ---

$assets_root_tab1 = plugin_dir_url(__FILE__);

$locale = get_locale();
$lang_code = substr($locale, 0, 2);

if (!in_array($lang_code, ['en', 'th', 'id'])) {
    $lang_code = 'vn';
}

// Lấy danh sách ID giải đấu hot đã lưu
$hot_league_ids = get_option('hot_leagues_list', []);

?>


<link href="<?= $assets_root_tab1 ?>style.css?v=<?= ASSETS_VERSION ?>" rel="stylesheet">
<script src="<?= $assets_root_tab1 ?>ls.js?v=<?= ASSETS_VERSION ?>"></script>
<script src="<?= $assets_root_tab1 ?>Sortable.min.js?v=<?= ASSETS_VERSION ?>"></script>


<div id="sport-plugin-tab6"
     class="sport-plugin-tab-panel <?php echo isset($_GET['tab']) && $_GET['tab'] === 'sport-plugin-tab6' ? 'active' : ''; ?>">
    
    <div style="margin: 10px 0;">Gọi hàm để lọc giải đấu theo ID: <span>window.handleFilterLeaguesById(<strong>${ID của giải đấu}</strong>)</span></div>

    <div class="tables-container">
        <div class="table-wrapper">
            <h3><?php _e('Tất cả giải đấu', 'sport'); ?></h3>
            <input type="text" id="searchInput" placeholder="<?php _e('Tìm kiếm theo tên giải đấu...', 'sport'); ?>"
                   style="margin-bottom: 10px; padding: 6px; width: 100%;">
            <table id="allLeaguesTable" class="wp-list-table widefat striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th><?php _e('Tên giải đấu', 'sport'); ?></th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div id="paginationContainer"></div>
        </div>

        <div class="table-wrapper">
            <h3><?php _e('Giải đấu Hot (Kéo từ trái sang để thêm)', 'sport'); ?></h3>
            <p class="hot_leagues_description"><em><?php _e('Bạn có thể kéo để sắp xếp lại thứ tự.', 'sport'); ?></em></p>
            <table id="hotLeaguesTable" class="wp-list-table widefat striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th><?php _e('Tên giải đấu', 'sport'); ?></th>
                    <th><?php _e('Hành động', 'sport'); ?></th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
             <div id="statusMessage" class="status-message"></div>
        </div>
    </div>
</div>

<script defer>
    document.addEventListener('DOMContentLoaded', function () {
        const lang = '<?php echo $lang_code ?>';
        // Dữ liệu từ PHP cho AJAX và các giải đấu hot ban đầu
        const wp_data = {
            ajax_url: '<?php echo admin_url('admin-ajax.php'); ?>',
            nonce: '<?php echo wp_create_nonce('hot_leagues_nonce'); ?>',
            initial_hot_ids: <?php echo json_encode($hot_league_ids); ?>
        };

        // --- DOM Elements ---
        const allLeaguesTableBody = document.querySelector('#allLeaguesTable tbody');
        const hotLeaguesTableBody = document.querySelector('#hotLeaguesTable tbody');
        const searchInput = document.getElementById('searchInput');
        const paginationContainer = document.getElementById('paginationContainer');
        const statusMessage = document.getElementById('statusMessage');


        // --- State Variables ---
        let allData = [];
        let filteredData = [];
        let currentPage = 1;
        const itemsPerPage = 20;

        // --- Data Fetching and Initial Render ---
        const jsonUrl = '<?php echo BONGDAKO_PLUGIN_DIR_URL . "/assets/json/leagues.json"; ?>';
        fetch(jsonUrl)
            .then(response => response.json())
            .then(data => {
                allData = data.league || [];
                allData.sort((a, b) => {
                    const nameA = (a[`Name_${lang.toUpperCase()}`] || a.Name_E).toLowerCase();
                    const nameB = (b[`Name_${lang.toUpperCase()}`] || b.Name_E).toLowerCase();
                    if (nameA < nameB) return -1;
                    if (nameA > nameB) return 1;
                    return 0;
                });
                
                filteredData = [...allData];
                updateAllLeaguesView();
                populateHotLeaguesTable();
            })
            .catch(error => console.error('Lỗi khi lấy tệp JSON:', error));


        // --- Functions for "All Leagues" Table ---
        function renderAllLeaguesTable(data) {
            allLeaguesTableBody.innerHTML = '';
            const start = (currentPage - 1) * itemsPerPage;
            const pageData = data.slice(start, start + itemsPerPage);

            if (pageData.length === 0) {
                allLeaguesTableBody.innerHTML = '<tr><td colspan="2">Không tìm thấy giải đấu nào.</td></tr>';
                return;
            }

            pageData.forEach(item => {
                const row = document.createElement('tr');
                row.dataset.id = item.sclassID; // Thêm data-id để nhận diện

                const name = item[`Name_${lang.toUpperCase()}`] || item.Name_E;
                row.innerHTML = `<td>${item.sclassID}</td><td>${name}</td>`;
                allLeaguesTableBody.appendChild(row);
            });
        }
        
        function renderPagination(data) {
            // ... (Mã pagination giữ nguyên, chỉ đổi container)
            paginationContainer.innerHTML = '';
            const totalPages = Math.ceil(data.length / itemsPerPage);

            const prevBtn = document.createElement('button');
            prevBtn.textContent = 'Previous';
            prevBtn.className = 'button';
            prevBtn.disabled = currentPage === 1;
            prevBtn.style.marginRight = '10px';
            prevBtn.addEventListener('click', () => {
                if (currentPage > 1) {
                    currentPage--;
                    updateAllLeaguesView();
                }
            });
            paginationContainer.appendChild(prevBtn);

            const nextBtn = document.createElement('button');
            nextBtn.textContent = 'Next';
            nextBtn.className = 'button';
            nextBtn.disabled = currentPage === totalPages || totalPages === 0;
            nextBtn.addEventListener('click', () => {
                if (currentPage < totalPages) {
                    currentPage++;
                    updateAllLeaguesView();
                }
            });
            paginationContainer.appendChild(nextBtn);
        }

        function updateAllLeaguesView() {
            renderAllLeaguesTable(filteredData);
            renderPagination(filteredData);
        }
        
        // --- Functions for "Hot Leagues" Table ---
        function createHotLeagueRow(league) {
            if (!league) return null;
            const row = document.createElement('tr');
            row.dataset.id = league.sclassID;
            
            const name = league[`Name_${lang.toUpperCase()}`] || league.Name_E;

            const removeButton = document.createElement('button');
            removeButton.textContent = 'Xóa';
            removeButton.className = 'button button-link-delete';
            removeButton.onclick = () => {
                row.remove();
                saveHotLeagues();
            };
            
            const actionCell = document.createElement('td');
            actionCell.appendChild(removeButton);

            row.innerHTML = `<td>${league.sclassID}</td><td>${name}</td>`;
            row.appendChild(actionCell);

            return row;
        }

        function populateHotLeaguesTable() {
            hotLeaguesTableBody.innerHTML = '';
            wp_data.initial_hot_ids.forEach(id => {
                const league = allData.find(l => l.sclassID == id);
                if (league) {
                    const row = createHotLeagueRow(league);
                    hotLeaguesTableBody.appendChild(row);
                }
            });
        }
        
        // --- Search Functionality ---
        function removeVietnameseTones(str) {
            //... (giữ nguyên hàm này)
            const accents = "áàảãạăắằẳẵặâấầẩẫậđéèẻẽẹêếềểễệíìỉĩịóòỏõọôốồổỗộơớờởỡợúùủũụưứừửữựýỳỷỹỵ";
            const withoutAccents = "aaaaaaaaaaaaaaaaadeeeeeeeeeiiioooooooooooooooooouuuuuuuuuuuyyyyy";
            return str.split('').map(char => {
                const index = accents.indexOf(char);
                return index !== -1 ? withoutAccents[index] : char;
            }).join('');
        }

        function applySearch() {
            const searchTerm = searchInput.value.trim().toLowerCase();
            const normalizedSearchTerm = removeVietnameseTones(searchTerm);

            filteredData = allData.filter(item => {
                const nameVN = removeVietnameseTones(item.Name_VN?.toLowerCase() || '');
                const nameE = removeVietnameseTones(item.Name_E?.toLowerCase() || '');
                const nameTH = removeVietnameseTones(item.Name_TH?.toLowerCase() || '');

                return nameVN.includes(normalizedSearchTerm) || 
                       nameE.includes(normalizedSearchTerm) ||
                       nameTH.includes(normalizedSearchTerm);
            });
            
            currentPage = 1;
            updateAllLeaguesView();
        }
        searchInput.addEventListener('input', applySearch);

        // --- Save to Database (AJAX) ---
        async function saveHotLeagues() {
            statusMessage.textContent = 'Đang lưu...';
            statusMessage.className = 'status-message status-saving';

            const leagueRows = hotLeaguesTableBody.querySelectorAll('tr');
            const leagueIds = Array.from(leagueRows).map(row => row.dataset.id);
            
            const formData = new FormData();
            formData.append('action', 'save_hot_leagues');
            formData.append('security', wp_data.nonce);
            // Gửi mảng ID dưới dạng các phần tử riêng biệt
            leagueIds.forEach(id => formData.append('league_ids[]', id));

            try {
                const response = await fetch(wp_data.ajax_url, {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                if (result.success) {
                    statusMessage.textContent = 'Đã lưu thành công!';
                    statusMessage.className = 'status-message status-saved';
                } else {
                    throw new Error('Lưu thất bại.');
                }
            } catch (error) {
                console.error('Lỗi khi lưu:', error);
                statusMessage.textContent = 'Lỗi! Không thể lưu. Vui lòng thử lại.';
                statusMessage.className = 'status-message status-error';
            }
            // Ẩn thông báo sau 3 giây
            setTimeout(() => { statusMessage.textContent = ''; }, 3000);
        }

        // --- Initialize SortableJS ---
        // Bảng nguồn (Tất cả giải đấu)
        new Sortable(allLeaguesTableBody, {
            group: {
                name: 'shared',
                pull: 'clone', // Kéo đi sẽ tạo bản sao, không xóa khỏi bảng gốc
                put: false // Không cho phép thả item vào bảng này
            },
            sort: false, // Không cho sắp xếp trong bảng này
            animation: 150
        });

        // Bảng đích (Giải đấu hot)
        new Sortable(hotLeaguesTableBody, {
            group: 'shared', // Cùng group để có thể kéo qua lại
            animation: 150,
            onAdd: function (evt) {
                const newRow = evt.item; // Đây là hàng được kéo từ bảng trái
                const leagueId = newRow.dataset.id;

                // Kiểm tra trùng lặp
                const existingIds = Array.from(hotLeaguesTableBody.querySelectorAll('tr')).map(r => r.dataset.id);
                if (existingIds.filter(id => id === leagueId).length > 1) {
                    newRow.remove(); // Xóa nếu đã tồn tại
                    alert('Giải đấu này đã có trong danh sách hot.');
                    return;
                }
                
                // Thay thế hàng vừa kéo bằng một hàng mới có nút "Xóa"
                const leagueData = allData.find(l => l.sclassID == leagueId);
                const properHotRow = createHotLeagueRow(leagueData);
                if (properHotRow) {
                    newRow.parentNode.replaceChild(properHotRow, newRow);
                } else {
                    newRow.remove(); // Xóa nếu không tìm thấy dữ liệu
                }
                
                saveHotLeagues(); // Lưu lại sau khi thêm
            },
            onUpdate: function (evt) {
                // Kích hoạt khi sắp xếp lại các item trong chính bảng này
                saveHotLeagues();
            }
        });
    });
</script>