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

{% block title %}Network – Storefront Template{% endblock %}

{% block stylesheets %}
<style>
.builder-tabs { margin-bottom: 15px; }
.builder-container { display: flex; gap: 15px; min-height: 600px; }
.components-panel { flex: 0 0 200px; background: #f8f9fb; padding: 15px; border: 1px solid #ddd; border-radius: 4px; }
.editor-panel { flex: 1; background: #fff; border: 1px solid #ddd; border-radius: 4px; }
.preview-panel { flex: 1; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 15px; overflow: auto; }
.component-item { padding: 10px; margin-bottom: 8px; background: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: move; transition: all 0.2s; }
.component-item:hover { background: #e8f4f8; border-color: #3598dc; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.builder-toolbar { padding: 10px; background: #f5f5f5; border-bottom: 1px solid #ddd; }
.builder-toolbar .btn { margin-right: 5px; }
#visual-canvas { min-height: 500px; padding: 20px; border: 1px dashed #ddd; background: white; }
#visual-canvas:empty:before { content: 'Faites glisser des composants ici'; color: #999; }
.editable-element { position: relative; min-height: 30px; padding: 10px; }
.editable-element:hover { outline: 2px dashed #3598dc; }
.element-controls { position: absolute; top: -25px; right: 0; background: #3598dc; padding: 2px 5px; border-radius: 3px; display: none; }
.editable-element:hover .element-controls { display: block; }
.element-controls button { background: transparent; border: none; color: white; cursor: pointer; padding: 2px 5px; }
</style>
{% endblock %}

{% block body %}
<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="{{ path('homepage') }}">Accueil</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="{{ path('network_insights') }}">Network</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <span>Storefront</span>
        </li>
    </ul>
</div>

<h1 class="page-title"></h1>

<div class="row">
    <div class="col-md-12">
        <div class="portlet light bordered">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-globe font-dark"></i>
                    <span class="caption-subject font-dark sbold uppercase">Configuration Storefront</span>
                </div>
            </div>
            <div class="portlet-body">
                {% if magasin %}
                <form method="post" action="{{ path('network_storefront') }}" id="storefront-form">
                    
                    <!-- Builder Tabs -->
                    <ul class="nav nav-tabs builder-tabs">
                        <li class="active"><a href="#visual-tab" data-toggle="tab"><i class="fa fa-paint-brush"></i> Éditeur Visuel</a></li>
                        <li><a href="#code-tab" data-toggle="tab"><i class="fa fa-code"></i> Code HTML</a></li>
                        <li><a href="#preview-tab" data-toggle="tab"><i class="fa fa-eye"></i> Aperçu</a></li>
                    </ul>

                    <div class="tab-content">
                        <!-- Visual Editor Tab -->
                        <div class="tab-pane active" id="visual-tab">
                            <div class="builder-container">
                                <!-- Components Panel -->
                                <div class="components-panel">
                                    <h5><i class="fa fa-cubes"></i> Composants</h5>
                                    <div class="component-item" draggable="true" data-component="heading">
                                        <i class="fa fa-header"></i> Titre
                                    </div>
                                    <div class="component-item" draggable="true" data-component="text">
                                        <i class="fa fa-paragraph"></i> Texte
                                    </div>
                                    <div class="component-item" draggable="true" data-component="image">
                                        <i class="fa fa-image"></i> Image
                                    </div>
                                    <div class="component-item" draggable="true" data-component="button">
                                        <i class="fa fa-hand-pointer-o"></i> Bouton
                                    </div>
                                    <div class="component-item" draggable="true" data-component="section">
                                        <i class="fa fa-square-o"></i> Section
                                    </div>
                                    <div class="component-item" draggable="true" data-component="columns">
                                        <i class="fa fa-columns"></i> Colonnes
                                    </div>
                                    <div class="component-item" draggable="true" data-component="list">
                                        <i class="fa fa-list"></i> Liste
                                    </div>
                                    <div class="component-item" draggable="true" data-component="divider">
                                        <i class="fa fa-minus"></i> Séparateur
                                    </div>
                                </div>

                                <!-- Visual Canvas -->
                                <div class="editor-panel">
                                    <div class="builder-toolbar">
                                        <button type="button" class="btn btn-xs btn-default" id="undo-btn" title="Annuler"><i class="fa fa-undo"></i></button>
                                        <button type="button" class="btn btn-xs btn-default" id="redo-btn" title="Refaire"><i class="fa fa-repeat"></i></button>
                                        <button type="button" class="btn btn-xs btn-default" id="clear-btn" title="Tout effacer"><i class="fa fa-trash"></i> Effacer</button>
                                    </div>
                                    <div id="visual-canvas">{{ magasin.storefront|raw }}</div>
                                </div>
                            </div>
                        </div>

                        <!-- Code Editor Tab -->
                        <div class="tab-pane" id="code-tab">
                            <div class="form-group">
                                <label for="storefront">Code HTML</label>
                                <textarea id="storefront" name="storefront" class="form-control" rows="20" style="font-family: monospace;">{{ magasin.storefront ?? '' }}</textarea>
                            </div>
                        </div>

                        <!-- Preview Tab -->
                        <div class="tab-pane" id="preview-tab">
                            <div class="preview-panel">
                                <div id="preview-content">{{ magasin.storefront|raw }}</div>
                            </div>
                        </div>
                    </div>

                    <div style="margin-top: 15px;">
                        <button type="submit" class="btn green"><i class="fa fa-save"></i> Enregistrer</button>
                        <button type="button" class="btn blue" id="sync-preview-btn"><i class="fa fa-refresh"></i> Actualiser l'aperçu</button>
                        <a href="{{ path('storefront_show', { 'id': magasin.id }) }}" class="btn blue" target="_blank" title="Prévisualiser"><i class="fa fa-external-link"></i> Voir en ligne</a>
                        <a href="{{ path('network_insights') }}" class="btn default"><i class="fa fa-arrow-left"></i> Retour</a>
                    </div>
                </form>
                {% else %}
                    <div class="alert alert-warning">
                        Aucun magasin courant n'est sélectionné.
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
// Initialize canvas controls on page load
document.addEventListener('DOMContentLoaded', function() {
    const canvas = document.getElementById('visual-canvas');
    if (!canvas) return;
    
    // Add controls to any existing editable elements
    canvas.querySelectorAll('.editable-element').forEach(el => {
        if (!el.querySelector('.element-controls')) {
            const controls = document.createElement('div');
            controls.className = 'element-controls';
            controls.innerHTML = '<button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button>';
            
            // Add edit button for images
            if (el.querySelector('img')) {
                controls.innerHTML = '<button onclick="editImage(this)">✎</button>' + controls.innerHTML;
            }
            
            el.appendChild(controls);
        }
    });
});
</script>
{% endblock %}

{% block javascripts %}
<script>
(function() {
    const canvas = document.getElementById('visual-canvas');
    const codeEditor = document.getElementById('storefront');
    const previewContent = document.getElementById('preview-content');
    let history = [];
    let historyIndex = -1;

    // Component templates
    const templates = {
        heading: '<h2 class="editable-element" contenteditable="true">Titre<div class="element-controls"><button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button></div></h2>',
        text: '<p class="editable-element" contenteditable="true">Votre texte ici...<div class="element-controls"><button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button></div></p>',
        image: '<div class="editable-element"><img src="https://placehold.co/400x200" style="max-width:100%;height:auto;" /><div class="element-controls"><button onclick="editImage(this)">✎</button><button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button></div></div>',
        button: '<div class="editable-element" style="text-align:center;"><a href="#" class="btn btn-primary" contenteditable="true" style="display:inline-block;padding:10px 20px;background:#3598dc;color:white;text-decoration:none;border-radius:4px;">Cliquez ici</a><div class="element-controls"><button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button></div></div>',
        section: '<div class="editable-element" style="padding:20px;background:#f5f5f5;margin:10px 0;" contenteditable="true">Section de contenu<div class="element-controls"><button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button></div></div>',
        columns: '<div class="editable-element" style="display:flex;gap:15px;"><div style="flex:1;padding:15px;background:#f8f9fb;" contenteditable="true">Colonne 1</div><div style="flex:1;padding:15px;background:#f8f9fb;" contenteditable="true">Colonne 2</div><div class="element-controls"><button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button></div></div>',
        list: '<ul class="editable-element" contenteditable="true"><li>Élément 1</li><li>Élément 2</li><li>Élément 3</li><div class="element-controls"><button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button></div></ul>',
        divider: '<hr class="editable-element" style="margin:20px 0;border:none;border-top:2px solid #ddd;" /><div class="element-controls"><button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button></div>'
    };

    // Drag and drop handlers
    document.querySelectorAll('.component-item').forEach(item => {
        item.addEventListener('dragstart', function(e) {
            e.dataTransfer.setData('component', this.dataset.component);
        });
    });

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

    canvas.addEventListener('drop', function(e) {
        e.preventDefault();
        const component = e.dataTransfer.getData('component');
        if (templates[component]) {
            const wrapper = document.createElement('div');
            wrapper.innerHTML = templates[component];
            canvas.appendChild(wrapper.firstChild);
            saveHistory();
            syncCode();
        }
    });

    // Element controls
    window.deleteElement = function(btn) {
        const element = btn.closest('.editable-element');
        if (confirm('Supprimer cet élément ?')) {
            element.remove();
            saveHistory();
            syncCode();
        }
    };

    window.moveUp = function(btn) {
        const element = btn.closest('.editable-element');
        const prev = element.previousElementSibling;
        if (prev && prev.classList.contains('editable-element')) {
            canvas.insertBefore(element, prev);
            saveHistory();
            syncCode();
        }
    };

    window.moveDown = function(btn) {
        const element = btn.closest('.editable-element');
        const next = element.nextElementSibling;
        if (next && next.classList.contains('editable-element')) {
            canvas.insertBefore(next, element);
            saveHistory();
            syncCode();
        }
    };

    window.editImage = function(btn) {
        const element = btn.closest('.editable-element');
        const img = element.querySelector('img');
        const newSrc = prompt('URL de l\'image:', img.src);
        if (newSrc) {
            img.src = newSrc;
            saveHistory();
            syncCode();
        }
    };

    // Sync visual to code
    function syncCode() {
        const html = canvas.innerHTML;
        codeEditor.value = cleanHTML(html);
    }

    // Sync code to visual
    function syncVisual() {
        const currentHTML = codeEditor.value;
        const temp = document.createElement('div');
        temp.innerHTML = currentHTML;
        
        // Re-add element controls to all editable elements
        temp.querySelectorAll('.editable-element').forEach(el => {
            if (!el.querySelector('.element-controls')) {
                const controls = document.createElement('div');
                controls.className = 'element-controls';
                controls.innerHTML = '<button onclick="moveUp(this)">↑</button><button onclick="moveDown(this)">↓</button><button onclick="deleteElement(this)">×</button>';
                
                // Add edit button for images
                if (el.querySelector('img')) {
                    controls.innerHTML = '<button onclick="editImage(this)">✎</button>' + controls.innerHTML;
                }
                
                el.appendChild(controls);
            }
        });
        
        canvas.innerHTML = temp.innerHTML;
    }

    // Clean HTML (remove controls)
    function cleanHTML(html) {
        const temp = document.createElement('div');
        temp.innerHTML = html;
        temp.querySelectorAll('.element-controls').forEach(el => el.remove());
        return temp.innerHTML;
    }

    // History management
    function saveHistory() {
        const state = canvas.innerHTML;
        if (history[historyIndex] !== state) {
            history = history.slice(0, historyIndex + 1);
            history.push(state);
            historyIndex++;
        }
    }

    document.getElementById('undo-btn').addEventListener('click', function() {
        if (historyIndex > 0) {
            historyIndex--;
            canvas.innerHTML = history[historyIndex];
            syncCode();
        }
    });

    document.getElementById('redo-btn').addEventListener('click', function() {
        if (historyIndex < history.length - 1) {
            historyIndex++;
            canvas.innerHTML = history[historyIndex];
            syncCode();
        }
    });

    document.getElementById('clear-btn').addEventListener('click', function() {
        if (confirm('Effacer tout le contenu ?')) {
            canvas.innerHTML = '';
            saveHistory();
            syncCode();
        }
    });

    // Sync preview
    document.getElementById('sync-preview-btn').addEventListener('click', function() {
        // Use code editor if it was modified, otherwise use visual
        if (codeEditor.dataset.dirty === 'true') {
            previewContent.innerHTML = codeEditor.value;
        } else {
            previewContent.innerHTML = cleanHTML(canvas.innerHTML);
        }
    });

    // Tab switching - sync content
    document.querySelectorAll('[data-toggle="tab"]').forEach(tab => {
        tab.addEventListener('shown.bs.tab', function(e) {
            const target = e.target.getAttribute('href');
            if (target === '#code-tab') {
                // Switching TO code tab - sync from visual to code
                if (codeEditor.dataset.dirty !== 'true') {
                    syncCode();
                }
            } else if (target === '#visual-tab') {
                // Switching TO visual tab - sync from code to visual
                if (codeEditor.dataset.dirty === 'true') {
                    syncVisual();
                    codeEditor.dataset.dirty = 'false';
                }
            } else if (target === '#preview-tab') {
                // Use whichever was edited last
                if (codeEditor.dataset.dirty === 'true') {
                    previewContent.innerHTML = codeEditor.value;
                } else {
                    previewContent.innerHTML = cleanHTML(canvas.innerHTML);
                }
            }
        });
    });

    // Auto-save to code on edit
    canvas.addEventListener('input', function() {
        syncCode();
    });

    // Sync code editor changes back to visual
    codeEditor.addEventListener('input', function() {
        // Don't sync immediately to avoid conflicts, just mark as dirty
        codeEditor.dataset.dirty = 'true';
    });

    // Before submit, use code editor value if it was edited
    document.getElementById('storefront-form').addEventListener('submit', function(e) {
        // If code editor was modified, use its value directly
        if (codeEditor.dataset.dirty === 'true') {
            // Code editor has the latest changes, keep it as-is
        } else {
            // Visual editor has the latest changes, clean and use it
            codeEditor.value = cleanHTML(canvas.innerHTML);
        }
    });

    // Initialize history
    saveHistory();
})();
</script>
{% endblock %}