{% extends 'vitrine/base.html.twig' %}
{% import 'vitrine/_icons.html.twig' as icons %}

{% block title %}Testez l'Éditeur de Site Izibrick — Démo Sans Compte | Izibrick{% endblock %}

{% block meta_description %}Essayez l'éditeur visuel Izibrick sans créer de compte : glissez-déposez des widgets, modifiez les textes et les couleurs, composez une page réelle.{% endblock %}

{% block meta_keywords %}démo éditeur site, tester créateur de site, éditeur visuel gratuit, sans inscription{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {# L'éditeur est celui du produit : mêmes dépendances que le back-office #}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
    <link href="{{ asset('assets/css/page-builder.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/containers.css') }}" rel="stylesheet">
    <style>
        /* Le bac à sable vit dans le layout vitrine : neutraliser ce que
           Bootstrap écrase et cadrer l'éditeur. */
        .demo-editor-wrap {
            max-width: 1400px;
            margin: 0 auto;
            padding: 24px 16px 96px 16px;
        }

        .demo-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 14px;
            padding: 18px 22px;
            margin-bottom: 20px;
        }

        .demo-banner h1 {
            font-size: 1.2rem;
            font-weight: 700;
            margin: 0 0 4px 0;
            color: white;
        }

        .demo-banner p {
            margin: 0;
            font-size: 0.9rem;
            opacity: 0.92;
        }

        .demo-banner .btn { white-space: nowrap; }

        /* Pas de clonage vers une autre page en mode démo */
        .demo-mode [data-action="clone-to-page"] { display: none; }

        /* Barre fixe de conversion */
        .demo-cta-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 980;
            background: rgba(15, 23, 42, 0.96);
            color: white;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
            text-align: center;
        }

        .demo-cta-bar p { margin: 0; font-size: 0.9rem; }

        .canvas-device-bar {
            display: flex;
            justify-content: center;
            gap: 6px;
            padding: 6px 0 12px 0;
        }
        .canvas-device-bar .device-btn {
            border: 1px solid #e2e8f0;
            background: white;
            border-radius: 8px;
            padding: 6px 14px;
            color: #64748b;
            cursor: pointer;
        }
        .canvas-device-bar .device-btn.active {
            background: #667eea;
            border-color: #667eea;
            color: white;
        }
        .sections-container.device-tablet,
        .sections-container.device-mobile {
            margin-left: auto !important;
            margin-right: auto !important;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
            overflow-x: hidden;
        }
        .sections-container.device-tablet { max-width: 768px; }
        .sections-container.device-mobile { max-width: 390px; }

        @media (max-width: 900px) {
            .demo-small-screen-note { display: block; }
        }
        .demo-small-screen-note {
            display: none;
            background: #fffbeb;
            border: 1px solid #fcd34d;
            color: #92400e;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 0.85rem;
            margin-bottom: 14px;
        }
    </style>
{% endblock %}

