{% extends "base.html" %}
{% block title %}Gestão de Afiliados{% endblock %}
{% block extra_head %}
<style>
    .affiliate-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
    .affiliate-header h1 { font-size:1.6em; margin-bottom:6px; }
    .affiliate-header p { color:var(--text-muted); font-size:.9em; }
    .header-actions, .quick-actions, .row-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .header-actions a, .quick-card button, .row-actions button, .row-actions a { text-decoration:none; }
    .quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,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 h2 { font-size:1em; margin-bottom:8px; }
    .quick-card p { color:var(--text-muted); font-size:.82em; margin-bottom:14px; }
    .quick-card form { display:flex; gap:8px; flex-wrap:wrap; }
    .quick-card input { flex:1; min-width:180px; }
    .affiliate-section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
    .section-heading { padding:18px 22px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
    .section-heading h2 { font-size:1.05em; }
    .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; }
    .affiliate-table-wrap { overflow-x:auto; }
    .affiliate-table { width:100%; min-width:860px; border-collapse:collapse; }
    .affiliate-table th { text-align:left; color:var(--text-muted); font-size:.76em; text-transform:uppercase; letter-spacing:.4px; padding:12px 16px; border-bottom:1px solid var(--border); white-space:nowrap; }
    .affiliate-table td { padding:14px 16px; border-bottom:1px solid var(--border); font-size:.84em; vertical-align:middle; }
    .affiliate-table tr:last-child td { border-bottom:none; }
    .affiliate-table tr:hover td { background:rgba(255,255,255,.02); }
    .user-email { color:var(--text-primary); font-weight:600; }
    .badge-blocked { display:inline-block; margin-left:6px; padding:3px 7px; border-radius:999px; background:rgba(229,9,20,.14); color:#ff7b82; font-size:.7em; }
    .money { color:var(--green); font-weight:700; white-space:nowrap; }
    .muted { color:var(--text-muted); }
    .empty-state { text-align:center; color:var(--text-muted); padding:48px 20px; }
    .modal-overlay { display:none; position:fixed; inset:0; z-index:2000; background:rgba(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,.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-box label { display:block; margin:12px 0 6px; color:var(--text-secondary); font-size:.82em; }
    .modal-box input { width:100%; }
    .modal-btns { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
    .affiliate-section input, .quick-card input, .modal-box input {
        box-sizing:border-box; min-height:36px; padding:8px 11px; background:var(--bg-surface);
        color:var(--text-primary); border:1px solid var(--border); border-radius:var(--radius-sm);
        font:inherit; outline:none;
    }
    .affiliate-section input:focus, .quick-card input:focus, .modal-box input:focus {
        border-color:var(--text-secondary); box-shadow:0 0 0 2px rgba(255,255,255,.06);
    }
    .affiliate-section input::placeholder, .quick-card input::placeholder, .modal-box input::placeholder { color:var(--text-muted); }
    .action-btn {
        display:inline-flex; align-items:center; justify-content:center; gap:5px; box-sizing:border-box;
        min-height:34px; padding:7px 12px; border:1px solid transparent; border-radius:var(--radius-sm);
        color:var(--text-primary); background:var(--bg-surface); font:inherit; font-size:.78em;
        font-weight:600; line-height:1.2; cursor:pointer; transition:var(--transition);
    }
    .action-btn:hover { filter:brightness(1.18); transform:translateY(-1px); }
    .action-btn.blue { color:#75a9ff; background:rgba(66,133,244,.12); border-color:rgba(66,133,244,.32); }
    .action-btn.green { color:var(--green); background:rgba(70,211,105,.12); border-color:rgba(70,211,105,.3); }
    .action-btn.red { color:#ff7b82; background:rgba(229,9,20,.12); border-color:rgba(229,9,20,.3); }
    .action-btn.yellow { color:var(--gold); background:rgba(245,197,24,.12); border-color:rgba(245,197,24,.3); }
    @media (max-width:760px) { .quick-actions { grid-template-columns:1fr; } .affiliate-header h1 { font-size:1.3em; } }
</style>
{% endblock %}
{% block content %}
<div class="affiliate-header">
    <div><h1>Gestão de Afiliados</h1><p>Gerencie saldos, indicados, comissões e reconciliações da rede.</p></div>
    <div class="header-actions">
        <a href="{{ url_for('admin_panel') }}" class="action-btn blue">← Painel Admin</a>
        <a href="{{ url_for('admin_afiliados_saques') }}" class="action-btn blue">Gerenciar Saques</a>
        <a href="{{ url_for('admin_afiliados_config') }}" class="action-btn yellow">Configurar Comissoes</a>
    </div>
</div>

<div class="quick-actions">
    <div class="quick-card">
        <h2>✅ Aprovar Indicado</h2>
        <p>Informe o e-mail do convidado para aprovar a indicação 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?')">
            <input type="email" name="email" placeholder="convidado@email.com" required>
            <button type="submit" class="action-btn yellow">Aprovar e Creditar</button>
        </form>
    </div>
    <div class="quick-card">
        <h2>🔄 Reconciliar Comissoes</h2>
        <p>Reprocessa créditos pendentes; deixe vazio para analisar todas as redes.</p>
        <form method="POST" action="{{ url_for('admin_afiliados_reconciliar') }}" onsubmit="return confirm('Rodar reconciliacao agora?')">
            <input type="email" name="email" placeholder="deixe vazio para todos">
            <button type="submit" class="action-btn blue">Reconciliar Agora</button>
        </form>
    </div>
</div>

<div class="affiliate-section">
    <div class="section-heading"><h2>👥 Afiliados e Carteiras</h2><span class="muted">{{ rows|length }} registro(s)</span></div>
    <form method="GET" class="search-form">
        <input type="search" name="q" value="{{ search }}" placeholder="Buscar por e-mail...">
        <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="affiliate-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>Ações</th></tr></thead>
            <tbody>
            {% for row in rows %}
            <tr>
                <td><span class="user-email">{{ row.user.email }}</span>{% if row.user.affiliation_disabled %}<span class="badge-blocked">Bloqueado</span>{% endif %}</td>
                <td class="money">R$ {{ '%.2f'|format(row.balance) }}</td>
                <td>R$ {{ '%.2f'|format(row.total_earned) }}</td>
                <td>{{ row.total_invited }}</td><td>{{ row.confirmed }}</td><td>{{ row.commissions_count }}</td>
                <td><div class="row-actions">
                    <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="7" class="empty-state">Nenhum afiliado encontrado.</td></tr>{% endfor %}
            </tbody>
        </table>
    </div>
</div>

<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">
        <label>Valor</label><input type="number" name="valor" min="0.01" step="0.01" required>
        <label>Motivo (opcional)</label><input type="text" name="motivo" maxlength="200" placeholder="Motivo do ajuste">
        <div class="modal-btns"><button type="button" class="action-btn blue" onclick="closeModal('modal-saldo')">Cancelar</button><button type="submit" class="action-btn green" 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="action-btn yellow">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='action-btn '+(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 %}