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

{% block title %}SasaPay Payment Issues{% endblock %}

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

  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h2 class="mb-1 font-weight-bold">⚡ SasaPay Payment Issues</h2>
      <p class="text-muted mb-0">
        Payments that could not be auto-processed — review and resolve them here.
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="{% url 'payments:sasapay_dashboard' %}" class="btn btn-outline-primary btn-sm">
        <i class="fas fa-tachometer-alt mr-1"></i> SasaPay Dashboard
      </a>
      <a href="{% url 'payments:recover_ipn_payments' %}" class="btn btn-warning btn-sm">
        <i class="fas fa-tools mr-1"></i> Recovery Tool
      </a>
    </div>
  </div>

  <!-- Stat Cards -->
  <div class="row mb-4">
    <div class="col-6 col-md-3 mb-3">
      <div class="card shadow-sm border-0 h-100" style="border-left: 4px solid #f59e0b !important;">
        <div class="card-body py-3">
          <div class="text-xs font-weight-bold text-uppercase text-warning mb-1">Unmatched Payments</div>
          <div class="h4 mb-0 font-weight-bold text-dark">{{ stats.unknown_pending|intcomma }}</div>
          <small class="text-muted">awaiting resolution</small>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3 mb-3">
      <div class="card shadow-sm border-0 h-100" style="border-left: 4px solid #ef4444 !important;">
        <div class="card-body py-3">
          <div class="text-xs font-weight-bold text-uppercase text-danger mb-1">No Borrower Matched</div>
          <div class="h4 mb-0 font-weight-bold text-dark">{{ stats.gaps_no_match|intcomma }}</div>
          <small class="text-muted">IPN gaps</small>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3 mb-3">
      <div class="card shadow-sm border-0 h-100" style="border-left: 4px solid #3b82f6 !important;">
        <div class="card-body py-3">
          <div class="text-xs font-weight-bold text-uppercase text-info mb-1">No Active Loan</div>
          <div class="h4 mb-0 font-weight-bold text-dark">{{ stats.gaps_no_loan|intcomma }}</div>
          <small class="text-muted">IPN gaps</small>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3 mb-3">
      <div class="card shadow-sm border-0 h-100" style="border-left: 4px solid #22c55e !important;">
        <div class="card-body py-3">
          <div class="text-xs font-weight-bold text-uppercase text-success mb-1">Processed OK</div>
          <div class="h4 mb-0 font-weight-bold text-dark">{{ stats.ipn_processed|intcomma }}</div>
          <small class="text-muted">total successful IPNs</small>
        </div>
      </div>
    </div>
  </div>

  <!-- Tabs -->
  <ul class="nav nav-tabs mb-0" id="issuesTabs">
    <li class="nav-item">
      <a class="nav-link {% if active_tab == 'unknown' %}active font-weight-bold{% endif %}"
         href="?tab=unknown">
        ⚠️ Unmatched Payments
        {% if stats.unknown_pending > 0 %}
          <span class="badge badge-warning ml-1">{{ stats.unknown_pending }}</span>
        {% endif %}
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link {% if active_tab == 'gaps' %}active font-weight-bold{% endif %}"
         href="?tab=gaps">
        🔍 IPN Gaps
        {% if stats.gaps_total > 0 %}
          <span class="badge badge-danger ml-1">{{ stats.gaps_total }}</span>
        {% endif %}
      </a>
    </li>
  </ul>

  <!-- ═══════════════════════════════════════════════════════════════════════
       TAB 1 — UNKNOWN / UNMATCHED PAYMENTS
       Payments SasaPay delivered but the system couldn't match to anyone.
  ════════════════════════════════════════════════════════════════════════ -->
  {% if active_tab == 'unknown' %}
  <div class="card shadow border-0" style="border-top-left-radius:0;">
    <div class="card-header bg-white py-3">
      <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div>
          <strong>Payments received from SasaPay that couldn't be matched to a borrower.</strong>
          <span class="text-muted ml-2">The customer's BillRef didn't match any phone, ID, or loan number.</span>
        </div>
        <div class="d-flex gap-2">
          <!-- Bulk replay -->
          {% if stats.unknown_pending > 0 %}
          <form method="post" action="{% url 'payments:replay_all_unknown' %}"
                onsubmit="return confirm('Re-run the matcher against all {{ stats.unknown_pending }} unresolved payment(s)? This will create repayments for any that now match.')">
            {% csrf_token %}
            <button type="submit" class="btn btn-sm btn-primary">
              <i class="fas fa-sync-alt mr-1"></i> Re-match All ({{ stats.unknown_pending }})
            </button>
          </form>
          {% endif %}
          <!-- Resolved toggle -->
          {% if show_resolved %}
            <a href="?tab=unknown" class="btn btn-sm btn-outline-warning">Show Unresolved Only</a>
          {% else %}
            <a href="?tab=unknown&resolved=true" class="btn btn-sm btn-outline-secondary">Show Resolved</a>
          {% endif %}
        </div>
      </div>
    </div>
    <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>💵 Amount (KES)</th>
              <th>👤 Paid By</th>
              <th>📞 Paying Phone (MSISDN)</th>
              <th>🔑 BillRef entered</th>
              <th>M-Pesa Ref</th>
              <th>ℹ️ Reason</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for p in unknown_page %}
            <tr>
              <td class="text-nowrap">
                <strong>{{ p.created_at|date:"d M Y" }}</strong><br>
                <small class="text-muted">{{ p.created_at|date:"H:i" }}</small>
              </td>
              <td><strong class="text-success">{{ p.amount|floatformat:2|intcomma }}</strong></td>
              <td>{{ p.paid_by|default:"—" }}</td>
              <td><code>{{ p.msisdn|default:"—" }}</code></td>
              <td>
                <code>{{ p.bill_ref|default:"(empty)" }}</code>
                {% if not p.bill_ref %}
                  <span class="badge badge-danger ml-1">EMPTY</span>
                {% endif %}
              </td>
              <td><code>{{ p.reference|default:"—" }}</code></td>
              <td>
                <small class="text-muted">{{ p.notes|truncatechars:80 }}</small>
              </td>
              <td>
                {% if p.resolved %}
                  <span class="badge badge-success">Resolved</span>
                {% else %}
                  <span class="badge badge-warning">Pending</span>
                {% endif %}
              </td>
              <td>
                {% if not p.resolved %}
                <div class="d-flex flex-column gap-1">
                  <!-- Replay: re-run improved matcher -->
                  <form method="post"
                        action="{% url 'payments:replay_unknown' p.id %}?tab=unknown"
                        onsubmit="return confirm('Re-run matching for KES {{ p.amount|floatformat:2 }}?')">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-sm btn-primary w-100">
                      <i class="fas fa-sync-alt mr-1"></i> Re-match
                    </button>
                  </form>
                  <!-- Resolve: mark done without creating repayment -->
                  <form method="post"
                        action="{% url 'payments:sasapay_resolve_unknown' p.id %}"
                        onsubmit="return confirm('Mark KES {{ p.amount|floatformat:2 }} as manually resolved? No repayment will be created.')">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-sm btn-outline-success w-100">
                      ✓ Resolve
                    </button>
                  </form>
                </div>
                {% else %}
                  <span class="text-muted">—</span>
                {% endif %}
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="9" class="text-center py-5">
                <div class="text-success mb-2" style="font-size:2rem;">✅</div>
                <strong>No unmatched payments</strong><br>
                <small class="text-muted">Every SasaPay payment was matched to a borrower.</small>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    {% if unknown_page.has_other_pages %}
    <div class="card-footer bg-white">
      <nav>
        <ul class="pagination pagination-sm justify-content-center mb-0">
          {% if unknown_page.has_previous %}
            <li class="page-item">
              <a class="page-link" href="?tab=unknown&upage={{ unknown_page.previous_page_number }}{% if show_resolved %}&resolved=true{% endif %}">‹ Prev</a>
            </li>
          {% endif %}
          <li class="page-item disabled">
            <span class="page-link">{{ unknown_page.number }} / {{ unknown_page.paginator.num_pages }}</span>
          </li>
          {% if unknown_page.has_next %}
            <li class="page-item">
              <a class="page-link" href="?tab=unknown&upage={{ unknown_page.next_page_number }}{% if show_resolved %}&resolved=true{% endif %}">Next ›</a>
            </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    {% endif %}
  </div>

  <!-- What to do callout -->
  <div class="alert alert-info mt-3 mb-0">
    <strong>What does this mean?</strong>
    These are real M-Pesa payments SasaPay received and forwarded to the system, but the
    <strong>BillRef</strong> (what the customer typed at the M-Pesa till) didn't match any
    borrower's phone number, ID number, or loan number.
    <ul class="mb-0 mt-2">
      <li>Click <strong>Re-match</strong> to retry with the improved phone matcher — this fixes
          format mismatches like <code>254718523398</code> vs <code>+254718523398</code>.</li>
      <li>Click <strong>Re-match All</strong> to replay every unresolved payment at once.</li>
      <li>If a payment still doesn't match after re-matching, record it manually on the
          borrower's loan, then click <strong>Resolve</strong> to remove it from this list.</li>
      <li>If the borrower's phone is stored in the wrong format, first run:
          <code>python manage.py normalise_phone_numbers --apply</code>, then re-match.</li>
    </ul>
  </div>

  {% endif %}


  <!-- ═══════════════════════════════════════════════════════════════════════
       TAB 2 — IPN GAPS
       IPNs that arrived but failed somewhere during processing.
  ════════════════════════════════════════════════════════════════════════ -->
  {% if active_tab == 'gaps' %}
  <div class="card shadow border-0" style="border-top-left-radius:0;">
    <div class="card-header bg-white py-3">
      <div class="d-flex justify-content-between align-items-center">
        <div>
          <strong>IPN notifications that arrived but no repayment was created.</strong>
          <span class="text-muted ml-2">Total: {{ gaps_total|intcomma }}</span>
        </div>
        <!-- Status filter -->
        <form method="get" class="form-inline">
          <input type="hidden" name="tab" value="gaps">
          <select name="gap_status" class="form-control form-control-sm mr-2"
                  onchange="this.form.submit()">
            {% for val, label in gap_status_choices %}
              <option value="{{ val }}" {% if gap_status_filter == val %}selected{% endif %}>
                {{ label }}
              </option>
            {% endfor %}
          </select>
        </form>
      </div>
    </div>
    <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 entered</th>
              <th>📞 MSISDN</th>
              <th>🔍 Drop Reason</th>
            </tr>
          </thead>
          <tbody>
            {% for gap in gaps_page %}
            <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 class="small">{{ gap.trans_id }}</code></td>
              <td><code class="small">{{ gap.mpesa_ref }}</code></td>
              <td><strong class="text-success">KSh {{ gap.amount|floatformat:2|intcomma }}</strong></td>
              <td>{{ gap.name }}</td>
              <td>
                <code>{{ gap.bill_ref|default:"(empty)" }}</code>
                {% if not gap.bill_ref %}
                  <span class="badge badge-danger ml-1">EMPTY</span>
                {% endif %}
              </td>
              <td><code class="small">{{ gap.msisdn }}</code></td>
              <td>
                {% if gap.raw_status == 'no_match' %}
                  <span class="badge badge-danger">No borrower matched</span>
                {% elif gap.raw_status == 'no_loan' %}
                  <span class="badge badge-warning">No active loan</span>
                {% elif gap.raw_status == 'no_balance' %}
                  <span class="badge badge-info">Loan already paid</span>
                {% elif gap.raw_status == 'failed' %}
                  <span class="badge badge-danger">Processing error</span>
                {% elif gap.raw_status == 'pending' %}
                  <span class="badge badge-secondary">Stuck pending</span>
                {% endif %}
                {% if gap.note != '—' %}
                  <br><small class="text-muted">{{ gap.note|truncatechars:100 }}</small>
                {% endif %}
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="8" class="text-center py-5">
                <div class="text-success mb-2" style="font-size:2rem;">✅</div>
                <strong>No IPN gaps found</strong><br>
                <small class="text-muted">Every IPN that arrived was processed into a repayment.</small>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    {% if gaps_page.has_other_pages %}
    <div class="card-footer bg-white">
      <nav>
        <ul class="pagination pagination-sm justify-content-center mb-0">
          {% if gaps_page.has_previous %}
            <li class="page-item">
              <a class="page-link" href="?tab=gaps&gpage={{ gaps_page.previous_page_number }}{% if gap_status_filter %}&gap_status={{ gap_status_filter }}{% endif %}">‹ Prev</a>
            </li>
          {% endif %}
          <li class="page-item disabled">
            <span class="page-link">{{ gaps_page.number }} / {{ gaps_page.paginator.num_pages }}</span>
          </li>
          {% if gaps_page.has_next %}
            <li class="page-item">
              <a class="page-link" href="?tab=gaps&gpage={{ gaps_page.next_page_number }}{% if gap_status_filter %}&gap_status={{ gap_status_filter }}{% endif %}">Next ›</a>
            </li>
          {% endif %}
        </ul>
      </nav>
    </div>
    {% endif %}
  </div>

  <!-- Explanation callout -->
  <div class="alert alert-warning mt-3 mb-0">
    <strong>Why do IPN gaps happen?</strong>
    <ul class="mb-0 mt-2">
      <li><strong>No borrower matched</strong> — customer typed a wrong BillRef at the till.
          Check the BillRef column — it's what they entered.</li>
      <li><strong>No active loan</strong> — the borrower was found but their loan is fully paid or
          not yet approved. Likely a processing fee payment.</li>
      <li><strong>Loan already paid</strong> — outstanding balance was 0 when the IPN arrived.</li>
      <li><strong>Processing error</strong> — DB error during repayment creation.
          Use the <a href="{% url 'payments:recover_ipn_payments' %}">Recovery Tool</a> to replay these.</li>
    </ul>
  </div>
  {% endif %}

</div>
{% endblock %}