{% extends 'admin/base.html' %}
{% block title %}Settlements{% endblock %}
{% block page_title %}Paystack Settlements{% endblock %}
{% block content %}

<div class="stats-grid" style="margin-bottom:20px;">
  <div class="stat-card">
    <div class="stat-icon green">💰</div>
    <div>
      <div class="stat-val" style="font-size:18px;">₦{{ "{:,.2f}".format(total_gross) }}</div>
      <div class="stat-label">Total Collected from Subscribers</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon red">💸</div>
    <div>
      <div class="stat-val" style="font-size:18px;">₦{{ "{:,.2f}".format(total_fees) }}</div>
      <div class="stat-label">Paystack Fees Deducted</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon blue">🏦</div>
    <div>
      <div class="stat-val" style="font-size:18px;">₦{{ "{:,.2f}".format(total_net) }}</div>
      <div class="stat-label">Net Paid to Your Bank</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-icon purple">📊</div>
    <div>
      <div class="stat-val">{{ settlements|length }}</div>
      <div class="stat-label">Total Settlements</div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-title" style="display:flex;justify-content:space-between;align-items:center;">
    <span>
      💳 Settlement History
      <span style="font-size:12px;color:var(--muted);font-weight:400;margin-left:8px;">
        Live from Paystack API
      </span>
    </span>
    <div style="display:flex;gap:8px;">
      <a href="/admin/settlements/export" class="btn btn-purple"
         style="font-size:12px;padding:6px 14px;">📥 Export CSV</a>
      <a href="/admin/settlements" class="btn btn-green"
         style="font-size:12px;padding:6px 14px;">🔄 Refresh</a>
    </div>
  </div>

  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Settlement ID</th>
          <th>Date</th>
          <th>Gross Amount</th>
          <th>Paystack Fee</th>
          <th>Net to Bank</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {% for s in settlements %}
        {% set net   = s.get('total_amount', 0) / 100 %}
        {% set fee   = s.get('total_fees', 0) / 100 %}
        {% set gross = net + fee %}
        <tr>
          <td class="mono" style="font-size:12px;">#{{ s.get('id') }}</td>
          <td class="mono">
            {% set d = s.get('settlement_date', '') %}
            {{ d[:10] if d else '—' }}
          </td>
          <td class="mono" style="color:#22c55e;">
            ₦{{ "{:,.2f}".format(gross) }}
          </td>
          <td class="mono" style="color:#f87171;">
            ₦{{ "{:,.2f}".format(fee) }}
          </td>
          <td class="mono" style="color:#60a5fa;font-weight:700;">
            ₦{{ "{:,.2f}".format(net) }}
          </td>
          <td>
            {% if s.get('status') == 'success' %}
              <span class="badge active">Settled</span>
            {% elif s.get('status') == 'pending' %}
              <span class="badge pending">Pending</span>
            {% else %}
              <span class="badge expired">{{ s.get('status','—') }}</span>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="6" style="text-align:center;color:var(--muted);padding:32px;">
            No settlements found
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if settlements %}
  <div style="margin-top:16px;padding:14px 18px;
              background:rgba(96,165,250,0.08);
              border:1px solid rgba(96,165,250,0.2);
              border-radius:10px;">
    <div style="color:#93c5fd;font-size:13px;font-weight:700;margin-bottom:6px;">
      💡 Settlement Summary
    </div>
    <div style="color:#cbd5e1;font-size:13px;line-height:1.8;">
      Total collected from subscribers:
      <strong style="color:white;">₦{{ "{:,.2f}".format(total_gross) }}</strong><br>
      Total deducted by Paystack:
      <strong style="color:#f87171;">₦{{ "{:,.2f}".format(total_fees) }}</strong><br>
      Net paid to your bank:
      <strong style="color:#22c55e;">₦{{ "{:,.2f}".format(total_net) }}</strong>
    </div>
  </div>
  {% endif %}
</div>

{% endblock %}