{% extends "base.html" %}

{% block title %}Multiplicadores e Usuários — {{ 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;">🧑‍💼 Multiplicadores e Usuários</h2>
            <p style="color: #5A6E85; font-size: 0.9rem;">Gestão de contas, hierarquia e permissões da equipe</p>
        </div>
        {% if current_user.can_create_cadastrador() %}
        <a href="{{ url_for('usuarios.novo') }}" class="btn-primary-orange">
            + Criar Novo Usuário
        </a>
        {% endif %}
    </div>

    <div class="table-responsive">
        <table class="custom-table">
            <thead>
                <tr>
                    <th>Nome / CPF</th>
                    <th>E-mail / Gmail</th>
                    <th>Perfil</th>
                    <th>Superior Hierárquico</th>
                    <th>Progresso da Meta (Definida pelo Admin)</th>
                    <th>Status</th>
                    <th style="text-align: center;">Ações</th>
                </tr>
            </thead>
            <tbody>
                {% for u in usuarios %}
                <tr>
                    <td style="font-weight: 600; color: #123B6D;">
                        {{ u.nome }}
                        {% if u.cpf %}
                            <br><small style="color: #64748B; font-weight: normal;">CPF: {{ u.cpf }}</small>
                        {% endif %}
                    </td>
                    <td>{{ u.email or 'N/A (CPF)' }}</td>
                    <td>
                        <span class="badge" style="background-color: #E3F2FD; color: #1976D2;">
                            {% if u.perfil == 'cadastrador' %}MULTIPLICADOR{% else %}{{ u.perfil|upper }}{% endif %}
                        </span>
                    </td>
                    <td style="font-size: 0.85rem; color: #5A6E85;">
                        {% if u.cadastrador_pai %}
                            <strong>{{ u.cadastrador_pai.nome }}</strong>
                        {% else %}
                            <span style="color: #999;">Raiz / Sem Superior</span>
                        {% endif %}
                    </td>
                    <td style="font-size: 0.85rem;">
                        {% if u.perfil == 'cadastrador' %}
                            {% set meta_info = u.meta_rel %}
                            {% set meta_val = meta_info.meta if meta_info else (campanha.meta_por_cadastrador if campanha else 50) %}
                            {% set qtd_val = u.cadastros|length %}
                            <strong style="color: #123B6D;">{{ qtd_val }} / {{ meta_val }} apoiadores</strong>
                            <br>
                            <span class="badge" style="background: #FEF3C7; color: #D97706; font-size: 0.7rem; font-weight: 800;">
                                {{ ((qtd_val / meta_val) * 100)|round(1) if meta_val > 0 else 0 }}% Atingido
                            </span>
                        {% else %}
                            <span style="color: #94A3B8;">—</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if u.solicitou_reset %}
                            <span class="badge" style="background: #FEF3C7; color: #D97706; font-weight: 700;">⚠️ Reset Solicitado</span>
                        {% elif u.ativo %}
                            <span class="badge badge-success">Ativo</span>
                        {% else %}
                            <span class="badge badge-warning" style="background: #FFEBEE; color: #C62828;">Inativo</span>
                        {% endif %}
                    </td>
                    <td style="text-align: center; white-space: nowrap;">
                        {% if current_user.can_create_cadastrador() %}
                        <form method="POST" action="{{ url_for('usuarios.reset_senha', user_id=u.id) }}" style="display: inline;" onsubmit="return confirm('Deseja resetar a senha deste usuário para o seu CPF?');">
                            <button type="submit" class="btn-blue" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; background-color: #D97706; margin-right: 0.2rem;" title="Resetar senha para o CPF e solicitar troca no próximo acesso">
                                🔑 Resetar Senha
                            </button>
                        </form>
                        {% endif %}

                        {% if current_user.can_manage_users() or (current_user.perfil == 'cadastrador' and u.cadastrador_pai_id == current_user.id) %}
                        <a href="{{ url_for('usuarios.editar', user_id=u.id) }}" class="btn-blue" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; margin-right: 0.2rem;">
                            Editar
                        </a>
                        {% endif %}

                        {% if u.perfil == 'cadastrador' %}
                        <a href="{{ url_for('rede.arvore') }}" class="btn-blue" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; background-color: #F58220; margin-right: 0.2rem;">
                            Ver Rede
                        </a>
                        {% endif %}

                        {% if current_user.can_manage_users() %}
                        <form method="POST" action="{{ url_for('usuarios.toggle', user_id=u.id) }}" style="display: inline;">
                            <button type="submit" class="btn-blue" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; background-color: #64748B;">
                                {% if u.ativo %}Desativar{% else %}Ativar{% endif %}
                            </button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="7" style="text-align: center; color: #5A6E85;">Nenhum usuário cadastrado.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}