{% extends 'base.html' %}

{% block title %}CapeSync - Dashboard{% endblock %}

{% block content %}
{% set comanda_status = comanda_digital_status|default({
    'total_lojas': 0,
    'grupo_habilitado': false,
    'ligadas': 0,
    'desligadas': 0,
    'grupo_sync_id': None
}, true) %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2><i class="fas fa-cloud-upload-alt text-primary"></i> CapeSync Dashboard</h2>
            <p class="text-muted mb-0">Monitoramento e diagnóstico da sincronização em nuvem</p>
        </div>
        <div>
            <a href="{{ url_for('capesync_configurar') }}" class="btn btn-outline-primary">
                <i class="fas fa-cog"></i> Configurar
            </a>
            <button class="btn btn-primary" onclick="testarConexao()">
                <i class="fas fa-plug"></i> Testar Conexão
            </button>
        </div>
    </div>

    <!-- Status Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            {% if config_status.sync_ativo %}
                            <div class="bg-success bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-check-circle text-success fa-2x"></i>
                            </div>
                            {% else %}
                            <div class="bg-danger bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-times-circle text-danger fa-2x"></i>
                            </div>
                            {% endif %}
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Status</h6>
                            <h4 class="mb-0">{{ 'Ativo' if config_status.sync_ativo else 'Inativo' }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-warning bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-clock text-warning fa-2x"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Pendentes</h6>
                            <h4 class="mb-0" id="stat-pendente">{{ fila_stats.pendente }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-success bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-check text-success fa-2x"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Sincronizados</h6>
                            <h4 class="mb-0" id="stat-sincronizado">{{ fila_stats.sincronizado }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="bg-danger bg-opacity-10 rounded-circle p-3">
                                <i class="fas fa-exclamation-triangle text-danger fa-2x"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h6 class="text-muted mb-1">Erros</h6>
                            <h4 class="mb-0" id="stat-erro">{{ fila_stats.erro }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Conexão e Configuração -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="fas fa-server text-primary"></i> Configuração</h5>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tr>
                            <td class="text-muted">Servidor:</td>
                            <td><code>{{ config_status.sync_url or 'Não configurado' }}</code></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Loja ID:</td>
                            <td><code class="text-truncate" style="max-width: 200px; display: inline-block;">{{ config_status.sync_loja_id or 'Não configurado' }}</code></td>
                        </tr>
                        <tr>
                            <td class="text-muted">API Key:</td>
                            <td><code>{{ config_status.sync_api_key }}</code></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Intervalo:</td>
                            <td>{{ config_status.sync_intervalo }} minuto(s)</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Última sincronização:</td>
                            <td>{{ config_status.sync_ultimo.strftime('%d/%m/%Y %H:%M:%S') if config_status.sync_ultimo else 'Nunca' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Comanda Digital:</td>
                            <td>
                                {% if comanda_status.total_lojas > 0 %}
                                    <span class="badge {{ 'bg-success' if comanda_status.grupo_habilitado else 'bg-danger' }}">
                                        Grupo {{ 'AUTORIZADO' if comanda_status.grupo_habilitado else 'BLOQUEADO' }}
                                    </span>
                                    <span class="badge bg-success">ON {{ comanda_status.ligadas }}</span>
                                    <span class="badge bg-secondary">OFF {{ comanda_status.desligadas }}</span>
                                    <small class="text-muted ms-1">(grupo {{ comanda_status.grupo_sync_id or 'local' }})</small>
                                {% else %}
                                    <span class="text-muted">Sem dados</span>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-plug text-primary"></i> Conexão</h5>
                    <span id="conexao-badge" class="badge {{ 'bg-success' if conexao_ok else 'bg-danger' }}">
                        {{ 'Conectado' if conexao_ok else 'Erro' }}
                    </span>
                </div>
                <div class="card-body">
                    <div id="conexao-status" class="alert {{ 'alert-success' if conexao_ok else 'alert-danger' }} mb-3">
                        <i class="fas {{ 'fa-check-circle' if conexao_ok else 'fa-times-circle' }}"></i>
                        {{ conexao_msg }}
                    </div>
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-primary" onclick="testarConexao()">
                            <i class="fas fa-sync"></i> Testar Novamente
                        </button>
                        <button class="btn btn-primary" onclick="forcarSync()">
                            <i class="fas fa-cloud-upload-alt"></i> Forçar sincronização agora
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Ações Rápidas -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white">
                    <h5 class="mb-0"><i class="fas fa-bolt text-warning"></i> Ações Rápidas</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <button class="btn btn-warning w-100" onclick="limparErros()" {{ 'disabled' if fila_stats.erro == 0 }}>
                                <i class="fas fa-redo"></i> Reenfileirar Erros ({{ fila_stats.erro }})
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-info w-100" onclick="enfileirarTodos()">
                                <i class="fas fa-database"></i> Enfileirar Tudo
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-success w-100" onclick="forcarSync()">
                                <i class="fas fa-play"></i> Executar sincronização
                            </button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-dark w-100" onclick="forcarSyncGlobal()" {{ 'disabled' if not has_endpoint('capesync_forcar_sync_global') }}>
                                <i class="fas fa-globe"></i> Sincronização global (todas lojas)
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Monitor Global Nativo -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-chart-line text-primary"></i> Monitor Nativo Global (todas as empresas)</h5>
                    <div class="d-flex gap-2">
                        <button class="btn btn-sm btn-outline-success" type="button" onclick="exportarMonitorGlobalCsv()">
                            <i class="fas fa-file-csv"></i> Exportar CSV
                        </button>
                        <span class="badge bg-light text-dark" id="monitor-global-atualizado">
                            Atualizado: {{ monitor_global.atualizado_em.strftime('%d/%m/%Y %H:%M:%S') if monitor_global and monitor_global.atualizado_em else '-' }}
                        </span>
                        <button class="btn btn-sm btn-outline-primary" onclick="atualizarMonitorGlobal()">
                            <i class="fas fa-sync"></i> Atualizar Monitor Global
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row g-2 mb-3">
                        <div class="col-md-4">
                            <label class="form-label mb-1">Buscar empresa</label>
                            <input type="text" class="form-control form-control-sm" id="mg-filtro-empresa" placeholder="Nome ou ID da empresa" oninput="aplicarFiltroMonitorGlobal()">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1">Status da sincronização</label>
                            <select class="form-select form-select-sm" id="mg-filtro-status" onchange="aplicarFiltroMonitorGlobal()">
                                <option value="todos">Todos</option>
                                <option value="ativo">Somente ativos</option>
                                <option value="inativo">Somente inativos</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label mb-1">Fila</label>
                            <select class="form-select form-select-sm" id="mg-filtro-fila" onchange="aplicarFiltroMonitorGlobal()">
                                <option value="todos">Todos</option>
                                <option value="abertos">Com pendência aberta</option>
                                <option value="erros">Com erro</option>
                            </select>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button class="btn btn-sm btn-outline-secondary w-100" onclick="limparFiltroMonitorGlobal()">
                                <i class="fas fa-eraser"></i> Limpar
                            </button>
                        </div>
                    </div>

                    <div class="row g-2 mb-3">
                        <div class="col-md-2">
                            <div class="border rounded p-2 text-center">
                                <small class="text-muted d-block">Empresas</small>
                                <strong id="mg-total-empresas">{{ monitor_global.totais.empresas if monitor_global else 0 }}</strong>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="border rounded p-2 text-center">
                                <small class="text-muted d-block">Sincronização ativa</small>
                                <strong id="mg-ativas">{{ monitor_global.totais.empresas_sync_ativo if monitor_global else 0 }}</strong>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="border rounded p-2 text-center">
                                <small class="text-muted d-block">Pendentes</small>
                                <strong class="text-warning" id="mg-pendentes">{{ monitor_global.totais.pendentes if monitor_global else 0 }}</strong>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="border rounded p-2 text-center">
                                <small class="text-muted d-block">Processando</small>
                                <strong class="text-info" id="mg-processando">{{ monitor_global.totais.processando if monitor_global else 0 }}</strong>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="border rounded p-2 text-center">
                                <small class="text-muted d-block">Erros</small>
                                <strong class="text-danger" id="mg-erros">{{ monitor_global.totais.erros if monitor_global else 0 }}</strong>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="border rounded p-2 text-center">
                                <small class="text-muted d-block">Abertos</small>
                                <strong id="mg-abertos">{{ monitor_global.totais.abertos if monitor_global else 0 }}</strong>
                            </div>
                        </div>
                    </div>

                    <div id="monitor-global-alertas" class="mb-3">
                        {% if monitor_global and monitor_global.alertas %}
                            {% for alerta in monitor_global.alertas[:4] %}
                            <div class="alert alert-warning py-2 mb-2"><i class="fas fa-exclamation-triangle"></i> {{ alerta }}</div>
                            {% endfor %}
                        {% else %}
                            <div class="alert alert-success py-2 mb-0"><i class="fas fa-check-circle"></i> Sem alertas globais no momento.</div>
                        {% endif %}
                    </div>

                    <div id="monitor-global-identidade" class="mb-3"></div>

                    <div id="monitor-global-integridade" class="mb-3">
                        {% set qtd_sem_sync = monitor_global.integridade.pessoas_sem_sync_id if monitor_global and monitor_global.integridade else 0 %}
                        {% if qtd_sem_sync > 0 %}
                            <div class="alert alert-danger py-2 mb-2">
                                <i class="fas fa-shield-alt"></i>
                                <strong>Integridade:</strong> {{ qtd_sem_sync }} pessoa(s) local(is) sem <code>sync_id</code>.
                                Isso pode causar divergência visual entre lojas.
                                <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="corrigirIntegridadePessoasSemSyncId()">
                                    <i class="fas fa-wrench"></i> Corrigir e reenfileirar
                                </button>
                            </div>
                            {% if monitor_global.integridade.amostras_pessoas_sem_sync_id %}
                            <div class="small text-muted">
                                Exemplos:
                                {% for p in monitor_global.integridade.amostras_pessoas_sem_sync_id %}
                                    <span class="badge bg-light text-dark border me-1 mb-1">
                                        #{{ p.id }}{% if p.codigo %} · cód {{ p.codigo }}{% endif %}{% if p.nome %} · {{ p.nome }}{% endif %}
                                    </span>
                                {% endfor %}
                            </div>
                            {% endif %}
                        {% else %}
                            <div class="alert alert-success py-2 mb-0">
                                <i class="fas fa-check-circle"></i>
                                Integridade OK: não há pessoas locais sem <code>sync_id</code>.
                            </div>
                        {% endif %}
                    </div>

                    <div class="table-responsive">
                        <table class="table table-sm table-hover align-middle mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Empresa</th>
                                    <th>Status</th>
                                    <th class="text-end">Pend.</th>
                                    <th class="text-end">Proc.</th>
                                    <th class="text-end">Erro</th>
                                    <th class="text-end">Sincr.</th>
                                    <th class="text-end">Abertos</th>
                                    <th>Mais antigo</th>
                                    <th>Últ. sincronização</th>
                                </tr>
                            </thead>
                            <tbody id="monitor-global-tbody">
                                {% if monitor_global and monitor_global.empresas %}
                                    {% for item in monitor_global.empresas %}
                                    <tr>
                                        <td>
                                            <strong>#{{ item.empresa_id }}</strong> {{ item.empresa_nome }}
                                        </td>
                                        <td>
                                            <span class="badge {{ 'bg-success' if item.sync_ativo else 'bg-secondary' }}">
                                                {{ 'Ativo' if item.sync_ativo else 'Inativo' }}
                                            </span>
                                        </td>
                                        <td class="text-end text-warning">{{ item.pendente }}</td>
                                        <td class="text-end text-info">{{ item.processando }}</td>
                                        <td class="text-end text-danger">{{ item.erro }}</td>
                                        <td class="text-end text-success">{{ item.sincronizado }}</td>
                                        <td class="text-end"><strong>{{ item.abertos }}</strong></td>
                                        <td>
                                            {% if item.mais_antigo_aberto %}
                                                {{ item.mais_antigo_aberto.strftime('%d/%m %H:%M') }}
                                                <span class="badge {{ 'bg-danger' if item.idade_aberto_min > 30 else 'bg-warning text-dark' }} ms-1">
                                                    {{ item.idade_aberto_min }} min
                                                </span>
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td>{{ item.sync_ultimo.strftime('%d/%m %H:%M:%S') if item.sync_ultimo else '-' }}</td>
                                    </tr>
                                    {% endfor %}
                                {% else %}
                                    <tr>
                                        <td colspan="9" class="text-center text-muted py-3">Nenhuma empresa encontrada para monitor global.</td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Últimos Registros -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-list text-primary"></i> Últimos Registros na Fila</h5>
                    <button class="btn btn-sm btn-outline-primary" onclick="atualizarListaFila()">
                        <i class="fas fa-sync"></i> Atualizar
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Tabela</th>
                                    <th>Registro</th>
                                    <th>Operação</th>
                                    <th>Status</th>
                                    <th>Criado</th>
                                    <th>Processado</th>
                                    <th>Tentativas</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for reg in ultimos_registros %}
                                <tr>
                                    <td>{{ reg.id }}</td>
                                    <td><code>{{ reg.tabela }}</code></td>
                                    <td>{{ reg.registro_id }}</td>
                                    <td>
                                        {% if reg.operacao == 'INSERT' %}
                                        <span class="badge bg-success">INSERT</span>
                                        {% elif reg.operacao == 'UPDATE' %}
                                        <span class="badge bg-info">UPDATE</span>
                                        {% elif reg.operacao == 'DELETE' %}
                                        <span class="badge bg-danger">DELETE</span>
                                        {% else %}
                                        <span class="badge bg-secondary">{{ reg.operacao }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if reg.status == 'PENDENTE' %}
                                        <span class="badge bg-warning">Pendente</span>
                                        {% elif reg.status == 'SINCRONIZADO' %}
                                        <span class="badge bg-success">OK</span>
                                        {% elif reg.status == 'ERRO' %}
                                        <span class="badge bg-danger" title="{{ reg.ultimo_erro }}">Erro</span>
                                        {% else %}
                                        <span class="badge bg-secondary">{{ reg.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ reg.criado_em.strftime('%d/%m %H:%M') if reg.criado_em else '-' }}</td>
                                    <td>{{ reg.processado_em.strftime('%d/%m %H:%M') if reg.processado_em else '-' }}</td>
                                    <td>{{ reg.tentativas or 0 }}</td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="8" class="text-center text-muted py-4">
                                        <i class="fas fa-inbox fa-3x mb-2 d-block"></i>
                                        Nenhum registro na fila
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Registros com Erro -->
    {% if registros_erro %}
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm border-danger">
                <div class="card-header bg-danger text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="fas fa-exclamation-triangle"></i> Registros com Erro ({{ registros_erro|length }})</h5>
                    <button class="btn btn-sm btn-light" onclick="limparErros()">
                        <i class="fas fa-redo"></i> Reenfileirar Todos
                    </button>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive" style="max-height: 300px; overflow-y: auto;">
                        <table class="table table-hover mb-0">
                            <thead class="table-light sticky-top">
                                <tr>
                                    <th>Tabela</th>
                                    <th>Registro</th>
                                    <th>Operação</th>
                                    <th>Tentativas</th>
                                    <th>Erro</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for reg in registros_erro %}
                                <tr>
                                    <td><code>{{ reg.tabela }}</code></td>
                                    <td>{{ reg.registro_id }}</td>
                                    <td>{{ reg.operacao }}</td>
                                    <td>{{ reg.tentativas or 0 }}</td>
                                    <td class="text-danger small">{{ reg.ultimo_erro|truncate(80) if reg.ultimo_erro else '-' }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- Toast para notificações -->
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="liveToast" class="toast" role="alert">
        <div class="toast-header">
            <i class="fas fa-cloud me-2 text-primary"></i>
            <strong class="me-auto">CapeSync</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body" id="toast-message"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let monitorGlobalCache = {{ monitor_global|tojson if monitor_global else {'empresas': [], 'totais': {'empresas': 0, 'empresas_sync_ativo': 0, 'pendentes': 0, 'processando': 0, 'erros': 0, 'sincronizados': 0, 'abertos': 0}, 'alertas': [], 'identidade_instalacao': {'status': 'pendente', 'modo_detectado': 'desconhecido', 'empresa_padrao_id': None, 'empresa_padrao_nome': None, 'motivos': ['contrato_identidade_indisponivel_no_runtime'], 'campos_faltantes': [], 'fallback_primeira_empresa_ativa': False, 'primeira_empresa_ativa_id': None}}|tojson }};
const CAPESYNC_ENDPOINTS = {
    testarConexao: {{ safe_url_for('capesync_testar_conexao', fallback='')|tojson }},
    forcarSync: {{ safe_url_for('capesync_forcar_sync', fallback='')|tojson }},
    forcarSyncGlobal: {{ safe_url_for('capesync_forcar_sync_global', fallback='')|tojson }},
    limparErros: {{ safe_url_for('capesync_limpar_erros', fallback='')|tojson }},
    enfileirarTodos: {{ safe_url_for('capesync_enfileirar_todos', fallback='')|tojson }},
    statusApi: {{ safe_url_for('capesync_status_api', fallback='')|tojson }}
};

function endpointDisponivel(nome) {
    return Boolean(CAPESYNC_ENDPOINTS[nome]);
}

function showToast(message, type = 'info') {
    const toast = document.getElementById('liveToast');
    const toastBody = document.getElementById('toast-message');
    toastBody.textContent = message;
    
    toast.classList.remove('border-success', 'border-danger', 'border-warning');
    if (type === 'success') toast.classList.add('border-success');
    else if (type === 'error') toast.classList.add('border-danger');
    else if (type === 'warning') toast.classList.add('border-warning');
    
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();
}

function testarConexao() {
    if (!endpointDisponivel('testarConexao')) {
        showToast('A rota de teste de conexão não está disponível neste runtime.', 'warning');
        return;
    }

    fetch(CAPESYNC_ENDPOINTS.testarConexao)
        .then(r => r.json())
        .then(data => {
            const badge = document.getElementById('conexao-badge');
            const status = document.getElementById('conexao-status');
            
            if (data.success) {
                badge.className = 'badge bg-success';
                badge.textContent = 'Conectado';
                status.className = 'alert alert-success mb-3';
                status.innerHTML = '<i class="fas fa-check-circle"></i> ' + data.message;
                showToast(data.message, 'success');
            } else {
                badge.className = 'badge bg-danger';
                badge.textContent = 'Erro';
                status.className = 'alert alert-danger mb-3';
                status.innerHTML = '<i class="fas fa-times-circle"></i> ' + data.message;
                showToast(data.message, 'error');
            }
        })
        .catch(err => showToast('Erro: ' + err, 'error'));
}

function forcarSync() {
    if (!endpointDisponivel('forcarSync')) {
        showToast('A rota para forçar sincronização não está disponível neste runtime.', 'warning');
        return;
    }

    showToast('Executando sincronização...', 'info');
    fetch(CAPESYNC_ENDPOINTS.forcarSync)
        .then(r => r.json())
        .then(data => {
            showToast(data.message, data.success ? 'success' : 'error');
            if (data.success) atualizarStatus();
        })
        .catch(err => showToast('Erro: ' + err, 'error'));
}

function forcarSyncGlobal() {
    if (!endpointDisponivel('forcarSyncGlobal')) {
        showToast('A sincronização global ainda não está disponível neste runtime.', 'warning');
        return;
    }

    if (!confirm('Executar sincronização global em todas as empresas ativas agora?')) return;

    showToast('Executando sincronização global...', 'info');
    fetch(CAPESYNC_ENDPOINTS.forcarSyncGlobal)
        .then(r => r.json())
        .then(data => {
            showToast(data.message || 'Sincronização global executada', data.success ? 'success' : 'error');
            if (data.success) {
                atualizarStatus();
                atualizarMonitorGlobal();
            }
        })
        .catch(err => showToast('Erro: ' + err, 'error'));
}

function limparErros() {
    if (!endpointDisponivel('limparErros')) {
        showToast('A rota para reenfileirar erros não está disponível neste runtime.', 'warning');
        return;
    }

    if (!confirm('Reenfileirar todos os registros com erro para nova tentativa?')) return;
    
    fetch(CAPESYNC_ENDPOINTS.limparErros)
        .then(r => r.json())
        .then(data => {
            showToast(data.message, data.success ? 'success' : 'error');
            if (data.success) setTimeout(() => location.reload(), 1000);
        })
        .catch(err => showToast('Erro: ' + err, 'error'));
}

function enfileirarTodos() {
    if (!endpointDisponivel('enfileirarTodos')) {
        showToast('A rota para enfileirar todos os registros não está disponível neste runtime.', 'warning');
        return;
    }

    if (!confirm('Isso vai enfileirar TODOS os produtos e clientes para sincronização. Continuar?')) return;
    
    showToast('Enfileirando registros...', 'info');
    fetch(CAPESYNC_ENDPOINTS.enfileirarTodos)
        .then(r => r.json())
        .then(data => {
            showToast(data.message, data.success ? 'success' : 'error');
            if (data.success) setTimeout(() => location.reload(), 1000);
        })
        .catch(err => showToast('Erro: ' + err, 'error'));
}

function atualizarStatus() {
    if (!endpointDisponivel('statusApi')) {
        return;
    }

    fetch(CAPESYNC_ENDPOINTS.statusApi)
        .then(r => r.json())
        .then(data => {
            document.getElementById('stat-pendente').textContent = data.fila.pendente;
            document.getElementById('stat-sincronizado').textContent = data.fila.sincronizado;
            document.getElementById('stat-erro').textContent = data.fila.erro;
        });
}

function atualizarListaFila() {
    showToast('Atualizando lista da fila...', 'info');
    window.location.reload();
}

function renderMonitorGlobal(monitor) {
    if (!monitor || !monitor.totais) return;

    monitorGlobalCache = monitor;

    document.getElementById('mg-total-empresas').textContent = monitor.totais.empresas || 0;
    document.getElementById('mg-ativas').textContent = monitor.totais.empresas_sync_ativo || 0;
    document.getElementById('mg-pendentes').textContent = monitor.totais.pendentes || 0;
    document.getElementById('mg-processando').textContent = monitor.totais.processando || 0;
    document.getElementById('mg-erros').textContent = monitor.totais.erros || 0;
    document.getElementById('mg-abertos').textContent = monitor.totais.abertos || 0;

    const atualizado = document.getElementById('monitor-global-atualizado');
    const agora = new Date();
    atualizado.textContent = `Atualizado: ${agora.toLocaleString('pt-BR')}`;

    const alertasWrap = document.getElementById('monitor-global-alertas');
    const alertas = monitor.alertas || [];
    if (alertas.length > 0) {
        alertasWrap.innerHTML = alertas.slice(0, 4)
            .map(a => `<div class="alert alert-warning py-2 mb-2"><i class="fas fa-exclamation-triangle"></i> ${escaparHtml(a)}</div>`)
            .join('');
    } else {
        alertasWrap.innerHTML = '<div class="alert alert-success py-2 mb-0"><i class="fas fa-check-circle"></i> Sem alertas globais no momento.</div>';
    }

    renderIdentidadeMonitorGlobal((monitor && monitor.identidade_instalacao) || {});
    renderIntegridadeMonitorGlobal(monitor.integridade || {});

    aplicarFiltroMonitorGlobal();
}

function escaparHtml(valor) {
    return String(valor ?? '')
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function renderIntegridadeMonitorGlobal(integridade) {
    const wrap = document.getElementById('monitor-global-integridade');
    if (!wrap) return;

    const qtd = Number(integridade.pessoas_sem_sync_id || 0);
    const amostras = Array.isArray(integridade.amostras_pessoas_sem_sync_id)
        ? integridade.amostras_pessoas_sem_sync_id
        : [];

    if (qtd > 0) {
        const badges = amostras.map(p => {
            const id = escaparHtml(p.id ?? '');
            const codigo = p.codigo ? ` · cód ${escaparHtml(p.codigo)}` : '';
            const nome = p.nome ? ` · ${escaparHtml(p.nome)}` : '';
            return `<span class="badge bg-light text-dark border me-1 mb-1">#${id}${codigo}${nome}</span>`;
        }).join('');

        wrap.innerHTML = `
            <div class="alert alert-danger py-2 mb-2">
                <i class="fas fa-shield-alt"></i>
                <strong>Integridade:</strong> ${qtd} pessoa(s) local(is) sem <code>sync_id</code>.
                Isso pode causar divergência visual entre lojas.
                <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="corrigirIntegridadePessoasSemSyncId()">
                    <i class="fas fa-wrench"></i> Corrigir e reenfileirar
                </button>
            </div>
            ${badges ? `<div class="small text-muted">Exemplos: ${badges}</div>` : ''}
        `;
        return;
    }

    wrap.innerHTML = `
        <div class="alert alert-success py-2 mb-0">
            <i class="fas fa-check-circle"></i>
            Integridade OK: não há pessoas locais sem <code>sync_id</code>.
        </div>
    `;
}

function renderIdentidadeMonitorGlobal(identidade) {
    const wrap = document.getElementById('monitor-global-identidade');
    if (!wrap) return;

    const normalizarContrato = (origem) => {
        const base = {
            status: 'pendente',
            modo_detectado: 'desconhecido',
            empresa_padrao_id: null,
            empresa_padrao_nome: null,
            motivos: [],
            campos_faltantes: [],
            fallback_primeira_empresa_ativa: false,
            primeira_empresa_ativa_id: null,
            __contrato_incompleto: false,
        };

        if (!origem || typeof origem !== 'object' || Array.isArray(origem)) {
            base.__contrato_incompleto = true;
            base.motivos = ['Contrato de identidade indisponível neste runtime.'];
            return base;
        }

        const merged = { ...base, ...origem };
        merged.motivos = Array.isArray(merged.motivos) ? merged.motivos : [];
        merged.campos_faltantes = Array.isArray(merged.campos_faltantes) ? merged.campos_faltantes : [];
        merged.fallback_primeira_empresa_ativa = Boolean(merged.fallback_primeira_empresa_ativa);

        const camposObrigatorios = [
            'status',
            'modo_detectado',
            'empresa_padrao_id',
            'empresa_padrao_nome',
            'motivos',
            'campos_faltantes',
            'fallback_primeira_empresa_ativa',
            'primeira_empresa_ativa_id',
        ];

        const faltandoContrato = camposObrigatorios.some((campo) => !(campo in origem));
        if (faltandoContrato) {
            merged.__contrato_incompleto = true;
            if (!merged.motivos.length) {
                merged.motivos.push('Contrato de identidade incompleto no payload de monitor global.');
            }
        }

        return merged;
    };

    const identidadeNorm = normalizarContrato(identidade);

    const status = String((identidadeNorm && identidadeNorm.status) || 'pendente').toLowerCase();
    const contratoIncompleto = Boolean(identidadeNorm && identidadeNorm.__contrato_incompleto);

    const alertClass = contratoIncompleto
        ? 'alert-warning'
        : (status === 'valida' ? 'alert-success' : (status === 'pendente' ? 'alert-warning' : 'alert-danger'));
    const badgeClass = contratoIncompleto
        ? 'bg-warning text-dark'
        : (status === 'valida' ? 'bg-success' : (status === 'pendente' ? 'bg-warning text-dark' : 'bg-danger'));

    const motivosBase = Array.isArray(identidadeNorm && identidadeNorm.motivos) ? identidadeNorm.motivos.slice() : [];
    const faltantes = Array.isArray(identidadeNorm && identidadeNorm.campos_faltantes) ? identidadeNorm.campos_faltantes : [];
    if (faltantes.length) {
        motivosBase.push(`faltantes: ${faltantes.join(', ')}`);
    }

    const empresaPadraoId = identidadeNorm && identidadeNorm.empresa_padrao_id;
    const empresaPadraoNome = identidadeNorm && identidadeNorm.empresa_padrao_nome;
    const empresaPadraoTexto = empresaPadraoId
        ? `empresa #${escaparHtml(empresaPadraoId)}${empresaPadraoNome ? ` · ${escaparHtml(empresaPadraoNome)}` : ''}`
        : 'não definida';

    const fallbackPrimeiraAtiva = Boolean(identidadeNorm && identidadeNorm.fallback_primeira_empresa_ativa && identidadeNorm.primeira_empresa_ativa_id);
    const fallbackHtml = fallbackPrimeiraAtiva
        ? `<div class="small mt-1"><strong>Fallback detectado:</strong> primeira empresa ativa = #${escaparHtml(identidadeNorm.primeira_empresa_ativa_id)}</div>`
        : '';

    wrap.innerHTML = `
        <div class="alert ${alertClass} py-2 mb-0">
            <div class="d-flex flex-wrap align-items-center gap-2">
                <i class="fas fa-id-card"></i>
                <strong>Identidade da instalação</strong>
                <span class="badge ${badgeClass}">${escaparHtml(status)}</span>
                <span class="small text-muted">modo: ${escaparHtml((identidadeNorm && identidadeNorm.modo_detectado) || '-')}</span>
                <span class="small text-muted">empresa padrão: ${empresaPadraoTexto}</span>
            </div>
            ${motivosBase.length
                ? `<div class="small mt-1">${escaparHtml(motivosBase.join(' | '))}</div>`
                : '<div class="small mt-1">Sem pendências estruturais visíveis.</div>'}
            ${fallbackHtml}
        </div>
    `;
}

function corrigirIntegridadePessoasSemSyncId() {
    if (!confirm('Gerar sync_id para pessoas sem sync_id e reenfileirar para sincronização agora?')) return;

    showToast('Aplicando correção de integridade...', 'info');

    fetch('/capesync/integridade/corrigir-pessoas-sem-sync-id', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ origem: 'dashboard_capesync' })
    })
        .then(r => r.json())
        .then(data => {
            showToast(data.message || 'Correção finalizada', data.success ? 'success' : 'error');
            if (data.success) {
                atualizarStatus();
                atualizarMonitorGlobal();
            }
        })
        .catch(err => showToast('Erro: ' + err, 'error'));
}

function renderLinhasMonitorGlobal(empresas) {
    const tbody = document.getElementById('monitor-global-tbody');
    if (!Array.isArray(empresas) || !empresas.length) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted py-3">Nenhuma empresa corresponde ao filtro.</td></tr>';
        return;
    }

    tbody.innerHTML = empresas.map(item => {
        const statusBadge = item.sync_ativo ? 'bg-success' : 'bg-secondary';
        const statusTxt = item.sync_ativo ? 'Ativo' : 'Inativo';
        const idade = Number(item.idade_aberto_min || 0);
        const temAntigo = item.mais_antigo_aberto;
        const criadoFmt = temAntigo ? String(item.mais_antigo_aberto).replace('T', ' ').slice(0, 16) : '-';
        const ultimoSync = item.sync_ultimo ? String(item.sync_ultimo).replace('T', ' ').slice(0, 19) : '-';
        const badgePadrao = item.empresa_padrao ? ' <span class="badge bg-dark ms-1">Padrão</span>' : '';
        const badgeIdade = temAntigo
            ? `<span class="badge ${idade > 30 ? 'bg-danger' : 'bg-warning text-dark'} ms-1">${idade} min</span>`
            : '';

        return `
            <tr>
                <td><strong>#${escaparHtml(item.empresa_id)}</strong> ${escaparHtml(item.empresa_nome || '')}${badgePadrao}</td>
                <td><span class="badge ${statusBadge}">${statusTxt}</span></td>
                <td class="text-end text-warning">${item.pendente || 0}</td>
                <td class="text-end text-info">${item.processando || 0}</td>
                <td class="text-end text-danger">${item.erro || 0}</td>
                <td class="text-end text-success">${item.sincronizado || 0}</td>
                <td class="text-end"><strong>${item.abertos || 0}</strong></td>
                <td>${criadoFmt} ${badgeIdade}</td>
                <td>${ultimoSync}</td>
            </tr>
        `;
    }).join('');
}

function aplicarFiltroMonitorGlobal() {
    const busca = (document.getElementById('mg-filtro-empresa')?.value || '').trim().toLowerCase();
    const status = document.getElementById('mg-filtro-status')?.value || 'todos';
    const fila = document.getElementById('mg-filtro-fila')?.value || 'todos';

    const empresas = Array.isArray(monitorGlobalCache?.empresas) ? monitorGlobalCache.empresas : [];
    const filtradas = empresas.filter(item => {
        const nome = String(item.empresa_nome || '').toLowerCase();
        const idTxt = String(item.empresa_id || '');

        if (busca && !nome.includes(busca) && !idTxt.includes(busca)) {
            return false;
        }

        if (status === 'ativo' && !item.sync_ativo) return false;
        if (status === 'inativo' && item.sync_ativo) return false;

        if (fila === 'abertos' && Number(item.abertos || 0) <= 0) return false;
        if (fila === 'erros' && Number(item.erro || 0) <= 0) return false;

        return true;
    });

    renderLinhasMonitorGlobal(filtradas);
}

function limparFiltroMonitorGlobal() {
    const fEmpresa = document.getElementById('mg-filtro-empresa');
    const fStatus = document.getElementById('mg-filtro-status');
    const fFila = document.getElementById('mg-filtro-fila');
    if (fEmpresa) fEmpresa.value = '';
    if (fStatus) fStatus.value = 'todos';
    if (fFila) fFila.value = 'todos';
    aplicarFiltroMonitorGlobal();
}

function atualizarMonitorGlobal() {
    fetch('/capesync/monitor-global-api')
        .then(r => r.json())
        .then(data => {
            if (!data.success) {
                showToast(data.message || 'Falha ao atualizar monitor global', 'error');
                return;
            }
            renderMonitorGlobal(data.monitor_global);
        })
        .catch(() => {
            // fallback silencioso para versões em runtime sem endpoint novo registrado
        });
}

function exportarMonitorGlobalCsv() {
    const monitor = monitorGlobalCache || {};
    const empresas = Array.isArray(monitor.empresas) ? monitor.empresas : [];
    if (!empresas.length) {
        showToast('Sem dados para exportar no monitor global.', 'warning');
        return;
    }

    const identidade = monitor.identidade_instalacao || {};
    const linhas = [];
    linhas.push([
        'empresa_id', 'empresa_nome', 'sync_ativo', 'pendente', 'processando', 'erro',
        'sincronizado', 'abertos', 'mais_antigo_aberto', 'idade_aberto_min', 'sync_ultimo',
        'pessoas_sem_sync_id_global', 'empresa_padrao', 'identidade_instalacao_status', 'identidade_instalacao_modo'
    ]);

    const pessoasSemSyncId = Number((monitor.integridade || {}).pessoas_sem_sync_id || 0);

    for (const item of empresas) {
        linhas.push([
            item.empresa_id ?? '',
            item.empresa_nome ?? '',
            item.sync_ativo ? 'SIM' : 'NÃO',
            item.pendente ?? 0,
            item.processando ?? 0,
            item.erro ?? 0,
            item.sincronizado ?? 0,
            item.abertos ?? 0,
            item.mais_antigo_aberto ?? '',
            item.idade_aberto_min ?? 0,
            item.sync_ultimo ?? '',
            pessoasSemSyncId,
            item.empresa_padrao ? 'SIM' : 'NÃO',
            identidade.status ?? '',
            identidade.modo_detectado ?? ''
        ]);
    }

    const csv = linhas
        .map(cols => cols.map(v => `"${String(v).replace(/"/g, '""')}"`).join(';'))
        .join('\n');

    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    const agora = new Date();
    const stamp = `${agora.getFullYear()}${String(agora.getMonth()+1).padStart(2,'0')}${String(agora.getDate()).padStart(2,'0')}_${String(agora.getHours()).padStart(2,'0')}${String(agora.getMinutes()).padStart(2,'0')}${String(agora.getSeconds()).padStart(2,'0')}`;
    a.href = url;
    a.download = `monitor_sync_global_${stamp}.csv`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
}

renderMonitorGlobal(monitorGlobalCache || {
    totais: {},
    alertas: [],
    integridade: {},
    empresas: [],
    identidade_instalacao: {
        status: 'pendente',
        modo_detectado: 'desconhecido',
        empresa_padrao_id: null,
        empresa_padrao_nome: null,
        motivos: ['contrato_identidade_indisponivel_no_runtime'],
        campos_faltantes: [],
        fallback_primeira_empresa_ativa: false,
        primeira_empresa_ativa_id: null,
    },
});

// Auto-atualizar a cada 30 segundos
setInterval(() => {
    atualizarStatus();
    atualizarMonitorGlobal();
}, 30000);
</script>
{% endblock %}