{% extends 'base.html.twig' %}

{% block title %}Éditer la rubrique{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {# Chargement des scripts TinyMCE via le bundle #}
    {{ tinymce_scripts() }}

    {% if rubrique.type.value == 'liste' %}
        <script src="{{ asset('js/liste-editor.js') }}"></script>
    {% endif %}

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Gestion du drag & drop pour les étapes (pour le tri) - Version Vanilla JS
            const etapesSortable = document.getElementById('etapes-sortable');
            if (etapesSortable) {
                // Implémentation simple du tri par drag & drop
                let draggedElement = null;

                // Rendre tous les éléments draggables
                const dragItems = etapesSortable.querySelectorAll('.drag-item');
                dragItems.forEach(item => {
                    const dragHandle = item.querySelector('.drag-handle');
                    if (dragHandle) {
                        dragHandle.addEventListener('mousedown', function(e) {
                            item.draggable = true;
                        });
                    }

                    item.addEventListener('dragstart', function(e) {
                        draggedElement = this;
                        this.style.opacity = '0.5';
                    });

                    item.addEventListener('dragend', function(e) {
                        this.style.opacity = '';
                        this.draggable = false;

                        // Mettre à jour l'ordre
                        updateOrder();
                    });

                    item.addEventListener('dragover', function(e) {
                        e.preventDefault();
                    });

                    item.addEventListener('drop', function(e) {
                        e.preventDefault();
                        if (draggedElement !== this) {
                            const allItems = [...etapesSortable.querySelectorAll('.drag-item')];
                            const draggedIndex = allItems.indexOf(draggedElement);
                            const targetIndex = allItems.indexOf(this);

                            if (draggedIndex < targetIndex) {
                                this.parentNode.insertBefore(draggedElement, this.nextSibling);
                            } else {
                                this.parentNode.insertBefore(draggedElement, this);
                            }
                        }
                    });
                });

                function updateOrder() {
                    const items = etapesSortable.querySelectorAll('.drag-item');
                    const order = Array.from(items).map(item => item.dataset.id).join(',');

                    // Mettre à jour le champ caché
                    const orderField = document.getElementById('rubrique_ordreEtapes');
                    if (orderField) {
                        orderField.value = order;
                    }

                    // Envoyer la mise à jour au serveur
                    fetch('{{ path("app_admin_etapes_update_order") }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({ order: order })
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (!data.success) {
                                console.error('Erreur lors de la mise à jour de l\'ordre');
                            }
                        })
                        .catch(error => {
                            console.error('Erreur de connexion au serveur', error);
                        });
                }
            }

            // Fonction pour configurer le drag & drop avec les web components TinyMCE
            function setupDragAndDrop() {
                const draggableItems = document.querySelectorAll('.draggable-item');
                const tinymceEditors = document.querySelectorAll('tinymce-editor');

                // Rendre les éléments glissables
                draggableItems.forEach(item => {
                    item.addEventListener('dragstart', function(e) {
                        const itemType = this.dataset.type;
                        const itemId = this.dataset.id;
                        const itemTitle = this.textContent.trim();
                        e.dataTransfer.setData('text/plain', `[${itemType} id="${itemId}" titre="${itemTitle}"]`);
                        e.dataTransfer.effectAllowed = 'copy';
                        this.classList.add('dragging');
                    });

                    item.addEventListener('dragend', function() {
                        this.classList.remove('dragging');
                    });
                });

                // Configurer le drop sur les éditeurs TinyMCE (web components)
                tinymceEditors.forEach(editor => {
                    editor.addEventListener('dragover', function(e) {
                        e.preventDefault();
                        if (e.dataTransfer.types.includes('text/plain')) {
                            e.dataTransfer.dropEffect = 'copy';
                        }
                    });

                    editor.addEventListener('drop', function(e) {
                        e.preventDefault();
                        const data = e.dataTransfer.getData('text/plain');
                        if (data.startsWith('[pratique') || data.startsWith('[etape') || data.startsWith('[fiche_outil')) {
                            // Essayer d'accéder à l'API TinyMCE via le web component
                            if (this.editor) {
                                // Si l'éditeur TinyMCE est accessible
                                this.editor.insertContent(data);
                            } else {
                                // Fallback : essayer de déclencher un événement custom
                                const insertEvent = new CustomEvent('insertContent', {
                                    detail: { content: data }
                                });
                                this.dispatchEvent(insertEvent);

                                // Ou insérer directement dans la valeur si possible
                                if (this.value !== undefined) {
                                    const currentContent = this.value || '';
                                    this.value = currentContent + data;

                                    // Déclencher un événement de changement
                                    this.dispatchEvent(new Event('input', { bubbles: true }));
                                }
                            }
                        }
                    });
                });

                // Alternative : essayer de détecter les iframes TinyMCE
                setTimeout(() => {
                    const iframes = document.querySelectorAll('iframe[id*="tinymce"]');
                    iframes.forEach(iframe => {
                        try {
                            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                            if (iframeDoc) {
                                iframeDoc.addEventListener('dragover', function(e) {
                                    e.preventDefault();
                                    if (e.dataTransfer.types.includes('text/plain')) {
                                        e.dataTransfer.dropEffect = 'copy';
                                    }
                                });

                                iframeDoc.addEventListener('drop', function(e) {
                                    e.preventDefault();
                                    const data = e.dataTransfer.getData('text/plain');
                                    if (data.startsWith('[pratique') || data.startsWith('[etape') || data.startsWith('[fiche_outil')) {
                                        // Utiliser l'API TinyMCE globale
                                        const editorId = iframe.id.replace('_ifr', '');
                                        if (window.tinymce && window.tinymce.get(editorId)) {
                                            window.tinymce.get(editorId).insertContent(data);
                                        }
                                    }
                                });
                            }
                        } catch (e) {
                            console.log('Impossible d\'accéder à l\'iframe TinyMCE:', e);
                        }
                    });
                }, 1000);
            }

            // Initialiser le drag & drop après un petit délai pour s'assurer que TinyMCE est prêt
            setTimeout(() => {
                if (document.querySelectorAll('.draggable-item').length > 0) {
                    setupDragAndDrop();
                }
            }, 500);
        });
    </script>
{% endblock %}

