class DetalleBlog {
    constructor() {
        this.blogId = null;
        this.init();
    }

    init() {
        document.addEventListener('DOMContentLoaded', () => {
            this.getBlogId();
            if (this.blogId) {
                this.loadBlogDetail();
            } else {
                this.redirectToBlogs();
            }
        });
    }

    getBlogId() {
        const blogIdInput = document.getElementById('blogId');
        this.blogId = blogIdInput ? blogIdInput.value : null;
    }

    redirectToBlogs() {
        window.location.href = 'blogs.php';
    }
    
    async loadBlogDetail() {
        try {
            this.showLoading();
            
            const response = await fetch('sistema/database/model/blogs.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=getBlog&id=${this.blogId}`
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const blog = await response.json();

            if (blog && !blog.error && blog.titulo) {
                this.displayBlogDetail(blog);
            } else {
                this.showBlogError('Blog no encontrado o no disponible');
            }
        } catch (error) {
            console.error('Error al cargar blog:', error);
            this.showBlogError('Error de conexión al servidor');
        }
    }

    showLoading() {
        const container = document.getElementById('blog-content');
        if (container) {
            container.innerHTML = `
                <div class="text-center py-5 loading-container">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Cargando blog...</span>
                    </div>
                    <p class="mt-3">Cargando contenido...</p>
                </div>
            `;
        }
    }

    displayBlogDetail(blog) {
        const container = document.getElementById('blog-content');
        if (!container) return;

        // Procesar datos del blog
        const imageSrc = this.getImageSrc(blog.imagen);
        const fechaFormateada = this.formatDate(blog.fecha_creacion);
        const tituloCorto = this.truncateTitle(blog.titulo, 50);

        // Generar HTML del blog
        container.innerHTML = `
            <article class="blog-article">
                ${this.generateBlogHeader(blog.titulo, tituloCorto, fechaFormateada)}
                ${this.generateBlogImage(imageSrc, blog.titulo)}
                ${this.generateBlogContent(blog.contenido)}
                ${this.generateBlogFooter()}
            </article>
        `;

        // Actualizar título de la página
        this.updatePageTitle(blog.titulo);

        // Añadir funcionalidad adicional
        this.enhanceContent();
    }

    generateBlogHeader(titulo, tituloCorto, fecha) {
        return `
            <header class="blog-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="index.php" style="text-decoration: none; color:#666;">Inicio</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="blogs.php" style="text-decoration: none; color:#666;">Blog</a>
                        </li>
                        <li class="breadcrumb-item active" style="color:#ff6e01;">${tituloCorto}</li>
                    </ol>
                </nav>
                <h1 class="blog-detail-title">${titulo}</h1>
                <div class="blog-meta">
                    <span class="blog-date">
                        <i class="fa-solid fa-calendar"></i> ${fecha}
                    </span>
                </div>
            </header>
        `;
    }

    generateBlogImage(imageSrc, titulo) {
        return `
            <div class="blog-image">
                <img src="${imageSrc}" alt="${titulo}" class="img-fluid" 
                     onerror="this.src='img/blog-default.jpg'" loading="lazy">
            </div>
        `;
    }

    generateBlogContent(contenido) {
        return `
            <div class="blog-content">
                ${contenido || '<p>Contenido no disponible</p>'}
            </div>
        `;
    }

    generateBlogFooter() {
        return `
            <footer class="blog-footer">
                <div class="row">
                    <div class="col-12">
                        <a href="blogs.php" class="btn btn-outline-primary">
                            <i class="fa-solid fa-arrow-left"></i> Volver al blog
                        </a>
                    </div>
                </div>
            </footer>
        `;
    }

    showBlogError(mensaje = 'Error desconocido') {
        const container = document.getElementById('blog-content');
        if (!container) return;

        container.innerHTML = `
            <div class="text-center py-5 error-container">
                <i class="fa-solid fa-exclamation-triangle"></i>
                <h3 class="mt-3">Blog no encontrado</h3>
                <p class="text-muted">${mensaje}</p>
                <a href="blogs.php" class="btn btn-primary mt-3">Volver al blog</a>
            </div>
        `;
    }

    getImageSrc(imagen) {
        return imagen && imagen.trim() !== '' ? 
            `sistema/img/blog/${imagen}` : 
            'img/blog-default.jpg';
    }

    formatDate(fechaString) {
        if (!fechaString) return 'Fecha no disponible';
        
        const fecha = new Date(fechaString);
        return fecha.toLocaleDateString('es-ES', {
            year: 'numeric',
            month: 'long',
            day: 'numeric'
        });
    }

    truncateTitle(titulo, maxLength) {
        if (!titulo) return 'Sin título';
        return titulo.length > maxLength ? 
            titulo.substring(0, maxLength) + '...' : 
            titulo;
    }

    updatePageTitle(titulo) {
        if (titulo) {
            document.title = `${titulo} - Diamond`;
        }
    }

    enhanceContent() {
        // Lazy loading para imágenes dentro del contenido
        const contentImages = document.querySelectorAll('.blog-content img');
        contentImages.forEach(img => {
            img.setAttribute('loading', 'lazy');
            img.style.maxWidth = '100%';
            img.style.height = 'auto';
        });

        // Hacer enlaces externos abrir en nueva ventana
        const externalLinks = document.querySelectorAll('.blog-content a[href^="http"]');
        externalLinks.forEach(link => {
            link.setAttribute('target', '_blank');
            link.setAttribute('rel', 'noopener noreferrer');
        });

        // Añadir smooth scroll a enlaces internos
        const internalLinks = document.querySelectorAll('.blog-content a[href^="#"]');
        internalLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                const target = document.querySelector(link.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    }
}

// Inicializar la aplicación
new DetalleBlog();