{% extends 'base.html' %}
{% load humanize %}

{% block title %}IPN Payment Gaps — Unprocessed SasaPay Payments{% endblock %}

{% block content %}
<div class="container-fluid">

  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h2 class="mb-1">⚠️ IPN Payment Gaps</h2>
      <p class="text-muted mb-0">
        These are SasaPay IPN notifications that arrived but <strong>no repayment was created</strong>.
        Total: <strong>{{ total_gaps }}</strong>
      </p>
    </div>
    <div>
      <a href="{% url 'payments:sasapay_dashboard' %}" class="btn btn-outline-secondary btn-sm">← SasaPay Dashboard</a>
      <a href="{% url 'payments:recover_ipn_payments' %}" class="btn btn-warning btn-sm ml-2">🔧 Recover Payments</a>
      <a href="{% url 'payments:sasapay_unknown_payments' %}" class="btn btn-outline-warning btn-sm ml-2">⚠️ Unknown Payments</a>
    </div>
  </div>

  {% if total_gaps == 0 %}
  <div class="alert alert-success">
    <strong>✅ All clear!</strong> Every IPN log entry has a matching repayment. No gaps found.
  </div>
  {% else %}
  <div class="alert alert-warning">
    <strong>Why does this happen?</strong> Common reasons:
    <ul class="mb-0 mt-2">
      <li><strong>No borrower matched</strong> — customer used wrong phone/account ref. Check the <em>BillRef</em> column.</li>
      <li><strong>No active loan</strong> — borrower's loan is completed or paid. They paid by mistake.</li>
      <li><strong>Balance = 0</strong> — loan already fully paid when IPN arrived.</li>
      <li><strong>Processing crash</strong> — note column shows "—" meaning the IPN arrived before diagnostic logging was added.</li>
    </ul>
    Use the <a href="{% url 'payments:recover_ipn_payments' %}">Recovery Tool</a> to manually re-process any that should have been recorded.
  </div>

  <div class="card shadow">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover table-sm mb-0">
          <thead class="thead-dark">
            <tr>
              <th>📅 Date</th>
              <th>TransID</th>
              <th>M-Pesa Ref</th>
              <th>💵 Amount</th>
              <th>👤 Name</th>
              <th>BillRef (sent by customer)</th>
              <th>MSISDN (paying phone)</th>
              <th>🔍 Drop Reason</th>
            </tr>
          </thead>
          <tbody>
            {% for gap in page_obj %}
            <tr>
              <td class="text-nowrap">
                <strong>{{ gap.created_at|date:"d M Y" }}</strong><br>
                <small class="text-muted">{{ gap.created_at|date:"H:i" }}</small>
              </td>
              <td><code>{{ gap.trans_id }}</code></td>
              <td><code>{{ gap.mpesa_ref|default:"—" }}</code></td>
              <td><strong class="text-success">KSh {{ gap.amount|floatformat:2|intcomma }}</strong></td>
              <td>{{ gap.name|default:"—" }}</td>
              <td>
                <code>{{ gap.bill_ref|default:"(empty)" }}</code>
                {% if not gap.bill_ref %}
                <span class="badge badge-danger">EMPTY</span>
                {% endif %}
              </td>
              <td><code>{{ gap.msisdn|default:"—" }}</code></td>
              <td>
                {% if gap.note == "—" %}
                  <span class="text-muted">No note (pre-diagnostic)</span>
                {% elif "no_borrower" in gap.note %}
                  <span class="badge badge-danger">No borrower matched</span>
                  <br><small class="text-muted">{{ gap.note }}</small>
                {% elif "no_active_loan" in gap.note %}
                  <span class="badge badge-warning">No active loan</span>
                  <br><small class="text-muted">{{ gap.note }}</small>
                {% elif "no_balance" in gap.note %}
                  <span class="badge badge-info">Balance was 0</span>
                  <br><small class="text-muted">{{ gap.note }}</small>
                {% else %}
                  <small class="text-muted">{{ gap.note }}</small>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  {% if page_obj.has_other_pages %}
  <nav class="mt-3">
    <ul class="pagination justify-content-center">
      {% if page_obj.has_previous %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">‹ Prev</a></li>
      {% endif %}
      <li class="page-item active"><span class="page-link">{{ page_obj.number }} / {{ page_obj.paginator.num_pages }}</span></li>
      {% if page_obj.has_next %}
        <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next ›</a></li>
      {% endif %}
    </ul>
  </nav>
  {% endif %}
  {% endif %}

</div>
{% endblock %}