{% block body %}
    <div class="container-fluid py-4">
        <h1>Éditer la rubrique : {{ rubrique.titre }}</h1>
        {{ form_start(form) }}
        <div class="row g-4 align-items-start">
            <div class="container-fluid mt-4">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0"><i class="fas fa-book-open me-2" aria-hidden="true"></i>Informations de la rubrique</h4>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            {{ form_label(form.titre, 'Titre', {'label_attr': {'aria-label': 'Titre de la rubrique'}}) }}
                            {{ form_widget(form.titre, {'attr': {'class': 'form-control', 'placeholder': 'Titre de la rubrique', 'aria-label': 'Titre de la rubrique'}}) }}
                            {{ form_errors(form.titre) }}
                        </div>
                        <div class="mb-3">
                            {{ form_label(form.description, 'Description', {'label_attr': {'aria-label': 'Description de la rubrique'}}) }}
                            {{ form_widget(form.description, {'attr': {'class': 'form-control', 'placeholder': 'Description de la rubrique', 'aria-label': 'Description de la rubrique'}}) }}
                            {{ form_errors(form.description) }}
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                {{ form_label(form.position, 'Position', {'label_attr': {'aria-label': 'Position'}}) }}
                                {{ form_widget(form.position, {'attr': {'class': 'form-control', 'aria-label': 'Position'}}) }}
                                {{ form_errors(form.position) }}
                            </div>
                            <div class="col-md-6 mb-3">
                                {{ form_label(form.type, 'Type', {'label_attr': {'aria-label': 'Type de rubrique'}}) }}
                                {{ form_widget(form.type, {'attr': {'class': 'form-select', 'aria-label': 'Type de rubrique'}}) }}
                                {{ form_errors(form.type) }}
                            </div>
                        </div>
                    </div>
                </div>
                {% if rubrique.type.value == 'liste' %}
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0"><i class="fas fa-align-left me-2" aria-hidden="true"></i>Contenu principal</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-lg-4">
                                    <div class="items-list">
                                        <h6>Fiches outils disponibles</h6>
                                        <p class="small text-muted">Glissez-déposez dans l'éditeur pour insérer</p>
                                        <div id="fiches-container">
                                            {% for fiche in fiches_outils %}
                                                <div class="draggable-item" data-id="{{ fiche.id }}" data-type="fiche_outil" draggable="true">
                                                    {{ fiche.titre }}
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-8">
                                    <label for="rubrique_contenu" class="form-label">Contenu</label>
                                    {% if form.contenu is defined %}
                                        {{ form_row(form.contenu) }}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% endif %}
                {% if rubrique.type.value == 'etapes' %}
                    {{ include('admin/rubrique/_etapes.html.twig') }}
                    {% if form.ordreEtapes is defined %}
                        {{ form_row(form.ordreEtapes) }}
                    {% endif %}
                {% elseif rubrique.type.value == 'liste' %}
                    {{ include('admin/rubrique/_liste_fiches.html.twig') }}
                {% endif %}
                <div class="d-flex justify-content-center gap-3 mt-4 border-top pt-3">
                    <a href="{{ path('app_admin_parcours_show', {'id': rubrique.parcours.id}) }}"
                       class="btn btn-outline-secondary btn-lg px-4" aria-label="Retour au parcours">
                        <i class="fas fa-arrow-left me-2" aria-hidden="true"></i>Retour au parcours
                    </a>
                    <button type="submit" class="btn btn-success btn-lg px-4 shadow" aria-label="Enregistrer les modifications">
                        <i class="fas fa-save me-2" aria-hidden="true"></i>Enregistrer les modifications
                    </button>
                </div>
            </div>
        </div>
        {{ form_end(form) }}
    </div>
{% endblock %}