document.addEventListener('DOMContentLoaded', () => {
    loadBlogs();
});

function loadBlogs() {
    const blogsContainer = document.getElementById('blogsContainer');
    const blogs = JSON.parse(localStorage.getItem('mubashra_blogs_v2')) || [];

    if (blogs.length > 0) {
        blogsContainer.innerHTML = ''; // Clear empty state

        blogs.forEach((blog, index) => {
            const card = document.createElement('div');
            card.classList.add('blog-card');

            // For this version, since the admin creates a free-form "canvas", 
            // the safest way to "preview" it is to render the HTML structure.
            // However, to prevent styles from breaking the card, we might scale it or similar.
            // A simple approach: specific card layout.
            // But the user said "place it like canva".
            // So the blog is likely absolute positioned elements on a fixed size canvas.
            // We will render a mini version of that canvas.

            const previewScale = 0.3; // Scale down for card

            card.innerHTML = `
                <div class="blog-preview-wrapper" style="position: relative; width: 100%; padding-top: 75%; overflow: hidden; background: ${blog.backgroundColor || 'transparent'};">
                    <div class="blog-content-scaler" style="
                        position: absolute; 
                        top: 0; 
                        left: 0; 
                        width: 100%; 
                        transform-origin: top left; 
                        transform: scale(${previewScale}); 
                        width: ${100 / previewScale}%; 
                        height: ${100 / previewScale}%;
                        pointer-events: none; /* Make it non-interactive in preview */
                    ">
                        ${blog.content}
                    </div>
                </div>
                <div style="padding: 1rem; background: rgba(0,0,0,0.2);">
                    <h3 style="margin-bottom: 0.5rem; font-family: var(--font-heading);">${blog.title || 'Untitled Blog'}</h3>
                    <p style="font-size: 0.8rem; opacity: 0.7;">${new Date(blog.date).toLocaleDateString()}</p>
                </div>
            `;

            // Optional: Click to view full blog (Modal or separate page). 
            // For now, let's just create a simple 'View' modal logic or leave as cards.
            // The user didn't explicitly ask for a 'View' page, just 'show all blogs'. 
            // But 'show' usually implies readability.

            card.addEventListener('click', () => openBlogModal(blog));

            blogsContainer.appendChild(card);
        });
    }
}

function openBlogModal(blog) {
    // fast modal implementation
    const modal = document.createElement('div');
    modal.style.cssText = `
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.9); z-index: 2000; display: flex;
        justify-content: center; align-items: center; overflow: auto;
        padding: 2rem;
    `;

    // The "Canvas" logic from Admin will likely use a fixed width container. 
    // We need to match that. Assuming standard web 1000px or similar.

    modal.innerHTML = `
        <div style="position: relative; width: 100%; max-width: 1000px; min-height: 80vh; background: ${blog.backgroundColor || '#1a1a2e'}; border-radius: 10px; box-shadow: 0 0 50px rgba(0,0,0,0.5); padding: 2rem; overflow: hidden;">
            <button onclick="this.parentElement.parentElement.remove()" style="position: absolute; top: 1rem; right: 1rem; background: red; border: none; color: white; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; z-index: 100;">X</button>
            <div style="position: relative; width: 100%; height: 100%;">
                ${blog.content}
            </div>
        </div>
    `;

    document.body.appendChild(modal);
}