document.addEventListener('DOMContentLoaded', function () {
    // Inicializar la página
    initializePage();

    async function initializePage() {
        try {
            // Cargar blogs desde la base de datos
            await loadBlogs();
        } catch (error) {
            console.error('Error al inicializar la página de blogs:', error);
        }
    }

    async function loadBlogs() {
        try {
            const response = await fetch('sistema/database/model/blogs.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=getBlogsPublicos'
            });

            const data = await response.json();
            console.log('Blogs recibidos:', data);

            if (Array.isArray(data) && data.length > 0) {
                // Filtrar solo blogs activos
                const blogsActivos = data.filter(blog => blog.status == 1);
                displayBlogs(blogsActivos);
            } else {
                displayNoBlogs();
            }
        } catch (error) {
            console.error('Error al cargar blogs:', error);
            displayErrorBlogs();
        }
    }

    function displayBlogs(blogs) {
        const container = document.querySelector('.productos-three-section .pths-div .row');
        
        // Limpiar contenido existente
        container.innerHTML = '';

        blogs.forEach(blog => {
            const imageSrc = blog.imagen && blog.imagen.trim() !== '' ?
                `sistema/img/blog/${blog.imagen}` :
                'img/blog-default.jpg';

            // Crear extracto del contenido (remover HTML y limitar caracteres)
            let extracto = stripHtml(blog.contenido || '');
            extracto = extracto.length > 120 ? extracto.substring(0, 120) + '...' : extracto;

            // Formatear fecha
            const fechaFormateada = formatearFecha(blog.fecha_creacion);

            const colDiv = document.createElement('div');
            colDiv.className = 'col-md-4 mb-4';

            colDiv.innerHTML = `
                <div class="card blog-card h-100" data-blog-id="${blog.id}">
                    <div class="blog-image-container">
                        <img src="${imageSrc}" alt="${blog.titulo}" class="card-img-top blog-img" 
                             onerror="this.src='img/blog-default.jpg'">
                        <div class="blog-date-overlay">
                            <span class="blog-date">${fechaFormateada}</span>
                        </div>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title blog-title">${blog.titulo}</h5>
                        <p class="card-text blog-excerpt flex-grow-1">${extracto}</p>
                        <div class="blog-footer mt-auto">
                            <button class="btn blog-btn" onclick="verBlog(${blog.id})">
                                Ver más <i class="fa-solid fa-arrow-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;

            // Agregar event listener para toda la tarjeta
            const blogCard = colDiv.querySelector('.blog-card');
            blogCard.addEventListener('click', function(e) {
                // Solo redirigir si no se hizo click en el botón
                if (!e.target.closest('.blog-btn')) {
                    verBlog(blog.id);
                }
            });

            container.appendChild(colDiv);
        });

        // Agregar estilos CSS dinámicamente si no existen
        addBlogStyles();
    }

    function displayNoBlogs() {
        const container = document.querySelector('.productos-three-section .pths-div .row');
        container.innerHTML = `
            <div class="col-12 text-center py-5">
                <div class="no-blogs-container">
                    <i class="fa-solid fa-newspaper" style="font-size: 4rem; color: #ccc; margin-bottom: 1rem;"></i>
                    <h3>No hay blogs disponibles</h3>
                    <p class="text-muted">Pronto tendremos contenido interesante para ti.</p>
                </div>
            </div>
        `;
    }

    function displayErrorBlogs() {
        const container = document.querySelector('.productos-three-section .pths-div .row');
        container.innerHTML = `
            <div class="col-12 text-center py-5">
                <div class="error-blogs-container">
                    <i class="fa-solid fa-exclamation-triangle" style="font-size: 4rem; color: #ff6e01; margin-bottom: 1rem;"></i>
                    <h3>Error al cargar blogs</h3>
                    <p class="text-muted">Hubo un problema al cargar el contenido. Por favor, inténtalo más tarde.</p>
                    <button class="btn btn-primary mt-3" onclick="location.reload()">Reintentar</button>
                </div>
            </div>
        `;
    }

    // Función para remover HTML del contenido
    function stripHtml(html) {
        const tempDiv = document.createElement('div');
        tempDiv.innerHTML = html;
        return tempDiv.textContent || tempDiv.innerText || '';
    }

    // Función para formatear fecha
    function formatearFecha(fechaString) {
        const fecha = new Date(fechaString);
        const opciones = { 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
        };
        return fecha.toLocaleDateString('es-ES', opciones);
    }

    // Función global para ver blog
    window.verBlog = function(blogId) {
        window.location.href = `detalleBlog.php?id=${blogId}`;
    };

    // Agregar estilos CSS para los blogs
    function addBlogStyles() {
        // Verificar si ya existen los estilos
        if (document.getElementById('blog-styles')) return;

        const style = document.createElement('style');
        style.id = 'blog-styles';
        style.textContent = `
            .blog-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
                cursor: pointer;
                border: none;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }

            .blog-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            }

            .blog-image-container {
                position: relative;
                overflow: hidden;
                height: 200px;
            }

            .blog-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease;
            }

            .blog-card:hover .blog-img {
                transform: scale(1.05);
            }

            .blog-date-overlay {
                position: absolute;
                top: 10px;
                right: 10px;
                background: rgba(255, 110, 1, 0.9);
                color: white;
                padding: 5px 10px;
                border-radius: 15px;
                font-size: 0.85rem;
                font-weight: 500;
            }

            .blog-title {
                color: #333;
                font-weight: 600;
                font-size: 1.1rem;
                line-height: 1.3;
                margin-bottom: 1rem;
                min-height: 2.6rem;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .blog-excerpt {
                color: #666;
                font-size: 0.95rem;
                line-height: 1.5;
                margin-bottom: 1rem;
            }

            .blog-btn {
                background: linear-gradient(135deg, #ff6e01, #ff8533);
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 25px;
                font-weight: 500;
                transition: all 0.3s ease;
                text-transform: uppercase;
                font-size: 0.85rem;
                letter-spacing: 0.5px;
            }

            .blog-btn:hover {
                background: linear-gradient(135deg, #e55a00, #ff6e01);
                color: white;
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(255, 110, 1, 0.3);
            }

            .blog-btn i {
                margin-left: 8px;
                transition: transform 0.3s ease;
            }

            .blog-btn:hover i {
                transform: translateX(3px);
            }

            .blog-footer {
                padding-top: 1rem;
                border-top: 1px solid #eee;
            }

            .no-blogs-container,
            .error-blogs-container {
                padding: 3rem 2rem;
            }

            @media (max-width: 768px) {
                .blog-image-container {
                    height: 180px;
                }
                
                .blog-title {
                    font-size: 1rem;
                }
                
                .blog-excerpt {
                    font-size: 0.9rem;
                }
            }
        `;
        
        document.head.appendChild(style);
    }
});