<?php
$emAndamento = (int) ($resumo['EM_ANDAMENTO'] ?? 0);
$total = (int) ($resumo['TOTAL'] ?? 0);
$atrasadas = (int) ($slaResumo['ATRASADAS'] ?? 0);
$venceHoje = (int) ($slaResumo['VENCE_HOJE'] ?? 0);
$alerta = (int) ($slaResumo['ALERTA'] ?? 0);
$concluidas = (int) ($resumo['CONCLUIDA'] ?? 0);
$topTotal = 0;
foreach (($rankingServicos ?? []) as $row) {
    $topTotal = max($topTotal, (int) ($row['total'] ?? 0));
}
?>

<section class="page-header page-header-flex mayor-page-header">
    <div>
        <h2>Dashboard do Prefeito</h2>
        <p>Visão executiva do município com mapa em destaque, serviços mais demandados e radar de SLA.</p>
    </div>
    <div class="dashboard-toolbar mayor-toolbar">
        <span class="sla-badge sla-badge-info">Painel executivo</span>
        <span class="sla-badge sla-badge-ok">Atualização automática: 60s</span>
        <span class="muted small-text" id="mayor-refresh-counter">Próxima atualização em 60s</span>
    </div>
</section>

<div class="stats-grid executive-grid mayor-kpi-grid">
    <div class="card stat-card stat-card-primary">
        <span>Total de ocorrências</span>
        <strong><?= $total ?></strong>
        <small class="muted">Base consolidada para acompanhamento do gabinete.</small>
    </div>
    <div class="card stat-card stat-card-info">
        <span>Em andamento</span>
        <strong><?= $emAndamento ?></strong>
        <small class="muted">Demandas ainda em tratamento pelas equipes.</small>
    </div>
    <div class="card stat-card stat-card-success">
        <span>Concluídas</span>
        <strong><?= $concluidas ?></strong>
        <small class="muted">Ocorrências já finalizadas pela operação.</small>
    </div>
    <div class="card stat-card stat-card-danger">
        <span>Fora do SLA</span>
        <strong><?= $atrasadas ?></strong>
        <small class="muted">Situações que exigem prioridade imediata.</small>
    </div>
    <div class="card stat-card stat-card-warning">
        <span>Pressão de prazo</span>
        <strong><?= $venceHoje + $alerta ?></strong>
        <small class="muted"><?= $venceHoje ?> vence hoje • <?= $alerta ?> em alerta</small>
    </div>
</div>

<section class="card mayor-map-card mayor-map-card-featured">
    <div class="card-head card-head-stack-mobile mayor-map-head">
        <div>
            <h3>Mapa estratégico do município</h3>
            <p class="muted">Leitura territorial ampliada das ocorrências para apoiar a tomada de decisão do gabinete e a priorização operacional.</p>
        </div>
        <div class="inline-metrics-wrap mayor-map-metrics">
            <span class="metric-chip"><?= count($pontosMapa ?? []) ?> ponto(s) monitorados</span>
            <span class="metric-chip metric-chip-soft"><?= count($legendaCategorias ?? []) ?> serviço(s) no mapa</span>
        </div>
    </div>

    <div class="mayor-map-layout mayor-map-layout-featured">
        <div id="mapa-prefeito" class="map-box mayor-map-surface mayor-map-surface-featured"></div>
        <aside class="map-legend dashboard-map-legend mayor-side-panel mayor-map-legend-panel">
            <h4>Legenda por serviço</h4>
            <?php if (empty($legendaCategorias)): ?>
                <p class="muted">Sem ocorrências georreferenciadas no momento.</p>
            <?php else: ?>
                <ul>
                    <?php foreach ($legendaCategorias as $nome => $cor): ?>
                        <li><span class="legend-swatch" style="background: <?= e($cor) ?>;"></span><?= e($nome) ?></li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>

            <div class="map-side-note mayor-note mayor-note-emphasis">
                <strong>Leitura executiva</strong>
                <p class="muted">O mapa agora é o foco principal do painel do Prefeito para identificar concentração territorial, pressão de atendimento e áreas críticas do município.</p>
            </div>
        </aside>
    </div>
</section>

