export const ui = {
    get elements() {
        return {
            csvFileSelect: document.getElementById('csv-file-select'),
            judgeFileSelect: document.getElementById('judge-file-select'),
            
            filterModel: document.getElementById('filter-model'),
            filterScenario: document.getElementById('filter-scenario'),
            filterOversight: document.getElementById('filter-oversight'),
            
            refreshBtn: document.getElementById('refresh-btn'),
            
            csvResults: document.getElementById('csv-results'),
            imageResults: document.getElementById('image-results'),
            judgeResults: document.getElementById('judge-results'),
            interactiveCharts: document.getElementById('interactive-charts'),
            dataStats: document.getElementById('data-stats'),
            
            tabTriggers: document.querySelectorAll('.tab-trigger'),
            tabPanels: document.querySelectorAll('.tab-panel')
        };
    },

    initTabs(onTabChange) {
        this.elements.tabTriggers.forEach(trigger => {
            trigger.addEventListener('click', () => {
                const tabId = trigger.dataset.tab;
                
                this.elements.tabTriggers.forEach(t => t.classList.remove('active'));
                this.elements.tabPanels.forEach(p => p.classList.remove('active'));
                
                trigger.classList.add('active');
                document.getElementById(`tab-${tabId}`).classList.add('active');
                
                if (onTabChange) onTabChange(tabId);
            });
        });
    }
};