document.addEventListener('DOMContentLoaded', function() {
    const lightMode = document.getElementById('lightMode');
    const darkMode = document.getElementById('darkMode');
    const body = document.body;

    // Set initial theme based on system preference
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
        body.classList.add('dark-mode');
        darkMode.style.display = 'none';
        lightMode.style.display = 'block';
    } else {
        body.classList.remove('dark-mode');
        darkMode.style.display = 'block';
        lightMode.style.display = 'none';
    }

    // Toggle theme functions
    lightMode.addEventListener('click', () => {
        body.classList.remove('dark-mode');
        darkMode.style.display = 'block';
        lightMode.style.display = 'none';
        localStorage.setItem('theme', 'light');
    });
    
    darkMode.addEventListener('click', () => {
        body.classList.add('dark-mode');
        darkMode.style.display = 'none';
        lightMode.style.display = 'block';
        localStorage.setItem('theme', 'dark');
    });

    // Check for saved theme preference
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        if (savedTheme === 'dark') {
            body.classList.add('dark-mode');
            darkMode.style.display = 'none';
            lightMode.style.display = 'block';
        } else {
            body.classList.remove('dark-mode');
            darkMode.style.display = 'block';
            lightMode.style.display = 'none';
        }
    }
}); 
function createPaperCard(paper) {
    // Create the card element
    const cardElement = document.createElement('div');
    cardElement.className = 'paper-card';
    
    // Set the inner HTML with the paper details
    cardElement.innerHTML = `
        <h2 class="paper-title">${escapeHtml(paper.title)}</h2>
        <div class="paper-authors">
            ${paper.authors.split(', ').map(author => 
                `<span class="author-name">${escapeHtml(author)}</span>`
            ).join('')}
        </div>
        <div class="paper-abstract">
            ${escapeHtml(paper.abstract)}
        </div>
        <div class="paper-meta">
            <div class="meta-info">
                <span class="meta-item">
                    <span class="meta-icon">📅</span>
                    ${paper.published}
                </span>
                <span class="meta-item">
                    <span class="meta-icon">🏷️</span>
                    ${paper.category || 'N/A'}
                </span>
            </div>
            <div class="paper-actions">
                <button class="action-button analyze-btn">
                    <span>🔍</span> Analyze with AI
                </button>
                <button class="action-button download-btn">
                    <span>📥</span> Download PDF
                </button>
            </div>
        </div>
    `;
    
    // Add event listeners directly to the buttons
    const analyzeButton = cardElement.querySelector('.analyze-btn');
    analyzeButton.addEventListener('click', () => {
        analyzeWithAI(paper.pdf_link);
    });
    
    const downloadButton = cardElement.querySelector('.download-btn');
    downloadButton.addEventListener('click', () => {
        downloadPaper(paper.pdf_link, paper.title);
    });
    
    return cardElement;
}

// Make sure the escapeHtml function is available
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}