{% extends spa_base or "base.html"%}
{% block title %}Gestao de Afiliados{% endblock %}
{% block extra_head %}
<style>
    .admin-header { margin-bottom: 24px; }
    .admin-header h1 { font-size: 1.6em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .admin-header p { color: var(--text-muted); font-size: 0.9em; }
    .config-layout { display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
    .config-card {
        background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
        overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .config-card .card-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--bg-surface);
    }
    .config-card .card-header h2 { font-size: 1em; font-weight: 600; color: var(--text-primary); margin: 0; }
    .config-card .card-body { padding: 24px; }
    .admin-table { width: 100%; border-collapse: collapse; }
    .admin-table th { background: var(--bg-surface); color: var(--text-muted); padding: 12px 16px; text-align: left; font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .admin-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 0.85em; color: var(--text-secondary); vertical-align: middle; }
    .admin-table tr:hover td { background: rgba(255,255,255,0.02); }
    .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; font-size: 0.75em; font-weight: 600; }
    .badge-success { background: rgba(70,211,105,0.1); color: var(--green); }
    .badge-warning { background: rgba(245,197,24,0.1); color: var(--gold); }
    .badge-danger { background: rgba(229,9,20,0.1); color: var(--primary); }
    .badge-info { background: rgba(100,150,255,0.1); color: #6496ff; }
    .badge-neutral { background: rgba(128,128,128,0.1); color: #888; }
    .action-btn {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 6px 14px; border-radius: var(--radius-sm);
        font-size: 0.78em; font-weight: 600; text-decoration: none;
        transition: var(--transition); border: 1px solid transparent; cursor: pointer;
    }
    .action-btn.blue { background: rgba(66,133,244,0.1); color: #4285f4; border-color: rgba(66,133,244,0.2); }
    .action-btn.green { background: rgba(70,211,105,0.1); color: var(--green); border-color: rgba(70,211,105,0.2); }
    .action-btn.red { background: rgba(229,9,20,0.1); color: var(--primary); border-color: rgba(229,9,20,0.2); }
    .action-btn.yellow { background: rgba(245,197,24,0.1); color: var(--gold); border-color: rgba(245,197,24,0.2); }
    .action-btn:hover { filter: brightness(1.2); }
    .form-group { margin-bottom: 16px; }
    .form-group label { font-size: 0.82em; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; display: block; }
    .form-group input, .form-group select, .form-group textarea {
        width: 100%; padding: 10px 14px; background: var(--bg-surface);
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        color: var(--text-primary); font-size: 0.92em; transition: var(--transition); box-sizing: border-box;
    }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(229,9,20,0.15); }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .btn-save {
        background: var(--primary); color: #fff; font-weight: 700;
        padding: 10px 28px; border: none; border-radius: var(--radius-sm);
        cursor: pointer; font-size: 0.92em; transition: var(--transition);
    }
    .btn-save:hover { background: var(--primary-hover); }
    .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
    .stat-card .num { font-size: 1.8em; font-weight: 800; }
    .stat-card .lbl { font-size: 0.75em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
    .stat-card .num.green { color: var(--green); }
    .stat-card .num.blue { color: #6496ff; }
    .stat-card .num.gold { color: var(--gold); }
    .stat-card .num.red { color: var(--primary); }
    .empty-state { text-align: center; color: var(--text-muted); padding: 40px 20px; font-size: 0.9em; }
    .pagination { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 16px; }
    .pagination a, .pagination span { padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.85em; text-decoration: none; }
    .pagination a { background: var(--bg-surface); color: var(--text-secondary); border: 1px solid var(--border); }
    .pagination a:hover { background: var(--primary); color: #fff; }
    .pagination .current { background: var(--primary); color: #fff; font-weight: 600; }
    .quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
    .quick-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
    .quick-card h3 { font-size: 0.95em; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
    .quick-card p { color: var(--text-muted); font-size: 0.82em; margin-bottom: 14px; }
    .search-form { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 22px; border-bottom: 1px solid var(--border); }
    .search-form input { flex: 1; min-width: 220px; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.85em; }
    .section-heading { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
    .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); text-decoration: none; font-size: 0.85em; margin-bottom: 16px; }
    .back-link:hover { color: var(--text-primary); }
    .modal-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.72); align-items: center; justify-content: center; padding: 20px; }
    .modal-overlay.active { display: flex; }
    .modal-box { position: relative; width: min(460px, 100%); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.45); }
    .modal-box h3 { margin-bottom: 18px; }
    .modal-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--text-muted); font-size: 1.5em; cursor: pointer; }
    .modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
    @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } .quick-actions { grid-template-columns: 1fr; } }
