{% extends "base.html" %}

{% block title %}Central de Comando — {{ app_name }}{% endblock %}

{% block content %}
<!-- KPI Cards Grid (Identidade Visual Azul Protagonista & Verde Claro nos Números) -->
<div class="kpi-grid">
    <div class="kpi-card" style="border-left: 4px solid #10B981;">
        <div class="kpi-icon-box icon-box-green">👥</div>
        <div>
            <div class="kpi-value kpi-value-green">{{ total_cadastrados if total_cadastrados is not none else 0 }}</div>
            <div class="kpi-label">Apoiadores Mobilizados</div>
        </div>
    </div>
    
    <div class="kpi-card" style="border-left: 4px solid #10B981;">
        <div class="kpi-icon-box icon-box-green">🧑‍💼</div>
        <div>
            <div class="kpi-value kpi-value-green">{{ total_cadastradores if total_cadastradores is not none else 0 }}</div>
            <div class="kpi-label">Multiplicadores Ativos</div>
        </div>
    </div>
    
    <div class="kpi-card" style="border-left: 4px solid #10B981;">
        <div class="kpi-icon-box icon-box-green">⚡</div>
        <div>
            <div class="kpi-value kpi-value-green">{{ cadastros_hoje if cadastros_hoje is not none else 0 }}</div>
            <div class="kpi-label">Cadastrados Hoje</div>
        </div>
    </div>
    
    <div class="kpi-card" style="border-left: 4px solid #10B981;">
        <div class="kpi-icon-box icon-box-green">🎯</div>
        <div>
            <div class="kpi-value kpi-value-green">{{ percentual_meta if percentual_meta is not none else 0 }}%</div>
            <div class="kpi-label">Meta Geral ({{ total_cadastrados }}/{{ meta_total }})</div>
        </div>
    </div>
    
    <div class="kpi-card" style="border-left: 4px solid #10B981;">
        <div class="kpi-icon-box icon-box-green">📍</div>
        <div>
            <div class="kpi-value kpi-value-green">{{ bairros_cobertos if bairros_cobertos is not none else 0 }}</div>
            <div class="kpi-label">Bairros Cobertos</div>
        </div>
    </div>
</div>

<!-- Gráficos & Desempenho Territorial -->
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;">
    <div class="content-card">
        <h3 class="section-title-navy">📈 Evolução dos Cadastros no Tempo</h3>
        <div style="height: 300px; position: relative;">
            <canvas id="chartEvolucao"></canvas>
        </div>
    </div>
    
    <div class="content-card">
        <h3 class="section-title-navy">🗺️ Distribuição por Zona Urbana</h3>
        <div style="height: 300px; position: relative;">
            <canvas id="chartZonas"></canvas>
        </div>
    </div>
</div>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
    <div class="content-card">
        <h3 class="section-title-navy">🏆 Top 5 Multiplicadores da Campanha</h3>
        <table class="custom-table">
            <thead>
                <tr>
                    <th>Multiplicador</th>
                    <th>Cadastrados</th>
                    <th>Meta</th>
                    <th>Progresso</th>
                </tr>
            </thead>
            <tbody>
                {% if top_cadastradores %}
                    {% for top in top_cadastradores %}
                    <tr>
                        <td style="font-weight: 700; color: var(--color-navy-main);">{{ top.nome }}</td>
                        <td style="font-weight: 800; color: var(--color-orange-main);">{{ top.total }}</td>
                        <td>{{ top.meta }}</td>
                        <td>
                            <span class="badge {% if top.percentual >= 100 %}badge-success{% else %}badge-warning{% endif %}">
                                {{ top.percentual }}%
                            </span>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="4" style="text-align: center;">Nenhum multiplicador com dados ainda.</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <div class="content-card">
        <h3 class="section-title-navy">📍 Top 5 Bairros com Maior Mobilização</h3>
        <table class="custom-table">
            <thead>
                <tr>
                    <th>Bairro</th>
                    <th>Zona</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                {% if top_bairros %}
                    {% for b in top_bairros %}
                    <tr>
                        <td style="font-weight: 700; color: var(--color-navy-main);">{{ b.bairro }}</td>
                        <td><span class="badge" style="background: #EBF3FA; color: var(--color-navy-main);">{{ b.zona }}</span></td>
                        <td style="font-weight: 800; color: var(--color-blue-accent);">{{ b.total }}</td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="3" style="text-align: center;">Nenhum bairro cadastrado ainda.</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    // 1. Gráfico de Evolução (Linha)
    const ctxEvolucao = document.getElementById('chartEvolucao').getContext('2d');
    const evolucaoData = {{ (evolucao_diaria or [])|tojson }};
    
    new Chart(ctxEvolucao, {
        type: 'line',
        data: {
            labels: evolucaoData.map(d => d.data),
            datasets: [{
                label: 'Cadastros Diários',
                data: evolucaoData.map(d => d.total),
                borderColor: '#FF6500',
                backgroundColor: 'rgba(255, 101, 0, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.3,
                pointBackgroundColor: '#FF6500',
                pointRadius: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                y: { beginAtZero: true, grid: { color: '#E2E8F0' } },
                x: { grid: { display: false } }
            }
        }
    });

    // 2. Gráfico de Zonas Urbanas (Doughnut / Rosca Multi-colorida de Alto Contraste)
    const ctxZonas = document.getElementById('chartZonas').getContext('2d');
    const zonasData = {{ (distribuicao_zonas or [])|tojson }};
    
    const CORES_ZONAS = {
        'Zona Leste': '#FF6500',
        'Zona Norte': '#0B0B5C',
        'Zona Sul': '#8B5CF6',
        'Zona Oeste': '#2563EB',
        'Centro-Sul': '#00B884',
        'Centro-Oeste': '#F5B700'
    };

    const backgroundColors = zonasData.map(z => CORES_ZONAS[z.zona] || '#64748B');

    new Chart(ctxZonas, {
        type: 'doughnut',
        data: {
            labels: zonasData.map(z => z.zona),
            datasets: [{
                data: zonasData.map(z => z.total),
                backgroundColor: backgroundColors,
                borderWidth: 2,
                borderColor: '#FFFFFF'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom', labels: { boxWidth: 12, font: { weight: 'bold' } } }
            }
        }
    });
});
</script>
{% endblock %}