{% extends "admin/layout.html" %}
{% block title %}Withdrawals | {{ brand_short_name }}{% endblock %}
{% block admin_title %}Retiros{% endblock %}
{% block admin_content %}
{% set statuses = [
  ("all", "Todos"),
  ("pending", "Pendientes"),
  ("approved", "Aprobados"),
  ("rejected", "Cancelados")
] %}

<section class="adm-section space-y-5">
  <div>
    <h2 class="text-2xl font-semibold text-neutral-900">Retiros</h2>
    <p class="mt-2 text-sm text-neutral-600">Filtra por estado y revisa todos los retiros. Las fechas se muestran en hora CDMX.</p>
  </div>

  <div class="adm-tabs" role="tablist" aria-label="Filtrar retiros">
    {% for key, label in statuses %}
      <a href="{{ url_for('admin.withdrawals', status=key) }}" class="adm-tab {% if selected_status == key %}is-active{% endif %}">
        {{ label }} ({{ status_counts[key] }})
      </a>
    {% endfor %}
  </div>

  {% if duplicate_recharge_alerts %}
    <div class="border border-amber-200 bg-amber-50 p-4 text-amber-900 shadow-lg shadow-amber-900/5">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
          <p class="text-sm font-semibold">Aviso de seguimiento</p>
          <p class="mt-1 text-sm">Usuarios con más de 2 recargas el mismo día.</p>
        </div>
        <span class="rounded-full bg-amber-100 px-3 py-1 text-sm font-semibold text-amber-800">
          {{ duplicate_recharge_alerts|length }} usuario(s)
        </span>
      </div>
      <div class="mt-4 grid gap-3 lg:grid-cols-2">
        {% for alert in duplicate_recharge_alerts %}
          <div class="border border-amber-200 bg-white/80 p-4">
            <div class="flex items-center justify-between gap-3">
              <div>
                <p class="font-semibold text-neutral-900">{{ alert.phone }}</p>
                <p class="text-sm text-neutral-600">{{ alert.count }} solicitudes hoy</p>
              </div>
              <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-800">
                Revisar
              </span>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  {% if withdrawals %}
    <div class="grid gap-3 xl:grid-cols-2">
      {% for withdrawal in withdrawals %}
        {% set today_count = recharge_counts_today.get(withdrawal.user_id, 0) %}
        <article class="flex flex-col justify-between border border-neutral-200 bg-white p-5 shadow-lg shadow-neutral-900/5">
          <div class="flex items-start justify-between gap-4">
            <div>
              <div class="flex flex-wrap items-center gap-2">
                <p class="text-sm font-semibold {% if withdrawal.status == 'approved' %}text-pink-700{% elif withdrawal.status == 'rejected' %}text-rose-700{% else %}text-pink-700{% endif %}">
                  {% if withdrawal.status == 'approved' %}Aprobado{% elif withdrawal.status == 'rejected' %}Cancelado{% else %}Pendiente{% endif %}
                </p>
                {% if today_count > 2 %}
                  <span class="rounded-full bg-amber-100 px-2.5 py-0.5 text-xs font-semibold text-amber-800">
                    3+ recargas hoy
                  </span>
                {% endif %}
              </div>
              <h3 class="mt-1 text-lg font-semibold text-neutral-900">Usuario {{ withdrawal.user.phone }}</h3>
              <p class="mt-1 text-sm text-neutral-500">Banco: {{ withdrawal.bank_name }}</p>
              <p class="mt-1 text-sm text-neutral-500">
                Fecha (CDMX): {{ localize_admin_datetime(withdrawal.created_at).strftime("%d/%m/%Y %H:%M") if withdrawal.created_at else "-" }}
              </p>
            </div>
            <div class="rounded-full bg-pink-50 px-3 py-1 text-sm font-semibold text-pink-700">
              ${{ "%.2f"|format(withdrawal.net_amount or 0) }}
            </div>
          </div>

          <div class="mt-4 space-y-2 border-t border-neutral-200 pt-4 text-sm text-neutral-700">
            <p><span class="font-medium text-neutral-900">Titular:</span> {{ withdrawal.account_holder }}</p>
            <p><span class="font-medium text-neutral-900">CLABE:</span> {{ withdrawal.clabe }}</p>
            <p><span class="font-medium text-neutral-900">Monto total:</span> ${{ "%.2f"|format(withdrawal.amount or 0) }}</p>
            <p><span class="font-medium text-neutral-900">Comision:</span> ${{ "%.2f"|format(withdrawal.fee or 0) }}</p>
            <p><span class="font-medium text-neutral-900">Neto a pagar:</span> ${{ "%.2f"|format(withdrawal.net_amount or 0) }}</p>
            <p><span class="font-medium text-neutral-900">Saldo descontado principal:</span> ${{ "%.2f"|format(withdrawal.deducted_from_main or 0) }}</p>
            <p><span class="font-medium text-neutral-900">Saldo descontado referidos:</span> ${{ "%.2f"|format(withdrawal.deducted_from_referrals or 0) }}</p>
          </div>

          <div class="mt-4 flex flex-wrap items-center justify-between gap-3">
            <p class="text-sm text-neutral-600">
              Estado actual: <span class="font-semibold text-neutral-900">{{ withdrawal.status }}</span>
            </p>

            {% if withdrawal.status == 'pending' %}
              <div class="flex flex-wrap gap-2">
                <form method="post" action="{{ url_for('admin.approve_withdrawal', withdrawal_id=withdrawal.id) }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="inline-flex items-center justify-center border border-pink-600 bg-pink-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-pink-500">
                    Aprobar
                  </button>
                </form>
                <form method="post" action="{{ url_for('admin.reject_withdrawal', withdrawal_id=withdrawal.id) }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="inline-flex items-center justify-center border border-rose-300 bg-white px-4 py-2 text-sm font-semibold text-rose-600 transition hover:bg-rose-50">
                    Rechazar
                  </button>
                </form>
              </div>
            {% else %}
              <span class="rounded-full px-3 py-1 text-xs font-semibold {% if withdrawal.status == 'approved' %}bg-pink-50 text-pink-700{% else %}bg-rose-50 text-rose-700{% endif %}">
                {{ withdrawal.status }}
              </span>
            {% endif %}
          </div>
        </article>
      {% endfor %}
    </div>
  {% else %}
    <div class="border border-dashed border-neutral-300 bg-white p-5 text-sm text-neutral-600 shadow-lg shadow-neutral-900/5">
      No hay retiros para este filtro.
    </div>
  {% endif %}
</section>
{% endblock %}