// Shared JavaScript across all pages

// Form submission handler
document.addEventListener('DOMContentLoaded', function() {
    const scrapeForm = document.getElementById('scrapeForm');
    const resultsSection = document.getElementById('results');
    const loadingDiv = document.getElementById('loading');
    const errorDiv = document.getElementById('error');
    const errorMessage = document.getElementById('errorMessage');
    const successResults = document.getElementById('successResults');
    const articleTitle = document.getElementById('articleTitle').querySelector('h2');
    const pointsList = document.getElementById('pointsList');
    const imagesGrid = document.getElementById('imagesGrid');
    const imagesSection = document.getElementById('imagesSection');

    if (scrapeForm) {
        scrapeForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const urlInput = document.getElementById('newsUrl');
            const url = urlInput.value.trim();
            
            if (!url) {
                showError('Please enter a valid URL');
                return;
            }

            // Show loading state
            showLoading();
            
            try {
                // Simulate API call to news extraction service
                // In a real implementation, this would call a backend service
                const result = await simulateNewsExtraction(url);
                displayResults(result);
            } catch (error) {
                showError('Failed to extract content from the URL. Please try again with a different news article.');
            }
        });
    }

    function showLoading() {
        resultsSection.classList.remove('hidden');
        loadingDiv.classList.remove('hidden');
        errorDiv.classList.add('hidden');
        successResults.classList.add('hidden');
    }

    function showError(message) {
        resultsSection.classList.remove('hidden');
        loadingDiv.classList.add('hidden');
        errorDiv.classList.remove('hidden');
        successResults.classList.add('hidden');
        errorMessage.textContent = message;
    }

    function displayResults(data) {
        loadingDiv.classList.add('hidden');
        errorDiv.classList.add('hidden');
        successResults.classList.remove('hidden');

        // Display article title
        articleTitle.textContent = data.title || 'Article Title';

        // Display key points
        pointsList.innerHTML = '';
        if (data.keyPoints && data.keyPoints.length > 0) {
            data.keyPoints.forEach(point => {
                const li = document.createElement('li');
                li.className = 'flex items-start gap-3';
                li.innerHTML = `
                    <i data-feather="check-circle" class="w-5 h-5 text-green-500 mt-1 flex-shrink-0"></i>
                    <span>${point}</span>
                `;
                pointsList.appendChild(li);
            });
        } else {
            pointsList.innerHTML = '<li class="text-gray-500">No key points extracted</li>';
        }

        // Display images
        imagesGrid.innerHTML = '';
        if (data.images && data.images.length > 0) {
            data.images.forEach((image, index) => {
                const imgCard = document.createElement('div');
                imgCard.className = 'image-card bg-gray-100 rounded-xl overflow-hidden shadow-md';
                imgCard.innerHTML = `
                    <img src="${image.url}" alt="${image.alt || 'News image'}" class="w-full h-48 object-cover" loading="lazy">
                    <div class="p-4">
                        <p class="text-sm text-gray-600">Image ${index + 1}</p>
                    </div>
                `;
                imagesGrid.appendChild(imgCard);
            });
            imagesSection.classList.remove('hidden');
        } else {
            imagesSection.classList.add('hidden');
        }

        // Refresh feather icons
        feather.replace();
    }

    // Simulate news extraction (replace with actual API call)
    async function simulateNewsExtraction(url) {
        // Simulate API delay
        await new Promise(resolve => setTimeout(resolve, 2000));

        // Mock data for demonstration
        return {
            title: "Breaking: Major Technological Advancement in AI Research",
            keyPoints: [
                "Researchers have developed a new AI model that can understand and generate human-like text with unprecedented accuracy",
                "The technology has potential applications in education, healthcare, and customer service industries",
                "Ethical considerations and regulations are being discussed by industry leaders",
                "The breakthrough could revolutionize how we interact with computers in daily life",
                "Open-source implementation is expected to be released in the coming months"
            ],
            images: [
                {
                    url: "http://static.photos/technology/640x360/1",
                    alt: "AI Research Laboratory"
                },
                {
                    url: "http://static.photos/science/640x360/2",
                    alt: "Neural Network Visualization"
                },
                {
                    url: "http://static.photos/office/640x360/3",
                    alt: "Team Collaboration"
                }
            ]
        };
    }

    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Add intersection observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in');
            }
        });
    }, observerOptions);

    // Observe elements for animation
    document.addEventListener('DOMContentLoaded', () => {
        const animatableElements = document.querySelectorAll('.image-card, .bg-white');
        animatableElements.forEach(el => {
            observer.observe(el);
        });
    });
});