{% extends "admin/layout.html" %}
{% block title %}Invites | {{ brand_short_name }}{% endblock %}
{% block admin_title %}Invitados con / sin compra{% endblock %}
{% block admin_content %}
{% set top_value = (rankings[0].with_purchase if sort == 'with_purchase' and rankings else rankings[0].without_purchase if sort == 'without_purchase' and rankings else rankings[0].direct_count if rankings else 1) or 1 %}

<div class="adm-section">
  <section class="adm-card">
    <div class="adm-card__head">
      <div>
        <h2>Ranking de invitadores</h2>
        <p>Quién tiene más invitados directos con compra y sin compra</p>
      </div>
    </div>
    <div class="adm-card__body">
      <form method="get" action="{{ url_for('admin.invites') }}" class="adm-form-grid adm-form-grid--search">
        <div class="adm-field">
          <label for="sort">Ordenar por</label>
          <select id="sort" name="sort" onchange="this.form.submit()">
            <option value="with_purchase" {% if sort == 'with_purchase' %}selected{% endif %}>Más con compra</option>
            <option value="without_purchase" {% if sort == 'without_purchase' %}selected{% endif %}>Más sin compra</option>
            <option value="direct" {% if sort == 'direct' %}selected{% endif %}>Más invitados totales</option>
            <option value="team" {% if sort == 'team' %}selected{% endif %}>Mayor red (3 niveles)</option>
          </select>
        </div>
      </form>
    </div>
  </section>

  <div class="adm-kpi-grid" style="grid-template-columns:repeat(4,minmax(0,1fr));">
    <div class="adm-kpi"><p class="adm-kpi__label">Invitadores</p><p class="adm-kpi__value">{{ totals.inviters }}</p></div>
    <div class="adm-kpi adm-kpi--sky"><p class="adm-kpi__label">Invitados directos</p><p class="adm-kpi__value">{{ totals.direct }}</p></div>
    <div class="adm-kpi adm-kpi--teal"><p class="adm-kpi__label">Con compra</p><p class="adm-kpi__value">{{ totals.with_purchase }}</p></div>
    <div class="adm-kpi adm-kpi--amber"><p class="adm-kpi__label">Sin compra</p><p class="adm-kpi__value">{{ totals.without_purchase }}</p></div>
  </div>

  <section class="adm-card">
    <div class="adm-card__head">
      <div>
        <h2>Detalle</h2>
        <p>Solo invitados directos (nivel 1). “Con compra” = al menos un producto comprado.</p>
      </div>
    </div>
    <div class="adm-card__body adm-table-wrap">
      {% if rankings %}
      <table class="adm-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Usuario</th>
            <th>Total invitados</th>
            <th>Con compra</th>
            <th>Sin compra</th>
            <th>Red 3 niveles</th>
            <th>Comisiones</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for row in rankings %}
          {% set bar_base = row.with_purchase if sort == 'with_purchase' else row.without_purchase if sort == 'without_purchase' else row.direct_count %}
          <tr>
            <td><span class="adm-rank {% if row.rank <= 3 %}adm-rank--{{ row.rank }}{% endif %}">{{ row.rank }}</span></td>
            <td>
              <strong>{{ row.user.phone }}</strong><br>
              <span style="font-size:0.68rem;color:#737373;">{{ row.user.referral_code or "—" }}</span>
              <div class="adm-bar-inline" style="margin-top:0.35rem;">
                <div class="adm-bar-inline__track">
                  <div class="adm-bar-inline__fill" style="width: {{ ((bar_base / top_value) * 100)|round(0) }}%;"></div>
                </div>
              </div>
            </td>
            <td><strong>{{ row.direct_count }}</strong></td>
            <td style="color:#0f766e;font-weight:800;">{{ row.with_purchase }}</td>
            <td style="color:#b45309;font-weight:800;">{{ row.without_purchase }}</td>
            <td>{{ row.team_total }} <span style="color:#737373;">({{ row.active_team }} c/compra)</span></td>
            <td>${{ "%.2f"|format(row.commission_total or 0) }}</td>
            <td><a class="adm-btn adm-btn--ghost" href="{{ url_for('admin.user_detail', user_id=row.user.id) }}">Auditoría</a></td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p style="font-size:0.82rem;color:#737373;">Aún no hay usuarios con invitados registrados.</p>
      {% endif %}
    </div>
  </section>
</div>
{% endblock %}