</style>
{% endblock %}
{% block content %}
<div class="config-layout">
    <div class="admin-header">
        <h1>👥 Gestao de Afiliados</h1>
        <p>Gerencie saldos, indicados, comissoes e reconciliacoes da rede</p>
    </div>

    <a href="{{ url_for('admin_panel') }}" class="back-link">← Voltar ao Painel Admin</a>

    <!-- Stats -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="num blue">{{ total }}</div>
            <div class="lbl">Afiliados</div>
        </div>
        <div class="stat-card">
            <div class="num green">R$ {{ '%.2f'|format(total_balance|default(0)) }}</div>
            <div class="lbl">Saldo Total</div>
        </div>
        <div class="stat-card">
            <div class="num gold">R$ {{ '%.2f'|format(total_earned|default(0)) }}</div>
            <div class="lbl">Total Ganho</div>
        </div>
        <div class="stat-card">
            <div class="num red">{{ pending|default(0) }}</div>
            <div class="lbl">Saidas Pendentes</div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="quick-actions">
        <div class="quick-card">
            <h3>✅ Aprovar Indicado</h3>
            <p>Informe o e-mail do convidado para aprovar a indicacao e creditar a rede.</p>
            <form method="POST" action="{{ url_for('admin_afiliados_aprovar_indicado') }}" onsubmit="return confirm('Aprovar este indicado e creditar as comissoes?')">
                <div class="form-group" style="margin-bottom:10px;">
                    <input type="email" name="email" placeholder="convidado@email.com" required style="width:100%; padding:8px 12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85em;">
                </div>
                <button type="submit" class="action-btn yellow">Aprovar e Creditar</button>
            </form>
        </div>
        <div class="quick-card">
            <h3>🔄 Reconciliar Comissoes</h3>
            <p>Reprocessa creditos pendentes; deixe vazio para analisar todas as redes.</p>
            <form method="POST" action="{{ url_for('admin_afiliados_reconciliar') }}" onsubmit="return confirm('Rodar reconciliacao agora?')">
                <div class="form-group" style="margin-bottom:10px;">
                    <input type="email" name="email" placeholder="deixe vazio para todos">
                </div>
                <button type="submit" class="action-btn blue">Reconciliar Agora</button>
            </form>
        </div>
    </div>

    <!-- Affiliates Table -->
    <div class="config-card">
        <div class="card-header">
            <h2>👤 Afiliados e Carteiras</h2>
            <span style="color:var(--text-muted); font-size:0.82em;">{{ total }} registro(s)</span>
        </div>
        {% if total_pages > 1 %}
        <div class="pagination">
            {% if page > 1 %}<a href="{{ url_for('admin_afiliados_gestao', q=search, page=page-1) }}">← Anterior</a>{% endif %}
            <span class="current">{{ page }} de {{ total_pages }} ({{ total }} registros)</span>
            {% if page < total_pages %}<a href="{{ url_for('admin_afiliados_gestao', q=search, page=page+1) }}">Próximo →</a>{% endif %}
        </div>
        {% endif %}
        <form method="GET" class="search-form">
            <input type="search" name="q" value="{{ search }}" placeholder="Buscar por email...">
            <button type="submit" class="action-btn blue">Buscar</button>
            {% if search %}<a href="{{ url_for('admin_afiliados_gestao') }}" class="action-btn yellow">Limpar</a>{% endif %}
        </form>
        <div class="affiliate-table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Usuário</th>
                        <th>Saldo</th>
                        <th>Total Ganho</th>
                        <th>Convidados</th>
                        <th>Confirmados</th>
                        <th>Comissões</th>
                        <th>Status</th>
                        <th>Ações</th>
                    </tr>
                </thead>
                <tbody>
                {% for row in rows %}
                <tr>
                    <td><span class="user-email" style="color:var(--text-primary); font-weight:600;">{{ row.user.email }}</span>{% if row.user.affiliation_disabled %}<span class="badge badge-danger">Bloqueado</span>{% endif %}</td>
                    <td style="color:var(--green); font-weight:700;">R$ {{ '%.2f'|format(row.balance) }}</td>
                    <td style="color:var(--green); font-weight:700;">R$ {{ '%.2f'|format(row.total_earned) }}</td>
                    <td>{{ row.total_invited }}</td>
                    <td>{{ row.confirmed }}</td>
                    <td>{{ row.commissions_count }}</td>
                    <td>
                        {% if row.user.affiliation_disabled %}<span class="badge badge-danger">Desativado</span>
                        {% else %}<span class="badge badge-success">Ativo</span>{% endif %}
                    </td>
                    <td>
                        <div style="display:flex; gap:6px; flex-wrap:wrap;">
                            <button type="button" class="action-btn green" onclick="openSaldoModal({{ row.user.id }}, '{{ row.user.email|e }}', {{ row.balance }}, 'adicionar')">+ Saldo</button>
                            <button type="button" class="action-btn red" onclick="openSaldoModal({{ row.user.id }}, '{{ row.user.email|e }}', {{ row.balance }}, 'retirar')">- Saldo</button>
                            <button type="button" class="action-btn yellow" onclick="openAprovarModal({{ row.user.id }}, '{{ row.user.email|e }}')">✅ Aprovar</button>
                            <a href="{{ url_for('admin_afiliados_historico_saques', user_id=row.user.id) }}" class="action-btn blue">Historico</a>
                        </div>
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="8" class="empty-state">Nenhum afiliado encontrado.</td></tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% if total_pages > 1 %}
        <div class="pagination">
            {% if page > 1 %}<a href="{{ url_for('admin_afiliados_gestao', q=search, page=page-1) }}">← Anterior</a>{% endif %}
            <span class="current">{{ page }} de {{ total_pages }}</span>
            {% if page < total_pages %}<a href="{{ url_for('admin_afiliados_gestao', q=search, page=page+1) }}">Próximo →</a>{% endif %}
        </div>
        {% endif %}
    </div>

    <!-- Config Link -->
    <div style="text-align:center; margin: 24px 0;">
        <a href="{{ url_for('admin_afiliados_config') }}" class="action-btn yellow" style="padding:12px 28px; font-size:0.9em;">⚙️ Configurar Comissoes</a>
    </div>
