{% extends "templates/web.html" %}

{% block page_content %}
<style>
  .pw-rescerts-wrap { max-width: 1200px; margin: 0 auto; }
  .pw-rescerts-wrap h1 { color: #1a2744; margin: 0 0 1rem; }
  .pw-rescerts-summary {
    display: flex; gap: 1rem; margin-bottom: 1rem;
  }
  .pw-summary-card {
    flex: 1; padding: 0.75rem 1rem;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
  }
  .pw-summary-card strong { font-size: 1.4rem; color: #1a2744; }
  .pw-summary-card .pw-card-label { color: #64748b; font-size: 0.85rem; }
  .pw-rescerts-filter {
    margin-bottom: 1rem; padding: 0.5rem 0.75rem;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px;
    display: flex; gap: 0.5rem;
  }
  .pw-rescerts-filter input { flex: 1; padding: 0.4rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.9rem; }
  .pw-rescerts-filter select { padding: 0.4rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 0.9rem; }
  .pw-rescerts-tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
  .pw-rescerts-tbl th, .pw-rescerts-tbl td { padding: 0.55rem 0.75rem; text-align: left; border-bottom: 1px solid #f0f4f8; vertical-align: top; }
  .pw-rescerts-tbl th { background: #f8fafc; color: #475569; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
  .pw-rescerts-tbl tr[data-status="active"]  td { background: #fff; }
  .pw-rescerts-tbl tr[data-status="expired"] td { background: #fef3c7; }
  .pw-rescerts-tbl tr[data-status="revoked"] td { background: #fee2e2; }
  .pw-rescerts-tbl tr[data-due-soon="1"] .pw-due { color: #b91c1c; font-weight: 600; }
  .pw-status-pill {
    display: inline-block; padding: 0.1rem 0.5rem;
    background: #e0e7ff; color: #1e3a8a;
    border-radius: 10px; font-size: 0.72rem; font-weight: 600;
  }
  .pw-status-pill[data-status="active"]  { background: #d1fae5; color: #065f46; }
  .pw-status-pill[data-status="expired"] { background: #fef3c7; color: #92400e; }
  .pw-status-pill[data-status="revoked"] { background: #fee2e2; color: #991b1b; }
  .pw-btn-revoke {
    padding: 0.25rem 0.6rem; background: #fee2e2; color: #991b1b;
    border: 0; border-radius: 4px; font-size: 0.75rem; cursor: pointer;
  }
</style>

<div class="pw-rescerts-wrap">
  <h1>Reseller Certifications</h1>
  <p style="color:#64748b; margin-bottom: 1rem;">
    Active certifications supporting Form 499-A Line 303 revenue claims.
    Per Section IV.C.4, these must be renewed annually. The renewal
    worker emails customers at T-30, T-14, T-7, T-1 days.
  </p>

  <div class="pw-rescerts-summary">
    <div class="pw-summary-card">
      <strong>{{ certifications|length }}</strong>
      <div class="pw-card-label">total certifications on file</div>
    </div>
    <div class="pw-summary-card" style="background: #fef3c7;">
      <strong>{{ expiring_soon_count }}</strong>
      <div class="pw-card-label">expiring within 90 days</div>
    </div>
  </div>

  <div class="pw-rescerts-filter">
    <input type="text" id="pw-rc-search" placeholder="Filter by filer, reseller name, filer ID…">
    <select id="pw-rc-status-filter">
      <option value="">All statuses</option>
      <option value="active" selected>Active only</option>
      <option value="expired">Expired</option>
      <option value="revoked">Revoked</option>
    </select>
  </div>

  <table class="pw-rescerts-tbl">
    <thead>
      <tr>
        <th>Filer (our customer)</th>
        <th>Reseller</th>
        <th>Reseller Filer ID</th>
        <th>Signed</th>
        <th class="pw-due">Renewal due</th>
        <th>Status</th>
        <th>Has signed PDF</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="pw-rc-rows">
      {% if not certifications %}
        <tr><td colspan="8" style="text-align:center; padding: 2rem; color:#64748b;">
          No reseller certifications on file yet.
        </td></tr>
      {% endif %}
      {% for c in certifications %}
        <tr data-status="{{ c.status }}"
            data-due-soon="{{ 1 if c.days_to_renewal is not none and c.days_to_renewal <= 30 else 0 }}"
            data-search="{{ (c.filer_legal_name or '')|lower }} {{ c.reseller_legal_name|lower }} {{ c.reseller_filer_id_499 }}">
          <td>{{ c.filer_legal_name or '—' }}</td>
          <td>
            {{ c.reseller_legal_name }}
            {% if c.reseller_contact_email %}
              <br><span style="color:#64748b; font-size:.78rem;">{{ c.reseller_contact_email }}</span>
            {% endif %}
          </td>
          <td><code>{{ c.reseller_filer_id_499 }}</code></td>
          <td>{{ frappe.utils.format_date(c.certification_date) }}</td>
          <td class="pw-due">
            {{ frappe.utils.format_date(c.renewal_due) }}
            {% if c.days_to_renewal is not none %}
              <br><span style="font-size:.72rem; color:#64748b;">
                {% if c.days_to_renewal < 0 %}{{ -c.days_to_renewal }}d overdue
                {% else %}in {{ c.days_to_renewal }}d{% endif %}
              </span>
            {% endif %}
          </td>
          <td><span class="pw-status-pill" data-status="{{ c.status }}">{{ c.status }}</span></td>
          <td>{% if c.has_signed_pdf %}✓{% else %}—{% endif %}</td>
          <td>
            {% if c.status == 'active' %}
              <button class="pw-btn-revoke" data-cert-id="{{ c.id }}">Revoke</button>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
(function () {
  const search = document.getElementById("pw-rc-search");
  const statusFilter = document.getElementById("pw-rc-status-filter");

  function applyFilter() {
    const q = (search.value || "").trim().toLowerCase();
    const st = statusFilter.value;
    document.querySelectorAll("#pw-rc-rows tr[data-search]").forEach((tr) => {
      const matchesQ = !q || tr.getAttribute("data-search").includes(q);
      const matchesStatus = !st || tr.getAttribute("data-status") === st;
      tr.style.display = (matchesQ && matchesStatus) ? "" : "none";
    });
  }
  search?.addEventListener("input", applyFilter);
  statusFilter?.addEventListener("change", applyFilter);
  applyFilter();

  document.querySelectorAll(".pw-btn-revoke").forEach((btn) => {
    btn.addEventListener("click", async () => {
      const certId = btn.getAttribute("data-cert-id");
      if (!confirm("Revoke this reseller certification? The filer can no longer claim Line 303 revenue from this reseller.")) return;
      try {
        const r = await fetch(`/api/v1/reseller-certs/${certId}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ status: "revoked" }),
        });
        if (r.ok) {
          btn.closest("tr").setAttribute("data-status", "revoked");
          btn.closest("tr").querySelector(".pw-status-pill").textContent = "revoked";
          btn.closest("tr").querySelector(".pw-status-pill").setAttribute("data-status", "revoked");
          btn.remove();
          applyFilter();
        } else {
          alert(`Could not revoke: ${r.status}`);
        }
      } catch (e) {
        alert(`Error: ${e.message}`);
      }
    });
  });
})();
</script>
{% endblock %}