document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Toggle mobile menu
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    
    if(mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }
    
    // Sample data for charts (would be replaced with real data in production)
    const testStatusData = {
        labels: ['Passed', 'Failed', 'Pending'],
        datasets: [{
            data: [124, 8, 32],
            backgroundColor: [
                '#10B981',
                '#EF4444',
                '#F59E0B'
            ],
            hoverOffset: 4
        }]
    };
    
    // Initialize charts (example with Chart.js)
    if(typeof Chart !== 'undefined') {
        const ctx = document.getElementById('testStatusChart');
        if(ctx) {
            new Chart(ctx, {
                type: 'doughnut',
                data: testStatusData,
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                        }
                    }
                }
            });
        }
    }
    
    // Filter functionality for test cases
    const filterButtons = document.querySelectorAll('.filter-btn');
    const testCaseRows = document.querySelectorAll('tbody tr');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const filterValue = this.getAttribute('data-filter');
            
            testCaseRows.forEach(row => {
                if(filterValue === 'all') {
                    row.style.display = '';
                } else {
                    const rowType = row.querySelector('td:nth-child(3) span').textContent.toLowerCase();
                    if(rowType.includes(filterValue)) {
                        row.style.display = '';
                    } else {
                        row.style.display = 'none';
                    }
                }
            });
            
            // Update active button
            filterButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
        });
    });
});