Munich-news/frontend/public/app.js

// Load news on page load
document.addEventListener('DOMContentLoaded', () => {
    loadNews();
    loadStats();
});

async function loadNews() {
    const newsGrid = document.getElementById('newsGrid');
    newsGrid.innerHTML = '<div class="loading">Loading news...</div>';
    
    try {
        const response = await fetch('/api/news');
        const data = await response.json();
        
        if (data.articles && data.articles.length > 0) {
            displayNews(data.articles);
        } else {
            newsGrid.innerHTML = '<div class="loading">No news available at the moment. Check back later!</div>';
        }
    } catch (error) {
        console.error('Error loading news:', error);
        newsGrid.innerHTML = '<div class="loading">Failed to load news. Please try again later.</div>';
    }
}

function displayNews(articles) {
    const newsGrid = document.getElementById('newsGrid');
    newsGrid.innerHTML = '';
    
    articles.forEach(article => {
        const card = document.createElement('div');
        card.className = 'news-card';
        card.onclick = () => window.open(article.link, '_blank');
        
        card.innerHTML = `
            <div class="source">${article.source || 'Munich News'}</div>
            <h3>${article.title}</h3>
            <p>${article.summary || 'No summary available.'}</p>
            <a href="${article.link}" target="_blank" class="read-more" onclick="event.stopPropagation()">Read more →</a>
        `;
        
        newsGrid.appendChild(card);
    });
}

async function loadStats() {
    try {
        const response = await fetch('/api/stats');
        const data = await response.json();
        
        if (data.subscribers !== undefined) {
            document.getElementById('subscriberCount').textContent = data.subscribers.toLocaleString();
        }
    } catch (error) {
        console.error('Error loading stats:', error);
    }
}

async function subscribe() {
    const emailInput = document.getElementById('emailInput');
    const subscribeBtn = document.getElementById('subscribeBtn');
    const formMessage = document.getElementById('formMessage');
    
    const email = emailInput.value.trim();
    
    if (!email || !email.includes('@')) {
        formMessage.textContent = 'Please enter a valid email address';
        formMessage.className = 'form-message error';
        return;
    }
    
    subscribeBtn.disabled = true;
    subscribeBtn.textContent = 'Subscribing...';
    formMessage.textContent = '';
    
    try {
        const response = await fetch('/api/subscribe', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ email: email })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            formMessage.textContent = data.message || 'Successfully subscribed! Check your email for confirmation.';
            formMessage.className = 'form-message success';
            emailInput.value = '';
            loadStats(); // Refresh stats
        } else {
            formMessage.textContent = data.error || 'Failed to subscribe. Please try again.';
            formMessage.className = 'form-message error';
        }
    } catch (error) {
        formMessage.textContent = 'Network error. Please try again later.';
        formMessage.className = 'form-message error';
    } finally {
        subscribeBtn.disabled = false;
        subscribeBtn.textContent = 'Subscribe Free';
    }
}

// Allow Enter key to submit
document.getElementById('emailInput').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        subscribe();
    }
});

function showUnsubscribe() {
    document.getElementById('unsubscribeModal').style.display = 'block';
}

function closeUnsubscribe() {
    document.getElementById('unsubscribeModal').style.display = 'none';
    document.getElementById('unsubscribeEmail').value = '';
    document.getElementById('unsubscribeMessage').textContent = '';
}

async function unsubscribe() {
    const emailInput = document.getElementById('unsubscribeEmail');
    const unsubscribeMessage = document.getElementById('unsubscribeMessage');
    
    const email = emailInput.value.trim();
    
    if (!email || !email.includes('@')) {
        unsubscribeMessage.textContent = 'Please enter a valid email address';
        unsubscribeMessage.className = 'form-message error';
        return;
    }
    
    try {
        const response = await fetch('/api/unsubscribe', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ email: email })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            unsubscribeMessage.textContent = data.message || 'Successfully unsubscribed.';
            unsubscribeMessage.className = 'form-message success';
            emailInput.value = '';
            setTimeout(() => {
                closeUnsubscribe();
                loadStats();
            }, 2000);
        } else {
            unsubscribeMessage.textContent = data.error || 'Failed to unsubscribe. Please try again.';
            unsubscribeMessage.className = 'form-message error';
        }
    } catch (error) {
        unsubscribeMessage.textContent = 'Network error. Please try again later.';
        unsubscribeMessage.className = 'form-message error';
    }
}

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('unsubscribeModal');
    if (event.target === modal) {
        closeUnsubscribe();
    }
}