{% extends "base.html" %}

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

{% block content %}
<div class="section mt-5 pt-4">
    <div class="container">
        <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">
                        <form method="post" enctype="multipart/form-data">
                            <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.replace('uploads/', '') if article.featured_image else '') }}" 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">
                                        <input type="hidden" name="existing_image" value="{{ article.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 }}</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; }'
        });
        
        // 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 %}