document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('keyword-input');
    const limitInput = document.getElementById("limit-input");
    const searchButton = document.getElementById('search-button');
    const limitCheckbox = document.getElementById("limit-check");
    const popupText = document.querySelector(".scrollable-text");
    const popupTitle = document.getElementById("popup-title");
    const body = document.body;
    const resultsContainer = document.getElementById('results-container');

    // Function to perform the search
    async function performSearch() {
        const keyword = searchInput.value.trim();
        let limit = limitInput.value.trim();
        if (!keyword) {
            resultsContainer.innerHTML = '<div class="error-message">Please enter a search keyword.</div>';
            return;
        }

        if (!limit){
            limit = 15;
        }

        // Show loading indicator
        resultsContainer.innerHTML = '<div class="loading">Searching for ' + limit.toString() + ' papers about "' + keyword + '"...</div>';

        try {
            const response = await fetch('https://om4r932-arxiv.hf.space/search', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    keyword: keyword,
                    limit: limit
                })
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            
            if (data.error) {
                resultsContainer.innerHTML = `<div class="error-message">Search error: ${data.message}</div>`;
                return;
            }

            displayResults(data.message);
        } catch (error) {
            console.error('Search error:', error);
            resultsContainer.innerHTML = `<div class="error-message">Error performing search: ${error.message}</div>`;
        }
    }

    function handleCustomLimit(){
        if(limitCheckbox.checked){
            limitInput.removeAttribute("disabled")
        } else {
            limitInput.value = 15;
            limitInput.setAttribute("disabled", "")
        }
    }

    // Function to display the results
    function displayResults(results) {
        resultsContainer.innerHTML = '';
        
        if (!results || Object.keys(results).length === 0) {
            resultsContainer.innerHTML = '<div class="error-message">No results found. Try a different keyword.</div>';
            return;
        }

        const resultsCount = Object.keys(results).length;
        const resultsHeader = document.createElement('h2');
        resultsHeader.textContent = `Found ${resultsCount} paper${resultsCount > 1 ? 's' : ''}`;
        resultsContainer.appendChild(resultsHeader);

        Object.entries(results).forEach(([id, paper]) => {
            const paperElement = document.createElement('div');
            paperElement.classList.add('paper-result');
            
            // Format the abstract to preserve line breaks
            const formattedAbstract = paper.abstract;
            
            paperElement.innerHTML = `
                <div class="paper-title">${paper.title}</div>
                <div class="paper-authors">${paper.authors}</div>
                <div class="paper-date">Published: ${paper.date}</div>
                <div class="paper-abstract">${formattedAbstract}</div>
                <div class="paper-id">ArXiv ID: ${id}</div>
                <a type="button" class="btn btn-primary" role="button" href="${paper.pdf}">Show PDF</a>
                <input type="button" value="Extract Text" doc="${id}" class="extractText btn btn-success"/>
                <input type="button" value="Get titles" doc="${id}" class="getTitle btn btn-danger"/>
            `;
            resultsContainer.appendChild(paperElement);
        });

        document.querySelectorAll(".extractText").forEach(btn => {
            btn.addEventListener("click", async function () {
                let id_doc = btn.getAttribute("doc");
                popupTitle.textContent = `PDF extraction - Document no ${id_doc}`;
                try {
                    const response = await fetch('https://om4r932-arxiv.hf.space/extract', {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            doc_id: id_doc
                        })
                    });
        
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
        
                    const data = await response.json();
                    
                    if (data.error) {
                        popupText.innerHTML = `<div class="error-message">Search error: ${data.message}</div>`;
                        return;
                    }
                    
                    popupText.textContent = data.text;
                } catch (error) {
                    console.error('Search error:', error);
                    popupText.innerHTML = `<div class="error-message">Error performing search: ${error.message}</div>`;
                }
                document.getElementById("popup").style.display = "flex";
                body.classList.add("no-scroll")
            });
        })

        document.querySelectorAll(".getTitle").forEach(btn => {
            btn.addEventListener("click", async function () {
                let id_doc = btn.getAttribute("doc");
                popupTitle.textContent = `Chapters - Document no ${id_doc}`;
                try {
                    const response = await fetch('https://om4r932-arxiv.hf.space/extract', {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            doc_id: id_doc
                        })
                    });
        
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
        
                    const data = await response.json();
                    
                    if (data.error) {
                        popupText.innerHTML = `<div class="error-message">Search error: ${data.message}</div>`;
                        return;
                    }
                    let t = "";
                    if(typeof data.titles == Array){
                        data.titles.forEach(title => {
                            t += title + "\n";                        
                        });
                        popupText.textContent = t;  
                    }else {
                        popupText.textContent = data.titles;
                    }
                } catch (error) {
                    console.error('Search error:', error);
                    popupText.innerHTML = `<div class="error-message">Error performing search: ${error.message}</div>`;
                }
                document.getElementById("popup").style.display = "flex";
                body.classList.add("no-scroll")
            });
        })
    }

    // Add event listeners
    document.querySelector(".close").addEventListener("click", () => {
        document.getElementById("popup").style.display = "none";
        body.classList.remove("no-scroll");
    })

    window.addEventListener("click", function (event) {
        if (event.target === popup) {
            popup.style.display = "none";
            body.classList.remove("no-scroll");
        }
    });

    searchButton.addEventListener('click', performSearch);
    limitCheckbox.addEventListener("change", handleCustomLimit);
    searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') performSearch();
    });
});