{% extends "base.html" %}

{% block title %}Meu Painel de Multiplicador — {{ app_name }}{% endblock %}

{% block content %}
<div style="max-width: 900px; margin: 0 auto;">
    <!-- Card de Boas-Vindas & Métricas da Rede -->
    <div class="content-card" style="padding: 1.75rem;">
        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; border-bottom: 1px solid #E2E8F0; padding-bottom: 1rem; flex-wrap: wrap; gap: 1rem;">
            <div>
                <div style="display: flex; align-items: center; gap: 0.5rem;">
                    <span style="font-size: 1.8rem;">🚀</span>
                    <div>
                        <h2 style="color: #123B6D; font-weight: 800; margin: 0;">Olá, {{ usuario.nome }}</h2>
                        <p style="color: #5A6E85; font-size: 0.9rem; margin: 0;">Painel de Mobilização e Árvore de Multiplicação</p>
                    </div>
                </div>
            </div>
            
            <a href="{{ url_for('cadastros.novo') }}" class="btn-primary-orange" style="padding: 0.75rem 1.25rem; font-size: 1rem;">
                🟠 + NOVO CADASTRO
            </a>
        </div>

        <!-- Grid 4 Cards de Métricas -->
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
            <!-- Meta Pessoal -->
            <div style="background-color: #F8FAFC; border: 1px solid #CBD5E1; border-radius: 10px; padding: 1rem; border-left: 4px solid #10B981;">
                <div style="font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; margin-bottom: 0.3rem;">🎯 Meta Pessoal</div>
                <div style="font-size: 1.6rem; font-weight: 800; color: #10B981;">{{ total_realizado }} <span style="font-size: 1rem; color: #64748B; font-weight: 500;">/ {{ meta_limite }}</span></div>
                <div class="progress-bar-container" style="height: 8px; margin-top: 0.4rem; background-color: #E2E8F0;">
                    <div class="progress-bar-fill" style="width: {{ percentual }}%; background-color: #10B981;"></div>
                </div>
                <div style="font-size: 0.75rem; color: #10B981; font-weight: 700; margin-top: 0.3rem; text-align: right;">{{ percentual }}%</div>
            </div>

            <!-- Total da Rede -->
            <div style="background-color: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 10px; padding: 1rem; border-left: 4px solid #059669;">
                <div style="font-size: 0.75rem; font-weight: 700; color: #047857; text-transform: uppercase; margin-bottom: 0.3rem;">👥 Total da Minha Rede</div>
                <div style="font-size: 1.6rem; font-weight: 800; color: #059669;">{{ total_sub_tree }}</div>
                <div style="font-size: 0.75rem; color: #047857; margin-top: 0.4rem;">Pessoas acumuladas na sub-árvore</div>
            </div>

            <!-- Multiplicadores Ativos -->
            <div style="background-color: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 10px; padding: 1rem; border-left: 4px solid #10B981;">
                <div style="font-size: 0.75rem; font-weight: 700; color: #047857; text-transform: uppercase; margin-bottom: 0.3rem;">🟢 Multiplicadores</div>
                <div style="font-size: 1.6rem; font-weight: 800; color: #10B981;">{{ total_multiplicadores_rede }}</div>
                <div style="font-size: 0.75rem; color: #047857; margin-top: 0.4rem;">
                    {{ total_multiplicadores_diretos }} diretos / {{ total_multiplicadores_rede }} em toda a rede
                </div>
            </div>

            <!-- Apoiadores Diretos -->
            <div style="background-color: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 10px; padding: 1rem; border-left: 4px solid #0F2A4A;">
                <div style="font-size: 0.75rem; font-weight: 700; color: #0F2A4A; text-transform: uppercase; margin-bottom: 0.3rem;">🔵 Apoiadores</div>
                <div style="font-size: 1.6rem; font-weight: 800; color: #0F2A4A;">{{ total_apoiadores_diretos }}</div>
                <div style="font-size: 0.75rem; color: #1E40AF; margin-top: 0.4rem;">Cadastrados apenas como apoiadores</div>
            </div>
        </div>

        <!-- Links Rápidos -->
        <div style="display: flex; justify-content: space-around; font-size: 0.85rem; color: #1976D2; font-weight: 600; background: #F8FAFC; padding: 0.75rem; border-radius: 8px; border: 1px solid #E2E8F0;">
            <span style="cursor: pointer;" onclick="window.location.reload();">🔄 Sincronizar Painel</span>
            <span>📱 Operação Offline Habilitada</span>
        </div>
    </div>

    <!-- Árvore de Multiplicadores da Minha Rede -->
    <div class="content-card" style="padding: 1.75rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 class="content-card-title" style="margin: 0; color: #123B6D;">🌳 Minha Árvore de Multiplicadores Formados</h3>
            <span class="badge badge-warning" style="background: #FEF3C7; color: #D97706; font-size: 0.8rem;">
                {{ arvore_sub_multiplicadores|length }} multiplicador(es) direto(s)
            </span>
        </div>
        <p style="color: #64748B; font-size: 0.85rem; margin-bottom: 1.25rem;">
            Acompanhe o desempenho das pessoas que você cadastrou e converteu em novos multiplicadores de rede.
        </p>

        {% if arvore_sub_multiplicadores %}
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.25rem;">
                {% for sub in arvore_sub_multiplicadores %}
                <div style="background: #FFFFFF; border: 1px solid #CBD5E1; border-top: 4px solid {% if sub.meta_atingida %}#16A34A{% else %}#F58220{% endif %}; border-radius: 10px; padding: 1.2rem; box-shadow: 0 4px 10px rgba(0,0,0,0.03);">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem;">
                        <div>
                            <h4 style="font-weight: 700; color: #123B6D; margin: 0; font-size: 1rem;">{{ sub.nome }}</h4>
                            <small style="color: #64748B; display: block;">Entrou em: {{ sub.criado_em.strftime('%d/%m/%Y') }}</small>
                        </div>
                        <span class="badge" style="background: #DCFCE7; color: #15803D; font-weight: 700; font-size: 0.75rem;">
                            🟢 Multiplicador(a)
                        </span>
                    </div>

                    <!-- Progresso / Meta do Sub-multiplicador -->
                    <div style="margin-top: 0.75rem; margin-bottom: 0.75rem;">
                        <div style="display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: #475569; margin-bottom: 0.2rem;">
                            <span>Pessoas Cadastradas:</span>
                            <span style="color: #123B6D; font-weight: 800;">{{ sub.total_cadastros_diretos }} / {{ sub.meta }}</span>
                        </div>
                        <div class="progress-bar-container" style="height: 8px;">
                            <div class="progress-bar-fill" style="width: {{ sub.percentual }}%;"></div>
                        </div>
                    </div>

                    <!-- Resumo da Sub-rede dele(a) -->
                    <div style="background: #F8FAFC; border-radius: 6px; padding: 0.6rem; display: flex; justify-content: space-between; font-size: 0.8rem; border: 1px solid #E2E8F0;">
                        <div>
                            <span style="color: #64748B; display: block;">Cadastros Diretos:</span>
                            <strong style="color: #123B6D; font-size: 0.95rem;">{{ sub.total_cadastros_diretos }}</strong>
                        </div>
                        <div style="text-align: right;">
                            <span style="color: #64748B; display: block;">Total Sub-Rede:</span>
                            <strong style="color: #F58220; font-size: 0.95rem;">{{ sub.total_sub_tree }}</strong>
                        </div>
                    </div>

                    {% if sub.sub_nodes %}
                        <div style="margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px dashed #E2E8F0; font-size: 0.75rem; color: #059669; font-weight: 700;">
                            ✨ Já formou {{ sub.sub_nodes|length }} novo(s) multiplicador(es)!
                        </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div style="background: #F8FAFC; border: 1px dashed #CBD5E1; border-radius: 10px; padding: 1.75rem; text-align: center;">
                <div style="font-size: 2rem; margin-bottom: 0.5rem;">🌱</div>
                <h4 style="color: #123B6D; font-weight: 700; margin-bottom: 0.3rem;">Expanda sua Rede de Multiplicação!</h4>
                <p style="color: #64748B; font-size: 0.85rem; max-width: 500px; margin: 0 auto 1rem auto;">
                    Ao realizar um novo cadastro, você pode marcar a opção <strong>"Sim, deseja se tornar Multiplicador"</strong>. Essa pessoa ganhará um acesso e todos os cadastros que ela realizar contarão para a sua rede!
                </p>
                <a href="{{ url_for('cadastros.novo') }}" class="btn-blue" style="font-size: 0.85rem; padding: 0.5rem 1rem;">
                    ➕ Cadastrar Novo Multiplicador
                </a>
            </div>
        {% endif %}
    </div>

    <!-- Lista de Cadastros Recentes -->
    <div class="content-card" style="padding: 1.75rem;">
        <h3 class="content-card-title" style="margin-bottom: 1rem; color: #123B6D;">📋 Meus Cadastros Recentes</h3>
        <table class="custom-table">
            <thead>
                <tr>
                    <th>Nome</th>
                    <th>Perfil na Rede</th>
                    <th>Bairro</th>
                    <th>Data</th>
                </tr>
            </thead>
            <tbody>
                {% for c in cadastros %}
                <tr>
                    <td style="font-weight: 600; color: #123B6D;">{{ c.nome_completo }}</td>
                    <td>
                        {% if c.usuario_conta %}
                            <span class="badge" style="background: #DCFCE7; color: #15803D; font-weight: 700; font-size: 0.75rem;">
                                🟢 Multiplicador(a) ({{ c.usuario_conta.cadastros|length }} cadastros)
                            </span>
                        {% else %}
                            <span class="badge" style="background: #DBEAFE; color: #1E40AF; font-weight: 600; font-size: 0.75rem;">
                                🔵 Apoiador(a)
                            </span>
                        {% endif %}
                    </td>
                    <td>{{ c.bairro }}</td>
                    <td style="color: #5A6E85; font-size: 0.8rem;">{{ c.criado_em.strftime('%d/%m/%Y') }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" style="text-align: center; color: #5A6E85; padding: 1.5rem;">
                        Você ainda não possui cadastros registrados.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}