{{--
    @intent Sidebar "File Library" do Editor Estrutural.
    @description Widget lateral exibindo assets (CSS, JS, imagens) com cópia rápida e upload inline.
    @vars $assets (Collection|null) — se não passado, carrega via AJAX.
--}}
<div class="card shadow-sm border-0 sle-asset-sidebar">
    <div class="card-header bg-light p-0 border-bottom-0">
        <ul class="nav nav-tabs border-bottom-0" id="sleSidebarTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link py-3 px-3 small active"
                        id="sbar-css-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#sbar-css"
                        type="button"
                        role="tab">
                    <i class="bi bi-filetype-css me-1"></i> CSS
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link py-3 px-3 small"
                        id="sbar-js-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#sbar-js"
                        type="button"
                        role="tab">
                    <i class="bi bi-filetype-js me-1"></i> JS
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link py-3 px-3 small"
                        id="sbar-img-tab"
                        data-bs-toggle="tab"
                        data-bs-target="#sbar-img"
                        type="button"
                        role="tab">
                    <i class="bi bi-image me-1"></i> Img
                </button>
            </li>
        </ul>
    </div>

    <div class="card-body p-2">
        <div class="d-flex align-items-center mb-2">
            <span class="fw-bold small text-muted">
                <i class="bi bi-folder-plus me-1"></i> File Library
            </span>
        </div>
        <div class="tab-content" id="sleSidebarTabsContent">

            {{-- ── Aba CSS ──────────────────────────────────── --}}
            <div class="tab-pane fade show active" id="sbar-css" role="tabpanel">
                <div class="sle-sbar-list" data-asset-type="css">
                    <p class="text-muted small text-center py-2 mb-0">
                        <i class="bi bi-inbox"></i> Carregando...
                    </p>
                </div>
                <button class="btn btn-sm btn-outline-primary w-100 mt-1 sle-sbar-upload-toggle"
                        data-target="sbar-css-upload">
                    <i class="bi bi-upload"></i> Upload CSS
                </button>
                <div id="sbar-css-upload" class="mt-1 sle-sbar-upload-form" style="display:none;">
                    <form action="{{ route('v2.structural-editor.assets.upload') }}"
                          method="POST"
                          enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="type" value="css">
                        <div class="input-group input-group-sm">
                            <input type="file" name="file" class="form-control form-control-sm" accept=".css" required>
                            <button class="btn btn-primary btn-sm" type="submit" aria-label="Confirmar"><i class="bi bi-check"></i></button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- ── Aba JS ───────────────────────────────────── --}}
            <div class="tab-pane fade" id="sbar-js" role="tabpanel">
                <div class="sle-sbar-list" data-asset-type="js">
                    <p class="text-muted small text-center py-2 mb-0">
                        <i class="bi bi-inbox"></i> Carregando...
                    </p>
                </div>
                <button class="btn btn-sm btn-outline-primary w-100 mt-1 sle-sbar-upload-toggle"
                        data-target="sbar-js-upload">
                    <i class="bi bi-upload"></i> Upload JS
                </button>
                <div id="sbar-js-upload" class="mt-1 sle-sbar-upload-form" style="display:none;">
                    <form action="{{ route('v2.structural-editor.assets.upload') }}"
                          method="POST"
                          enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="type" value="js">
                        <div class="input-group input-group-sm">
                            <input type="file" name="file" class="form-control form-control-sm" accept=".js" required>
                            <button class="btn btn-primary btn-sm" type="submit" aria-label="Confirmar"><i class="bi bi-check"></i></button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- ── Aba Imagens ──────────────────────────────── --}}
            <div class="tab-pane fade" id="sbar-img" role="tabpanel">
                <div class="sle-sbar-list" data-asset-type="image">
                    <p class="text-muted small text-center py-2 mb-0">
                        <i class="bi bi-inbox"></i> Carregando...
                    </p>
                </div>

                <button type="button"
                        class="btn btn-sm btn-outline-primary w-100 mt-1"
                        id="sleSbarGalleryBtn">
                    <i class="bi bi-images"></i> Selecionar da Galeria
                </button>
            </div>

        </div>
    </div>
{{-- Gallery Picker Modal — usado pela aba Img --}}
@php
    $slePickerId = 'picker_sle_sidebar';
@endphp
@include('v2-service-gallery::components.gallery-picker', [
    'name'             => $slePickerId,
    'ownerModule'      => 'sle',
    'allowedMimeTypes' => ['image/*'],
    'allowShared'      => true,
])

