// Essence Wars Report JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Tab switching
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabPanels = document.querySelectorAll('.tab-panel');

    tabBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const tabId = this.dataset.tab;

            // Update active states
            tabBtns.forEach(b => b.classList.remove('active'));
            tabPanels.forEach(p => p.classList.remove('active'));

            this.classList.add('active');
            document.getElementById(tabId + '-panel').classList.add('active');

            // Trigger Plotly resize for charts that might be in the newly visible tab
            window.dispatchEvent(new Event('resize'));
        });
    });

    // Make tables sortable
    const tables = document.querySelectorAll('.deck-table');
    tables.forEach(table => {
        const headers = table.querySelectorAll('th');
        headers.forEach((header, index) => {
            header.style.cursor = 'pointer';
            header.addEventListener('click', () => sortTable(table, index));
        });
    });
});

// Experiment selector for tuning tab
function showExperiment(index) {
    // Hide all experiment panels
    document.querySelectorAll('.experiment-panel').forEach(panel => {
        panel.style.display = 'none';
    });
    // Show selected panel
    const panel = document.getElementById('exp-' + index);
    if (panel) {
        panel.style.display = 'block';
        // Trigger Plotly resize for charts
        window.dispatchEvent(new Event('resize'));
    }
}

// Research tab faction switching
document.addEventListener('DOMContentLoaded', function() {
    const researchTabs = document.querySelectorAll('.research-tab');
    researchTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const faction = this.dataset.researchFaction;

            // Update active states
            researchTabs.forEach(t => t.classList.remove('active'));
            document.querySelectorAll('.research-panel').forEach(p => p.classList.remove('active'));

            this.classList.add('active');
            const panel = document.getElementById('research-table-' + faction);
            if (panel) {
                panel.classList.add('active');
            }
        });
    });
});

function sortTable(table, columnIndex) {
    const tbody = table.querySelector('tbody');
    const rows = Array.from(tbody.querySelectorAll('tr'));

    // Determine sort direction
    const currentDir = table.dataset.sortDir === 'asc' ? 'desc' : 'asc';
    table.dataset.sortDir = currentDir;
    table.dataset.sortCol = columnIndex;

    rows.sort((a, b) => {
        const aVal = a.cells[columnIndex].textContent.trim();
        const bVal = b.cells[columnIndex].textContent.trim();

        // Try numeric comparison first
        const aNum = parseFloat(aVal.replace(/[^0-9.-]/g, ''));
        const bNum = parseFloat(bVal.replace(/[^0-9.-]/g, ''));

        if (!isNaN(aNum) && !isNaN(bNum)) {
            return currentDir === 'asc' ? aNum - bNum : bNum - aNum;
        }

        // Fall back to string comparison
        return currentDir === 'asc'
            ? aVal.localeCompare(bVal)
            : bVal.localeCompare(aVal);
    });

    // Re-append sorted rows
    rows.forEach(row => tbody.appendChild(row));
}
