@php
    $token = \Illuminate\Support\Str::random(40);
    $initialValue = $value;
    if (is_array($value)) {
        $initialValue = json_encode($value);
    }
    if (empty($initialValue) || $initialValue === 'null') {
        $initialValue = '[]';
    }

    $sectionTypes = \V2\Services\LandingSectionsEditor\Services\LandingSectionsEditorRendererService::getSectionTypes();
@endphp

@include('v2-service-contentricheditor::components.forms.content-rich-editor', ['assets_only' => true])

@include('v2-service-landingsectionseditor::components.forms.logic.styles')

<div class="mb-3 position-relative">
    @if(!empty($label))
        <label for="landing-sections-hidden-{{ $name }}" class="form-label fw-bold">{{ $label }}</label>
    @endif

    {{-- Input hidden principal que conterá o JSON serializado das seções --}}
    <input type="hidden" name="{{ $name }}" id="landing-sections-hidden-{{ $name }}" value="{{ $initialValue }}">

    <div class="lse-container-{{ $name }}">
        <!-- Painel Esquerdo: Lista de Seções -->
        <div class="lse-sidebar-{{ $name }}">
            <!-- Ações Principais -->
            <div class="mb-3">
                <div class="dropdown w-100 mb-2">
                    <button type="button" class="btn btn-primary btn-sm w-100 dropdown-toggle fw-bold d-inline-flex align-items-center justify-content-center gap-1" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="bi bi-plus-lg"></i> ADICIONAR SEÇÃO
                    </button>
                    @php
                        $customPrefixes = ['sucesu-', 'sobre-nos-'];
                        $customTypes = [];
                        $standardTypes = [];
                        foreach ($sectionTypes as $type => $details) {
                            $isCustom = false;
                            foreach ($customPrefixes as $prefix) {
                                if (strpos($type, $prefix) === 0) { $isCustom = true; break; }
                            }
                            if ($isCustom) {
                                $customTypes[$type] = $details;
                            } else {
                                $standardTypes[$type] = $details;
                            }
                        }
                    @endphp
                    <ul class="dropdown-menu w-100" style="max-height: 350px; overflow-y: auto;">
                        <li><h6 class="dropdown-header text-uppercase small text-muted"><i class="bi bi-box me-1"></i> Padrão</h6></li>
                        @foreach($standardTypes as $type => $details)
                            <li>
                                <a href="#" class="dropdown-item btn-add-section-{{ $name }} d-flex align-items-center gap-2" data-type="{{ $type }}">
                                    <i class="{{ $details['icon'] }} text-secondary"></i> {{ $details['title'] }}
                                </a>
                            </li>
                        @endforeach
                        @if(!empty($customTypes))
                            <li><hr class="dropdown-divider"></li>
                            <li><h6 class="dropdown-header text-uppercase small text-muted"><i class="bi bi-star-fill me-1 text-warning"></i> Personalizados</h6></li>
                            @foreach($customTypes as $type => $details)
                                <li>
                                    <a href="#" class="dropdown-item btn-add-section-{{ $name }} d-flex align-items-center gap-2" data-type="{{ $type }}">
                                        <i class="{{ $details['icon'] }} text-warning"></i> {{ $details['title'] }}
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>

            <hr class="my-3">

            <!-- Listagem Reordenável de Seções -->
            <div id="section-list-{{ $name }}">
                <!-- Renderizado via JS -->
            </div>
        </div>

        <!-- Painel Direito: Iframe do Live Preview -->
        <div class="lse-preview-{{ $name }}">
            <iframe id="preview-iframe-{{ $name }}" src="about:blank" title="Visualização em tempo real"></iframe>
        </div>
    </div>
</div>

@include('v2-service-landingsectionseditor::components.forms.logic.section-modal')

@include('v2-service-gallery::components.gallery-picker', ['name' => 'lse_global_media_picker', 'ownerModule' => 'landing_page', 'allowedMimeTypes' => ['image/*'], 'allowShared' => true])

@push('scripts')
    <script>
    $(document).ready(function() {
        window.reindexTiptapWrapper = ($item, wrapperSelector, name) => {
            const $wrapper = $item.find(wrapperSelector);
            if ($wrapper.length === 0) return;
            
            $wrapper.attr('id', 'wrapper-' + name);
            $wrapper.attr('data-name', name);
            $wrapper.removeAttr('data-initialized');
            if ($wrapper[0] && $wrapper[0].dataset) {
                delete $wrapper[0].dataset.initialized;
            }
            $wrapper.find('label').attr('for', 'input-' + name).attr('id', 'label-' + name);
            $wrapper.find('input[type="hidden"]').attr('id', 'input-' + name).attr('name', name);
            $wrapper.find('header').attr('id', 'toolbar-' + name);
            $wrapper.find('.editor-element').attr('id', 'editor-' + name).empty();
        };

        // IIFE para isolar as variáveis do editor e evitar colisão de escopos
        (() => {
            const name = "{{ $name }}";
            const previewToken = "{{ $token }}";
            const csrfToken = "{{ csrf_token() }}";
            
            // URLs das rotas internas
            const urls = {
                getForm: "{{ route('v2.landing-sections.form') }}",
                validate: "{{ route('v2.landing-sections.validate') }}",
                savePreview: "{{ route('v2.landing-sections.preview.save') }}",
                renderPreview: "{{ route('v2.landing-sections.preview.render') }}?token=" + previewToken,
                mediaList: "{{ route('v2.landing-sections.media.index') }}",
                mediaStore: "{{ route('v2.landing-sections.media.store') }}",
                renderSection: "{{ route('v2.landing-sections.render-section') }}"
            };

            // Lista estática de dados das seções para renderização local da sidebar
            const sectionTypesData = @json($sectionTypes);

            // Estado local das seções (matriz em memória)
            let sections = [];
            let currentType = '';
            let currentSectionId = '';
            let activeImageInputId = null;
            let previewDebounceTimer = null;

            // Tenta carregar o estado inicial
            @include('v2-service-landingsectionseditor::components.forms.logic.state-loader')

            // Métodos de Preview
            @include('v2-service-landingsectionseditor::components.forms.logic.preview-manager')

            // Métodos de Mídia
            @include('v2-service-landingsectionseditor::components.forms.logic.media-manager')

            // Métodos de Seção e Gerenciamento
            @include('v2-service-landingsectionseditor::components.forms.logic.sections-manager')

            // Inicializa o editor
            init();

        })();
    });
    </script>
@endpush