<div class="mayor-insights-grid">
    <section class="card mayor-services-card">
        <div class="card-head mayor-services-head">
            <div>
                <h3>Serviços mais demandados</h3>
                <p class="muted">Ranking executivo com maior destaque visual para as frentes que mais pressionam a operação.</p>
            </div>
            <span class="sla-badge sla-badge-info">Prioridades do momento</span>
        </div>
        <?php if (empty($rankingServicos)): ?>
            <p class="muted">Sem dados suficientes para o ranking.</p>
        <?php else: ?>
            <div class="service-ranking-list service-ranking-list-featured">
                <?php foreach ($rankingServicos as $index => $item): ?>
                    <?php
                    $cor = trim((string) ($item['cor'] ?? '')) !== '' ? (string) $item['cor'] : '#1351b4';
                    $valor = (int) ($item['total'] ?? 0);
                    $percentual = $topTotal > 0 ? max(10, (int) round(($valor / $topTotal) * 100)) : 0;
                    ?>
                    <div class="service-ranking-item service-ranking-item-featured">
                        <div class="service-ranking-order">#<?= $index + 1 ?></div>
                        <div class="service-ranking-content">
                            <div class="service-ranking-head service-ranking-head-featured">
                                <span class="category-badge service-ranking-badge" style="background: <?= e($cor) ?>22; color: <?= e($cor) ?>; border-color: <?= e($cor) ?>55;"><?= e($item['nome']) ?></span>
                                <strong><?= $valor ?></strong>
                            </div>
                            <div class="service-ranking-track service-ranking-track-featured">
                                <div class="service-ranking-fill" style="width: <?= $percentual ?>%; background: <?= e($cor) ?>;"></div>
                            </div>
                            <div class="service-ranking-meta">
                                <span class="muted small-text">Participação relativa no ranking atual</span>
                                <strong><?= $percentual ?>%</strong>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </section>

    <section class="card mayor-sla-card">
        <div class="card-head">
            <div>
                <h3>Radar de SLA</h3>
                <p class="muted">Indicadores de prazo para monitoramento direto do gabinete.</p>
            </div>
        </div>

        <div class="sla-overview-grid mayor-sla-grid">
            <div class="sla-tile sla-tile-danger">
                <strong><?= $atrasadas ?></strong>
                <span>Atrasadas</span>
            </div>
            <div class="sla-tile sla-tile-warning">
                <strong><?= $venceHoje ?></strong>
                <span>Vence hoje</span>
            </div>
            <div class="sla-tile sla-tile-alert">
                <strong><?= $alerta ?></strong>
                <span>Alerta</span>
            </div>
            <div class="sla-tile sla-tile-ok">
                <strong><?= (int) ($slaResumo['NO_PRAZO'] ?? 0) ?></strong>
                <span>No prazo</span>
            </div>
        </div>

        <div class="deadline-bars">
            <?php
            $faixaLabels = [
                'ATRASADAS' => 'Atrasadas',
                'VENCE_HOJE' => 'Vence hoje',
                '1_DIA' => '1 dia restante',
                '2_A_3_DIAS' => '2 a 3 dias',
                '4_MAIS_DIAS' => '4+ dias',
                'FINALIZADAS' => 'Finalizadas',
            ];
            $faixaTotal = max(1, array_sum($faixasPrazo ?? []));
            ?>
            <?php foreach ($faixaLabels as $key => $label): ?>
                <?php $valor = (int) ($faixasPrazo[$key] ?? 0); $largura = max(6, (int) round(($valor / $faixaTotal) * 100)); ?>
                <div class="deadline-bar-row">
                    <div class="deadline-bar-meta">
                        <span><?= e($label) ?></span>
                        <strong><?= $valor ?></strong>
                    </div>
                    <div class="deadline-bar-track">
                        <div class="deadline-bar-fill deadline-bar-<?= strtolower(str_replace('_', '-', $key)) ?>" style="width: <?= $valor > 0 ? $largura : 0 ?>%;"></div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </section>
</div>

