<?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">
    <div>
        <h2>Dashboard executivo</h2>
        <p>Painel de operação com SLA, criticidade e visão rápida das ocorrências em andamento.</p>
    </div>
    <div class="dashboard-toolbar">
        <span class="sla-badge sla-badge-ok">Atualização automática: 60s</span>
        <span class="muted small-text" id="refresh-counter">Próxima atualização em 60s</span>
    </div>
</section>

<div class="stats-grid executive-grid">
    <div class="card stat-card stat-card-primary">
        <span>Total de ocorrências</span>
        <strong><?= $total ?></strong>
        <small class="muted">Base consolidada no escopo do usuário.</small>
    </div>
    <div class="card stat-card stat-card-info">
        <span>Em andamento</span>
        <strong><?= $emAndamento ?></strong>
        <small class="muted">Abertas, recebidas, em análise, encaminhadas ou em atendimento.</small>
    </div>
    <div class="card stat-card stat-card-danger">
        <span>Atrasadas</span>
        <strong><?= $atrasadas ?></strong>
        <small class="muted">Ocorrências fora do prazo de SLA.</small>
    </div>
    <div class="card stat-card stat-card-warning">
        <span>Vence hoje / alerta</span>
        <strong><?= $venceHoje + $alerta ?></strong>
        <small class="muted"><?= $venceHoje ?> vence hoje • <?= $alerta ?> em alerta</small>
    </div>
    <div class="card stat-card stat-card-success">
        <span>Concluídas</span>
        <strong><?= $concluidas ?></strong>
        <small class="muted">Atendimentos já encerrados.</small>
    </div>
</div>

<div class="dashboard-panels-grid">
    <div class="card">
        <div class="card-head">
            <div>
                <h3>Radar de SLA</h3>
                <p class="muted">Priorize as ocorrências críticas antes do vencimento.</p>
            </div>
        </div>
        <div class="sla-overview-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 (até 2 dias)</span>
            </div>
            <div class="sla-tile sla-tile-ok">
                <strong><?= (int) ($slaResumo['NO_PRAZO'] ?? 0) ?></strong>
                <span>No prazo</span>
            </div>
            <div class="sla-tile sla-tile-neutral">
                <strong><?= (int) ($slaResumo['FINALIZADAS'] ?? 0) ?></strong>
                <span>Finalizadas</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>
    </div>

    <div class="card">
        <div class="card-head">
            <div>
                <h3>Serviços mais demandados</h3>
                <p class="muted">Ranking das categorias com mais registros.</p>
            </div>
        </div>

        <?php if (empty($rankingServicos)): ?>
            <p class="muted">Sem dados suficientes para exibir o ranking.</p>
        <?php else: ?>
            <div class="service-ranking-list">
                <?php foreach ($rankingServicos as $item): ?>
                    <?php
                    $cor = trim((string) ($item['cor'] ?? '')) !== '' ? (string) $item['cor'] : '#1351b4';
                    $valor = (int) ($item['total'] ?? 0);
                    $percentual = $topTotal > 0 ? max(8, (int) round(($valor / $topTotal) * 100)) : 0;
                    ?>
                    <div class="service-ranking-item">
                        <div class="service-ranking-head">
                            <span class="category-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">
                            <div class="service-ranking-fill" style="width: <?= $percentual ?>%; background: <?= e($cor) ?>;"></div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

<div class="dashboard-grid detail-grid">
    <div>
        <div class="card">
            <div class="card-head">
                <div>
                    <h3>Ocorrências críticas</h3>
                    <p class="muted">Fila prioritária para a operação diária.</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>Mapa operacional</h3>
                    <p class="muted">Visualização rápida dos pontos ativos no município.</p>
                </div>
                <a class="btn btn-sm btn-outline" href="<?= base_url('/admin/mapa') ?>">Ver mapa completo</a>
            </div>
            <div class="map-box large-map" id="mapa-dashboard"></div>
            <div class="map-legend dashboard-map-legend">
                <h4>Legenda por serviço</h4>
                <?php if (empty($legendaCategorias)): ?>
                    <p class="muted">Sem ocorrências no mapa.</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>
        </div>
    </div>

    <div>
        <div class="card">
            <div class="card-head">
                <div>
                    <h3>Últimas movimentações</h3>
                    <p class="muted">Ocorrências registradas recentemente no painel.</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>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    if (typeof renderMultiMarkerMap === 'function') {
        renderMultiMarkerMap('mapa-dashboard', <?= json_encode($pontosMapa, JSON_UNESCAPED_UNICODE) ?>);
    }

    var refreshDelay = 60000;
    var refreshTimer = null;
    var countdownTimer = null;
    var counterEl = document.getElementById('refresh-counter');

    function startCountdown() {
        var remaining = Math.floor(refreshDelay / 1000);
        if (countdownTimer) {
            window.clearInterval(countdownTimer);
        }
        if (counterEl) {
            counterEl.textContent = 'Próxima atualização em ' + remaining + 's';
        }
        countdownTimer = window.setInterval(function () {
            remaining -= 1;
            if (remaining < 0) {
                remaining = 0;
            }
            if (counterEl) {
                counterEl.textContent = 'Próxima atualização em ' + remaining + 's';
            }
        }, 1000);
    }

    function scheduleRefresh() {
        if (refreshTimer) {
            window.clearTimeout(refreshTimer);
        }

        startCountdown();
        refreshTimer = window.setTimeout(function () {
            var nextUrl = new URL(window.location.href);
            nextUrl.searchParams.set('_refresh', String(Date.now()));
            window.location.replace(nextUrl.toString());
        }, refreshDelay);
    }

    scheduleRefresh();

    document.addEventListener('visibilitychange', function () {
        if (document.hidden) {
            if (refreshTimer) {
                window.clearTimeout(refreshTimer);
                refreshTimer = null;
            }
            if (countdownTimer) {
                window.clearInterval(countdownTimer);
                countdownTimer = null;
            }
            return;
        }

        scheduleRefresh();
    });
});
</script>