</div>

<!-- Modals -->
<div class="modal-overlay" id="modal-saldo" onclick="if(event.target===this) closeModal('modal-saldo')"><div class="modal-box">
    <button class="modal-close" type="button" onclick="closeModal('modal-saldo')">&times;</button>
    <h3 id="saldo-title">Ajustar Saldo</h3><p class="muted" id="saldo-user"></p>
    <form method="POST" id="form-saldo"><input type="hidden" name="tipo" id="saldo-tipo">
        <div class="form-group"><label>Valor</label><input type="number" name="valor" min="0.01" step="0.01" required></div>
        <div class="form-group"><label>Motivo (opcional)</label><input type="text" name="motivo" maxlength="200" placeholder="Motivo do ajuste"></div>
        <div class="modal-btns"><button type="button" class="action-btn blue" onclick="closeModal('modal-saldo')">Cancelar</button><button type="submit" class="btn-save" id="saldo-submit">Confirmar</button></div>
    </form>
</div></div>
<div class="modal-overlay" id="modal-aprovar" onclick="if(event.target===this) closeModal('modal-aprovar')"><div class="modal-box">
    <button class="modal-close" type="button" onclick="closeModal('modal-aprovar')">&times;</button>
    <h3>Aprovar Indicado</h3><p class="muted">Convidado: <strong id="aprovar-email"></strong></p>
    <form method="POST" action="{{ url_for('admin_afiliados_aprovar_indicado') }}" onsubmit="return confirm('Aprovar este indicado e creditar as comissoes?')"><input type="hidden" name="user_id" id="aprovar-user-id">
        <div class="modal-btns"><button type="button" class="action-btn blue" onclick="closeModal('modal-aprovar')">Cancelar</button><button type="submit" class="btn-save">Aprovar e Creditar</button></div>
    </form>
</div></div>

<script>
function closeModal(id){ document.getElementById(id).classList.remove('active'); }
function openSaldoModal(id,email,balance,tipo){
    const modal=document.getElementById('modal-saldo'), form=document.getElementById('form-saldo');
    form.action='/admin/afiliados/'+id+'/ajustar_saldo'; document.getElementById('saldo-tipo').value=tipo;
    document.getElementById('saldo-title').textContent=tipo==='adicionar'?'Adicionar Saldo':'Retirar Saldo';
    document.getElementById('saldo-user').textContent=email+' · saldo atual: R$ '+Number(balance).toFixed(2);
    const button=document.getElementById('saldo-submit'); button.textContent=tipo==='adicionar'?'Adicionar':'Retirar'; button.className='btn-save '+(tipo==='adicionar'?'green':'red'); modal.classList.add('active');
}
function openAprovarModal(id,email){ document.getElementById('aprovar-user-id').value=id; document.getElementById('aprovar-email').textContent=email; document.getElementById('modal-aprovar').classList.add('active'); }
</script>
{% endblock %}