// Gloire's data filtered from the dataset
const gloireData = [
    { id: 788, fileName: "/batch8-2/Introduction/001013_1.wav", duration: 573.045, hours: 0.15, category: "Introduction" },
    { id: 789, fileName: "/batch8-2/Live/001151_2.wav", duration: 915.325, hours: 0.25, category: "Live" },
    { id: 790, fileName: "/batch8-2/Live/001182_1.wav", duration: 583.006, hours: 0.16, category: "Live" },
    { id: 791, fileName: "/batch8-2/Introduction/000875_2.wav", duration: 751.13, hours: 0.21, category: "Introduction" },
    { id: 793, fileName: "/batch8-2/Introduction/001123_1.wav", duration: 584.418, hours: 0.16, category: "Introduction" },
    { id: 796, fileName: "/batch8-2/Introduction/001116_1.wav", duration: 563.582, hours: 0.15, category: "Introduction" },
    { id: 798, fileName: "/batch8-2/Introduction/001064_1.wav", duration: 571.121, hours: 0.15, category: "Introduction" },
    { id: 799, fileName: "/batch8-2/Travel/001197_3.wav", duration: 637.224, hours: 0.17, category: "Travel" },
    { id: 800, fileName: "/batch8-2/Introduction/000969_1.wav", duration: 598.764, hours: 0.16, category: "Introduction" },
    { id: 802, fileName: "/batch8-2/Introduction/000937_7.wav", duration: 598.852, hours: 0.16, category: "Introduction" },
    { id: 803, fileName: "/batch8-2/Live/001146_2.wav", duration: 820.033, hours: 0.22, category: "Live" },
    { id: 805, fileName: "/batch8-2/Live/001152_1.wav", duration: 567.14, hours: 0.15, category: "Live" },
    { id: 806, fileName: "/batch8-2/Live/001140_1.wav", duration: 563.636, hours: 0.15, category: "Live" },
    { id: 807, fileName: "/batch8-2/Introduction/000945_1.wav", duration: 598.72, hours: 0.16, category: "Introduction" },
    { id: 808, fileName: "/batch8-2/Introduction/000890_2.wav", duration: 570.264, hours: 0.15, category: "Introduction" },
    { id: 809, fileName: "/batch8-2/Introduction/000869_2.wav", duration: 521.006, hours: 0.14, category: "Introduction" },
    { id: 815, fileName: "/batch8-2/Live/001162_1.wav", duration: 561.573, hours: 0.15, category: "Live" },
    { id: 816, fileName: "/batch8-2/Live/001135_1.wav", duration: 499.299, hours: 0.13, category: "Live" },
    { id: 817, fileName: "/batch8-2/Introduction/000941_6.wav", duration: 422.017, hours: 0.11, category: "Introduction" },
    { id: 818, fileName: "/batch8-2/Introduction/000941_4.wav", duration: 482.013, hours: 0.13, category: "Introduction" },
    { id: 819, fileName: "/batch8-2/Introduction/000996_1.wav", duration: 569.876, hours: 0.15, category: "Introduction" },
    { id: 859, fileName: "/batch8-2/Introduction/000888_4.wav", duration: 628.822, hours: 0.17, category: "Introduction" },
    { id: 860, fileName: "/batch8-2/Live/001151_1.wav", duration: 523.671, hours: 0.14, category: "Live" },
    { id: 862, fileName: "/batch8-2/Introduction/000962_2.wav", duration: 973.874, hours: 0.27, category: "Introduction" },
    { id: 865, fileName: "/batch8-2/Introduction/000937_4.wav", duration: 598.684, hours: 0.16, category: "Introduction" },
    { id: 866, fileName: "/batch8-2/Introduction/000937_8.wav", duration: 692.453, hours: 0.19, category: "Introduction" },
    { id: 870, fileName: "/batch8-2/Introduction/000874_1.wav", duration: 598.757, hours: 0.16, category: "Introduction" },
    { id: 877, fileName: "/batch8-2/Introduction/001110_2.wav", duration: 787.51, hours: 0.21, category: "Introduction" },
    { id: 878, fileName: "/batch8-2/Introduction/000941_2.wav", duration: 598.826, hours: 0.16, category: "Introduction" },
    { id: 880, fileName: "/batch8-2/Live/001174_2.wav", duration: 544.139, hours: 0.15, category: "Live" },
    { id: 881, fileName: "/batch8-2/Live/001174_3.wav", duration: 977.914, hours: 0.27, category: "Live" },
    { id: 882, fileName: "/batch8-2/Introduction/000873_2.wav", duration: 833.855, hours: 0.23, category: "Introduction" },
    { id: 883, fileName: "/batch8-2/Travel/001196_1.wav", duration: 287.963, hours: 0.08, category: "Travel" },
    { id: 886, fileName: "/batch8-2/Introduction/001025_3.wav", duration: 652.289, hours: 0.18, category: "Introduction" },
    { id: 887, fileName: "/batch8-2/Introduction/000890_1.wav", duration: 582.613, hours: 0.16, category: "Introduction" },
    { id: 888, fileName: "/batch8-2/Travel/001221_1.wav", duration: 273.394, hours: 0.08, category: "Travel" },
    { id: 890, fileName: "/batch8-2/Live/001135_2.wav", duration: 804.498, hours: 0.22, category: "Live" },
    { id: 892, fileName: "/batch8-2/Introduction/001110_1.wav", duration: 583.554, hours: 0.16, category: "Introduction" },
    { id: 894, fileName: "/batch8-2/Introduction/001079_2.wav", duration: 886.687, hours: 0.24, category: "Introduction" },
    { id: 907, fileName: "/batch8-2/Introduction/000937_3.wav", duration: 527.853, hours: 0.14, category: "Introduction" },
    { id: 925, fileName: "/batch8-2/Travel/001195_1.wav", duration: 407.751, hours: 0.11, category: "Travel" },
    { id: 926, fileName: "/batch8-2/Introduction/000931_2.wav", duration: 647.034, hours: 0.17, category: "Introduction" },
    { id: 933, fileName: "/batch8-2/Introduction/001040_1.wav", duration: 572.237, hours: 0.15, category: "Introduction" },
    { id: 936, fileName: "/batch8-2/Introduction/000945_5.wav", duration: 510.083, hours: 0.14, category: "Introduction" },
    { id: 947, fileName: "/batch8-2/Introduction/001025_1.wav", duration: 590.477, hours: 0.16, category: "Introduction" },
    { id: 948, fileName: "/batch8-2/Introduction/001045_1.wav", duration: 582.894, hours: 0.16, category: "Introduction" },
    { id: 949, fileName: "/batch8-2/Introduction/001011_1.wav", duration: 587.805, hours: 0.16, category: "Introduction" },
    { id: 950, fileName: "/batch8-2/Travel/001211_1.wav", duration: 211.448, hours: 0.06, category: "Travel" },
    { id: 954, fileName: "/batch8-2/Travel/001223_1.wav", duration: 286.21, hours: 0.08, category: "Travel" },
    { id: 955, fileName: "/batch8-2/Live/001174_1.wav", duration: 572.809, hours: 0.15, category: "Live" },
    { id: 957, fileName: "/batch8-2/Introduction/000888_3.wav", duration: 598.78, hours: 0.16, category: "Introduction" },
    { id: 931, fileName: "/batch8-2/Travel/001220_1.wav", duration: 243.976, hours: 0.07, category: "Travel" },
    { id: 935, fileName: "/batch8-2/Travel/001218_2.wav", duration: 144.965, hours: 0.04, category: "Travel" }
];

