document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('scrapingForm');
    const stopButton = document.getElementById('stopButton');
    const logsElement = document.getElementById('logs');
    const prevPageButton = document.getElementById('prevPage');
    const nextPageButton = document.getElementById('nextPage');
    const pageInfo = document.getElementById('pageInfo');
    let currentPage = 0;
    
    const linesPerPage = 50;
    let autoRefreshInterval;

    const fetchLogs = (page) => {
        fetch(`/logfile?page=${page}&lines_per_page=${linesPerPage}`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    logsElement.textContent = data.error;
                } else {
                    logsElement.innerHTML = data.log.map((line, index) => {
                        const lineNumber = data.total_lines - (page * linesPerPage + index);
                        return `<span class="line-number">${lineNumber}</span> ${line}`;
                    }).join('');
                    // Disable/enable pagination buttons based on the page number and total lines
                    prevPageButton.disabled = page === 0;
                    nextPageButton.disabled = (page + 1) * linesPerPage >= data.total_lines;
                    pageInfo.textContent = `Page ${page + 1} of ${Math.ceil(data.total_lines / linesPerPage)}`;
                }
            });
    };

    const startAutoRefresh = () => {
        autoRefreshInterval = setInterval(() => {
            fetchLogs(currentPage);
        }, 5000); // Refresh every 5 seconds
    };

    const stopAutoRefresh = () => {
        clearInterval(autoRefreshInterval);
    };

    // Check scraping status on page load
    fetch('/scraping_status')
        .then(response => response.json())
        .then(data => {
            if (data.scraping_active) {
                startButton.disabled = true;
                stopButton.disabled = false;
                startAutoRefresh();  // Start auto-refresh if scraping is active
            } else {
                startButton.disabled = false;
                stopButton.disabled = true;
            }
            fetchLogs(currentPage);
        });

    prevPageButton.addEventListener('click', () => {
        if (currentPage > 0) {
            currentPage--;
            fetchLogs(currentPage);
        }
    });

    nextPageButton.addEventListener('click', () => {
        currentPage++;
        fetchLogs(currentPage);
    });

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);

        fetch('/start_scraping', {
            method: 'POST',
            body: formData
        }).then(response => response.json())
          .then(data => {
              console.log(data);
              const submitButton = form.querySelector('button[type="submit"]');
              if (data.status === "Scraping started") {
                  if (submitButton) {
                      submitButton.disabled = true;
                  }
                  stopButton.disabled = false;
                  startAutoRefresh();  // Start auto-refresh when scraping starts
              } else {
                  // Handle errors or other statuses
              }
          });
    });

    stopButton.addEventListener('click', function() {
        fetch('/stop_scraping', {
            method: 'POST'
        }).then(response => response.json())
          .then(data => {
              console.log(data);
              const submitButton = form.querySelector('button[type="submit"]');
              if (data.status === "Scraping stopped") {
                  if (submitButton) {
                      submitButton.disabled = false;
                  }
                  stopButton.disabled = true;
                  stopAutoRefresh();  // Stop auto-refresh when scraping stops
              } else {
                  // Handle errors or other statuses
              }
          });
    });
});