document.addEventListener('DOMContentLoaded', function() {
    // Function to fetch and parse Markdown files
    async function fetchMarkdown(filename) {
        try {
            const response = await fetch(`articles/${filename}`);
            if (!response.ok) {
                throw new Error(`Failed to fetch ${filename}`);
            }
            return await response.text();
        } catch (error) {
            console.error('Error fetching markdown:', error);
            return null;
        }
    }

    // Function to parse Markdown content
    function parseMarkdown(markdown) {
        if (!markdown) return null;
        
        // Simple markdown parser for this example
        // In a real application, you might want to use a library like marked.js
        
        // Extract title from the first heading
        const titleMatch = markdown.match(/^# (.+)$/m);
        const title = titleMatch ? titleMatch[1] : 'Untitled';
        
        // Extract date if it exists
        const dateMatch = markdown.match(/Date: (.+)$/m);
        const date = dateMatch ? dateMatch[1] : 'No date';
        
        // Get the content after the title
        let content = markdown.replace(/^# .+$/m, '').trim();
        
        // Remove date line if it exists
        content = content.replace(/Date: .+$/m, '').trim();
        
        // Create excerpt (first 150 characters)
        const excerpt = content.substring(0, 150) + '...';
        
        return {
            title,
            date,
            content,
            excerpt
        };
    }

    // Function to load articles
    async function loadArticles() {
        const articlesGrid = document.getElementById('articles-grid');
        const featuredArticle = document.getElementById('featured-article');
        
        if (!articlesGrid || !featuredArticle) {
            // Not on the homepage
            return;
        }
        
        // Get the list of article files
        // In a real app, you would need a server-side solution to list files
        // For this example, we'll simulate with a limited number of articles
        const articleNumbers = [];
        
        // Try to get articles 1 through 20 (adjust based on your needs)
        for (let i = 1; i <= 20; i++) {
            const markdown = await fetchMarkdown(`${i}.md`);
            if (markdown) {
                articleNumbers.push(i);
            } else {
                // No more articles found
                break;
            }
        }
        
        // Sort in descending order to get the newest first
        articleNumbers.sort((a, b) => b - a);
        
        // Display the latest article as featured
        if (articleNumbers.length > 0) {
            const latestNumber = articleNumbers[0];
            const markdown = await fetchMarkdown(`${latestNumber}.md`);
            const article = parseMarkdown(markdown);
            
            if (article) {
                featuredArticle.innerHTML = `
                    <h2>${article.title}</h2>
                    <span class="date">${article.date}</span>
                    <p class="excerpt">${article.excerpt}</p>
                    <a href="article.html?id=${latestNumber}" class="read-more">Read More</a>
                `;
            }
            
            // Remove the latest article from the array
            articleNumbers.shift();
        }
        
        // Display up to 6 previous articles in the grid
        const displayCount = Math.min(10, articleNumbers.length);
        
        for (let i = 0; i < displayCount; i++) {
            const articleNumber = articleNumbers[i];
            const markdown = await fetchMarkdown(`${articleNumber}.md`);
            const article = parseMarkdown(markdown);
            
            if (article) {
                const articleCard = document.createElement('div');
                articleCard.className = 'article-card';
                articleCard.innerHTML = `
                    <h3>${article.title}</h3>
                    <span class="date">${article.date}</span>
                    <p class="excerpt">${article.excerpt}</p>
                    <a href="article.html?id=${articleNumber}" class="read-more">Read More</a>
                `;
                
                articlesGrid.appendChild(articleCard);
            }
        }
    }

    // Function to load a single article page
    async function loadArticlePage() {
        // Check if we're on an article page
        const urlParams = new URLSearchParams(window.location.search);
        const articleId = urlParams.get('id');
        
        if (!articleId) {
            // Not on an article page
            return;
        }
        
        const articleTitle = document.getElementById('article-title');
        const main = document.querySelector('main');
        
        // Fetch the article
        const markdown = await fetchMarkdown(`${articleId}.md`);
        const article = parseMarkdown(markdown);
        
        if (article) {
            // Set the article title in the header
            if (articleTitle) {
                articleTitle.textContent = article.title;
            }
            
            // Convert markdown content to HTML (simplified version)
            let html = article.content;
            
            // Convert headers
            html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
            html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
            
            // Convert paragraphs (simple version)
            html = html.split('\n\n').map(p => `<p>${p}</p>`).join('');
            
            // Create the article container
            const articleContainer = document.createElement('div');
            articleContainer.className = 'article-page';
            articleContainer.innerHTML = `
                <h1>${article.title}</h1>
                <div class="article-meta">${article.date}</div>
                <div class="article-content">
                    ${html}
                </div>
            `;
            
            main.innerHTML = '';
            main.appendChild(articleContainer);
        } else {
            main.innerHTML = '<div class="article-page"><h1>Article Not Found</h1><p>The requested article could not be found.</p></div>';
        }
    }

    // Initialize the page
    loadArticles();
    loadArticlePage();
});