// DOM elements
const dataTable = document.getElementById('dataTable');
const totalHoursElement = document.getElementById('totalHours');
const totalFilesElement = document.getElementById('totalFiles');
const avgDurationElement = document.getElementById('avgDuration');
const longestFileElement = document.getElementById('longestFile');
const searchInput = document.getElementById('searchInput');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('prevBtn');
const startItemElement = document.getElementById('startItem');
const endItemElement = document.getElementById('endItem');
const totalItemsElement = document.getElementById('totalItems');

// Pagination variables
let currentPage = 1;
const itemsPerPage = 10;
let filteredData = [...gloireData];

// Initialize the page
function init() {
    calculateStats();
    renderTable();
    setupEventListeners();
}

// Calculate statistics
function calculateStats() {
    const totalHours = gloireData.reduce((sum, item) => sum + item.hours, 0);
    const totalDuration = gloireData.reduce((sum, item) => sum + item.duration, 0);
    const avgDuration = totalDuration / gloireData.length / 60; // Convert to minutes
    const longestFile = Math.max(...gloireData.map(item => item.hours));
    
    totalHoursElement.textContent = totalHours.toFixed(2);
    totalFilesElement.textContent = gloireData.length;
    avgDurationElement.textContent = (avgDuration).toFixed(2);
    longestFileElement.textContent = longestFile.toFixed(2);
}

// Render table with pagination
function renderTable() {
    dataTable.innerHTML = '';
    
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = Math.min(startIndex + itemsPerPage, filteredData.length);
    
    for (let i = startIndex; i < endIndex; i++) {
        const item = filteredData[i];
        const row = document.createElement('tr');
        
        row.innerHTML = `
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.id}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.fileName}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.duration.toFixed(3)}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.hours.toFixed(2)}</td>
            <td class="px-6 py-4 whitespace-nowrap">
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                    ${getCategoryColor(item.category)}">
                    ${item.category}
                </span>
            </td>
        `;
        
        dataTable.appendChild(row);
    }
    
    // Update pagination info
    startItemElement.textContent = startIndex + 1;
    endItemElement.textContent = endIndex;
    totalItemsElement.textContent = filteredData.length;
    
    // Update button states
    prevBtn.disabled = currentPage === 1;
    nextBtn.disabled = endIndex >= filteredData.length;
}

// Get color class based on category
function getCategoryColor(category) {
    switch(category) {
        case 'Introduction': return 'bg-blue-100 text-blue-800';
        case 'Live': return 'bg-green-100 text-green-800';
        case 'Travel': return 'bg-purple-100 text-purple-800';
        default: return 'bg-gray-100 text-gray-800';
    }
}

// Setup event listeners
function setupEventListeners() {
    // Search functionality
    searchInput.addEventListener('input', (e) => {
        const searchTerm = e.target.value.toLowerCase();
        filteredData = gloireData.filter(item => 
            item.fileName.toLowerCase().includes(searchTerm) || 
            item.category.toLowerCase().includes(searchTerm)
        );
        currentPage = 1;
        renderTable();
    });
    
    // Pagination buttons
    prevBtn.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            renderTable();
        }
    });
    
    nextBtn.addEventListener('click', () => {
        const totalPages = Math.ceil(filteredData.length / itemsPerPage);
        if (currentPage < totalPages) {
            currentPage++;
            renderTable();
        }
    });
}

// Initialize the app
document.addEventListener('DOMContentLoaded', init);