{{-- Fallback: Se o jQuery nao estiver carregado, carrega antes da galeria --}}
@push('scripts')
<script src="{{ asset('assets/vendor/jquery/jquery-3.7.1.min.js') }}" defer></script>
@endpush
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {

        // ── Toggle upload form ──────────────────────────────────
        document.querySelectorAll('.sle-sbar-upload-toggle').forEach(function (btn) {
            btn.addEventListener('click', function () {
                var targetId = this.dataset.target;
                var form = document.getElementById(targetId);
                if (form) {
                    var isHidden = form.style.display === 'none';
                    form.style.display = isHidden ? 'block' : 'none';
                    btn.innerHTML = isHidden
                        ? '<i class="bi bi-x"></i> Cancelar'
                        : '<i class="bi bi-upload"></i> Upload CSS';
                }
            });
        });

        // ── Gallery Picker: abrir ao clicar em "Selecionar da Galeria" ──
        var galleryBtn = document.getElementById('sleSbarGalleryBtn');
        if (galleryBtn) {
            galleryBtn.addEventListener('click', function () {
                var checkJq = setInterval(function () {
                    if (typeof jQuery !== 'undefined') {
                        clearInterval(checkJq);

                        var cleanName = '{{ $slePickerId }}'.replace(/\[|\]/g, '_').replace(/__+/g, '_');
                        window.dispatchEvent(new CustomEvent('lotep:open-gallery-picker-' + cleanName, {
                            detail: {
                                callback: function (id, url, alt, mimeType, description) {
                                    createAssetFromGallery(id, alt);
                                }
                            }
                        }));
                    }
                }, 100);

                setTimeout(function () { clearInterval(checkJq); }, 5000);
            });
        }

        function createAssetFromGallery(galleryId, altText) {
            var formData = new FormData();
            formData.append('gallery_media_id', galleryId);
            formData.append('alt_text', altText || '');
            formData.append('_token', '{{ csrf_token() }}');

            var uploadUrl = '{{ route('v2.structural-editor.assets.from-gallery') }}';

            fetch(uploadUrl, {
                method: 'POST',
                credentials: 'same-origin',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' },
                body: formData
            })
            .then(function (resp) {
                if (!resp.ok) { throw new Error('Erro no servidor'); }
                return resp.json();
            })
            .then(function (data) {
                if (data.success) {
                    refreshTab('image');
                } else {
                    alert('Erro: ' + (data.message || 'desconhecido'));
                }
            })
            .catch(function () {
                alert('Erro de conexao ao criar asset da galeria.');
            });
        }

        // ── Toggle sidebar ─────────────────────────────────────
        var toggleBtn = document.getElementById('sleSidebarToggle');
        var sidebar = document.querySelector('.sle-asset-sidebar');
        var mainCol = document.querySelector('.sle-editor-main');
        var sideCol = document.querySelector('.sle-editor-side');

        if (toggleBtn && sidebar && mainCol && sideCol) {
            toggleBtn.addEventListener('click', function () {
                var hidden = sidebar.dataset.hidden === 'true';
                sidebar.dataset.hidden = hidden ? 'false' : 'true';
                sidebar.style.display = hidden ? '' : 'none';
                mainCol.className = hidden ? 'col-lg-12 sle-editor-main' : 'col-lg-9 sle-editor-main';
                sideCol.className = hidden ? 'd-none' : 'col-lg-3 sle-editor-side';
                toggleBtn.innerHTML = hidden
                    ? '<i class="bi bi-layout-sidebar-reverse"></i>'
                    : '<i class="bi bi-layout-sidebar"></i>';
            });
        }

        // ── Load assets via AJAX ────────────────────────────────
        var loaders = {};

        function loadAssetList(type, container) {
            var url = '{{ route('v2.structural-editor.assets') }}?type=' + encodeURIComponent(type);

            fetch(url, { headers: { 'Accept': 'text/html' } })
                .then(function (resp) { return resp.text(); })
                .then(function (html) {
                    var parser = new DOMParser();
                    var doc = parser.parseFromString(html, 'text/html');
                    var cards = doc.querySelectorAll('.sle-asset-card[data-asset-type="' + type + '"]');

                    if (cards.length === 0) {
                        container.innerHTML = '<p class="text-muted small text-center py-2 mb-0"><i class="bi bi-inbox"></i> Vazio</p>';
                        return;
                    }

                    container.innerHTML = '';
                    cards.forEach(function (card) {
                        card.querySelector('.btn-outline-danger')?.remove();
                        card.querySelector('.copy-snippet-btn')?.remove();

                        var snippetBar = card.querySelector('.sle-snippet-bar');
                        if (snippetBar) {
                            snippetBar.className = snippetBar.className.replace('sle-snippet-bar', 'sle-snippet-bar sle-sbar-snippet');
                        }

                        container.appendChild(card.cloneNode(true));
                    });

                    attachSnippetClicks(container);
                })
                .catch(function () {
                    container.innerHTML = '<p class="text-muted small text-center py-2 mb-0">Erro</p>';
                });
        }

        function attachSnippetClicks(container) {
            container.querySelectorAll('.sle-snippet-bar').forEach(function (el) {
                el.addEventListener('click', function () {
                    var snippet = this.dataset.snippet;

                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(snippet).then(function () {
                            flashBarFeedback(el);
                        }).catch(function () {
                            fallbackCopy(snippet, el);
                        });
                    } else {
                        fallbackCopy(snippet, el);
                    }
                });
            });
        }

        function flashBarFeedback(el) {
            var icon = el.querySelector('.sle-copy-icon');
            if (icon) {
                icon.className = 'bi bi-check-lg flex-shrink-0 text-success small sle-copy-icon';
                setTimeout(function () {
                    icon.className = 'bi bi-clipboard flex-shrink-0 text-primary small sle-copy-icon';
                }, 1500);
            }
        }

        function fallbackCopy(text, el) {
            var ta = document.createElement('textarea');
            ta.value = text;
            ta.style.position = 'fixed';
            ta.style.opacity = '0';
            document.body.appendChild(ta);
            ta.select();
            try {
                document.execCommand('copy');
                flashBarFeedback(el);
            } catch (e) {
                prompt('Copie manualmente:', text);
            }
            document.body.removeChild(ta);
        }

        // ── Refresh a specific tab ──────────────────────────────
        function refreshTab(type) {
            var container = document.querySelector('.sle-sbar-list[data-asset-type="' + type + '"]');
            if (container) {
                container.innerHTML = '<p class="text-muted small text-center py-2 mb-0"><i class="bi bi-arrow-repeat"></i> Recarregando...</p>';
                loaders[type] = true;
                loadAssetList(type, container);
            }
        }

        // ── Load all tabs ───────────────────────────────────────
        document.querySelectorAll('.sle-sbar-list').forEach(function (container) {
            var type = container.dataset.assetType;
            if (!loaders[type]) {
                loaders[type] = true;
                loadAssetList(type, container);
            }
        });

        // ── Auto-refresh on upload form submit ─────────────────
        document.querySelectorAll('.sle-sbar-upload-form form').forEach(function (form) {
            form.addEventListener('submit', function () {
                setTimeout(function () {
                    loaders = {};
                    document.querySelectorAll('.sle-sbar-list').forEach(function (c) {
                        var t = c.dataset.assetType;
                        loaders[t] = false;
                        c.innerHTML = '<p class="text-muted small text-center py-2 mb-0"><i class="bi bi-arrow-repeat"></i> Recarregando...</p>';
                    });
                    document.querySelectorAll('.sle-sbar-list').forEach(function (c) {
                        var t = c.dataset.assetType;
                        if (!loaders[t]) {
                            loaders[t] = true;
                            loadAssetList(t, c);
                        }
                    });
                }, 500);
            });
        });

    });
