@php
    $tags = \V2\Core\Models\ConexaoTag::withCount(['parceiros', 'unidadesRegionais'])
        ->orderBy('is_reserved', 'desc')
        ->orderBy('name')
        ->get();
@endphp

{{-- ============================================= --}}
{{-- MODAL: Gerenciar Tags de Conexões             --}}
{{-- ============================================= --}}
<div class="modal fade" id="conexaoTagModal" tabindex="-1" role="dialog" aria-labelledby="conexaoTagModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="conexaoTagModalLabel">
                    <i class="bi bi-tags me-1"></i> Gerenciar Tags
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
            </div>
            <div class="modal-body">
                {{-- Formulário de adição --}}
                <div class="input-group input-group-sm mb-3">
                    <input type="text" id="new-tag-name" class="form-control"
                           placeholder="Nova tag..." maxlength="100"
                           aria-label="Nome da nova tag" autocomplete="off">
                    <button type="button" id="btn-create-tag" class="btn btn-primary"
                            title="Criar tag" aria-label="Criar tag">
                        <i class="bi bi-plus"></i>
                    </button>
                </div>
                <div id="tag-create-error" class="text-danger small mb-2" style="display:none;"></div>

                {{-- Lista de tags --}}
                <div id="tag-list-container" class="list-group list-group-flush" style="max-height: 300px; overflow-y: auto;">
                    @forelse($tags as $tag)
                        <div class="list-group-item d-flex align-items-center justify-content-between tag-item" data-tag-id="{{ $tag->id }}">
                            <div class="d-flex align-items-center gap-2">
                                <i class="bi bi-tag text-muted"></i>
                                <span class="tag-name">{{ $tag->name }}</span>
                                @if($tag->is_reserved)
                                    <span class="badge bg-secondary bg-opacity-10 text-secondary">Reservada</span>
                                @endif
                                <small class="text-muted">
                                    ({{ $tag->parceiros_count + $tag->unidades_regionais_count }} vínculos)
                                </small>
                            </div>
                            @if(!$tag->is_reserved)
                                <button type="button" class="btn btn-sm btn-outline-danger btn-delete-tag"
                                        data-tag-id="{{ $tag->id }}"
                                        data-tag-name="{{ $tag->name }}"
                                        title="Excluir tag '{{ $tag->name }}'" aria-label="Excluir tag {{ $tag->name }}">
                                    <i class="bi bi-trash"></i>
                                </button>
                            @endif
                        </div>
                    @empty
                        <div class="list-group-item text-muted text-center" id="tag-empty-state">
                            Nenhuma tag criada.
                        </div>
                    @endforelse
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    var modal = document.getElementById('conexaoTagModal');
    if (!modal) return;

    var tagList = document.getElementById('tag-list-container');
    var newTagInput = document.getElementById('new-tag-name');
    var btnCreate = document.getElementById('btn-create-tag');
    var createError = document.getElementById('tag-create-error');
    var storeUrl = '{{ route("v2.cms.conexao-tags.store") }}';
    var deleteUrlBase = '{{ url("cms/conexao-tags") }}';

    function csrfToken() {
        var meta = document.querySelector('meta[name="csrf-token"]');
        return meta ? meta.getAttribute('content') : '';
    }

    function showCreateError(msg) {
        createError.textContent = msg;
        createError.style.display = 'block';
        setTimeout(function() { createError.style.display = 'none'; }, 3000);
    }

    function addTagToList(tag) {
        var emptyState = document.getElementById('tag-empty-state');
        if (emptyState) emptyState.remove();

        var div = document.createElement('div');
        div.className = 'list-group-item d-flex align-items-center justify-content-between tag-item';
        div.setAttribute('data-tag-id', tag.id);
        div.innerHTML = '<div class="d-flex align-items-center gap-2">' +
            '<i class="bi bi-tag text-muted"></i>' +
            '<span class="tag-name">' + tag.name + '</span>' +
            '<small class="text-muted">(0 vínculos)</small>' +
            '</div>' +
            '<button type="button" class="btn btn-sm btn-outline-danger btn-delete-tag" ' +
            'data-tag-id="' + tag.id + '" data-tag-name="' + tag.name + '" ' +
            'title="Excluir tag \'' + tag.name + '\'" aria-label="Excluir tag ' + tag.name + '">' +
            '<i class="bi bi-trash"></i></button>';
        tagList.appendChild(div);
        bindDeleteButtons();
    }

    function createTag() {
        var name = newTagInput.value.trim();
        if (!name) return;

        fetch(storeUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken(),
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({ name: name })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                addTagToList(data.tag);
                newTagInput.value = '';
                // Atualiza listas de tags disponíveis nos forms
                if (typeof window.refreshAvailableTags === 'function') {
                    window.refreshAvailableTags();
                }
            } else {
                showCreateError(data.message || 'Erro ao criar tag.');
            }
        })
        .catch(function() {
            showCreateError('Erro de conexão.');
        });
    }

    if (btnCreate) {
        btnCreate.addEventListener('click', createTag);
    }
    if (newTagInput) {
        newTagInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                createTag();
            }
        });
    }

    function bindDeleteButtons() {
        tagList.querySelectorAll('.btn-delete-tag').forEach(function(btn) {
            btn.removeEventListener('click', handleDelete);
            btn.addEventListener('click', handleDelete);
        });
    }

    function handleDelete(e) {
        var btn = e.currentTarget;
        var tagId = btn.getAttribute('data-tag-id');
        var tagName = btn.getAttribute('data-tag-name');

        if (!confirm('Excluir a tag "' + tagName + '"? Os itens vinculados serão transferidos para "Geral".')) {
            return;
        }

        fetch(deleteUrlBase + '/' + tagId, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': csrfToken(),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success) {
                var item = tagList.querySelector('[data-tag-id="' + tagId + '"]');
                if (item) item.remove();
                if (tagList.children.length === 0) {
                    tagList.innerHTML = '<div class="list-group-item text-muted text-center" id="tag-empty-state">Nenhuma tag criada.</div>';
                }
                if (typeof window.refreshAvailableTags === 'function') {
                    window.refreshAvailableTags();
                }
            } else {
                alert(data.message || 'Erro ao excluir tag.');
            }
        })
        .catch(function() {
            alert('Erro de conexão ao excluir tag.');
        });
    }

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