<div class="pbi-tabelas-page">

    <!-- ===== CABEÇALHO ===== -->
    <div class="pbi-page-header">
        <div class="d-flex align-items-center gap-3">
            <div class="pbi-page-icon">
                <i class="bi bi-table"></i>
            </div>
            <div>
                <h1 class="pbi-page-title">Explorador de Tabelas</h1>
                <p class="pbi-page-subtitle">
                    <?= \App\Core\View::e($config['empresa'] ?? 'Banco de dados') ?>
                    &mdash;
                    <?= \App\Core\View::e($config['database'] ?? '') ?>
                </p>
            </div>
        </div>

        <!-- Status da conexão -->
        <div class="pbi-conn-badge <?= $conexao['success'] ? 'conectado' : 'erro' ?>">
            <span class="pbi-conn-dot"></span>
            <?= $conexao['success'] ? 'Conectado' : 'Sem conexão' ?>
        </div>
    </div>

    <?php if (!$conexao['success']): ?>
    <!-- ===== ERRO DE CONEXÃO ===== -->
    <div class="pbi-alert pbi-alert-danger">
        <i class="bi bi-exclamation-triangle-fill fs-5"></i>
        <div>
            <strong>Não foi possível conectar ao banco.</strong><br>
            <small><?= \App\Core\View::e($conexao['mensagem']) ?></small>
        </div>
        <a href="/configurar" class="btn pbi-btn-outline btn-sm ms-auto">
            <i class="bi bi-gear-fill me-1"></i>Reconfigurar
        </a>
    </div>

    <?php else: ?>

    <!-- ===== BARRA DE FERRAMENTAS ===== -->
    <div class="pbi-toolbar mb-4">
        <div class="pbi-input-group pbi-search-wrap">
            <span class="pbi-search-icon"><i class="bi bi-search"></i></span>
            <input type="text" id="filtroBusca" class="pbi-input pbi-search-input"
                   placeholder="Filtrar tabelas por nome...">
        </div>
        <div class="pbi-toolbar-stats" id="statsTabelas">
            <span class="spinner-border spinner-border-sm text-accent me-2"></span>Carregando...
        </div>
    </div>

    <!-- ===== GRID DE TABELAS ===== -->
    <div id="gridTabelas" class="pbi-tabelas-grid">
        <!-- Preenchido via JavaScript -->
        <div class="pbi-tabelas-loading">
            <div class="spinner-border text-accent mb-3"></div>
            <div class="text-muted">Lendo estrutura do banco...</div>
        </div>
    </div>

    <!-- ===== MODAL DE DETALHES ===== -->
    <div class="modal fade" id="modalTabela" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content pbi-modal">
                <div class="modal-header pbi-modal-header">
                    <div>
                        <h5 class="modal-title" id="modalTabelaTitulo">—</h5>
                        <div class="text-muted small" id="modalTabelaInfo"></div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">

                    <!-- Tabs -->
                    <div class="pbi-modal-tabs">
                        <button class="pbi-tab ativo" data-tab="colunas">
                            <i class="bi bi-layout-three-columns me-1"></i>Colunas
                        </button>
                        <button class="pbi-tab" data-tab="preview">
                            <i class="bi bi-eye-fill me-1"></i>Preview
                        </button>
                    </div>

                    <!-- Conteúdo das tabs -->
                    <div id="tabColunas" class="pbi-tab-content ativo p-3">
                        <div class="text-center py-4 text-muted">Carregando...</div>
                    </div>
                    <div id="tabPreview" class="pbi-tab-content p-3" style="display:none">
                        <div class="text-center py-4 text-muted">Carregando...</div>
                    </div>

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

    <?php endif; ?>

</div><!-- /pbi-tabelas-page -->

