{% extends spa_base or "base.html"%}
{% block title %}Admin - Ranking 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-section { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); margin-bottom: 24px; overflow: hidden; }
    .section-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
    .section-header h2 { font-size: 1em; font-weight: 600; color: var(--text-primary); }
    .section-header .count { background: var(--bg-surface); padding: 4px 10px; border-radius: 100px; font-size: 0.75em; color: var(--text-muted); }
    .admin-table { width: 100%; border-collapse: collapse; }
    .admin-table th { background: var(--bg-surface); color: var(--text-muted); padding: 12px 20px; text-align: left; font-size: 0.75em; font-weight: 600; text-transform: uppercase; border-bottom: 1px solid var(--border); }
    .admin-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); font-size: 0.85em; color: var(--text-secondary); }
    .admin-table tr:hover td { background: rgba(255,255,255,0.02); }
    .action-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.75em; font-weight: 500; text-decoration: none; transition: var(--transition); border: 1px solid transparent; }
    .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); }
    .admin-nav-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); padding: 12px 20px; border-radius: var(--radius-md); text-decoration: none; font-size: 0.85em; font-weight: 500; transition: var(--transition); }
    .admin-nav-btn:hover { background: var(--bg-elevated); border-color: var(--border-hover); color: var(--text-primary); }
    .admin-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
</style>
{% endblock %}
{% block content %}
<div style="max-width: 1200px; margin: 0 auto; padding: 24px;">
    <div class="admin-header">
        <h1>👥 Ranking de Afiliados</h1>
    </div>
    <div class="admin-nav">
        <a href="{{ url_for('admin_panel') }}" class="admin-nav-btn">← Voltar ao Painel</a>
        <a href="{{ url_for('admin_afiliados_gestao') }}" class="admin-nav-btn" style="border-color: rgba(70,211,105,0.3); color: var(--green);">👥 Gestao Afiliados</a>
        <a href="{{ url_for('admin_afiliados_config') }}" class="admin-nav-btn" style="border-color: rgba(245,197,24,0.3); color: var(--gold);">⚙️ Comissoes</a>
        <a href="{{ url_for('admin_afiliados_saques') }}" class="admin-nav-btn" style="border-color: rgba(70,211,105,0.3); color: var(--green);">💰 Saques</a>
    </div>
    <div class="admin-section">
        <div class="section-header">
            <h2>🚫 Afiliacao <span class="count">Status: {% if affiliation_disabled %}<span style="color:var(--primary);">Desativada</span>{% else %}<span style="color:var(--green);">Ativada</span>{% endif %}</span></h2>
            <form method="POST" action="{{ url_for('toggle_all_affiliation') }}">
                <button type="submit" class="action-btn {% if affiliation_disabled %}green{% else %}red{% endif %}">
                    {% if affiliation_disabled %}Ativar para Todos{% else %}Desativar para Todos{% endif %}
                </button>
            </form>
        </div>
    </div>
    <div class="admin-section">
        <div class="section-header">
            <h2>👥 Ranking <span class="count">{{ ref_total_map.values()|sum }} total indicacoes</span></h2>
        </div>
        <div style="padding:12px 24px; border-bottom:1px solid var(--border);">
            <input type="text" id="affiliateSearch" placeholder="Buscar por email..." oninput="filterAffiliateRanking()" style="width:100%; max-width:400px; padding:10px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-primary); font-size:0.85em; outline:none;">
        </div>
        <div style="overflow-x:auto;">
            <table class="admin-table">
                <thead>
                    <tr><th>#</th><th>Usuario</th><th>Saldo</th><th>Total Ganho</th><th>Convidados</th><th>Confirmados</th><th>Comissoes</th><th>Link</th></tr>
                </thead>
                <tbody id="affiliateRankingBody">
                    {% set sorted_refs = ref_total_map.items()|sort(attribute='1', reverse=True) %}
                    {% for referrer_id, total in sorted_refs %}
                    {% if total > 0 %}
                    {% set referrer = ranking_users|selectattr('id', 'equalto', referrer_id)|first %}
                    {% if referrer %}
                    <tr data-email="{{ referrer.email|lower }}">
                        <td style="color:var(--text-muted);">{{ loop.index }}</td>
                        <td style="color:var(--text-primary); font-weight:500;">{{ referrer.email }}</td>
                        <td style="color:var(--green); font-weight:600;">R$ {{ '%.2f'|format(ref_balance_map.get(referrer_id, 0)) }}</td>
                        <td>R$ {{ '%.2f'|format(ref_earned_map.get(referrer_id, 0)) }}</td>
                        <td style="color:var(--gold); font-weight:600;">{{ total }}</td>
                        <td>{{ ref_confirmed_map.get(referrer_id, 0) }}</td>
                        <td>{{ ref_commissions_map.get(referrer_id, 0) }}</td>
                        <td><div style="display:flex;gap:4px;min-width:220px;"><input type="text" readonly value="{{ ref_link_map.get(referrer_id, '') }}" onclick="this.select()" style="flex:1;min-width:110px;font-size:.7em;padding:6px 8px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);"><button type="button" class="action-btn blue" onclick="copyLink(this)">Copiar</button></div></td>
                    </tr>
                    {% endif %}
                    {% endif %}
                    {% else %}
                    <tr><td colspan="8" style="text-align:center; color:var(--text-muted);">Nenhum usuario convidou ainda.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
function filterAffiliateRanking(){var q=document.getElementById('affiliateSearch').value.toLowerCase().trim();var rows=document.querySelectorAll('#affiliateRankingBody tr');rows.forEach(function(r){var email=r.getAttribute('data-email')||'';r.style.display=(!q||email.indexOf(q)!==-1)?'':'none';});}
function copyLink(btn){var i=btn.previousElementSibling;if(!i)return;i.select();var d=function(){var o=btn.textContent;btn.textContent='Copiado!';setTimeout(function(){btn.textContent=o},1500);};if(navigator.clipboard&&window.isSecureContext){navigator.clipboard.writeText(i.value).then(d).catch(function(){document.execCommand('copy');d();});}else{document.execCommand('copy');d();}}
</script>
{% endblock %}