<?php
$mapaBasePath = app_base_path() . '/index.php';
$mapaFilterAction = $mapaBasePath;
$mapaClearAction = $mapaBasePath . '?route=' . rawurlencode('/admin/mapa');
$mapaStatuses = ['ABERTA','RECEBIDA','EM_ANALISE','ENCAMINHADA','EM_ATENDIMENTO','CONCLUIDA','NAO_PROCEDE','DUPLICADA'];
$totalPontosMapa = count($pontosMapa ?? []);
$categoriasAtivasMapa = count($legendaCategorias ?? []);
$statusAtualMapa = trim((string) ($filtrosMapa['status'] ?? ''));
$categoriaAtualMapa = trim((string) ($filtrosMapa['categoria_id'] ?? ''));
$filtrosAplicadosMapa = ($statusAtualMapa !== '' ? 1 : 0) + ($categoriaAtualMapa !== '' ? 1 : 0);
?>

<section class="page-header page-header-flex">
    <div>
        <h2>Mapa geral das ocorrências</h2>
        <p>Visão operacional com atualização automática para orientar a triagem e o deslocamento das equipes.</p>
    </div>
    <div class="dashboard-toolbar">
        <span class="sla-badge sla-badge-info">Atualização automática: 60s</span>
        <span class="muted small-text" id="map-refresh-counter">Próxima atualização em 60s</span>
    </div>
</section>

<div class="stats-grid executive-grid map-summary-grid">
    <div class="card stat-card stat-card-primary">
        <span>Ocorrências no mapa</span>
        <strong><?= $totalPontosMapa ?></strong>
        <small class="muted">Total exibido no recorte atual.</small>
    </div>
    <div class="card stat-card stat-card-info">
        <span>Serviços visíveis</span>
        <strong><?= $categoriasAtivasMapa ?></strong>
        <small class="muted">Categorias com pontos exibidos no momento.</small>
    </div>
    <div class="card stat-card stat-card-warning">
        <span>Filtros ativos</span>
        <strong><?= $filtrosAplicadosMapa ?></strong>
        <small class="muted"><?= $filtrosAplicadosMapa > 0 ? 'Mapa refinado para operação.' : 'Sem filtros aplicados.' ?></small>
    </div>
</div>

<form method="GET" action="<?= e($mapaFilterAction) ?>" class="card filter-grid map-filter-card">
    <input type="hidden" name="route" value="/admin/mapa">
    <div>
        <label>Status</label>
        <select name="status">
            <option value="">Em andamento</option>
            <?php foreach ($mapaStatuses as $status): ?>
                <option value="<?= e($status) ?>" <?= $statusAtualMapa === $status ? 'selected' : '' ?>><?= e($status) ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div>
        <label>Serviço</label>
        <select name="categoria_id">
            <option value="">Todos</option>
            <?php foreach ($categorias as $categoria): ?>
                <option value="<?= (int) $categoria['id'] ?>" <?= $categoriaAtualMapa === (string) $categoria['id'] ? 'selected' : '' ?>><?= e($categoria['nome']) ?></option>
            <?php endforeach; ?>
        </select>
    </div>
    <div class="filter-actions">
        <button type="submit" class="btn">Aplicar filtros</button>
        <a href="<?= e($mapaClearAction) ?>" class="btn btn-outline">Limpar</a>
    </div>
</form>

<div class="card map-card-enhanced">
    <div class="card-head card-head-stack-mobile">
        <div>
            <h3>Monitoramento geográfico</h3>
            <p class="muted">Pontos georreferenciados com visual semelhante ao dashboard executivo.</p>
        </div>
        <div class="inline-metrics-wrap">
            <span class="metric-chip"><?= $totalPontosMapa ?> ponto(s)</span>
            <span class="metric-chip metric-chip-soft"><?= $categoriasAtivasMapa ?> serviço(s)</span>
        </div>
    </div>

    <div class="map-layout map-layout-dashboard">
        <div id="mapa-geral" class="map-box extra-large-map map-dashboard-surface"></div>

        <aside class="map-legend dashboard-map-legend operational-side-panel">
            <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>
                            <span><?= e($nome) ?></span>
                        </li>
                    <?php endforeach; ?>
                </ul>
            <?php endif; ?>

            <div class="map-side-note">
                <strong>Atualização automática</strong>
                <p class="muted">Este mapa recarrega sozinho a cada 60 segundos, mantendo os filtros atuais.</p>
            </div>
        </aside>
    </div>
</div>

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

    var refreshInSeconds = 60;
    var counterEl = document.getElementById('map-refresh-counter');

    function updateCounter(value) {
        if (counterEl) {
            counterEl.textContent = 'Próxima atualização em ' + value + 's';
        }
    }

    updateCounter(refreshInSeconds);

    setInterval(function () {
        refreshInSeconds -= 1;

        if (refreshInSeconds <= 0) {
            updateCounter(0);
            window.location.reload();
            return;
        }

        updateCounter(refreshInSeconds);
    }, 1000);
});
</script>
