{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="section">
    <div class="container pt-5">
        <div class="row">
            <div class="col-12 mb-4">
                <h1>{{ title }}</h1>
                <hr>
            </div>
        </div>
        
        <div class="row mb-4">
            <div class="col-md-12">
                <a href="{{ url_for('admin.manage_articles') }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-2"></i> Volver a la lista
                </a>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-body">
                        {# Mostrar errores de validación (incluye CSRF si falla) #}
                        {% if form and form.errors %}
                        <div class="alert alert-danger" role="alert">
                            <strong>Corrige los siguientes errores:</strong>
                            <ul class="mb-0">
                                {% for field, errors in form.errors.items() %}
                                    {% for error in errors %}
                                        <li>{{ field|capitalize }}: {{ error }}</li>
                                    {% endfor %}
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                        <form method="post" action="{{ form_action|default(request.path) }}" enctype="multipart/form-data">
                            {{ form.hidden_tag() }}
                            <div class="row mb-3">
                                <div class="col-md-8">
                                    <div class="mb-3">
                                        <label for="title" class="form-label">Título del artículo*</label>
                                        <input type="text" class="form-control" id="title" name="title" 
                                               value="{{ article.title }}" required>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="slug" class="form-label">URL amigable (slug)</label>
                                        <input type="text" class="form-control" id="slug" name="slug" 
                                               value="{{ article.slug }}" placeholder="generado-automaticamente">
                                        <small class="text-muted">Si lo deja vacío, se generará automáticamente a partir del título.</small>
                                    </div>
                                </div>
                                
                                <div class="col-md-4">
                                    <div class="mb-3">
                                        <label for="featured_image" class="form-label">Imagen destacada</label>
                                        {% if article.featured_image %}
                                        <div class="mb-2">
                                            <img src="{{ url_for('uploaded_file', filename=article.featured_image) }}" class="img-thumbnail" style="max-height: 150px">
                                            <p class="mt-1 small text-muted">Imagen actual: {{ article.featured_image }}</p>
                                            <div class="form-check mb-2">
                                                <input type="checkbox" class="form-check-input" id="remove_image" name="remove_image">
                                                <label class="form-check-label" for="remove_image">Eliminar imagen</label>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <input type="file" class="form-control" id="featured_image" name="featured_image">
                                        <small class="text-muted">Si no selecciona una nueva imagen, se mantendrá la imagen actual{% if not article.featured_image %} o se generará una con DALL-E si crea un artículo nuevo con IA{% endif %}.</small>
                                    </div>
                                    
                                    <div class="mb-3 form-check mt-4">
                                        <input type="checkbox" class="form-check-input" id="is_published" 
                                               name="is_published" {% if article.is_published %}checked{% endif %}>
                                        <label class="form-check-label" for="is_published">Publicar inmediatamente</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="summary" class="form-label">Resumen del artículo*</label>
                                <textarea class="form-control" id="summary" name="summary" rows="2" 
                                          required>{{ article.summary }}</textarea>
                                <small class="text-muted">Breve descripción que aparecerá en la lista de artículos (máx. 160 caracteres).</small>
                            </div>
                            
                            <div class="mb-3">
                                <label for="content" class="form-label">Contenido del artículo*</label>
                                <textarea class="form-control editor" id="content" name="content" 
                                          rows="15">{{ article.content|safe }}</textarea>
                            </div>
                            
                            <div class="mb-3">
                                <label for="tags" class="form-label">Etiquetas</label>
                                <input type="text" class="form-control" id="tags" name="tags" 
                                       placeholder="electricidad, ahorro, renovables">
                                <small class="text-muted">Separe las etiquetas con comas.</small>
                            </div>
                            
                            <hr>
                            
                            <div class="text-end">
                                <a href="{{ url_for('admin.manage_articles') }}" class="btn btn-outline-secondary me-2">Cancelar</a>
                                <button type="submit" class="btn btn-primary">{{ action }} artículo</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_styles %}
<style>
    label {
        font-weight: 500;
    }
    
    .form-control:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    }
    
    .editor {
        min-height: 300px;
    }
</style>
{% endblock %}

{% block scripts %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Inicializar el editor TinyMCE (editor de texto enriquecido)
        tinymce.init({
            selector: '.editor',
            height: 500,
            menubar: true,
            promotion: false,
            plugins: [
                'advlist', 'autolink', 'lists', 'link', 'image', 'charmap',
                'preview', 'anchor', 'searchreplace', 'visualblocks', 'code',
                'fullscreen', 'insertdatetime', 'media', 'table', 'help', 'wordcount'
            ],
            toolbar: 'undo redo | blocks | ' +
                     'bold italic backcolor | alignleft aligncenter ' +
                     'alignright alignjustify | bullist numlist outdent indent | ' +
                     'removeformat | help',
            content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; }',
            
            // Configuración para manejar correctamente el HTML
            entity_encoding: 'raw',
            encoding: 'xml',
            convert_urls: false,
            
            // Permitir todo tipo de elementos HTML
            valid_elements: '*[*]',
            extended_valid_elements: '*[*]',
            
            // Inicialización para procesar correctamente el HTML
            setup: function(editor) {
                editor.on('init', function() {
                    // Forzar el reprocesamiento del contenido HTML
                    const content = this.getContent();
                    this.setContent(content);
                });
            }
        });
        
        // Script para asegurar que el HTML se renderice correctamente
        setTimeout(function() {
            const editor = tinymce.get('content');
            if (editor) {
                // Obtener el contenido del textarea directamente antes de que TinyMCE lo procese
                const textareaContent = document.getElementById('content').value;
                
                // Verificar si contiene entidades HTML escapadas
                if (textareaContent.includes('&lt;') || textareaContent.includes('&gt;')) {
                    console.log('Detectadas entidades HTML escapadas, decodificando...');
                    
                    // Crear un elemento temporal para decodificar entidades HTML
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = textareaContent;
                    const decodedContent = tempDiv.textContent || tempDiv.innerText;
                    
                    // Establecer el contenido decodificado directamente en el editor
                    editor.setContent(decodedContent);
                    console.log('Entidades HTML decodificadas correctamente');
                } else {
                    // Obtener el contenido actual del editor
                    let content = editor.getContent();
                    
                    // Si hay etiquetas HTML, forzar reprocesamiento
                    if (content.includes('<')) {
                        editor.setContent(content);
                        console.log('Contenido HTML reprocesado');
                    }
                }
            }
        }, 800); // Aumentar el retraso para asegurar que TinyMCE esté completamente inicializado
        
        // Auto-generación del slug desde el título
        const titleInput = document.getElementById('title');
        const slugInput = document.getElementById('slug');
        
        if (titleInput && slugInput) {
            titleInput.addEventListener('input', function() {
                if (!slugInput.value.trim()) {
                    slugInput.value = generateSlug(titleInput.value);
                }
            });
        }
        
        // Función para generar un slug a partir del texto
        function generateSlug(text) {
            return text
                .toString()
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '')
                .toLowerCase()
                .trim()
                .replace(/\s+/g, '-')
                .replace(/[^\w\-]+/g, '')
                .replace(/\-\-+/g, '-')
                .substring(0, 80);
        }
    });
</script>
{% endblock %}
