class LogViewerApp {
    constructor() {
        this.logsElement = document.getElementById('logs');
        this.prevPageButton = document.getElementById('prevPage');
        this.nextPageButton = document.getElementById('nextPage');
        this.pageInfo = document.getElementById('pageInfo');
        
        this.currentPage = 0;
        this.linesPerPage = null;
        this.autoRefreshInterval = null;

        this.init();
    }

    async init() {
        await this.fetchConfig();
        await this.checkScrapingStatus();
        this.addEventListeners();
    }

    async fetchConfig() {
        try {
            const response = await fetch('/config/lines_per_page');
            const data = await response.json();
            this.linesPerPage = data.lines_per_page;
            this.fetchLogs(this.currentPage);
        } catch (error) {
            console.error('Error fetching config:', error);
        }
    }

    async fetchLogs(page) {
        try {
            const response = await fetch(`/logfile?page=${page}&lines_per_page=${this.linesPerPage}`);
            const data = await response.json();
            
            if (data.error) {
                this.logsElement.textContent = data.error;
            } else {
                this.logsElement.innerHTML = data.log.map((line, index) => {
                    const lineNumber = data.start_line - index;
                    return `<span class="line-number">${lineNumber}</span> ${line}`;
                }).join('');

                this.updatePagination(data.total_lines);
            }
        } catch (error) {
            console.error('Error fetching logs:', error);
        }
    }

    updatePagination(totalLines) {
        this.prevPageButton.disabled = this.currentPage === 0;
        this.nextPageButton.disabled = (this.currentPage + 1) * this.linesPerPage >= totalLines;
        this.pageInfo.textContent = `Page ${this.currentPage + 1} of ${Math.ceil(totalLines / this.linesPerPage)}`;
    }

    startAutoRefresh() {
        this.autoRefreshInterval = setInterval(() => this.fetchLogs(this.currentPage), 5000);
    }

    stopAutoRefresh() {
        clearInterval(this.autoRefreshInterval);
    }

    async checkScrapingStatus() {
        try {
            const response = await fetch('/scraping_status');
            const data = await response.json();
            if (data.scraping_active) {
                this.startAutoRefresh();
            } else {
                this.stopAutoRefresh();
            }
            this.fetchLogs(this.currentPage);
        } catch (error) {
            console.error('Error checking scraping status:', error);
        }
    }

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

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

// Initialize the application when DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => new LogViewerApp());