@extends('layout.backoffice')
@section('content')
    <link rel="stylesheet" href="{{URL::asset('dist/css/constructor-pagina.css')}}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ace.js" type="text/javascript" charset="utf-8"></script>
    <a href="{{ url('backoffice/home/listado') }}" id="btnVolver" class="btn btn-secondary btn-sm btn-flat mb-3">
        <i class="bx bx-arrow-back me-1"></i> Volver atrás
    </a>
    <div class="card">
        <div class="card-header">
            <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center w-100">
                <ul class="nav nav-tabs card-header-tabs justify-content-center justify-content-sm-start mb-3 mb-sm-0" id="custom-tabs-four-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="tab-configuracion" data-toggle="tab" href="#configuracion" role="tab">Configuración</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="tab-constructor" data-toggle="tab" href="#constructor" role="tab">Constructor</a>
                    </li>
                </ul>

                <div class="d-flex flex-column flex-sm-row align-items-center ms-sm-auto gap-2">
                    <div class="input-group input-group-sm" style="width: auto;">
                        <select id="select-versiones" class="form-select form-select-sm" style="min-width: 150px;">
                            <option value="">Cargar versión...</option>
                        </select>
                        <button id="btn-cargar-version" class="btn btn-outline-secondary" type="button" title="Cargar versión">
                            <i class='bx bx-upload'></i>
                        </button>
                        <button id="btn-ver-previsualizacion" class="btn btn-outline-primary" type="button" title="Previsualizar">
                            <i class='bx bxl-telegram'></i>
                        </button>
                    </div>

                    <button id="btn-actualizar-version" class="btn btn-info btn-sm ms-auto" type="button" title="Crear Versión">
                        <i class='bx bx-save'></i> Actualizar versión seleccionada
                    </button>

                    <button id="btn-modal-version" class="btn btn-info btn-sm ms-auto" type="button" title="Crear Versión">
                        <i class='bx bx-history'></i> Nueva Versión
                    </button>

                    <button id="btn-guardar" class="btn btn-success btn-sm ms-auto btn-guardar" type="button" title="Guardar">
                        @if(isset($paginaExistente['estado']))
                            <i class='bx bx-save'></i> Publicar
                        @else
                            <i class='bx bx-save'></i> Guardar
                        @endif
                    </button>
                </div>
            </div>
        </div>

        <div class="card-body">
            <div class="tab-content" id="tabsPaginaContent" style="padding: 0 !important;">
                <div class="tab-pane fade show active" id="configuracion" role="tabpanel">
                    @include('page.constructor_pagina.tabs.configuracion')
                </div>

                <div class="tab-pane fade pt-3" id="constructor" role="tabpanel">
                    @include('page.constructor_pagina.tabs.constructor')
                </div>
            </div>
        </div>
    </div>

    {{-- Plantilla para nuevas secciones --}}
    <template id="plantilla-seccion">
        <div class="seccion-constructor card mb-3 p-3" data-element-id="" data-section-id="" data-element-type="section">
            <div class="acciones-seccion">
                <button class="btn btn-sm btn-info btn-elegir-diseno" title="Elegir Diseño"><i class='bx bx-layout'></i></button>
                <button class="btn btn-sm btn-secondary btn-ajustes-seccion" title="Ajustes Sección"><i class='bx bx-cog'></i></button>
                <button class="btn btn-sm btn-danger btn-eliminar-seccion" title="Eliminar Sección"><i class='bx bx-trash'></i></button>
            </div>
            <div class="row contenido-seccion">
                <div class="col-12 text-muted marcador-posicion-columna">
                    Selecciona esta sección y haz click en <i class='bx bx-layout'></i> para añadir columnas.
                </div>
            </div>
        </div>
    </template>

    {{-- Plantilla para nuevas columnas --}}
    <template id="plantilla-columna">
        <div class="columna-constructor" data-element-id="" data-column-id="" data-element-type="column">
            <div class="marcador-posicion-columna">Añade elementos aquí</div>
        </div>
    </template>

    {{-- Plantilla para columna anidada individual --}}
    <template id="plantilla-columna-anidada">
        <div class="columna-anidada" data-element-id="" data-nested-column-id="" data-element-type="nested_column">
            <div class="marcador-posicion-columna-anidada">Añade elementos aquí</div>
        </div>
    </template>

    {{-- Plantilla para nuevos elementos --}}
    <template id="plantilla-elemento">
        <div class="elemento-constructor border rounded p-2 mb-2" data-element-id="" data-element-type="">
            <div class="marcador-posicion-contenido-elemento mb-2"></div>
            <div class="acciones-elemento">
                <button class="btn btn-xs btn-secondary btn-ajustes-elemento" title="Ajustes"><i class='bx bx-cog'></i></button>
                <button class="btn btn-xs btn-info btn-duplicar-elemento" title="Duplicar"><i class='bx bx-copy'></i></button>
                <button class="btn btn-xs btn-danger btn-eliminar-elemento" title="Eliminar"><i class='bx bx-trash'></i></button>
            </div>
        </div>
    </template>

    <div class="modal fade" id="modal-wysiwyg-editor" tabindex="-1" aria-labelledby="modalWysiwygLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalWysiwygLabel">Editar Contenido</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <textarea class="form-control wysiwyg-editor-area" style="height: 400px;"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="btn-cancelar-modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btn-save-wysiwyg">Guardar Cambios</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Guardar Versión -->
    <div class="modal fade" id="modal-guardar-version" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Guardar Nueva Versión</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <form id="form-version">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Nombre de la Versión</label>
                            <input type="text" name="nombre_version" id="nombre_version" class="form-control system_validador_vacio" placeholder="Ej: Versión Enero 2026">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Observación</label>
                            <textarea name="observacion_version" id="observacion_version" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="button" id="btn-guardar-version" class="btn btn-primary">Guardar Versión</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-code-editor" tabindex="-1" aria-labelledby="modalWysiwygLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalCodeLabel">Editar Contenido</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body">
                    <div id="ace-code-editor" style="height: 400px; width: 100%;"></div>
                    <textarea class="form-control code-editor-area d-none"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="btn-cancelar-modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btn-save-code">Guardar Cambios</button>
                </div>
            </div>
        </div>
    </div>
    @include('page.constructor_pagina.js.ajustes')
    @include('page.constructor_pagina.js.productos')
    @include('page.constructor_pagina.js.carrusel')
    @include('page.constructor_pagina.js.secciones')
    @include('page.constructor_pagina.js.pagCreada')
    @include('page.constructor_pagina.js.versiones')
    <script>
        // =============================================================
        // === Variables Globales y Datos Iniciales desde PHP/Blade ====
        // =============================================================
        const datosElementosConstructor = @json($elementosConstruirPagina ?? ['layout' => [], 'content' => []]);
        const paginaExistenteData = @json($paginaExistente['jsonPaginaExistente'] ?? []);
        const layoutOpcionesData = @json($layoutOpciones ?? []);
        const paginaIdActual = @json($paginaId ?? '');

        const productosMarcas = @json($productosMarcas ?? '');
        const productosCategorias = @json($productosCategorias ?? '');
        const listadoCms = @json($listadoCms ?? '');
        const listadoLanding = @json($listadoLanding ?? '');
        const baseUrlSinAdmon = "{{ str_replace('admon', '', url('')) }}";
        console.log(baseUrlSinAdmon)
        const tipoConstruccion = @json($tipo ?? null);
        let idElemento = "";

        let elementoSeleccionado = null;
        let seccionSeleccionadaParaDiseno = null;
        // contadorSecciones se inicializará en document.ready después de cargar datos
        let contadorSecciones = 0;

        /**
         * Genera un ID único para elementos del constructor.
         */
        function generarIdUnico(prefix = 'el') {
            return prefix + '-' + Date.now() + '-' + Math.random().toString(36).substring(2, 11);
        }

        /**
         * Limpia la selección actual, quitando clases y reiniciando el panel de ajustes.
         */
        function limpiarSeleccion() {
            if (elementoSeleccionado) {
                elementoSeleccionado.removeClass('seleccionado');
            }
            elementoSeleccionado = null;
            jQuery('#contenido-barra-lateral-ajustes').html('<p class="text-light">Selecciona un elemento para ver sus ajustes.</p>');
            $('#barra-lateral-ajustes').removeClass('activa');
            $('#lienzo-constructor-pagina').removeClass('barra-lateral-derecha-activa');
        }

        /**
         * Obtiene la definición de opciones para un tipo de elemento específico.
         */
        function obtenerOpcionesElemento(tipoElemento) {
            if (tipoElemento === 'nested_column') {
                tipoElemento = 'column';
            }
            const definicion = obtenerDefinicionCompletaElemento(tipoElemento);
            return definicion?.options || [];
        }

        /**
         * Obtiene la definición COMPLETA de un elemento (layout o content).
         */
        function obtenerDefinicionCompletaElemento(tipoElemento) {
            let definicion = null;
            if (datosElementosConstructor?.layout) {
                definicion = datosElementosConstructor.layout.find(el => el.type === tipoElemento);
            }
            if (!definicion && datosElementosConstructor?.content) {
                definicion = datosElementosConstructor.content.find(el => el.type === tipoElemento);
            }
            return definicion;
        }

        function generarHtmlPreview(valor, maxAlto = '100px') {
            let previewHtml = '';
            if (valor && typeof valor === 'string' && (valor.startsWith('http') || valor.startsWith('/'))) {
                previewHtml = `<img src="${valor}" style="max-width: 100%; max-height: ${maxAlto}; display: block;" alt="Vista previa"
                       onerror="this.style.display='none'; this.parentElement.querySelector('.text-warning-preview').style.display='block';">
                       <small class="text-warning-preview text-warning" style="display:none;">No se pudo cargar la vista previa.</small>`;
            } else if (valor && typeof valor === 'string' && valor.trim() !== '') {
                previewHtml = `<small class="text-white-50">Ruta: ${valor} (sin vista previa)</small>`;
            } else {
                previewHtml = `<small class="text-white-50">No hay imagen seleccionada.</small>`;
            }
            return previewHtml;
        }

        // =============================================================
        // === Inicialización de la pagina =========================
        // =============================================================

        $(document).ready(function () {
            const lienzo = $('#lienzo-constructor-pagina');
            const modalDisenoColumnas = $('#modal-diseno-columnas');
            const barraLateralIzquierda = $('#barra-lateral-izquierda-elementos');
            const barraLateralDerecha = $('#barra-lateral-ajustes');
            let currentWysiwygOptionId = null;
            let currentCodeOptionId = null;
            let aceEditorInstance = null;

            if (typeof ace !== 'undefined') {
                aceEditorInstance = ace.edit("ace-code-editor");
                aceEditorInstance.setTheme("ace/theme/monokai");
                aceEditorInstance.session.setMode("ace/mode/javascript");
                aceEditorInstance.setOptions({
                    fontSize: "14pt",
                    showPrintMargin: false,
                    showGutter: true,
                    highlightActiveLine: true,
                    enableBasicAutocompletion: true,
                    enableLiveAutocompletion: true
                });
            }

            if (paginaExistenteData && Array.isArray(paginaExistenteData) && paginaExistenteData.length > 0) {
                lienzo.empty();
                cargarEstructuraExistente(paginaExistenteData, lienzo);
                contadorSecciones = lienzo.find('.seccion-constructor').length;
            } else {
                contadorSecciones = 0;
            }

            // ---> Inicializar Ordenables <---
            inicializarSeccionesOrdenables(lienzo);
            inicializarElementosArrastrables();
            inicializarColumnasOrdenables(lienzo.find('.columna-constructor, .columna-anidada'));
            inicializarColumnasReceptoras();

            // Se realiza todo el tema del wysiwyg
            jQuery('#modal-wysiwyg-editor').on('shown.bs.modal', function () {
                const editor = jQuery('.wysiwyg-editor-area', this);
                const context = jQuery(this).data('edit-context');

                if (!editor.hasClass('summernote-initialized')) {
                    editor.summernote({
                        height: 400,
                        focus: true,
                        dialogsInBody: true,
                        disableDragAndDrop: false,
                        toolbar: [
                            ['style', ['style']],
                            ['font', ['bold', 'italic', 'strikethrough', 'underline', 'clear', 'fontsize', 'fontsizeunit']],
                            ['fontname', ['fontname']],
                            ['color', ['color', 'forecolor', 'backcolor']],
                            ['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
                            ['table', ['table']],
                            ['insert', ['link', 'picture', 'video']],
                            ['view', ['codeview']],
                        ],
                        callbacks: {
                            onPaste: function (e) {
                                const clipboardData = e.originalEvent.clipboardData;
                                if (clipboardData && clipboardData.getData) {
                                    const pastedData = clipboardData.getData('text/html') || clipboardData.getData('text/plain');
                                    if (pastedData) {
                                        document.execCommand('insertHTML', false, pastedData);
                                        e.preventDefault();
                                    }
                                }
                            },
                            onInit: function () {
                                setTimeout(function () {
                                    $('.note-modal .modal-header .close').hide();

                                    if ($('.note-modal .modal-header .btn-close').length === 0) {
                                        $('.note-modal .modal-header').append(
                                            '<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>'
                                        );
                                    }
                                }, 500);
                            }
                        },

                    }).addClass('summernote-initialized');

                    jQuery(this).find('.note-editor').css('z-index', '1050');
                }

                if (currentWysiwygOptionId && elementoSeleccionado) {
                    const currentValue = elementoSeleccionado.data('setting-' + currentWysiwygOptionId) || '';
                    editor.summernote('code', currentValue);
                } else if (context && context.elemento) {
                    const currentValue = context.elemento.data('setting-' + context.optionId) || '';
                    editor.summernote('code', currentValue);
                }

                setTimeout(() => {
                    jQuery('.note-modal, .note-popover').css('z-index', '9999');

                    jQuery('.note-modal .modal-dialog').css({
                        'max-width': '90%',
                        'width': 'auto'
                    });
                }, 100);
            });

            jQuery('#modal-wysiwyg-editor').on('hidden.bs.modal', function (event) {
                if (event.target !== this) return;

                jQuery(this).removeData('edit-context');
                const editor = jQuery('.wysiwyg-editor-area', this);
                currentWysiwygOptionId = null;

                jQuery('.note-modal, .note-popover').remove();
                editor.summernote('destroy');
                editor.removeClass('summernote-initialized');
            });

            jQuery(document).on('click', '.btn-edit-wysiwyg', function () {
                if (!elementoSeleccionado) {
                    return;
                }

                const modal = jQuery('#modal-wysiwyg-editor');
                currentWysiwygOptionId = jQuery(this).data('option-id');
                const context = {
                    optionId: jQuery(this).data('option-id'),
                    elemento: elementoSeleccionado
                };

                if (!currentWysiwygOptionId) {
                    Swal.fire('Error', 'No se pudo identificar la opción a editar.', 'error');
                    return;
                }

                modal.data('edit-context', context);
                if ($('#barra-lateral-ajustes').hasClass('activa')) {
                    $('#btn-ocultar-barra-ajustes').trigger('click');
                }
                jQuery('#modal-wysiwyg-editor').modal('show');
            });

            jQuery('#btn-save-wysiwyg').on('click', function () {
                const modal = jQuery('#modal-wysiwyg-editor');
                const context = modal.data('edit-context');

                if (!elementoSeleccionado || !currentWysiwygOptionId) {
                    if (!context || !context.elemento || !context.optionId) {
                        Swal.fire('Error', 'No hay contexto de edición válido.', 'error');
                        jQuery('#modal-wysiwyg-editor').modal('hide');
                        return;
                    }

                    elementoSeleccionado = context.elemento;
                    currentWysiwygOptionId = context.optionId;
                }

                const editor = jQuery('#modal-wysiwyg-editor .wysiwyg-editor-area');
                let nuevoValor = editor.summernote('code');

                if (jQuery('<div>').html(nuevoValor).text().trim() === '' && !jQuery(nuevoValor).find('img, video, hr, table').length) {
                    nuevoValor = '';
                }

                const idOpcion = currentWysiwygOptionId;
                const tipoElemento = elementoSeleccionado.data('element-type');

                elementoSeleccionado.data(`setting-${idOpcion}`, nuevoValor);

                let valorParaAtributo;
                if (typeof nuevoValor === 'object' && nuevoValor !== null) {
                    valorParaAtributo = JSON.stringify(nuevoValor);
                } else if (typeof nuevoValor === 'boolean') {
                    valorParaAtributo = nuevoValor.toString();
                } else if (nuevoValor === null || nuevoValor === undefined) {
                    valorParaAtributo = '';
                } else {
                    valorParaAtributo = String(nuevoValor);
                }
                elementoSeleccionado.attr(`data-setting-${idOpcion}`, valorParaAtributo);

                if (tipoElemento !== 'section' && tipoElemento !== 'column') {
                    actualizarVisualizacionInicial(elementoSeleccionado, tipoElemento, elementoSeleccionado.data());
                }

                const tieneDependientes = obtenerOpcionesElemento(tipoElemento)?.some(opt => opt.condition?.id === idOpcion && !opt.condition?.id.includes('.')); // Excluir dependencias de repeater
                if (tieneDependientes) {
                    const scrollPos = jQuery('#barra-lateral-ajustes .simplebar-content-wrapper').scrollTop();
                    rellenarPanelAjustes(tipoElemento, elementoSeleccionado);
                    jQuery('#barra-lateral-ajustes .simplebar-content-wrapper').scrollTop(scrollPos);
                }

                jQuery('#modal-wysiwyg-editor').modal('hide');
            });

            jQuery(document).on('click', '.btn-edit-code', function () {
                if (!elementoSeleccionado) {
                    return;
                }

                const modal = jQuery('#modal-code-editor');
                currentCodeOptionId = jQuery(this).data('option-id');
                const language = jQuery(this).data('language') || 'javascript';

                const context = {
                    optionId: jQuery(this).data('option-id'),
                    elemento: elementoSeleccionado,
                    language: language
                };

                if (!currentCodeOptionId) {
                    Swal.fire('Error', 'No se pudo identificar la opción a editar.', 'error');
                    return;
                }

                modal.data('edit-context', context);
                if ($('#barra-lateral-ajustes').hasClass('activa')) {
                    $('#btn-ocultar-barra-ajustes').trigger('click');
                }
                jQuery('#modal-code-editor').modal('show');
            });

            jQuery('#modal-code-editor').on('shown.bs.modal', function () {
                const context = jQuery(this).data('edit-context');
                let currentValue = '';

                if (context && context.elemento && context.optionId) {
                    currentValue = context.elemento.data('setting-' + context.optionId) || '';
                }

                if (aceEditorInstance) {
                    const mode = context && context.language ? `ace/mode/${context.language}` : "ace/mode/javascript";
                    aceEditorInstance.session.setMode(mode);
                    aceEditorInstance.setValue(currentValue, -1);
                    aceEditorInstance.resize();
                    aceEditorInstance.focus();
                } else {
                    const textarea = jQuery('.code-editor-area', this);
                    textarea.removeClass('d-none').val(currentValue);
                    jQuery('#ace-code-editor').addClass('d-none');
                }
            });

            jQuery('#btn-save-code').on('click', function () {
                const modal = jQuery('#modal-code-editor');
                const context = modal.data('edit-context');

                let elementoAGuardar, optionId;
                if (elementoSeleccionado && currentCodeOptionId) {
                    elementoAGuardar = elementoSeleccionado;
                    optionId = currentCodeOptionId;
                } else if (context && context.elemento && context.optionId) {
                    elementoAGuardar = context.elemento;
                    optionId = context.optionId;
                } else {
                    Swal.fire('Error', 'No hay contexto de edición válido.', 'error');
                    modal.modal('hide');
                    return;
                }

                let nuevoValor = '';
                if (aceEditorInstance) {
                    nuevoValor = aceEditorInstance.getValue();
                } else {
                    const textarea = modal.find('.code-editor-area');
                    nuevoValor = textarea.val();
                }

                elementoAGuardar.data(`setting-${optionId}`, nuevoValor);
                elementoAGuardar.attr(`data-setting-${optionId}`, nuevoValor);

                const tipoElemento = elementoAGuardar.data('element-type');
                if (tipoElemento && tipoElemento !== 'section' && tipoElemento !== 'column') {
                    if (typeof actualizarVisualizacionInicial === 'function') {
                        actualizarVisualizacionInicial(elementoAGuardar, tipoElemento, elementoAGuardar.data());
                    }
                }

                modal.modal('hide');
            });

            jQuery(document).on('shown.bs.modal', '.note-modal', function () {
                jQuery(this).css('z-index', '9999');
                jQuery(this).find('.modal-dialog').css({
                    'max-width': '90%',
                    'width': 'auto'
                });
            });

            jQuery(document).on('click', '.note-link-btn', function () {
                setTimeout(() => {
                    const linkModal = jQuery('.note-modal');
                    if (linkModal.length) {
                        linkModal.css('z-index', '9999');
                        linkModal.find('.modal-dialog').css({
                            'max-width': '500px',
                            'width': 'auto'
                        });
                    }
                }, 50);
            });

            // --- Acciones de Botones ---
            $('.btn-guardar').on('click', function () {
                if (system_validarcampos("form_config_pagina")) {
                    const validacionResultado = validarEstructuraMinima();
                    if (validacionResultado !== true) {
                        Swal.fire({
                            title: 'Estructura Incompleta',
                            html: validacionResultado,
                            icon: 'error',
                        });
                        return;
                    }

                    const pageStructure = obtenerEstructuraDePagina();
                    const paginaId = paginaIdActual || null;
                    Mostrarloader();

                    axios.post('/home/procesar/pagina', {
                        page_content: pageStructure,
                        page_id: paginaId,
                        data_form: getDataJson("form_config_pagina")
                    }).then(function (resp) {
                        Ocultarloader();
                        if (resp.data && resp.data.error === 0) {
                            Swal.fire("La estructura de la página se ha guardado correctamente.", "", 'success')
                        } else {
                            Swal.fire(resp.data.mensaje, '', 'info');
                        }
                    })
                } else {
                    Swal.fire("Faltan datos por rellenar en tus configuraciones", "", 'info')
                }
            });


            // Botón: Agregar Sección
            $('#btn-agregar-seccion').on('click', function () {
                const plantillaNuevaSeccion = $('#plantilla-seccion').prop('content');
                if (!plantillaNuevaSeccion) {
                    Swal.fire('Error', 'No se encontró la plantilla de sección.', 'error');
                    return;
                }
                contadorSecciones++;
                const nuevaSeccion = $(plantillaNuevaSeccion).clone(true, true);
                const elementoSeccion = nuevaSeccion.find('.seccion-constructor');
                const idUnico = generarIdUnico('sec');
                elementoSeccion.attr('data-element-id', idUnico)
                    .attr('data-section-id', idUnico)
                    .attr('data-element-type', 'section');

                // Aplicar settings por defecto de 'section'
                let settingsSeccion = {};
                const definicionSeccion = obtenerDefinicionCompletaElemento('section');
                if (definicionSeccion && definicionSeccion.options) {
                    definicionSeccion.options.forEach(opcion => {
                        if (opcion.default !== undefined) settingsSeccion[opcion.id] = opcion.default;
                    });
                }
                aplicarSettingsIniciales(elementoSeccion, settingsSeccion, 'section');

                lienzo.append(elementoSeccion);
                $('html, body').animate({scrollTop: elementoSeccion.offset().top - 100}, 300);
            });

            // Botón: Eliminar Sección
            lienzo.on('click', '.btn-eliminar-seccion', function (e) {
                e.stopPropagation();
                const seccionAEliminar = $(this).closest('.seccion-constructor');
                Swal.fire({title: '¿Eliminar Sección?', text: "¡Esto eliminará la sección y todo su contenido!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#3085d6', confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar'}).then((result) => {
                    if (result.isConfirmed) {
                        const estabaSeleccionado = seccionAEliminar.is(elementoSeleccionado);
                        seccionAEliminar.remove();
                        if (estabaSeleccionado) limpiarSeleccion();
                    }
                })
            });

            // Botón: Elegir Diseño de Columnas (Modal)
            lienzo.on('click', '.btn-elegir-diseno', function (e) {
                e.stopPropagation();
                seccionSeleccionadaParaDiseno = $(this).closest('.seccion-constructor');
                modalDisenoColumnas.modal('show');
            });

            // Clic en Opción de Diseño en Modal
            $('#modal-diseno-columnas').on('click', '.opcion-diseno', function () {
                const valorDiseno = $(this).attr('data-layout');
                if (seccionSeleccionadaParaDiseno && valorDiseno) {
                    aplicarDisenoColumnas(seccionSeleccionadaParaDiseno, valorDiseno);
                    seccionSeleccionadaParaDiseno.data('setting-column_layout', valorDiseno)
                        .attr('data-setting-column_layout', valorDiseno);
                    // Actualizar panel de ajustes si la sección estaba seleccionada
                    if (elementoSeleccionado && elementoSeleccionado.is(seccionSeleccionadaParaDiseno)) {
                        rellenarPanelAjustes('section', elementoSeleccionado);
                    }
                }
                modalDisenoColumnas.modal('hide');
                seccionSeleccionadaParaDiseno = null;
            });

            // Clic en Elemento del Lienzo para seleccionar
            lienzo.on('click', '.seccion-constructor, .columna-constructor, .elemento-constructor, .columna-anidada', function (e) {
                e.stopPropagation();
                const elementoClickeado = $(this);
                if (elementoClickeado.is(elementoSeleccionado)) {
                    abrirBarraLateralAjustes();
                    return;
                }
                limpiarSeleccion();
                elementoSeleccionado = elementoClickeado;
                elementoSeleccionado.addClass('seleccionado');
                let tipoElemento = elementoSeleccionado.attr('data-element-type');
                if (tipoElemento) {
                    rellenarPanelAjustes(tipoElemento, elementoSeleccionado);
                } else {
                    $('#contenido-barra-lateral-ajustes').html('<p class="text-light">Error: Tipo desconocido.</p>');
                    abrirBarraLateralAjustes();
                }
            });

            // Clic en botones de Ajustes
            lienzo.on('click', '.btn-ajustes-seccion, .btn-ajustes-elemento', function (e) {
                e.stopPropagation();
                $(this).closest('.seccion-constructor, .elemento-constructor').trigger('click');
            });
            // Clic en botón Ajustes de Columna
            lienzo.on('click', '.btn-ajustes-columna-anidada', function (e) {
                e.stopPropagation();
                $(this).closest('.columna-anidada').trigger('click');
            });

            // Clic fuera de elementos para deseleccionar y cerrar barras
            $(document).on('click', function (e) {
                const $target = $(e.target);
                const esControlSuperior = $target.closest('#controles-superiores').length > 0; // Asume un ID para los botones superiores
                const esDentroLienzoInteractuable = $target.closest('#lienzo-constructor-pagina .seccion-constructor').length > 0;
                const esDentroBarraAjustes = $target.closest('#barra-lateral-ajustes').length > 0;
                const esDentroBarraElementos = $target.closest('#barra-lateral-izquierda-elementos').length > 0;
                const esDentroModal = $target.closest('.modal').length > 0;
                const esControlApertura = $target.is('#btn-mostrar-barra-elementos, #btn-mostrar-barra-ajustes') || $target.closest('#btn-mostrar-barra-elementos, #btn-mostrar-barra-ajustes').length > 0;

                if (!esControlSuperior && !esDentroLienzoInteractuable && !esDentroBarraAjustes && !esDentroBarraElementos && !esDentroModal && !esControlApertura) {
                    limpiarSeleccion();
                    // Cerrar barras si están activas
                    if ($('#barra-lateral-izquierda-elementos').hasClass('activa')) {
                        $('#btn-ocultar-barra-elementos').trigger('click');
                    }
                    if ($('#barra-lateral-ajustes').hasClass('activa')) {
                        $('#btn-ocultar-barra-ajustes').trigger('click');
                    }
                }
            });

            // Evento 'change' o 'input' en panel de ajustes (PRINCIPAL)
            $(document).on('input change', '#contenido-barra-lateral-ajustes > .campo-ajuste .entrada-ajuste, #contenido-barra-lateral-ajustes > .campo-ajuste .entrada-dimension', function (e) {
                const elementoEntrada = $(this);
                if (elementoEntrada.closest('.repeater-control').length > 0) return;
                const campoAjuste = elementoEntrada.closest('.campo-ajuste');
                const idOpcion = campoAjuste.data('option-id');

                if (idOpcion && elementoSeleccionado) {
                    if (e.type === 'input' && (elementoEntrada.is('select') || elementoEntrada.attr('type') === 'checkbox' || elementoEntrada.attr('type') === 'color')) return;
                    if (e.type === 'change' && !(elementoEntrada.is('select') || elementoEntrada.attr('type') === 'checkbox' || elementoEntrada.attr('type') === 'color')) return;
                    aplicarCambioAjuste(elementoEntrada, idOpcion);
                    if (idOpcion === 'column_layout' && elementoSeleccionado.hasClass('seccion-constructor') || elementoSeleccionado.hasClass('constructor-nested_columns') && e.type === 'change') {
                        const nuevoValorDiseno = elementoEntrada.val();
                        if (elementoSeleccionado.hasClass('constructor-nested_columns')) {
                            aplicarDisenoColumnasAnidadas(elementoSeleccionado, nuevoValorDiseno)
                        } else {
                            aplicarDisenoColumnas(elementoSeleccionado, nuevoValorDiseno);
                        }
                    }
                }
            });

            // --- Botones Barras Laterales ---
            $('#btn-mostrar-barra-elementos').on('click', function (e) {
                e.stopPropagation();
                const isActive = barraLateralIzquierda.hasClass('activa');
                if (barraLateralDerecha.hasClass('activa')) {
                    barraLateralDerecha.removeClass('activa');
                    lienzo.removeClass('barra-lateral-derecha-activa');
                }
                barraLateralIzquierda.toggleClass('activa', !isActive);
                lienzo.toggleClass('barra-lateral-izquierda-activa', !isActive);
            });
            $('#btn-ocultar-barra-elementos').on('click', function (e) {
                e.stopPropagation();
                barraLateralIzquierda.removeClass('activa');
                lienzo.removeClass('barra-lateral-izquierda-activa');
            });

            // Barra de Ajustes
            $('#btn-mostrar-barra-ajustes').on('click', function (e) {
                e.stopPropagation();
                const isActive = barraLateralDerecha.hasClass('activa');
                if (barraLateralIzquierda.hasClass('activa')) {
                    barraLateralIzquierda.removeClass('activa');
                    lienzo.removeClass('barra-lateral-izquierda-activa');
                }
                barraLateralDerecha.toggleClass('activa', !isActive);
                lienzo.toggleClass('barra-lateral-derecha-activa', !isActive);
                if (!isActive && elementoSeleccionado) {
                    rellenarPanelAjustes(elementoSeleccionado.attr('data-element-type'), elementoSeleccionado);
                } else if (!isActive && !elementoSeleccionado) {
                    $('#contenido-barra-lateral-ajustes').html('<p class="text-light">Selecciona un elemento para ver sus ajustes.</p>');
                }
            });
            $('#btn-ocultar-barra-ajustes').on('click', function (e) {
                e.stopPropagation();
                barraLateralDerecha.removeClass('activa');
                lienzo.removeClass('barra-lateral-derecha-activa');
            });

            // Clic en botón para añadir elemento desde barra izquierda
            $('#barra-lateral-izquierda-elementos').on('click', '.boton-anadir-elemento', function (e) {
                // Si se está arrastrando, no ejecutar el click
                if ($(this).hasClass('ui-draggable-dragging')) {
                    return;
                }

                const tipoElemento = $(this).data('element-type');

                // Verificar si hay una selección válida (columna normal o anidada)
                if (!elementoSeleccionado ||
                    !(elementoSeleccionado.hasClass('columna-constructor') ||
                        elementoSeleccionado.hasClass('columna-anidada') ||
                        elementoSeleccionado.find('.columna-constructor').length > 0 ||
                        elementoSeleccionado.find('.columna-anidada').length > 0)) {

                    // Intentar seleccionar la primera columna de la última sección si no hay selección
                    const ultimaSeccion = lienzo.find('.seccion-constructor:last');
                    let columnaEncontrada = null;

                    // Buscar primero columnas normales
                    columnaEncontrada = ultimaSeccion.find('.columna-constructor:first');
                    if (!columnaEncontrada.length) {
                        // Buscar columnas anidadas
                        columnaEncontrada = ultimaSeccion.find('.columna-anidada:first');
                    }

                    if (columnaEncontrada.length > 0) {
                        elementoSeleccionado = columnaEncontrada;
                        elementoSeleccionado.addClass('seleccionado');
                    } else {
                        Swal.fire('¡Atención!', 'Por favor, selecciona o crea primero una columna donde añadir el elemento.', 'warning');
                        return;
                    }
                }

                // Si la selección era una sección, buscar su primera columna
                if (elementoSeleccionado.hasClass('seccion-constructor')) {
                    let columnaEncontrada = elementoSeleccionado.find('.columna-constructor:first');
                    if (!columnaEncontrada.length) {
                        columnaEncontrada = elementoSeleccionado.find('.columna-anidada:first');
                    }

                    if (columnaEncontrada.length > 0) {
                        elementoSeleccionado = columnaEncontrada;
                    } else {
                        Swal.fire('¡Atención!', 'La sección seleccionada no tiene columnas. Añade un diseño de columnas primero.', 'warning');
                        return;
                    }
                }

                // Usar la función crearYAnadirElemento
                crearYAnadirElemento(tipoElemento, elementoSeleccionado);
            });

            // Botón: Eliminar Elemento
            lienzo.on('click', '.btn-eliminar-elemento', function (e) {
                e.stopPropagation();
                const elementoAEliminar = $(this).closest('.elemento-constructor');
                Swal.fire({title: '¿Eliminar Elemento?', text: "Esta acción no se puede deshacer.", icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#6c757d', confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar'}).then((result) => {
                    if (result.isConfirmed) {
                        const columnaPadre = elementoAEliminar.closest('.columna-constructor');
                        const estabaSeleccionado = elementoAEliminar.is(elementoSeleccionado);
                        elementoAEliminar.remove();
                        if (estabaSeleccionado) limpiarSeleccion();
                        if (columnaPadre.length && columnaPadre.find('.elemento-constructor').length === 0) {
                            if (columnaPadre.hasClass('columna-anidada')) {
                                columnaPadre.find('.marcador-posicion-columna-anidada').show();
                            } else if (columnaPadre.hasClass('columna-constructor')) {
                                columnaPadre.find('.marcador-posicion-columna').show();
                            }
                        }
                    }
                });
            });

            // Botón: Duplicar Elemento
            lienzo.on('click', '.btn-duplicar-elemento', function (e) {
                e.stopPropagation();
                const elementoOriginal = $(this).closest('.elemento-constructor');
                const elementoClonado = elementoOriginal.clone(true, true);
                const idUnico = generarIdUnico('el');
                const tipoElemento = elementoOriginal.attr('data-element-type');

                elementoClonado.removeClass('seleccionado')
                    .attr('data-element-id', idUnico);

                const settingsOriginales = extraerAjustes(elementoOriginal, tipoElemento);
                // Clonar profundamente los settings para evitar referencias compartidas
                let settingsClonados = {};
                try {
                    settingsClonados = JSON.parse(JSON.stringify(settingsOriginales));
                } catch (err) {
                    settingsClonados = $.extend(true, {}, settingsOriginales);
                } // Fallback con jQuery extend

                aplicarSettingsIniciales(elementoClonado, settingsClonados, tipoElemento);
                actualizarVisualizacionInicial(elementoClonado, tipoElemento, elementoClonado.data());

                elementoOriginal.after(elementoClonado);
            });


            // Botón: Añadir Item al Carrusel
            $(document).on('click', '.btn-add-repeater-item', function () {
                if (!elementoSeleccionado) {
                    return;
                }

                const $button = $(this);
                const $controlRepeater = $button.closest('.repeater-control');
                const optionId = $controlRepeater.data('option-id');
                const repeaterIdAttr = $controlRepeater.attr('id');

                if (!optionId || !repeaterIdAttr) {
                    Swal.fire('Error', 'No se pudo identificar la opción o el contenedor del repeater.', 'error');
                    return;
                }

                const repeaterItemsContainer = $controlRepeater.find('.repeater-items');
                if (!repeaterItemsContainer.length) {
                    return;
                }

                const currentIndex = repeaterItemsContainer.children('.repeater-item').length;
                const idEntradaBase = repeaterIdAttr.replace('-repeater', ''); // Derivar ID base del ID del contenedor


                const definicionOpcion = obtenerOpcionesElemento(elementoSeleccionado.data('element-type'))?.find(o => o.id === optionId);
                if (!definicionOpcion || !definicionOpcion.fields) {
                    Swal.fire('Error de Configuración', `No se encontró la definición de campos para '${optionId}'.`, 'error');
                    return;
                }

                // Crear objeto con datos por defecto para el nuevo item
                const defaultItemData = {};
                definicionOpcion.fields.forEach(field => {
                    if (field.default !== undefined) {
                        defaultItemData[field.id] = (typeof field.default === 'object' && field.default !== null)
                            ? JSON.parse(JSON.stringify(field.default))
                            : field.default;
                    } else {
                        if (field.type === 'toggle') defaultItemData[field.id] = false;
                        else if (field.type === 'number') defaultItemData[field.id] = null;
                        else if (field.type === 'select' && field.allow_empty) defaultItemData[field.id] = '';
                        else if (field.type === 'object' || field.type === 'dimensions') defaultItemData[field.id] = {};
                        else if (field.type === 'repeater') defaultItemData[field.id] = [];
                        else defaultItemData[field.id] = '';
                    }
                });

                const newItemHtml = renderizarCarruselItem(definicionOpcion.fields, defaultItemData, currentIndex, idEntradaBase, optionId, elementoSeleccionado.data('element-type'));

                repeaterItemsContainer.append(newItemHtml);

                actualizarDatosCarrusel(elementoSeleccionado, optionId);
            });

            // Boton de borrar item del carrusel
            $(document).on('click', '.btn-remove-repeater-item', function () {
                if (!elementoSeleccionado) {
                    return;
                }
                const $item = $(this).closest('.repeater-item');
                const $container = $item.parent();
                const optionId = $container.closest('.repeater-control').data('option-id');

                if (!optionId) {
                    Swal.fire('Error', 'No se pudo identificar la opción del repeater.', 'error');
                    return;
                }

                Swal.fire({
                    title: '¿Eliminar este elemento?',
                    text: "Esta acción no se puede deshacer.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Sí, eliminar',
                    cancelButtonText: 'Cancelar',
                }).then((result) => {
                    if (result.isConfirmed) {
                        $item.remove();

                        $container.children('.repeater-item').each(function (newIndex) {
                            $(this).attr('data-index', newIndex);
                        });

                        actualizarDatosCarrusel(elementoSeleccionado, optionId);
                    }
                });
            });

            // Input Change para cada ajuste sobre el carrusel
            $(document).on('input change', '.entrada-ajuste-repeater', function (e) {
                if (!elementoSeleccionado) {
                    return;
                }

                const $input = $(this);
                const $controlRepeater = $input.closest('.repeater-control');
                const $campo = $input.closest('.campo-ajuste-repeater');
                const $item = $campo.closest('.repeater-item');

                const optionId = $controlRepeater.data('option-id');
                const fieldIdChanged = $campo.data('field-id');

                if (!optionId) {
                    return;
                }

                // Llama a actualizarDatosCarrusel SIEMPRE que cambie un input del repeater.
                // Esta función leerá TODOS los items y actualizará el atributo del elemento principal.
                actualizarDatosCarrusel(elementoSeleccionado, optionId);

                $item.find('.campo-ajuste-repeater').each(function () {
                    const $otherCampo = $(this);
                    const conditionId = $otherCampo.data('condition-id');

                    if (conditionId === fieldIdChanged) {
                        let requiredValueRaw = decodeURIComponent(($otherCampo.data('condition-value') + ''));

                        let requiredValue;
                        try {
                            requiredValue = JSON.parse(requiredValueRaw.replace(/'/g, '"'));
                        } catch (e) {
                            requiredValue = requiredValueRaw;
                        }

                        let currentValue;
                        const $triggerInput = $campo.find('.entrada-ajuste-repeater').first();
                        if ($triggerInput.is(':checkbox')) {
                            currentValue = $triggerInput.prop('checked');
                        } else {
                            currentValue = $triggerInput.val();
                            if (currentValue === 'true') currentValue = true;
                            else if (currentValue === 'false') currentValue = false;
                        }

                        let shouldBeVisible;
                        if (Array.isArray(requiredValue)) {
                            shouldBeVisible = requiredValue.includes(String(currentValue));
                        } else if (requiredValue === '!null') {
                            shouldBeVisible = currentValue !== null && currentValue !== undefined && currentValue !== '';
                        } else if (requiredValue === true) {
                            shouldBeVisible = currentValue === true;
                        } else if (requiredValue === false) {
                            shouldBeVisible = currentValue === false || currentValue === undefined || currentValue === null || currentValue === '';
                        } else {
                            shouldBeVisible = String(currentValue) === String(requiredValue);
                        }

                        $otherCampo.toggleClass('d-none', !shouldBeVisible);
                    }
                });

                const fieldDef = obtenerOpcionesElemento(elementoSeleccionado.data('element-type'))
                    ?.find(o => o.id === optionId)?.fields?.find(f => f.id === fieldIdChanged);

                if (fieldDef?.type === 'media_upload') {
                    const previewContainer = $input.siblings('.mt-1');
                    if (previewContainer.length) {
                        const previewImg = previewContainer.find('img');
                        const errorMsg = previewContainer.find('small');
                        const valorActualCampo = $input.val();

                        if (previewImg.length) {
                            if (valorActualCampo && typeof valorActualCampo === 'string' && valorActualCampo.startsWith('http')) {
                                previewImg.attr('src', valorActualCampo).show();
                                if (errorMsg.length) errorMsg.hide();
                            } else {
                                previewImg.hide().attr('src', '');
                                if (errorMsg.length) errorMsg.hide();
                            }
                        }
                    }
                }
            });

            $(document).on('change', '.link-tipo-selector', function () {
                const tipo = $(this).val();
                const inputId = $(this).data('target-link');
                const selectListado = $(this).siblings('.link-listado-selector');
                const inputLink = $('#' + inputId);

                selectListado.empty();

                if (tipo) {
                    inputLink.prop('readonly', true);
                } else {
                    inputLink.prop('readonly', false);
                    inputLink.val('').trigger('input').trigger('change');
                    selectListado.hide();
                    return;
                }

                const data = tipo === 'cms' ? listadoCms : listadoLanding;
                if (!Array.isArray(data)) return;

                data.forEach(item => {
                    const url = item.seo_url || item.url_seo;
                    selectListado.append(
                        `<option class="bg-dark" value="${url}">${item.titulo}</option>`
                    );
                });

                if (data.length) {
                    inputLink.val(data[0].seo_url || data[0].url_seo)
                        .trigger('input')
                        .trigger('change');
                }

                selectListado.show();
            });

            $(document).on('change', '.link-listado-selector', function () {
                const url = $(this).val();
                const inputId = $(this).data('target-link');
                $('#' + inputId).val(url)
                    .trigger('input')
                    .trigger('change');
            });

            $(document).on('change', '.repeater-item .link-tipo-selector', function () {
                const tipo = $(this).val();
                const contenedorItem = $(this).closest('.repeater-item');

                const inputLink = contenedorItem
                    .find('[data-field-id="button_link"] input[type="text"]');

                const selectListado = $(this).siblings('.link-listado-selector');

                selectListado.empty();

                if (tipo) {
                    inputLink.prop('readonly', true);
                } else {
                    inputLink.prop('readonly', false);
                    inputLink.val('').trigger('input').trigger('change');
                    selectListado.hide();
                    return;
                }

                const data = tipo === 'cms' ? listadoCms : listadoLanding;
                if (!Array.isArray(data)) return;

                data.forEach(item => {
                    const url = item.seo_url || item.url_seo;
                    selectListado.append(
                        `<option class="bg-dark" value="${url}">${item.titulo}</option>`
                    );
                });

                if (data.length) {
                    inputLink.val(data[0].seo_url || data[0].url_seo)
                        .trigger('input')
                        .trigger('change');
                }

                selectListado.show();
            });

            $(document).on('change', '.repeater-item .link-listado-selector', function () {
                const url = $(this).val();
                const contenedorItem = $(this).closest('.repeater-item');

                const inputLink = contenedorItem
                    .find('[data-field-id="button_link"] input[type="text"]');

                inputLink.val(url)
                    .trigger('input')
                    .trigger('change');
            });
        });
    </script>
@endsection