document.addEventListener('DOMContentLoaded', () => {
    const container = document.getElementById('posts-container');
    const dialog = document.getElementById('post-dialog');
    const closeBtn = document.getElementById('close-dialog');
    const contentDiv = document.getElementById('post-content');
    const dialogTitle = document.getElementById('dialog-title');

    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
    document.head.appendChild(script);

    fetch('sad.json')
        .then(response => {
            if (!response.ok) throw new Error('Failed to load sad.json');
            return response.json();
        })
        .then(data => {
            data.posts.forEach(post => {
                const postDiv = document.createElement('div');
                postDiv.classList.add('post');

                const button = document.createElement('button');
                button.classList.add('post-btn');
                button.textContent = post['post-title'];

                const preview = document.createElement('p');
                preview.classList.add('post-preview');
                preview.textContent = 'Loading preview...';

                postDiv.appendChild(button);
                postDiv.appendChild(preview);
                container.appendChild(postDiv);

                // Fetch markdown file for preview
                fetch(post.file)
                    .then(response => response.text())
                    .then(mdText => {
                        // Create preview from first 200 chars of the markdown
                        preview.textContent = mdText.slice(0, 200) + '...';

                        // Store full text for button click
                        button.addEventListener('click', () => {
                            contentDiv.innerHTML = marked.parse(mdText);
                            dialogTitle.textContent = post['post-title'];
                            dialog.showModal();
                        });
                    })
                    .catch(error => {
                        preview.textContent = 'Preview unavailable';
                        button.addEventListener('click', () => {
                            contentDiv.innerHTML = `<p>Error loading post: ${error.message}</p>`;
                            dialogTitle.textContent = post['post-title'];
                            dialog.showModal();
                        });
                    });
            });
        })
        .catch(error => {
            console.error('Error loading posts:', error);
            container.innerHTML = '<p>Failed to load posts. Check console for details.</p>';
        });

    closeBtn.addEventListener('click', () => {
        dialog.close();
    });
});