document.addEventListener('DOMContentLoaded', () => {
    const tableBody = document.getElementById('dataTable');
    const sentimentFilter = document.getElementById('sentimentFilter');
    const pagination = document.getElementById('pagination');
    const itemsPerPage = 10;
    let currentPage = 1;
    let dataset = [];

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

            function displayData(filter = 'all', page = 1) {
                tableBody.innerHTML = '';
                const filteredData = filter === 'all' ? dataset : dataset.filter(item => item.label === filter);
                const start = (page - 1) * itemsPerPage;
                const end = start + itemsPerPage;
                const paginatedData = filteredData.slice(start, end);

                paginatedData.forEach(item => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${item.index}</td>
                        <td>${item.text}</td>
                        <td>${item.label}</td>
                    `;
                    tableBody.appendChild(row);
                });

                updatePagination(filteredData.length, page);
            }

            function updatePagination(totalItems, page) {
                pagination.innerHTML = '';
                const totalPages = Math.ceil(totalItems / itemsPerPage);

                if (totalPages <= 1) return;

                const prevLi = document.createElement('li');
                prevLi.className = `page-item ${page === 1 ? 'disabled' : ''}`;
                prevLi.innerHTML = '<a class="page-link" href="#">Previous</a>';
                prevLi.addEventListener('click', (e) => {
                    e.preventDefault();
                    if (page > 1) displayData(sentimentFilter.value, page - 1);
                });
                pagination.appendChild(prevLi);

                for (let i = 1; i <= totalPages; i++) {
                    const li = document.createElement('li');
                    li.className = `page-item ${i === page ? 'active' : ''}`;
                    li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
                    li.addEventListener('click', (e) => {
                        e.preventDefault();
                        displayData(sentimentFilter.value, i);
                    });
                    pagination.appendChild(li);
                }

                const nextLi = document.createElement('li');
                nextLi.className = `page-item ${page === totalPages ? 'disabled' : ''}`;
                nextLi.innerHTML = '<a class="page-link" href="#">Next</a>';
                nextLi.addEventListener('click', (e) => {
                    e.preventDefault();
                    if (page < totalPages) displayData(sentimentFilter.value, page + 1);
                });
                pagination.appendChild(nextLi);
            }

            displayData();

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