</script>
@endpush

@push('styles')
<style>
    .sle-asset-sidebar .card-body {
        max-height: calc(100vh - 250px);
        overflow-y: auto;
    }
    .sle-asset-sidebar .nav-pills .nav-link {
        font-size: var(--text-xs);
        padding-top: 0.2rem !important;
        padding-bottom: 0.2rem !important;
    }
    .sle-asset-sidebar .sle-asset-card .card-body {
        padding: 0.4rem 0.6rem;
    }
    .sle-asset-sidebar .sle-asset-card h6 {
        font-size: var(--text-xs);
        max-width: 120px;
    }
    .sle-asset-sidebar .sle-asset-card small {
        font-size: var(--text-xs);
    }
    .sle-asset-sidebar .sle-asset-card .btn-sm {
        font-size: var(--text-xs);
        padding: 0.1rem 0.3rem;
    }
    .sle-asset-sidebar .sle-asset-card .bi {
        font-size: var(--text-xs);
    }
    .sle-asset-sidebar .sle-sbar-snippet {
        cursor: pointer;
        transition: background 0.15s;
        font-size: var(--text-xs);
        line-height: 1.3;
        background: #f8f9fa;
        border-color: #e9ecef !important;
    }
    .sle-asset-sidebar .sle-sbar-snippet:hover {
        background: #e9ecef !important;
    }
    .sle-asset-sidebar .sle-sbar-snippet code {
        font-size: var(--text-xs);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        user-select: all;
    }
    .sle-asset-sidebar .sle-sbar-snippet .sle-copy-icon {
        font-size: var(--text-xs);
    }
</style>
@endpush