{% extends "admin/layout.html" %}
{% block title %}Dashboard | {{ brand_short_name }}{% endblock %}
{% block admin_title %}Centro de control{% endblock %}
{% block admin_content %}
{% set chart_max = [
  stats.users,
  stats.active_users,
  stats.pending_recharges,
  stats.pending_withdrawals
]|max %}
{% if chart_max < 1 %}{% set chart_max = 1 %}{% endif %}

<div class="adm-section">
  <div class="adm-kpi-grid">
    <div class="adm-kpi adm-kpi--teal">
      <p class="adm-kpi__label">Usuarios</p>
      <p class="adm-kpi__value">{{ stats.users }}</p>
    </div>
    <div class="adm-kpi adm-kpi--teal">
      <p class="adm-kpi__label">Activos</p>
      <p class="adm-kpi__value">{{ stats.active_users }}</p>
    </div>
    <div class="adm-kpi adm-kpi--sky">
      <p class="adm-kpi__label">Planes activos</p>
      <p class="adm-kpi__value">{{ stats.active_plans }}</p>
    </div>
    <div class="adm-kpi adm-kpi--amber">
      <p class="adm-kpi__label">Recargas pend.</p>
      <p class="adm-kpi__value">{{ stats.pending_recharges }}</p>
    </div>
    <div class="adm-kpi adm-kpi--rose">
      <p class="adm-kpi__label">Retiros pend.</p>
      <p class="adm-kpi__value">{{ stats.pending_withdrawals }}</p>
    </div>
  </div>

  {% set flow_chart_max = [1, stats.approved_recharges_total or 0, stats.approved_withdrawals_total or 0] %}
  {% for row in cash_flow_series %}
    {% set flow_chart_max = flow_chart_max + [row.recharges, row.withdrawals] %}
  {% endfor %}
  {% set flow_chart_max = flow_chart_max|max %}
  {% if flow_chart_max < 1 %}{% set flow_chart_max = 1 %}{% endif %}

  <section class="adm-card" id="flujo-caja">
    <div class="adm-card__head">
      <div>
        <h2>Flujo de caja</h2>
        <p>Recargas aprobadas (entrada) y retiros aprobados (salida) · hora CDMX</p>
      </div>
      <form class="adm-flow-filter" method="get" action="{{ url_for('admin.dashboard') }}#flujo-caja">
        {% if show_minimum_due %}<input type="hidden" name="due_filter" value="1">{% endif %}
        <label class="adm-flow-filter__label" for="flow_date">Filtrar por día</label>
        <input class="adm-flow-filter__input" type="date" id="flow_date" name="flow_date" value="{{ cash_flow_date.isoformat() }}">
        <button class="adm-btn adm-btn--primary" type="submit">Ver totales</button>
        <a class="adm-btn adm-btn--ghost" href="{{ url_for('admin.dashboard') }}#flujo-caja">Hoy</a>
      </form>
    </div>
    <div class="adm-card__body">
      <div class="adm-flow-summary">
        <div class="adm-kpi adm-kpi--navy">
          <p class="adm-kpi__label">Recargas históricas</p>
          <p class="adm-kpi__value" style="font-size:1.2rem;">${{ "%.2f"|format(stats.approved_recharges_total or 0) }}</p>
        </div>
        <div class="adm-kpi adm-kpi--rose">
          <p class="adm-kpi__label">Retiros históricos</p>
          <p class="adm-kpi__value" style="font-size:1.2rem;">${{ "%.2f"|format(stats.approved_withdrawals_total or 0) }}</p>
        </div>
        <div class="adm-kpi adm-kpi--teal">
          <p class="adm-kpi__label">Entrada · {{ cash_flow_date.strftime('%d/%m/%Y') }}</p>
          <p class="adm-kpi__value" style="font-size:1.2rem;">${{ "%.2f"|format(cash_flow_day.recharges) }}</p>
        </div>
        <div class="adm-kpi adm-kpi--amber">
          <p class="adm-kpi__label">Salida · {{ cash_flow_date.strftime('%d/%m/%Y') }}</p>
          <p class="adm-kpi__value" style="font-size:1.2rem;">${{ "%.2f"|format(cash_flow_day.withdrawals) }}</p>
        </div>
      </div>

      <p class="adm-flow-net">
        Neto del día seleccionado:
        <strong class="{% if cash_flow_day.net >= 0 %}adm-flow-net--pos{% else %}adm-flow-net--neg{% endif %}">
          {% if cash_flow_day.net >= 0 %}+{% endif %}${{ "%.2f"|format(cash_flow_day.net) }}
        </strong>
      </p>

      <div class="adm-flow-legend" aria-hidden="true">
        <span class="adm-flow-legend__item"><i class="adm-flow-legend__dot adm-flow-legend__dot--in"></i> Recargas</span>
        <span class="adm-flow-legend__item"><i class="adm-flow-legend__dot adm-flow-legend__dot--out"></i> Retiros</span>
      </div>

      <div class="adm-flow-chart-wrap adm-table-wrap">
        <div class="adm-flow-chart" role="img" aria-label="Gráfica de recargas y retiros de los últimos 14 días">
          {% for row in cash_flow_series %}
            <a
              class="adm-flow-chart__day {% if row.date == cash_flow_date %}is-selected{% endif %}"
              href="{{ url_for('admin.dashboard', flow_date=row.date.isoformat()) }}#flujo-caja"
              title="{{ row.date.strftime('%d/%m/%Y') }} · Recargas ${{ '%.2f'|format(row.recharges) }} · Retiros ${{ '%.2f'|format(row.withdrawals) }}"
            >
              <div class="adm-flow-chart__values">
                {% if row.recharges > 0 %}<span class="adm-flow-chart__val adm-flow-chart__val--in">${{ "%.0f"|format(row.recharges) }}</span>{% endif %}
                {% if row.withdrawals > 0 %}<span class="adm-flow-chart__val adm-flow-chart__val--out">${{ "%.0f"|format(row.withdrawals) }}</span>{% endif %}
              </div>
              <div class="adm-flow-chart__bars">
                <div class="adm-flow-chart__bar adm-flow-chart__bar--in" style="height: {{ (row.recharges / flow_chart_max * 100)|round(0) }}%;"></div>
                <div class="adm-flow-chart__bar adm-flow-chart__bar--out" style="height: {{ (row.withdrawals / flow_chart_max * 100)|round(0) }}%;"></div>
              </div>
              <span class="adm-flow-chart__label">{{ row.date_label }}</span>
            </a>
          {% endfor %}
        </div>
      </div>
      <p class="adm-flow-hint">Haz clic en un día de la gráfica o elige una fecha arriba para ver cuánto entró y salió ese día.</p>
    </div>
  </section>

  <section class="adm-card">
    <div class="adm-card__head">
      <div>
        <h2>Resumen operativo</h2>
        <p>Volumen y pendientes del sistema</p>
      </div>
    </div>
    <div class="adm-card__body">
      <div class="adm-chart" aria-label="Gráfica de resumen">
        <div class="adm-chart__bar-wrap">
          <span class="adm-chart__value">{{ stats.users }}</span>
          <div class="adm-chart__bar" style="height: {{ (stats.users / chart_max * 100)|round(0) }}%;"></div>
          <span class="adm-chart__label">Usuarios</span>
        </div>
        <div class="adm-chart__bar-wrap">
          <span class="adm-chart__value">{{ stats.active_users }}</span>
          <div class="adm-chart__bar" style="height: {{ (stats.active_users / chart_max * 100)|round(0) }}%;"></div>
          <span class="adm-chart__label">Activos</span>
        </div>
        <div class="adm-chart__bar-wrap">
          <span class="adm-chart__value">{{ stats.pending_recharges }}</span>
          <div class="adm-chart__bar adm-chart__bar--amber" style="height: {{ (stats.pending_recharges / chart_max * 100)|round(0) }}%;"></div>
          <span class="adm-chart__label">Recargas</span>
        </div>
        <div class="adm-chart__bar-wrap">
          <span class="adm-chart__value">{{ stats.pending_withdrawals }}</span>
          <div class="adm-chart__bar adm-chart__bar--rose" style="height: {{ (stats.pending_withdrawals / chart_max * 100)|round(0) }}%;"></div>
          <span class="adm-chart__label">Retiros</span>
        </div>
      </div>
      <div class="adm-kpi-grid" style="margin-top:1rem;grid-template-columns:repeat(2,minmax(0,1fr));">
        <div class="adm-kpi adm-kpi--navy">
          <p class="adm-kpi__label">Recargas aprobadas</p>
          <p class="adm-kpi__value" style="font-size:1.15rem;">${{ "%.2f"|format(stats.approved_recharges_total or 0) }}</p>
        </div>
        <div class="adm-kpi adm-kpi--rose">
          <p class="adm-kpi__label">Retiros aprobados</p>
          <p class="adm-kpi__value" style="font-size:1.15rem;">${{ "%.2f"|format(stats.approved_withdrawals_total or 0) }}</p>
        </div>
        <div class="adm-kpi adm-kpi--amber">
          <p class="adm-kpi__label">Pagos hoy</p>
          <p class="adm-kpi__value" style="font-size:1.15rem;">${{ "%.2f"|format(stats.due_payouts_today or 0) }}</p>
        </div>
        <div class="adm-kpi adm-kpi--teal">
          <p class="adm-kpi__label">Estimado 7 días</p>
          <p class="adm-kpi__value" style="font-size:1.15rem;">${{ "%.2f"|format(stats.due_payouts_week or 0) }}</p>
        </div>
      </div>
    </div>
  </section>

  <section class="adm-card">
    <div class="adm-card__head">
      <div>
        <h2>Top invitadores</h2>
        <p>Ranking por invitados directos y red total</p>
      </div>
      <a class="adm-btn adm-btn--ghost" href="{{ url_for('admin.users') }}#ranking">Ver ranking completo</a>
    </div>
    <div class="adm-card__body adm-table-wrap">
      {% if inviter_rankings %}
        <table class="adm-table">
          <thead>
            <tr>
              <th style="width:3rem;">#</th>
              <th>Usuario</th>
              <th style="width:6rem;">Directos</th>
              <th style="width:9rem;">Red total</th>
              <th style="width:7rem;"></th>
            </tr>
          </thead>
          <tbody>
            {% for row in inviter_rankings %}
              <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></td>
                <td>{{ row.direct_count }}</td>
                <td>{{ row.team_total }} <span style="color:#737373;">({{ row.active_team }} act.)</span></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>

  <section class="adm-actions">
    <a class="adm-action" href="{{ url_for('admin.recharges') }}">
      <span class="adm-action__title">Recargas</span>
      <span class="adm-action__desc">{{ stats.pending_recharges }} pendientes por revisar</span>
    </a>
    <a class="adm-action" href="{{ url_for('admin.withdrawals') }}">
      <span class="adm-action__title">Retiros</span>
      <span class="adm-action__desc">{{ stats.pending_withdrawals }} pendientes por pagar</span>
    </a>
    <a class="adm-action" href="{{ url_for('admin.users') }}">
      <span class="adm-action__title">Usuarios</span>
      <span class="adm-action__desc">Directorio y auditoría por cuenta</span>
    </a>
    <a class="adm-action" href="{{ url_for('admin.settings') }}">
      <span class="adm-action__title">Ajustes</span>
      <span class="adm-action__desc">Banco, banner y horarios</span>
    </a>
  </section>

  <section class="adm-card">
    <div class="adm-card__head">
      <div>
        <h2>Filtro de pagos mínimos</h2>
        <p>Usuarios con proyección de hoy mayor a MXN 80</p>
      </div>
      <div style="display:flex;gap:0.5rem;flex-wrap:wrap;">
        <a class="adm-btn adm-btn--primary" href="{{ url_for('admin.dashboard', due_filter=1) }}">Mostrar filtro</a>
        {% if show_minimum_due %}
          <a class="adm-btn adm-btn--ghost" href="{{ url_for('admin.dashboard') }}">Cerrar</a>
        {% endif %}
      </div>
    </div>
    {% if show_minimum_due %}
      <div class="adm-card__body">
        <p style="font-size:0.78rem;color:#737373;margin:0 0 0.75rem;">Resultados: <strong>{{ minimum_due_users|length }}</strong> · Total: <strong>${{ "%.2f"|format(stats.minimum_due_total or 0) }}</strong></p>
        {% if minimum_due_users %}
          <div class="adm-table-wrap">
            <table class="adm-table">
              <thead><tr><th>Teléfono</th><th>Inversiones</th><th>Proyección hoy</th></tr></thead>
              <tbody>
                {% for item in minimum_due_users %}
                  <tr>
                    <td>{{ item.phone }}</td>
                    <td>{{ item.investments }}</td>
                    <td>${{ "%.2f"|format(item.amount or 0) }}</td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <p style="font-size:0.82rem;color:#737373;">No hay usuarios que superen el mínimo para hoy.</p>
        {% endif %}
      </div>
    {% endif %}
  </section>

  <div class="adm-grid-2">
    <section class="adm-card">
      <div class="adm-card__head">
        <div><h3>Configuración bancaria</h3></div>
        <a class="adm-btn adm-btn--ghost" href="{{ url_for('admin.settings') }}">Editar</a>
      </div>
      <div class="adm-card__body" style="font-size:0.82rem;color:#525252;">
        <p><strong>Banco:</strong> {{ system_config.bank_name or "—" }}</p>
        <p style="margin-top:0.35rem;"><strong>Titular:</strong> {{ system_config.account_holder or "—" }}</p>
        <p style="margin-top:0.35rem;"><strong>CLABE:</strong> {{ system_config.clabe or "—" }}</p>
      </div>
    </section>
    <section class="adm-card">
      <div class="adm-card__head">
        <div><h3>Últimos registros</h3></div>
        <a class="adm-btn adm-btn--ghost" href="{{ url_for('admin.users') }}">Ver todos</a>
      </div>
      <div class="adm-card__body adm-table-wrap">
        {% if latest_users %}
          <table class="adm-table">
            <thead><tr><th>Teléfono</th><th>Saldo</th></tr></thead>
            <tbody>
              {% for user in latest_users %}
                <tr>
                  <td>{{ user.phone }}</td>
                  <td>${{ "%.2f"|format(user.balance_main or 0) }}</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% else %}
          <p style="font-size:0.82rem;color:#737373;">Sin usuarios registrados.</p>
        {% endif %}
      </div>
    </section>
  </div>
</div>
{% endblock %}