{% extends "base.html" %}

{% block title %}Rede de Multiplicadores — {{ app_name }}{% endblock %}

{% block content %}
<div class="content-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <div>
            <h2 style="color: #123B6D; font-weight: 800;">🌐 Rede de Multiplicadores e Sub-árvores</h2>
            <p style="color: #5A6E85; font-size: 0.9rem;">Visão hierárquica por multiplicador superior e métricas acumuladas</p>
        </div>
        {% if current_user.can_create_cadastrador() %}
        <a href="{{ url_for('usuarios.novo') }}" class="btn-primary-orange">
            + Cadastrar Multiplicador
        </a>
        {% endif %}
    </div>

    <!-- Árvore Visual de Rede -->
    <div style="background-color: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 12px; padding: 2rem;">
        <div style="text-align: center; margin-bottom: 2rem;">
            <div style="display: inline-block; background: #123B6D; color: #FFFFFF; padding: 0.75rem 1.5rem; border-radius: 30px; font-weight: 700; box-shadow: 0 4px 12px rgba(18, 59, 109, 0.25);">
                🏢 HIERARQUIA DA CAMPANHA (RAIZ)
            </div>
            <div style="width: 2px; height: 30px; background-color: #CBD5E1; margin: 0 auto;"></div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
            {% for node in rede_nodes %}
            <div style="background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 12px; padding: 1.25rem; box-shadow: 0 4px 12px rgba(0,0,0,0.03); position: relative; border-top: 4px solid {% if node.meta_atingida %}#2E7D32{% else %}#1976D2{% endif %};">
                <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                    <div>
                        <h3 style="font-weight: 700; color: #123B6D; font-size: 1.05rem;">{{ node.nome }}</h3>
                        <span style="font-size: 0.75rem; color: #1976D2; font-weight: 600;">Subordinado a: {{ node.cadastrador_pai_nome }}</span>
                    </div>
                    {% if node.meta_atingida %}
                        <span class="badge badge-success">{{ node.cadastros_qtd }}/{{ node.meta }} ✓</span>
                    {% else %}
                        <span class="badge badge-warning">{{ node.cadastros_qtd }}/{{ node.meta }}</span>
                    {% endif %}
                </div>

                <div class="progress-bar-container" style="height: 10px;">
                    <div class="progress-bar-fill" style="width: {{ node.percentual }}%;"></div>
                </div>

                <!-- Métricas da Sub-árvore -->
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; background: #F8FAFC; padding: 0.5rem; border-radius: 6px; margin-top: 0.75rem; font-size: 0.8rem;">
                    <div>
                        <span style="color: #5A6E85; display: block;">Diretos:</span>
                        <strong style="color: #123B6D; font-size: 1rem;">{{ node.cadastros_qtd }}</strong>
                    </div>
                    <div>
                        <span style="color: #5A6E85; display: block;">Sub-árvore Total:</span>
                        <strong style="color: #F58220; font-size: 1rem;">{{ node.sub_tree_total }}</strong>
                    </div>
                </div>

                <!-- Bairros de destaque -->
                {% if node.bairros_top %}
                <div style="margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px dashed #E2E8F0;">
                    <div style="font-size: 0.75rem; font-weight: 700; color: #5A6E85; text-transform: uppercase; margin-bottom: 0.3rem;">Principais Bairros:</div>
                    <div style="display: flex; gap: 0.4rem; flex-wrap: wrap;">
                        {% for b in node.bairros_top %}
                            <span style="background: #F1F5F9; color: #1E293B; font-size: 0.75rem; padding: 0.15rem 0.4rem; border-radius: 4px;">
                                {{ b.bairro }} ({{ b.total }})
                            </span>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
                    <button onclick="abrirDetalhe({{ node.id }})" class="btn-blue" style="flex: 1; text-align: center; font-size: 0.8rem; padding: 0.4rem;">
                        🔍 Ver Sub-árvore Completa
                    </button>
                </div>
            </div>
            {% else %}
            <div style="grid-column: 1 / -1; text-align: center; color: #5A6E85; padding: 2rem;">
                Nenhum multiplicador registrado na rede ainda.
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- Modal Detalhe Cadastrador -->
<div id="detalheModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 2000; align-items: center; justify-content: center;">
    <div style="background: #FFFFFF; width: 90%; max-width: 550px; border-radius: 12px; padding: 1.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; border-bottom: 1px solid #E2E8F0; padding-bottom: 0.75rem;">
            <h3 id="modalNome" style="color: #123B6D; font-weight: 700;">Detalhes da Sub-árvore</h3>
            <button onclick="fecharModal()" style="background: none; border: none; font-size: 1.25rem; cursor: pointer;">✕</button>
        </div>
        <div id="modalConteudo">
            Carregando...
        </div>
    </div>
</div>

<script>
async function abrirDetalhe(id) {
    const modal = document.getElementById('detalheModal');
    const conteudo = document.getElementById('modalConteudo');
    modal.style.display = 'flex';
    conteudo.innerHTML = 'Carregando dados da rede...';

    try {
        const res = await fetch(`/rede/detalhe/${id}`);
        const data = await res.json();
        
        let html = `
            <p><strong>Cadastros Diretos:</strong> ${data.total_cadastros_diretos}</p>
            <p><strong>Total Acumulado da Sub-árvore:</strong> <span style="color: #F58220; font-weight: bold;">${data.total_sub_tree} apoiadores</span></p>
            <h4 style="margin-top: 1rem; font-size: 0.9rem; color: #1976D2;">Cadastradores Subordinados (${data.sub_cadastradores.length}):</h4>
            <ul style="margin-left: 1.2rem; margin-bottom: 1rem;">
        `;
        data.sub_cadastradores.forEach(sub => {
            html += `<li><strong>${sub.nome}</strong> (${sub.email}) — ${sub.total_diretos} cadastros diretos</li>`;
        });
        html += `</ul><h4 style="font-size: 0.9rem; color: #1976D2;">Últimos Registros Diretos:</h4><ul style="margin-left: 1.2rem;">`;
        data.ultimos_cadastros.forEach(u => {
            html += `<li>${u.nome_completo} (${u.bairro}) - ${u.criado_em}</li>`;
        });
        html += `</ul>`;
        conteudo.innerHTML = html;
        document.getElementById('modalNome').textContent = data.cadastrador.nome;
    } catch (e) {
        conteudo.innerHTML = 'Erro ao carregar os detalhes.';
    }
}

function fecharModal() {
    document.getElementById('detalheModal').style.display = 'none';
}
</script>
{% endblock %}