document.addEventListener('DOMContentLoaded', () => {
    const tableBody = document.getElementById('dataTable');
    const sentimentFilter = document.getElementById('sentimentAnalysis');
    const pagination = document.getElementById('customPagination');
    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);
                });

                tableBody.style.opacity = '0';
                setTimeout(() => {
                    tableBody.style.opacity = '1';
                    tableBody.style.transition = 'opacity 0.3s ease';
                }, 50);

                updatePagination(filteredData.length, page);
            }

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

                if (totalPages <= maxPagesToShow) {
                    startPage = 1;
                    endPage = totalPages;
                } else {
                    const half = Math.floor(maxPagesToShow / 2);
                    if (page <= half) {
                        startPage = 1;
                        endPage = maxPagesToShow;
                    } else if (page + half >= totalPages) {
                        startPage = totalPages - maxPagesToShow + 1;
                        endPage = totalPages;
                    } else {
                        startPage = page - half;
                        endPage = page + half;
                    }
                }

                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);

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

                    if (startPage > 2) {
                        const dotsLi = document.createElement('li');
                        dotsLi.className = 'page-item disabled';
                        dotsLi.innerHTML = '<a class="page-link" href="#">...</a>';
                        pagination.appendChild(dotsLi);
                    }
                }

                for (let i = startPage; i <= endPage; 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);
                }

                if (endPage < totalPages) {
                    if (endPage < totalPages - 1) {
                        const dotsLi = document.createElement('li');
                        dotsLi.className = 'page-item disabled';
                        dotsLi.innerHTML = '<a class="page-link" href="#">...</a>';
                        pagination.appendChild(dotsLi);
                    }

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

                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>';
        });
});