<div class="dashboard-grid detail-grid mayor-detail-grid">
    <div class="card">
        <div class="card-head">
            <div>
                <h3>Ocorrências críticas</h3>
                <p class="muted">Fila executiva para acompanhamento dos casos mais sensíveis.</p>
            </div>
            <a class="btn btn-sm" href="<?= base_url('/admin/ocorrencias') ?>">Abrir listagem</a>
        </div>

        <?php if (empty($criticas ?? [])): ?>
            <p class="muted">Nenhuma ocorrência crítica neste momento.</p>
        <?php else: ?>
            <table class="table responsive-table">
                <thead>
                    <tr>
                        <th>Protocolo</th>
                        <th>Serviço</th>
                        <th>Status</th>
                        <th>SLA</th>
                        <th>Ação</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($criticas as $item): ?>
                        <tr class="row-sla-<?= e($item['sla_classe'] ?? 'no-prazo') ?>">
                            <td><?= e($item['protocolo']) ?></td>
                            <td><span class="category-badge" style="background: <?= e($item['categoria_cor'] ?: '#1351b4') ?>22; color: <?= e($item['categoria_cor'] ?: '#1351b4') ?>; border-color: <?= e($item['categoria_cor'] ?: '#1351b4') ?>55;"><?= e($item['categoria_nome']) ?></span></td>
                            <td><span class="status-badge status-<?= strtolower(str_replace('_', '-', $item['status'])) ?>"><?= e($item['status']) ?></span></td>
                            <td>
                                <span class="sla-badge sla-badge-<?= e($item['sla_classe'] ?? 'ok') ?>"><?= e(str_replace('_', ' ', $item['sla_status'] ?? 'NO_PRAZO')) ?></span>
                                <div class="muted small-text"><?= e($item['sla_prazo_texto'] ?? '') ?></div>
                            </td>
                            <td><a class="btn btn-sm" href="<?= base_url('/admin/ocorrencias/show?id=' . (int) $item['id']) ?>">Abrir</a></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>
    </div>

    <div class="card">
        <div class="card-head">
            <div>
                <h3>Últimas movimentações</h3>
                <p class="muted">Registros mais recentes para leitura rápida do gabinete.</p>
            </div>
        </div>
        <table class="table responsive-table">
            <thead>
                <tr>
                    <th>Protocolo</th>
                    <th>Status</th>
                    <th>SLA</th>
                    <th>Ação</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($recentes ?? [])): ?>
                    <tr><td colspan="4">Nenhuma ocorrência recente.</td></tr>
                <?php else: ?>
                    <?php foreach ($recentes as $item): ?>
                        <tr class="row-sla-<?= e($item['sla_classe'] ?? 'no-prazo') ?>">
                            <td>
                                <strong><?= e($item['protocolo']) ?></strong>
                                <div class="muted small-text"><?= e($item['categoria_nome'] ?? '-') ?></div>
                            </td>
                            <td><span class="status-badge status-<?= strtolower(str_replace('_', '-', $item['status'])) ?>"><?= e($item['status']) ?></span></td>
                            <td>
                                <span class="sla-badge sla-badge-<?= e($item['sla_classe'] ?? 'ok') ?>"><?= e(str_replace('_', ' ', $item['sla_status'] ?? 'NO_PRAZO')) ?></span>
                                <div class="muted small-text"><?= e($item['sla_prazo_texto'] ?? '') ?></div>
                            </td>
                            <td><a class="btn btn-sm" href="<?= base_url('/admin/ocorrencias/show?id=' . (int) $item['id']) ?>">Abrir</a></td>
                        </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
(function(){
    const pontos = <?= json_encode(array_values($pontosMapa ?? []), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
    const mapEl = document.getElementById('mapa-prefeito');
    if (mapEl && typeof L !== 'undefined') {
        const map = L.map(mapEl, { scrollWheelZoom: false }).setView([-20.5833, -46.9167], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; OpenStreetMap'
        }).addTo(map);

        const bounds = [];
        pontos.forEach(function(item){
            if (!item.latitude || !item.longitude) return;
            const lat = parseFloat(item.latitude);
            const lng = parseFloat(item.longitude);
            if (isNaN(lat) || isNaN(lng)) return;
            const color = item.cor || '#1351b4';
            const marker = L.circleMarker([lat, lng], {
                radius: 9,
                color: color,
                fillColor: color,
                fillOpacity: 0.88,
                weight: 2
            }).addTo(map);
            marker.bindPopup(`
                <strong>${item.protocolo || ''}</strong><br>
                ${item.categoria || 'Sem serviço'}<br>
                <span style="color:#475569">${item.status || ''}</span>
            `);
            bounds.push([lat, lng]);
        });

        if (bounds.length) {
            map.fitBounds(bounds, { padding: [30, 30] });
        }

        setTimeout(function(){ map.invalidateSize(); }, 250);
        window.addEventListener('resize', function(){ map.invalidateSize(); });
    }

    let counter = 60;
    const counterEl = document.getElementById('mayor-refresh-counter');
    setInterval(function(){
        counter--;
        if (counterEl) {
            counterEl.textContent = 'Próxima atualização em ' + counter + 's';
        }
        if (counter <= 0) {
            window.location.reload();
        }
    }, 1000);
})();
</script>
