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

{% block title %}Éditeur moderne{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('assets/css/page-builder.css') }}" rel="stylesheet">
    <!-- FontAwesome pour les icônes -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
{% endblock %}

{% block body %}
    {% if success %}
        <div class="alert alert-success" style="margin-bottom: 20px;">
            <strong>Parfait !</strong> Votre page a bien été mise à jour.
        </div>
    {% endif %}

    {% if debug_form_data is not null %}
        <div class="alert alert-info" style="margin-bottom: 20px;">
            <strong>DEBUG Form Data:</strong>
            <pre>{{ debug_form_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
            <strong>DEBUG Sections Data (from command):</strong>
            <pre>{{ debug_sections_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
        </div>
    {% endif %}

    <div class="page-builder"
         x-data="createPageBuilder({{ page.sectionsData is not null ? page.sectionsData|json_encode : '[]' }})"
         x-init="init()">

        {# Sidebar : Bibliothèque de sections #}
        <aside class="sections-library">
            <h3><i class="fa-solid fa-layer-group"></i> Ajouter une section</h3>

            <div class="section-grid">
                <template x-for="sectionType in availableSections" :key="sectionType.type">
                    <button
                        type="button"
                        class="section-add-btn"
                        @click="addSection(sectionType.type)">
                        <i class="fa-solid" :class="sectionType.icon"></i>
                        <div class="section-info">
                            <span class="section-name" x-text="sectionType.name"></span>
                            <span class="section-desc" x-text="sectionType.description"></span>
                        </div>
                    </button>
                </template>
            </div>
        </aside>

        {# Zone d'édition principale #}
        <main class="editor-canvas">
            <div id="sections-container" class="sections-container">
                <template x-if="sections.length === 0">
                    <div class="sections-empty">
                        <i class="fa-solid fa-cube"></i>
                        <h3>Votre page est vide</h3>
                        <p>Commencez par ajouter une section depuis le menu de gauche</p>
                    </div>
                </template>

                <template x-for="(section, index) in sections" :key="section.id">
                    <div
                        class="section-block"
                        :class="{ 'editing': currentEditingIndex === index }">

                        {# Toolbar de la section #}
                        <div class="section-toolbar">
                            <i class="fa-solid fa-grip-vertical section-handle"></i>

                            <div class="section-type-label">
                                <i class="fa-solid" :class="getSectionIcon(section.type)"></i>
                                <span x-text="getSectionName(section.type)"></span>
                            </div>

                            <button
                                type="button"
                                class="section-toolbar-btn"
                                @click="moveSectionUp(index)"
                                title="Monter"
                                x-show="index > 0">
                                <i class="fa-solid fa-arrow-up"></i>
                            </button>

                            <button
                                type="button"
                                class="section-toolbar-btn"
                                @click="moveSectionDown(index)"
                                title="Descendre"
                                x-show="index < sections.length - 1">
                                <i class="fa-solid fa-arrow-down"></i>
                            </button>

                            <button
                                type="button"
                                class="section-toolbar-btn"
                                @click="duplicateSection(index)"
                                title="Dupliquer">
                                <i class="fa-solid fa-copy"></i>
                            </button>

                            <button
                                type="button"
                                class="section-toolbar-btn"
                                @click="editSection(index)"
                                title="Éditer">
                                <i class="fa-solid fa-pen"></i>
                            </button>

                            <button
                                type="button"
                                class="section-toolbar-btn danger"
                                @click="removeSection(index)"
                                title="Supprimer">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </div>

                        {# Preview de la section #}
                        <div class="section-preview">
                            {# Preview WYSIWYG #}
                            <template x-if="section.type === 'wysiwyg'">
                                <div x-html="section.config.content || '<p class=\'placeholder\'>Contenu vide</p>'"></div>
                            </template>

                            {# Preview Image #}
                            <template x-if="section.type === 'image'">
                                <div>
                                    <img
                                        :src="section.config.src || 'https://via.placeholder.com/800x400?text=Image'"
                                        :alt="section.config.alt"
                                        style="max-width: 100%; height: auto; border-radius: 4px;">
                                    <p x-show="section.config.caption"
                                       x-text="section.config.caption"
                                       style="margin-top: 10px; font-style: italic; color: #64748b;"></p>
                                </div>
                            </template>

                            {# Preview Hero #}
                            <template x-if="section.type === 'hero'">
                                <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 60px 20px; text-align: center; border-radius: 8px; color: white;">
                                    <h2 x-text="section.config.title" style="font-size: 32px; margin-bottom: 10px;"></h2>
                                    <p x-text="section.config.subtitle" style="font-size: 18px; margin-bottom: 20px;"></p>
                                    <a :href="section.config.ctaLink"
                                       x-text="section.config.ctaText"
                                       style="display: inline-block; background: white; color: #667eea; padding: 12px 30px; border-radius: 6px; text-decoration: none; font-weight: 600;"></a>
                                </div>
                            </template>

                            {# Preview Two Columns #}
                            <template x-if="section.type === 'two-columns'">
                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
                                    <div x-html="section.config.leftContent || '<p>Colonne gauche</p>'"></div>
                                    <div x-html="section.config.rightContent || '<p>Colonne droite</p>'"></div>
                                </div>
                            </template>

                            {# Preview CTA #}
                            <template x-if="section.type === 'cta'">
                                <div :style="section.config.centered ? 'text-align: center;' : ''">
                                    <a :href="section.config.link"
                                       x-text="section.config.text"
                                       :class="'btn-' + section.config.style"
                                       style="display: inline-block; padding: 15px 40px; border-radius: 8px; text-decoration: none; font-weight: 600;"></a>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </main>

        {# Panel d'édition latéral #}
        <aside class="section-editor-panel" x-show="currentEditingIndex !== null" x-cloak>
            <template x-if="currentEditingIndex !== null && sections[currentEditingIndex]">
                <div>
                    <div class="section-editor-header">
                        <h4>
                            <i class="fa-solid" :class="getSectionIcon(sections[currentEditingIndex].type)"></i>
                            <span x-text="'Éditer ' + getSectionName(sections[currentEditingIndex].type)"></span>
                        </h4>
                        <button type="button" class="section-editor-close" @click="closeEditor()">
                            <i class="fa-solid fa-times"></i>
                        </button>
                    </div>

                    <div class="section-editor-body">
                        {# Éditeur WYSIWYG #}
                        <template x-if="sections[currentEditingIndex].type === 'wysiwyg'">
                            <div class="form-group">
                                <label>Contenu</label>
                                <textarea
                                    x-model="sections[currentEditingIndex].config.content"
                                    rows="10"
                                    placeholder="Entrez votre contenu HTML ici..."></textarea>
                                <span class="help-text">Vous pouvez utiliser du HTML</span>
                            </div>
                        </template>

                        {# Éditeur Image #}
                        <template x-if="sections[currentEditingIndex].type === 'image'">
                            <div>
                                <div class="form-group">
                                    <label>URL de l'image</label>
                                    <input
                                        type="url"
                                        x-model="sections[currentEditingIndex].config.src"
                                        placeholder="https://...">
                                </div>
                                <div class="form-group">
                                    <label>Texte alternatif</label>
                                    <input
                                        type="text"
                                        x-model="sections[currentEditingIndex].config.alt"
                                        placeholder="Description de l'image">
                                </div>
                                <div class="form-group">
                                    <label>Légende</label>
                                    <input
                                        type="text"
                                        x-model="sections[currentEditingIndex].config.caption"
                                        placeholder="Légende optionnelle">
                                </div>
                            </div>
                        </template>

                        {# Éditeur Hero #}
                        <template x-if="sections[currentEditingIndex].type === 'hero'">
                            <div>
                                <div class="form-group">
                                    <label>Titre</label>
                                    <input
                                        type="text"
                                        x-model="sections[currentEditingIndex].config.title"
                                        placeholder="Votre titre accrocheur">
                                </div>
                                <div class="form-group">
                                    <label>Sous-titre</label>
                                    <input
                                        type="text"
                                        x-model="sections[currentEditingIndex].config.subtitle"
                                        placeholder="Votre sous-titre">
                                </div>
                                <div class="form-group">
                                    <label>Image de fond</label>
                                    <input
                                        type="url"
                                        x-model="sections[currentEditingIndex].config.backgroundImage"
                                        placeholder="https://...">
                                </div>
                                <div class="form-group">
                                    <label>Texte du bouton</label>
                                    <input
                                        type="text"
                                        x-model="sections[currentEditingIndex].config.ctaText"
                                        placeholder="En savoir plus">
                                </div>
                                <div class="form-group">
                                    <label>Lien du bouton</label>
                                    <input
                                        type="url"
                                        x-model="sections[currentEditingIndex].config.ctaLink"
                                        placeholder="#contact">
                                </div>
                            </div>
                        </template>

                        {# Éditeur Two Columns #}
                        <template x-if="sections[currentEditingIndex].type === 'two-columns'">
                            <div>
                                <div class="form-group">
                                    <label>Contenu colonne gauche</label>
                                    <textarea
                                        x-model="sections[currentEditingIndex].config.leftContent"
                                        rows="6"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>Contenu colonne droite</label>
                                    <textarea
                                        x-model="sections[currentEditingIndex].config.rightContent"
                                        rows="6"></textarea>
                                </div>
                            </div>
                        </template>

                        {# Éditeur CTA #}
                        <template x-if="sections[currentEditingIndex].type === 'cta'">
                            <div>
                                <div class="form-group">
                                    <label>Texte du bouton</label>
                                    <input
                                        type="text"
                                        x-model="sections[currentEditingIndex].config.text"
                                        placeholder="Contactez-nous">
                                </div>
                                <div class="form-group">
                                    <label>Lien</label>
                                    <input
                                        type="url"
                                        x-model="sections[currentEditingIndex].config.link"
                                        placeholder="#contact">
                                </div>
                                <div class="form-group">
                                    <label>Style</label>
                                    <select x-model="sections[currentEditingIndex].config.style">
                                        <option value="primary">Principal</option>
                                        <option value="secondary">Secondaire</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <div class="toggle-wrapper">
                                        <label class="toggle-switch">
                                            <input
                                                type="checkbox"
                                                x-model="sections[currentEditingIndex].config.centered">
                                            <span class="toggle-slider"></span>
                                        </label>
                                        <span>Centrer le bouton</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </aside>

        {# Formulaire Symfony (caché) #}
        {{ form_start(form, {'attr': {'id': 'page-form'}}) }}
            <input
                type="hidden"
                id="sections-data-field"
                name="{{ form.sectionsData.vars.full_name }}"
                x-ref="sectionsField">

            {# Les autres champs restent cachés #}
            <div style="display:none;">
                {{ form_rest(form) }}
            </div>

            <div style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
                <button type="button" id="save-button" class="btn-primary">
                    <i class="fa-solid fa-save"></i>
                    Enregistrer
                </button>
            </div>
        {{ form_end(form, {'render_rest': false}) }}
    </div>

{% endblock %}

{% block javascripts %}
    <!-- Alpine.js -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- SortableJS -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

    <!-- Page Builder -->
    <script src="{{ asset('assets/js/page-builder.js') }}"></script>

    <!-- Script de sauvegarde robuste (vanilla JS) -->
    <script>
        // Variable globale pour stocker les sections depuis Alpine.js
        window.pageBuilderSections = [];

        // Attendre que le DOM et Alpine.js soient chargés
        document.addEventListener('alpine:initialized', () => {
            console.log('Alpine initialized, setting up save handler');

            // Récupérer le bouton de sauvegarde
            const saveButton = document.getElementById('save-button');
            const form = document.getElementById('page-form');
            const field = document.getElementById('sections-data-field');

            if (saveButton && form && field) {
                saveButton.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('Save button clicked');

                    // Récupérer les sections depuis Alpine via un hack global
                    const pageBuilderDiv = document.querySelector('[x-data^="createPageBuilder"]');
                    if (pageBuilderDiv && window.Alpine) {
                        const alpineData = window.Alpine.$data(pageBuilderDiv);
                        if (alpineData && alpineData.sections) {
                            const jsonData = JSON.stringify(alpineData.sections);
                            console.log('Sections from Alpine:', alpineData.sections);
                            console.log('JSON to save:', jsonData);

                            // Mettre à jour le champ caché
                            field.value = jsonData;
                            console.log('Field value set to:', field.value);

                            // Soumettre le formulaire
                            console.log('Submitting form...');
                            form.submit();
                        } else {
                            console.error('Could not get Alpine data');
                        }
                    } else {
                        console.error('Could not find page builder div or Alpine');
                    }
                });
                console.log('Save handler attached successfully');
            } else {
                console.error('Missing elements:', {saveButton, form, field});
            }
        });
    </script>

    <style>
        [x-cloak] { display: none !important; }
    </style>
{% endblock %}