{% extends "cms/base.html" %}
{% block title %}Tickets{% endblock %}
{% block page_title %}Support Tickets{% endblock %}

{% block extra_head %}
<style>
  .search-inline { display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--cms-border);border-radius:7px;padding:.5rem 1.25rem;transition:all .15s; }
  .search-inline:focus-within { border-color:#033152; }
  .search-inline input { border:none;background:none;outline:none;font-size:.875rem;width:180px;color:var(--cms-text); }
</style>
{% endblock %}

{% block cms_content %}

<div id="deleteUndo" style="display:none;align-items:center;gap:.75rem;background:rgba(255,64,75,.07);border:1px solid rgba(255,64,75,.28);border-radius:8px;padding:.65rem 1rem;margin-bottom:1.25rem;font-size:.85rem;color:#c0182a">
  <i class="fa-solid fa-triangle-exclamation" style="flex-shrink:0"></i>
  <span><strong id="deleteUndoName"></strong> deleted. Permanent in <strong id="deleteUndoCount">15</strong>s.</span>
  <button id="deleteUndoBtn" style="margin-left:auto;background:#ff404b;border:none;color:#fff;border-radius:6px;padding:.3rem .85rem;font-size:.78rem;font-weight:700;cursor:pointer;flex-shrink:0">
    <i class="fa-solid fa-rotate-left me-1"></i>Undo
  </button>
  <button onclick="dismissDeleteUndo(true)" style="background:none;border:none;color:#c0182a;opacity:.5;cursor:pointer;padding:.1rem .2rem;font-size:.9rem;line-height:1;flex-shrink:0">&#x2715;</button>
</div>

<div class="cms-section-header">
  <h2>
    {% if show_archive %}
    <a href="{% url 'cms_tickets' %}" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Tickets</a>
    <span style="color:var(--cms-muted);font-weight:400"> / </span>Archive
    <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ closed_ticket_count }})</span>
    {% else %}
    Tickets <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ total_count }})</span>
    {% endif %}
  </h2>
  <div class="d-flex align-items-center gap-2">

    {% if not show_archive %}
    <form method="get" class="search-inline">
      {% if active_status %}<input type="hidden" name="status" value="{{ active_status }}">{% endif %}
      <i class="fa-solid fa-magnifying-glass" style="font-size:.75rem;color:#94a3b8"></i>
      <input type="text" name="q" value="{{ search }}" placeholder="Search tickets...">
      {% if search %}<a href="?{% if active_status %}status={{ active_status }}&{% endif %}" style="color:#94a3b8;text-decoration:none;font-size:.75rem">✕</a>{% endif %}
    </form>
    <a href="?archived=1" class="btn-cms-ghost" >
      <i class="fa-solid fa-box-archive"></i>
      <span style="font-size:.8rem">Archive</span>
      {% if closed_ticket_count %}<span style="background:#94a3b8;color:#fff;font-size:.65rem;font-weight:700;border-radius:99px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px">{{ closed_ticket_count }}</span>{% endif %}
    </a>

    {% else %}
    {% if closed_ticket_count %}
    <form method="post" action="{% url 'cms_tickets_archive_closed' %}" onsubmit="return confirm('Permanently delete all {{ closed_ticket_count }} closed/resolved ticket(s)? This cannot be undone.')">
      {% csrf_token %}
      <button type="submit" class="btn-cms-danger">
        <i class="fa-solid fa-trash me-1"></i>Delete all ({{ closed_ticket_count }})
      </button>
    </form>
    {% endif %}
    <a href="{% url 'cms_tickets' %}" class="btn-cms-ghost" >
      <i class="fa-solid fa-arrow-left"></i><span style="font-size:.8rem">Back</span>
    </a>
    {% endif %}

  </div>
</div>

{% if not show_archive %}
<div class="cms-card mb-3">
  <div style="font-size:.75rem;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem">Filter by Status</div>
  <div class="d-flex flex-wrap gap-2">
    <a href="{% url 'cms_tickets' %}{% if search %}?q={{ search }}{% endif %}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if not active_status %}rgba(22,81,123,.2){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,{% if not active_status %}.5{% else %}.2{% endif %});border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text)">
      All
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent)">{{ total_count }}</span>
    </a>
    {% for val, label, cnt in statuses_with_counts %}
    <a href="?status={{ val }}{% if search %}&q={{ search }}{% endif %}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if active_status == val %}rgba(22,81,123,.2){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,{% if active_status == val %}.5{% else %}.2{% endif %});border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text)">
      {{ label }}
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent)">{{ cnt }}</span>
    </a>
    {% endfor %}
  </div>
</div>
{% endif %}

