document.addEventListener('DOMContentLoaded', async function () {
    const contentWrapper = document.querySelector('.blog-feed'); // Correct target for the posts container
    const tagCloud = document.querySelector('.tag-cloud');
    const recentPostsSection = document.querySelector('.recent-posts ul');
    const posts = [];
    let currentPostCount = 3; // Initial number of posts to display
    let recentPostsCount = 0; // To track how many recent posts have been loaded

    // Function to load posts data from Markdown files
    async function loadPosts() {
        const markdownFiles = await getMarkdownFiles();
        for (const file of markdownFiles) {
            const post = await fetchPost(file);
            if (post) {
                posts.push(post);
            }
        }
        updateTagCloud(posts);
        displayPosts();
    }

    // Function to get all Markdown files by checking their existence
    async function getMarkdownFiles() {
        const files = [];
        let index = 1;
        let fileExists = true;

        while (fileExists) {
            const fileName = `post${index}.md`;
            const response = await fetch(`/posts/markdown/${fileName}`);
            if (response.ok) {
                files.push(fileName);
            } else {
                fileExists = false;
            }
            index++;
        }

        return files;
    }

    // Function to fetch a single post and parse its content
    async function fetchPost(file) {
        const response = await fetch(`/posts/markdown/${file}`);
        if (!response.ok) {
            console.error(`Failed to fetch ${file}: ${response.status} ${response.statusText}`);
            return null;
        }
        const content = await response.text();
        const post = parseMarkdown(content);

        // Construct link to the HTML file
        post.link = `/posts/html/${file.replace('.md', '.html')}`;
        return post;
    }

    // Function to parse Markdown content and extract front matter and content
    function parseMarkdown(content) {
        const lines = content.split('\n');
        const frontMatter = {};
        let contentStartIndex = -1;

        for (let i = 0; i < lines.length; i++) {
            const line = lines[i].trim();
            if (line.startsWith('### content:')) {
                contentStartIndex = i + 1;
                break;
            }

            const match = line.match(/^### (\w+): (.+)$/);
            if (match) {
                const key = match[1];
                const value = match[2];
                frontMatter[key] = value.split(',').map(item => item.trim());
            }
        }

        if (contentStartIndex === -1) {
            console.error('Invalid front matter');
            return null;
        }

        const contentLines = lines.slice(contentStartIndex);
        const contentText = contentLines.join('\n').trim();

        return {
            title: frontMatter.title || 'Untitled Post',
            date: frontMatter.date || 'Unknown Date',
            tags: frontMatter.tags || [],
            summary: frontMatter.summary || contentText.split('\n')[0],
            content: contentText
        };
    }

    // Function to update tag cloud
    function updateTagCloud(postsData) {
        const tagSet = new Set();
        postsData.forEach(post => post.tags.forEach(tag => tagSet.add(tag)));
        tagCloud.innerHTML = '';

        tagSet.forEach(tag => {
            const tagElement = document.createElement('span');
            tagElement.className = 'tag';
            const tagLink = tag.toLowerCase().replace(/\s+/g, '');
            tagElement.innerHTML = `<a href="/tags/${tagLink}.html">${tag}</a>`;
            tagElement.style.fontSize = `14px`;
            tagCloud.appendChild(tagElement);
        });
    }

    // Function to display posts based on currentPostCount
    function displayPosts() {
        contentWrapper.innerHTML = ''; // Clear previous posts
        posts.slice(0, currentPostCount).forEach(post => {
            const newPost = document.createElement('section');
            newPost.className = 'blog-post-wrapper';
            newPost.innerHTML = `
                <div class="blog-container">
                    <aside class="sidebar-left">
                        <section class="post-meta">
                            <p><strong>Posted on</strong><br>${post.date}</p>
                            <p><strong>Tagged</strong><br>${post.tags.map(tag => `<a href="#">${tag}</a>`).join('<br>')}</p>
                        </section>
                    </aside>
                    <main class="blog-post">
                        <h2>${post.title}</h2>
                        <p>${post.summary}</p>
                        <a href="${post.link}" class="continue-reading">Continue reading →</a>
                    </main>
                </div>
            `;
            contentWrapper.appendChild(newPost);

            if (recentPostsCount < 3) {
                const listItem = document.createElement('li');
                listItem.innerHTML = `<a href="#">${post.title}</a>`;
                recentPostsSection.appendChild(listItem);
                recentPostsCount++;
            }
        });

        // Process the content with MathJax
        if (typeof MathJax !== 'undefined') {
            MathJax.typeset();
        }
    }

    // Event listener for infinite scroll
    window.addEventListener('scroll', function () {
        const scrollPosition = window.scrollY + window.innerHeight;
        const pageHeight = document.documentElement.scrollHeight;

        if (scrollPosition >= pageHeight - 100) { // Trigger when 100px from the bottom
            loadMorePosts();
        }
    });

    // Function to load more posts
    function loadMorePosts() {
        if (currentPostCount < posts.length) {
            currentPostCount += 3;
            displayPosts();
        }
    }

    // Initial load of posts
    loadPosts();
});