document.addEventListener('DOMContentLoaded', function() {
    // Parse XML test data
    const testData = {
        models: {
            'bert-japanese': 4,
            'bert-japanese-character': 1
        },
        tests: {
            'test_conversion_reversible': 2,
            'test_internal_consistency': 2,
            'test_tokenization': 0,
            'test_chat_template': 0,
            'test_pretokenized_inputs': 0
        },
        errors: [
            {
                type: 'Conversion Error',
                count: 2,
                models: ['bert-japanese', 'bert-japanese-character'],
                details: 'AssertionError: 2 != 1 in test_conversion_reversible'
            },
            {
                type: 'Consistency Error',
                count: 2,
                models: ['bert-japanese', 'bert-japanese-character'],
                details: 'Text output mismatch in test_internal_consistency'
            },
            {
                type: 'Truncation Error', 
                count: 1,
                models: ['bert-japanese'],
                details: 'Padding/truncation issue in test_truncation_side_in_kwargs'
            }
        ]
    };
// Initialize charts
    initModelChart(testData.models);
    initTestChart(testData.tests);
    populateErrorTable(testData.errors);
});

function initModelChart(data) {
    const ctx = document.getElementById('modelChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: Object.keys(data),
            datasets: [{
                label: 'Failure Count',
                data: Object.values(data),
                backgroundColor: '#6366f1',
                borderColor: '#4f46e5',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: '#e5e7eb',
                        borderDash: [5, 5]
                    },
                    ticks: {
                        color: '#6b7280'
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    ticks: {
                        color: '#6b7280'
                    }
                }
            },
            plugins: {
                legend: {
                    display: false
                },
                tooltip: {
                    backgroundColor: '#1f2937',
                    titleColor: '#f9fafb',
                    bodyColor: '#f9fafb',
                    borderColor: '#374151',
                    borderWidth: 1,
                    padding: 12
                }
            }
        }
    });
}

function initTestChart(data) {
    const ctx = document.getElementById('testChart').getContext('2d');
    const chart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: Object.keys(data),
            datasets: [{
                data: Object.values(data),
                backgroundColor: [
                    '#8b5cf6',
                    '#7c3aed',
                    '#6d28d9',
                    '#5b21b6',
                    '#4c1d95'
                ],
                borderColor: '#1f2937',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        color: '#6b7280',
                        padding: 20
                    }
                },
                tooltip: {
                    backgroundColor: '#1f2937',
                    titleColor: '#f9fafb',
                    bodyColor: '#f9fafb',
                    borderColor: '#374151',
                    borderWidth: 1,
                    padding: 12
                }
            }
        }
    });
}

function populateErrorTable(errors) {
    const tableBody = document.getElementById('errorTableBody');
    
    errors.forEach(error => {
        const row = document.createElement('tr');
        row.className = 'hover:bg-gray-50 dark:hover:bg-gray-700';
        
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">
                ${error.type}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
                    ${error.count}
                </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
                ${error.models.join(', ')}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">
                ${error.details}
            </td>
        `;
        
        tableBody.appendChild(row);
    });
}