document.addEventListener('DOMContentLoaded', () => {
    const tableBody = document.getElementById('dataTable');
    const sentimentFilter = document.getElementById('sentimentFilter');

    // Load CSV data
    fetch('data.csv')
        .then(response => response.text())
        .then(data => {
            const rows = data.trim().split('\n').slice(1); // Skip header
            const dataset = rows.map(row => {
                const [index, text, label] = row.split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
                return { index: parseInt(index), text: text.replace(/^"|"$/g, ''), label: label.replace(/^"|"$/g, '') };
            });

            // Display data
            function displayData(filter = 'all') {
                tableBody.innerHTML = '';
                dataset.forEach(item => {
                    if (filter === 'all' || item.label === filter) {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${item.index}</td>
                            <td>${item.text}</td>
                            <td>${item.label}</td>
                        `;
                        tableBody.appendChild(row);
                    }
                });
            }

            // Initial display
            displayData();

            // Filter event listener
            sentimentFilter.addEventListener('change', () => {
                displayData(sentimentFilter.value);
            });
        })
        .catch(error => {
            console.error('Error loading data:', error);
            tableBody.innerHTML = '<tr><td colspan="3">Error loading dataset.</td></tr>';
        });
});