<div class="cms-card" style="padding:0;overflow:hidden">
  {% if tickets %}
  <table class="cms-table tickets-table" style="margin:0;width:100%">
    <thead>
      <tr>
        <th style="width:70px">#</th>
        <th style="width:140px">From</th>
        <th style="text-align:left">Subject</th>
        <th style="width:95px">Status</th>
        <th style="width:80px">Priority</th>
        <th style="width:95px">Date</th>
        <th style="width:1%;white-space:nowrap">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for ticket in tickets %}
      <tr id="tkrow-{{ ticket.pk }}" data-subject="{{ ticket.subject|truncatechars:40 }}" data-created="{{ ticket.created_at|date:'c' }}" data-status="{{ ticket.status }}">
        <td style="color:var(--cms-muted);font-size:.78rem;font-family:monospace">{{ ticket.ticket_number|slice:"3:" }}</td>
        <td style="font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ ticket.sender_name }}</td>
        <td style="text-align:left">
          <a href="{% url 'cms_ticket_detail' ticket.pk %}" title="{{ ticket.subject }}"
             style="color:var(--cms-text);font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px">{{ ticket.subject|truncatechars:70 }}</a>
          {% if ticket.auction_listing %}<div style="font-size:.72rem;color:var(--cms-muted);margin-top:.1rem"><i class="fa-solid fa-gavel me-1"></i>{{ ticket.auction_listing.name }}</div>{% endif %}
        </td>
        <td>
          {% if ticket.sender_email|lower in blocked_emails %}
          <span style="font-size:.72rem;font-weight:700;background:#fee2e2;color:#dc2626;border-radius:6px;padding:.2rem .55rem;display:inline-block">Blocked</span>
          {% else %}
          <span class="badge-{{ ticket.status }}">{{ ticket.get_status_display }}</span>
          {% endif %}
        </td>
        <td>
          {% if ticket.priority == 'urgent' %}<span style="color:#dc2626;font-size:.78rem;font-weight:700">Urgent</span>
          {% elif ticket.priority == 'high' %}<span style="color:#f87171;font-size:.78rem;font-weight:600">High</span>
          {% elif ticket.priority == 'medium' %}<span style="color:#d97706;font-size:.78rem">Medium</span>
          {% else %}<span style="color:var(--cms-muted);font-size:.78rem">Low</span>{% endif %}
        </td>
        <td style="color:var(--cms-muted);font-size:.78rem;white-space:nowrap">{{ ticket.created_at|date:"d M Y" }}</td>
        <td style="white-space:nowrap">
          <a href="{% url 'cms_ticket_detail' ticket.pk %}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem" title="View"><i class="fa-solid fa-pen"></i></a>
          {% if show_archive %}
            {% if ticket.sender_email|lower not in blocked_emails %}
            <form method="post" action="{% url 'cms_ticket_unarchive' ticket.pk %}" style="display:inline;margin-left:.25rem">
              {% csrf_token %}
              <button type="submit" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem" title="Restore to inbox"><i class="fa-solid fa-inbox"></i></button>
            </form>
            {% endif %}
          {% else %}
          <form method="post" action="{% url 'cms_ticket_archive' ticket.pk %}" style="display:inline;margin-left:.25rem" onsubmit="return confirm('Archive this ticket?')">
            {% csrf_token %}
            <button type="submit" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem" title="Archive"><i class="fa-solid fa-box-archive"></i></button>
          </form>
          {% endif %}
          <form id="tkdelform{{ ticket.pk }}" method="post" action="{% url 'cms_ticket_delete' ticket.pk %}" style="display:none">{% csrf_token %}<input type="hidden" name="silent" value="1"></form>
          <button type="button" onclick="scheduleTicketDelete({{ ticket.pk }}, this.closest('tr').dataset.subject)"
                  class="btn-cms-danger" style="padding:.3rem .7rem;font-size:.8rem;margin-left:.25rem"
                  title="Delete permanently. You get 15 seconds to undo"><i class="fa-solid fa-trash"></i></button>
          {% if ticket.sender_email|lower in blocked_emails %}
          <form method="post" action="{% url 'cms_ticket_unblock_email' %}" style="display:inline;margin-left:.25rem" onsubmit="return confirm('Unblock {{ ticket.sender_email }}?')">
            {% csrf_token %}
            <input type="hidden" name="email" value="{{ ticket.sender_email }}">
            <button type="submit" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.8rem;color:#dc2626;border-color:#fca5a5" title="Unblock sender"><i class="fa-solid fa-ban"></i></button>
          </form>
          {% else %}
          <form method="post" action="{% url 'cms_ticket_block_sender' ticket.pk %}" style="display:inline;margin-left:.25rem" onsubmit="return confirm('Block {{ ticket.sender_email }} from submitting future tickets?')">
            {% csrf_token %}
            <button type="submit" class="btn-cms-danger" style="padding:.3rem .7rem;font-size:.8rem" title="Block sender"><i class="fa-solid fa-ban"></i></button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p style="color:var(--cms-muted);text-align:center;padding:2rem 0">
    {% if search or active_status %}No tickets match your filters.{% else %}No tickets yet.{% endif %}
  </p>
  {% endif %}

  {% if tickets.has_other_pages %}
  <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-top:1px solid var(--cms-border);font-size:.8rem;color:var(--cms-muted)">
    <span>Page {{ tickets.number }} of {{ tickets.paginator.num_pages }} &mdash; {{ tickets.paginator.count }} tickets</span>
    <div style="display:flex;gap:.3rem">
      {% if tickets.has_previous %}
        <a href="?{% if show_archive %}archived=1&{% endif %}{% if active_status %}status={{ active_status }}&{% endif %}{% if search %}q={{ search }}&{% endif %}page={{ tickets.previous_page_number }}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.78rem"><i class="fa-solid fa-chevron-left"></i></a>
      {% endif %}
      {% for num in tickets.paginator.page_range %}
        {% if num == tickets.number %}
          <span style="padding:.3rem .65rem;background:#033152;color:#fff;border-radius:6px;font-size:.78rem;font-weight:600">{{ num }}</span>
        {% elif num >= tickets.number|add:'-2' and num <= tickets.number|add:'2' %}
          <a href="?{% if show_archive %}archived=1&{% endif %}{% if active_status %}status={{ active_status }}&{% endif %}{% if search %}q={{ search }}&{% endif %}page={{ num }}" class="btn-cms-ghost" style="padding:.3rem .65rem;font-size:.78rem">{{ num }}</a>
        {% endif %}
      {% endfor %}
      {% if tickets.has_next %}
        <a href="?{% if show_archive %}archived=1&{% endif %}{% if active_status %}status={{ active_status }}&{% endif %}{% if search %}q={{ search }}&{% endif %}page={{ tickets.next_page_number }}" class="btn-cms-ghost" style="padding:.3rem .7rem;font-size:.78rem"><i class="fa-solid fa-chevron-right"></i></a>
      {% endif %}
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}