<script>
(function () {
    'use strict';

    <?php if (!$conexao['success']): ?>
    // Sem conexão — nada a fazer
    <?php return; ?>
    <?php endif; ?>

    var todasTabelas = [];

    // ── Carrega a lista de tabelas via AJAX ─────────────────────────────────
    function carregarTabelas() {
        fetch('/tabelas/listar')
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (!data.success) throw new Error(data.mensagem);
                todasTabelas = data.tabelas;
                renderizarGrid(todasTabelas);
                document.getElementById('statsTabelas').innerHTML =
                    '<i class="bi bi-database-fill me-1 text-accent"></i>' +
                    '<strong>' + data.total + '</strong> tabela(s) encontrada(s)';
            })
            .catch(function (err) {
                document.getElementById('gridTabelas').innerHTML =
                    '<div class="pbi-empty-state"><i class="bi bi-exclamation-triangle-fill text-danger fs-2"></i>' +
                    '<p class="mt-2 text-danger">' + err.message + '</p></div>';
                document.getElementById('statsTabelas').innerHTML = '';
            });
    }

    // ── Renderiza os cards de tabelas ───────────────────────────────────────
    function renderizarGrid(tabelas) {
        var grid = document.getElementById('gridTabelas');

        if (tabelas.length === 0) {
            grid.innerHTML = '<div class="pbi-empty-state">' +
                '<i class="bi bi-inbox fs-2 text-muted"></i>' +
                '<p class="mt-2 text-muted">Nenhuma tabela encontrada.</p></div>';
            return;
        }

        var html = '';
        tabelas.forEach(function (t) {
            html += '<div class="pbi-tabela-card" data-tabela="' + t.nome + '" role="button">' +
                '<div class="pbi-tabela-card-icon"><i class="bi bi-table"></i></div>' +
                '<div class="pbi-tabela-card-info">' +
                    '<div class="pbi-tabela-nome">' + t.nome + '</div>' +
                    '<div class="pbi-tabela-meta">' +
                        '<span><i class="bi bi-layout-three-columns me-1"></i>' + t.total_colunas + ' col.</span>' +
                    '</div>' +
                '</div>' +
                '<i class="bi bi-chevron-right pbi-tabela-seta"></i>' +
                '</div>';
        });

        grid.innerHTML = html;

        // Eventos de clique em cada card
        grid.querySelectorAll('.pbi-tabela-card').forEach(function (card) {
            card.addEventListener('click', function () {
                abrirDetalhes(this.dataset.tabela);
            });
        });
    }

    // ── Filtro de busca ─────────────────────────────────────────────────────
    document.getElementById('filtroBusca').addEventListener('input', function () {
        var termo = this.value.toUpperCase().trim();
        var filtradas = termo
            ? todasTabelas.filter(function (t) { return t.nome.toUpperCase().includes(termo); })
            : todasTabelas;
        renderizarGrid(filtradas);
    });

    // ── Abre modal com detalhes da tabela ───────────────────────────────────
    function abrirDetalhes(nome) {
        var modal = new bootstrap.Modal(document.getElementById('modalTabela'));
        document.getElementById('modalTabelaTitulo').textContent = nome;
        document.getElementById('modalTabelaInfo').textContent   = 'Carregando...';
        document.getElementById('tabColunas').innerHTML  = '<div class="text-center py-4"><div class="spinner-border text-accent"></div></div>';
        document.getElementById('tabPreview').innerHTML  = '<div class="text-center py-4"><div class="spinner-border text-accent"></div></div>';

        // Ativa aba colunas
        ativarTab('colunas');
        modal.show();

        fetch('/tabelas/info/' + encodeURIComponent(nome))
            .then(function (r) { return r.json(); })
            .then(function (data) {
                if (!data.success) throw new Error(data.mensagem);

                var total = data.total_registros >= 0
                    ? data.total_registros.toLocaleString('pt-BR') + ' registro(s)'
                    : 'contagem indisponível';
                document.getElementById('modalTabelaInfo').textContent =
                    data.colunas.length + ' coluna(s) · ' + total;

                renderizarColunas(data.colunas);
                renderizarPreview(data.preview, data.colunas);
            })
            .catch(function (err) {
                document.getElementById('tabColunas').innerHTML =
                    '<div class="p-3 text-danger"><i class="bi bi-exclamation-triangle-fill me-1"></i>' + err.message + '</div>';
            });
    }

    // ── Renderiza tabela de colunas ─────────────────────────────────────────
    function renderizarColunas(colunas) {
        var html = '<div class="table-responsive"><table class="pbi-table">' +
            '<thead><tr><th>#</th><th>Campo</th><th>Tipo</th><th>Tam.</th><th>Nulo</th><th>Padrão</th></tr></thead><tbody>';

        colunas.forEach(function (c, i) {
            html += '<tr>' +
                '<td class="text-muted">' + (i + 1) + '</td>' +
                '<td class="pbi-campo-nome"><i class="bi bi-columns me-1 text-accent"></i>' + c.campo + '</td>' +
                '<td><span class="pbi-tipo-badge">' + c.tipo + '</span></td>' +
                '<td class="text-muted">' + (c.tamanho > 0 ? c.tamanho : '—') + '</td>' +
                '<td>' + (c.permite_nulo
                    ? '<i class="bi bi-check-circle-fill text-success" title="Permite nulo"></i>'
                    : '<i class="bi bi-x-circle-fill text-muted" title="NOT NULL"></i>') + '</td>' +
                '<td class="text-muted small">' + (c.padrao || '—') + '</td>' +
                '</tr>';
        });

        html += '</tbody></table></div>';
        document.getElementById('tabColunas').innerHTML = html;
    }

    // ── Renderiza preview de dados ──────────────────────────────────────────
    function renderizarPreview(linhas, colunas) {
        if (!linhas || linhas.length === 0) {
            document.getElementById('tabPreview').innerHTML =
                '<div class="text-center py-4 text-muted"><i class="bi bi-inbox fs-2"></i><p class="mt-2">Tabela vazia ou sem permissão de leitura.</p></div>';
            return;
        }

        var campos = colunas.map(function (c) { return c.campo; });
        var html   = '<div class="table-responsive"><table class="pbi-table pbi-table-sm">' +
            '<thead><tr>' + campos.map(function (f) { return '<th>' + f + '</th>'; }).join('') + '</tr></thead><tbody>';

        linhas.forEach(function (linha) {
            html += '<tr>' + campos.map(function (f) {
                var val = linha[f] !== null && linha[f] !== undefined ? String(linha[f]) : '<span class="text-muted">NULL</span>';
                if (val.length > 60) val = val.substring(0, 60) + '…';
                return '<td>' + val + '</td>';
            }).join('') + '</tr>';
        });

        html += '</tbody></table></div>' +
            '<div class="text-muted small p-2">Exibindo até 5 registros.</div>';
        document.getElementById('tabPreview').innerHTML = html;
    }

    // ── Troca de tabs no modal ──────────────────────────────────────────────
    document.querySelectorAll('.pbi-tab').forEach(function (btn) {
        btn.addEventListener('click', function () {
            ativarTab(this.dataset.tab);
        });
    });

    function ativarTab(nome) {
        document.querySelectorAll('.pbi-tab').forEach(function (b) { b.classList.remove('ativo'); });
        document.querySelectorAll('.pbi-tab-content').forEach(function (c) { c.style.display = 'none'; });
        document.querySelector('[data-tab="' + nome + '"]').classList.add('ativo');
        document.getElementById('tab' + nome.charAt(0).toUpperCase() + nome.slice(1)).style.display = '';
    }

    // ── Inicia ──────────────────────────────────────────────────────────────
    carregarTabelas();

}());
</script>