{% block body %}
<div class="demo-editor-wrap demo-mode">

    <div class="demo-banner">
        <div>
            <h1><i class="fas fa-flask me-2"></i>Bac à sable : l'éditeur izibrick, sans compte</h1>
            <p>
                Glissez-déposez des widgets, modifiez les textes, testez tout — rien n'est enregistré.
                Créez un compte gratuit pour mettre votre page en ligne.
            </p>
        </div>
        <a href="{{ path('app_register') }}" class="btn btn-light fw-bold">
            {{ icons.icon('rocket', 18) }} Créer mon site gratuitement
        </a>
    </div>

    <p class="demo-small-screen-note">
        <i class="fas fa-desktop me-1"></i>
        L'éditeur donne le meilleur de lui-même sur un écran d'ordinateur.
    </p>

    <div class="page-builder">
        <div class="page-builder-toolbar-wrapper">
            <div class="page-builder-toolbar toolbar-row-1">
                <div class="toolbar-section">
                    <h4 class="toolbar-section-title">
                        <i class="fas fa-th-large"></i>
                        <span>Structure</span>
                    </h4>
                    <div id="containers-toolbar" class="toolbar-items-list">
                        <!-- Sera rempli par JavaScript -->
                    </div>
                </div>
            </div>

            <div class="page-builder-toolbar toolbar-row-2">
                <div class="toolbar-section toolbar-section-full">
                    <h4 class="toolbar-section-title">
                        <i class="fas fa-puzzle-piece"></i>
                        <span>Widgets</span>
                    </h4>
                    <div id="widgets-toolbar" class="toolbar-items-list">
                        <!-- Sera rempli par JavaScript avec les catégories -->
                    </div>
                </div>
            </div>
        </div>

        <main class="editor-canvas">
            <div class="canvas-device-bar">
                <button type="button" class="device-btn active" data-device="desktop" title="Aperçu ordinateur">
                    <i class="fas fa-desktop"></i>
                </button>
                <button type="button" class="device-btn" data-device="tablet" title="Aperçu tablette (768 px)">
                    <i class="fas fa-tablet-screen-button"></i>
                </button>
                <button type="button" class="device-btn" data-device="mobile" title="Aperçu mobile (390 px)">
                    <i class="fas fa-mobile-screen-button"></i>
                </button>
            </div>
            <div id="sections-container" class="sections-container">
                <!-- Sera rempli par JavaScript -->
            </div>
        </main>
    </div>

    {# Boutons annuler/rétablir de l'éditeur #}
    <div style="display: flex; justify-content: center; gap: 10px; margin-top: 18px;">
        <button type="button" id="undo-button" class="btn btn-outline-secondary" title="Annuler (Ctrl+Z)" disabled>
            <i class="fa-solid fa-rotate-left"></i> Annuler
        </button>
        <button type="button" id="redo-button" class="btn btn-outline-secondary" title="Rétablir (Ctrl+Y)" disabled>
            <i class="fa-solid fa-rotate-right"></i> Rétablir
        </button>
    </div>
</div>

{# Sidebar d'édition à droite (remplie par le builder) #}
<aside id="section-editor-panel" class="section-editor-sidebar" style="display:none;">
    <!-- Sera rempli par JavaScript -->
</aside>

<!-- Modal de confirmation de suppression de container -->
<div class="modal fade" id="deleteContainerModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Confirmer la suppression
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Êtes-vous sûr de vouloir supprimer ce container et tout son contenu ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteContainer">
                    <i class="fas fa-trash me-1"></i> Supprimer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation de suppression de widget -->
<div class="modal fade" id="deleteWidgetModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Confirmer la suppression
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Êtes-vous sûr de vouloir supprimer ce widget ?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteWidget">
                    <i class="fas fa-trash me-1"></i> Supprimer
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour insérer du code HTML (bouton HTML de l'éditeur de texte) -->
<div class="modal fade" id="htmlInsertModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title"><i class="fas fa-code me-2"></i>Insérer du code HTML</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <textarea class="form-control font-monospace" id="htmlCodeInput" rows="8"
                          placeholder='Exemple : <iframe src="..." width="100%" height="166"></iframe>'></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-dark" id="insertHtmlBtn">
                    <i class="fas fa-code me-1"></i> Insérer le code
                </button>
            </div>
        </div>
    </div>
</div>

<div class="demo-cta-bar">
    <p>
        <i class="fas fa-flask me-1"></i>
        Mode démo : vos modifications ne sont pas enregistrées.
    </p>
    <a href="{{ path('app_register') }}" class="btn btn-sm btn-light fw-bold">
        {{ icons.icon('rocket', 16) }} Créer mon site gratuitement
    </a>
</div>
{% endblock %}

{# Pas de bandeau CTA générique : la page a le sien, fixe #}
{% block cta_banner %}{% endblock %}

{% block javascripts %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
    <script src="{{ asset('assets/js/page-builder-vanilla.js') }}?v={{ 'now'|date('U') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const initialSections = {{ initialSections|json_encode|raw }};

            // Pas de siteId (pas de médiathèque) ni de restrictions d'offre :
            // le bac à sable montre tout le catalogue de widgets.
            window.initPageBuilder(initialSections, null, null);

            // Aperçu responsive
            document.querySelectorAll('.canvas-device-bar .device-btn').forEach(btn => {
                btn.addEventListener('click', function () {
                    document.querySelectorAll('.canvas-device-bar .device-btn').forEach(b => b.classList.remove('active'));
                    this.classList.add('active');
                    const container = document.getElementById('sections-container');
                    container.classList.remove('device-tablet', 'device-mobile');
                    if (this.dataset.device !== 'desktop') {
                        container.classList.add('device-' + this.dataset.device);
                    }
                });
            });
        });
    </script>
{% endblock %}