{% block extra_js %}
<script>
// Delete with undo, the same pattern as backups, tenants and correspondence.
var _kDelTimer = null, _kDelRow = null, _kDelForm = null, _kDelSecs = 15;

function scheduleTicketDelete(pk, name) {
  if (_kDelTimer) dismissDeleteUndo(true);
  var row = document.getElementById('tkrow-' + pk);
  if (!row) return;
  _kDelRow = row;
  _kDelForm = document.getElementById('tkdelform' + pk);
  if (!_kDelForm) return;
  _kDelSecs = 15;
  row.style.display = 'none';

  var banner = document.getElementById('deleteUndo');
  document.getElementById('deleteUndoName').textContent = name || 'Ticket';
  document.getElementById('deleteUndoCount').textContent = _kDelSecs;
  banner.style.display = 'flex';
  banner.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

  _kDelTimer = setInterval(function () {
    _kDelSecs--;
    var el = document.getElementById('deleteUndoCount');
    if (el) el.textContent = _kDelSecs;
    if (_kDelSecs <= 0) { clearInterval(_kDelTimer); _kDelTimer = null; _kDelForm.submit(); }
  }, 1000);

  document.getElementById('deleteUndoBtn').onclick = function () {
    clearInterval(_kDelTimer); _kDelTimer = null;
    if (_kDelRow) _kDelRow.style.display = '';
    document.getElementById('deleteUndo').style.display = 'none';
  };
}

function dismissDeleteUndo(andDelete) {
  clearInterval(_kDelTimer); _kDelTimer = null;
  if (andDelete && _kDelForm) _kDelForm.submit();
  document.getElementById('deleteUndo').style.display = 'none';
}

// Arriving from the ticket page, which no longer deletes on the spot.
(function () {
  var pending = new URLSearchParams(window.location.search).get('pending_delete');
  if (!pending) return;
  var row = document.getElementById('tkrow-' + pending);
  if (!row) return;
  scheduleTicketDelete(pending, row.dataset.subject);
  var url = new URL(window.location.href);
  url.searchParams.delete('pending_delete');
  window.history.replaceState({}, '', url.pathname + url.search);
})();

window.addEventListener('beforeunload', function () {
  if (_kDelTimer && _kDelForm) { clearInterval(_kDelTimer); _kDelForm.submit(); }
});
</script>
{% endblock %}