document.addEventListener('DOMContentLoaded', function () {
    const searchForm = document.getElementById('search-form');
    const searchInput = document.getElementById('search-input');
    const resultsContainer = document.getElementById('results-container');
    const loadingIndicator = document.getElementById('loading-indicator');
    const summaryModalEl = document.getElementById('summary-modal');
    const summaryModal = new bootstrap.Modal(summaryModalEl);
    const summaryModalBody = document.getElementById('summary-modal-body');
    const originalArticleLink = document.getElementById('original-article-link');

    searchForm.addEventListener('submit', function (e) {
        e.preventDefault();
        const query = searchInput.value.trim();

        if (query) {
            fetchResults(query);
        }
    });

    function fetchResults(query) {
        resultsContainer.innerHTML = '';
        loadingIndicator.style.display = 'block';

        fetch(`/api/search.php?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                displayResults(data.RelatedTopics);
            })
            .catch(error => {
                console.error('Error fetching search results:', error);
                resultsContainer.innerHTML = '<div class="alert alert-danger">Failed to fetch results. Please try again.</div>';
            })
            .finally(() => {
                loadingIndicator.style.display = 'none';
            });
    }

    function displayResults(results) {
        if (!results || results.length === 0) {
            resultsContainer.innerHTML = '<div class="alert alert-info">No results found.</div>';
            return;
        }

        results.forEach(item => {
            if(item.Text) {
                const card = `
                    <div class="card mb-3 result-card">
                        <div class="card-body">
                            <h5 class="card-title">${item.Text}</h5>
                            <p class="card-text">${item.Result}</p>
                            <button class="btn btn-primary btn-sm summarize-btn" data-url="${item.FirstURL}">Summarize</button>
                        </div>
                    </div>
                `;
                resultsContainer.innerHTML += card;
            }
        });
    }

    resultsContainer.addEventListener('click', function(e) {
        if (e.target.classList.contains('summarize-btn')) {
            const url = e.target.dataset.url;
            getSummary(url);
        }
    });

    function getSummary(url) {
        summaryModalBody.innerHTML = `
            <div class="d-flex justify-content-center">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        `;
        summaryModal.show();
        originalArticleLink.href = url;

        const formData = new FormData();
        formData.append('url', url);

        fetch('/api/summarize.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                summaryModalBody.innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
            } else {
                summaryModalBody.innerHTML = data.summary.replace(/\n/g, '<br>');
            }
        })
        .catch(error => {
            console.error('Error fetching summary:', error);
            summaryModalBody.innerHTML = '<div class="alert alert-danger">Failed to fetch summary.</div>';
        });
    }
});