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');
    let currentPage = 0;
    const linesPerPage = 50;
    let autoRefreshInterval;

    console.log('Form:', form);
    console.log('Submit button:', form.querySelector('button[type="submit"]'));

    const fetchLogs = (page) => {
        fetch(`/logfile?lines=${linesPerPage * (page + 1)}`)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    logsElement.textContent = data.error;
                } else {
                    // Reverse the order of log lines
                    const reversedLogs = data.log.reverse();
                    logsElement.textContent = reversedLogs.join('');
                }
            });
    };

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