let allItems = [];
let currentPage = 1;
let itemsPerPage = 10;

function searchItems() {
    const formData = new FormData(searchForm);
    resultsContainer.innerHTML = '';
    overlay.style.display = 'flex';

    fetch('/search', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        currentItems = data;
        sortItems(currentItems);
        displayItems(currentItems, 1);
        overlay.style.display = 'none';
    })
    .catch(error => {
        console.error('Error:', error);
        overlay.style.display = 'none';
    });

    updateProgress();
}

function updateProgress() {
    fetch('/progress')
    .then(response => response.json())
    .then(data => {
        const totalItems = data.total_items;
        const currentItem = data.current_item;
        const progressPercentage = data.progress_percentage;

        document.getElementById('progress-text').innerText = `Artikel ${currentItem} von ${totalItems}`;
        //document.getElementById('progress-fill').style.width = `${progressPercentage}%`;
        //document.getElementById('progress-percentage').innerText = `${progressPercentage}%`;

        if (currentItem < totalItems) {
            setTimeout(updateProgress, 500);  // Poll every second
        } else {
            document.getElementById('overlay').style.display = 'none';
        }
    })
    .catch(error => console.error('Fehler beim Abrufen des Fortschritts:', error));
}

document.getElementById('search-form').addEventListener('submit', function(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    document.getElementById('overlay').style.display = 'flex';

    fetch('/search', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        allItems = data;
        currentPage = 1;
        displayResults();
        document.getElementById('overlay').style.display = 'none';
    })
    .catch(error => {
        console.error('Fehler beim Abrufen der Ergebnisse:', error);
        document.getElementById('overlay').style.display = 'none';
    });

    // Start updating progress
    updateProgress();
});

document.getElementById('items-per-page').addEventListener('change', function(event) {
    itemsPerPage = parseInt(event.target.value);
    currentPage = 1;
    displayResults();
});

document.getElementById('sort-filter').addEventListener('change', function(event) {
    const sortBy = event.target.value;
    if (sortBy === 'alphabet') {
        allItems.sort((a, b) => a[0].localeCompare(b[0]));
    } else if (sortBy === 'price') {
        allItems.sort((a, b) => parseFloat(a[3]) - parseFloat(b[3]));
    }
    displayResults();
});

document.getElementById('manufacturer-filter').addEventListener('input', function(event) {
    const manufacturer = event.target.value.toLowerCase();
    const filteredItems = allItems.filter(item => item[0].toLowerCase().includes(manufacturer));
    displayResults(filteredItems);
});

function displayResults(items = allItems) {
    const resultsDiv = document.getElementById('results');
    resultsDiv.innerHTML = '';
    const start = (currentPage - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const paginatedItems = items.slice(start, end);

    paginatedItems.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.classList.add('item');
        itemDiv.innerHTML = `<h3><a href="${item[2]}" target="_blank">${item[0]}</a></h3><p><b>Preis:</b> ${item[1]}</p>`;
        resultsDiv.appendChild(itemDiv);
    });

    displayPagination(items.length);
}

function displayPagination(totalItems) {
    const paginationTopDiv = document.getElementById('pagination-top');
    const paginationBottomDiv = document.getElementById('pagination-bottom');
    paginationTopDiv.innerHTML = '';
    paginationBottomDiv.innerHTML = '';
    const totalPages = Math.ceil(totalItems / itemsPerPage);

    let paginationHTML = `
        <span class="page-button" onclick="changePage(1)"><<</span>
        <span class="page-button" onclick="changePage(currentPage - 1)"><</span>
    `;

    if (totalPages <= 9) {
        for (let page = 1; page <= totalPages; page++) {
            paginationHTML += `
                <span class="page-button ${page === currentPage ? 'active' : ''}" onclick="changePage(${page})">${page}</span>
            `;
        }
    } else {
        if (currentPage <= 5) {
            for (let page = 1; page <= 7; page++) {
                paginationHTML += `
                    <span class="page-button ${page === currentPage ? 'active' : ''}" onclick="changePage(${page})">${page}</span>
                `;
            }
            paginationHTML += `<span class="page-button">...</span>`;
            paginationHTML += `
                <span class="page-button" onclick="changePage(${totalPages})">${totalPages}</span>
            `;
        } else if (currentPage > totalPages - 5) {
            paginationHTML += `
                <span class="page-button" onclick="changePage(1)">1</span>
                <span class="page-button">...</span>
            `;
            for (let page = totalPages - 6; page <= totalPages; page++) {
                paginationHTML += `
                    <span class="page-button ${page === currentPage ? 'active' : ''}" onclick="changePage(${page})">${page}</span>
                `;
            }
        } else {
            paginationHTML += `
                <span class="page-button" onclick="changePage(1)">1</span>
                <span class="page-button">...</span>
            `;
            for (let page = currentPage - 3; page <= currentPage + 3; page++) {
                paginationHTML += `
                    <span class="page-button ${page === currentPage ? 'active' : ''}" onclick="changePage(${page})">${page}</span>
                `;
            }
            paginationHTML += `<span class="page-button">...</span>`;
            paginationHTML += `
                <span class="page-button" onclick="changePage(${totalPages})">${totalPages}</span>
            `;
        }
    }

    paginationHTML += `
        <span class="page-button" onclick="changePage(currentPage + 1)">></span>
        <span class="page-button" onclick="changePage(${totalPages})">>></span>
    `;

    paginationTopDiv.innerHTML = paginationHTML;
    paginationBottomDiv.innerHTML = paginationHTML;
}

function changePage(page) {
    const totalPages = Math.ceil(allItems.length / itemsPerPage);
    if (page < 1) page = 1;
    if (page > totalPages) page = totalPages;
    currentPage = page;
    displayResults();
}