{{--
    @intent Modal seletor de assets, acionável de qualquer bloco do editor.
    @vars $filterType (string|null) — filtra por tipo: 'css', 'js', 'image', ou null para todos
--}}
@php
    $filterType = $filterType ?? null;
@endphp

<div class="modal fade" id="sleAssetPickerModal" tabindex="-1" role="dialog" aria-labelledby="sleAssetPickerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">

            <div class="modal-header bg-light">
                <h5 class="modal-title fw-bold" id="sleAssetPickerModalLabel">
                    <i class="bi bi-folder-plus me-1"></i> File Library
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>

            <div class="modal-body p-3">

                <ul class="nav nav-tabs mb-3" id="sleAssetPickerTabs" role="tablist">
                    @if(!$filterType || $filterType === 'css')
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ !$filterType || $filterType === 'css' ? 'active' : '' }}"
                                id="picker-css-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#picker-css"
                                type="button"
                                role="tab">
                            <i class="bi bi-filetype-css me-1"></i> CSS
                        </button>
                    </li>
                    @endif
                    @if(!$filterType || $filterType === 'js')
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ $filterType === 'js' ? 'active' : '' }}"
                                id="picker-js-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#picker-js"
                                type="button"
                                role="tab">
                            <i class="bi bi-filetype-js me-1"></i> JavaScript
                        </button>
                    </li>
                    @endif
                    @if(!$filterType || $filterType === 'image')
                    <li class="nav-item" role="presentation">
                        <button class="nav-link {{ $filterType === 'image' ? 'active' : '' }}"
                                id="picker-img-tab"
                                data-bs-toggle="tab"
                                data-bs-target="#picker-img"
                                type="button"
                                role="tab">
                            <i class="bi bi-filetype-raw me-1"></i> Imagens
                        </button>
                    </li>
                    @endif
                </ul>

                <div class="tab-content" id="sleAssetPickerTabsContent">
                    @if(!$filterType || $filterType === 'css')
                    <div class="tab-pane fade {{ !$filterType || $filterType === 'css' ? 'show active' : '' }}"
                         id="picker-css"
                         role="tabpanel">
                        <div class="sle-asset-list" data-asset-type="css">
                            <p class="text-muted small text-center py-3">
                                <i class="bi bi-inbox"></i> Carregando assets CSS...
                            </p>
                        </div>
                    </div>
                    @endif
                    @if(!$filterType || $filterType === 'js')
                    <div class="tab-pane fade {{ $filterType === 'js' ? 'show active' : '' }}"
                         id="picker-js"
                         role="tabpanel">
                        <div class="sle-asset-list" data-asset-type="js">
                            <p class="text-muted small text-center py-3">
                                <i class="bi bi-inbox"></i> Carregando assets JS...
                            </p>
                        </div>
                    </div>
                    @endif
                    @if(!$filterType || $filterType === 'image')
                    <div class="tab-pane fade {{ $filterType === 'image' ? 'show active' : '' }}"
                         id="picker-img"
                         role="tabpanel">
                        <div class="sle-asset-list" data-asset-type="image">
                            <p class="text-muted small text-center py-3">
                                <i class="bi bi-inbox"></i> Carregando imagens...
                            </p>
                        </div>
                    </div>
                    @endif
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>

        </div>
    </div>
</div>

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

        var csrfToken = '{{ csrf_token() }}';
        var assetPickerModal = document.getElementById('sleAssetPickerModal');

        if (!assetPickerModal) { return; }

        var loaders = {};

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

            fetch(url, {
                method: 'GET',
                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-3"><i class="bi bi-inbox"></i> Nenhum asset encontrado.</p>';
                    return;
                }

                container.innerHTML = '';
                cards.forEach(function (card) {
                    container.appendChild(card.cloneNode(true));
                });

                attachCopyButtons(container);
            })
            .catch(function () {
                container.innerHTML = '<p class="text-muted small text-center py-3">Erro ao carregar assets.</p>';
            });
        }

        function attachCopyButtons(container) {
            container.querySelectorAll('.copy-snippet-btn').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    var snippet = this.dataset.snippet;

                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(snippet).then(function () {
                            var originalText = btn.innerHTML;
                            btn.innerHTML = '<i class="bi bi-check-lg"></i> Copiado!';
                            btn.classList.remove('btn-outline-secondary');
                            btn.classList.add('btn-success');
                            setTimeout(function () {
                                btn.innerHTML = originalText;
                                btn.classList.remove('btn-success');
                                btn.classList.add('btn-outline-secondary');
                            }, 2000);
                        }).catch(function () {
                            fallbackCopy(snippet, btn);
                        });
                    } else {
                        fallbackCopy(snippet, btn);
                    }
                });
            });
        }

        function fallbackCopy(text, btn) {
            var textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';
            document.body.appendChild(textarea);
            textarea.select();
            try {
                document.execCommand('copy');
                var originalText = btn.innerHTML;
                btn.innerHTML = '<i class="bi bi-check-lg"></i> Copiado!';
                btn.classList.remove('btn-outline-secondary');
                btn.classList.add('btn-success');
                setTimeout(function () {
                    btn.innerHTML = originalText;
                    btn.classList.remove('btn-success');
                    btn.classList.add('btn-outline-secondary');
                }, 2000);
            } catch (e) {
                prompt('Copie o snippet manualmente:', text);
            }
            document.body.removeChild(textarea);
        }

        assetPickerModal.addEventListener('show.bs.modal', function (event) {
            var trigger = event.relatedTarget;
            var filterType = trigger ? trigger.getAttribute('data-asset-filter') : '';

            var tabs = assetPickerModal.querySelectorAll('#sleAssetPickerTabs .nav-link');
            var panes = assetPickerModal.querySelectorAll('#sleAssetPickerTabsContent .tab-pane');

            tabs.forEach(function (tab) { tab.classList.remove('active'); });
            panes.forEach(function (pane) { pane.classList.remove('show', 'active'); });

            var activeFound = false;
            if (filterType) {
                var targetTab = assetPickerModal.querySelector('#picker-' + filterType + '-tab');
                var targetPane = assetPickerModal.querySelector('#picker-' + filterType);
                if (targetTab && targetPane) {
                    targetTab.classList.add('active');
                    targetPane.classList.add('show', 'active');
                    activeFound = true;
                }
            }

            if (!activeFound) {
                var firstTab = tabs[0];
                var firstPaneId = firstTab ? firstTab.getAttribute('data-bs-target') : null;
                if (firstTab) firstTab.classList.add('active');
                if (firstPaneId) {
                    var firstPane = assetPickerModal.querySelector(firstPaneId);
                    if (firstPane) firstPane.classList.add('show', 'active');
                }
            }

            var lists = assetPickerModal.querySelectorAll('.sle-asset-list');
            lists.forEach(function (container) {
                var type = container.dataset.assetType;
                if (!loaders[type]) {
                    loaders[type] = true;
                    loadAssetList(type, container);
                }
            });
        });

    });
</script>
@endpush