{% extends "cms/base.html" %}
{% block title %}Correspondences{% endblock title %}
{% block page_title %}Correspondences{% 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:200px;color:var(--cms-text); }
  .filter-pill {
    display:flex;align-items:center;gap:.4rem;
    border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;
    color:var(--cms-text);
    background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);
  }
  .filter-pill.active {
    background:rgba(22,81,123,.2);border-color:rgba(22,81,123,.5);
  }
  .filter-pill .cnt {
    background:rgba(22,81,123,.15);border-radius:20px;
    padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent);
  }
</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_archived %}Archived Correspondences{% else %}Correspondences{% endif %} <span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ total }})</span></h2>
  <div class="d-flex align-items-center gap-2">
    <form method="get" class="search-inline">
      {% if type_filter %}<input type="hidden" name="type" value="{{ type_filter }}">{% endif %}
      {% if status_filter %}<input type="hidden" name="status" value="{{ status_filter }}">{% endif %}
      {% if show_archived %}<input type="hidden" name="archived" value="1">{% endif %}
      <i class="fa-solid fa-magnifying-glass" style="font-size:.75rem;color:#94a3b8"></i>
      <input type="text" name="q" value="{{ search }}" placeholder="Subject or recipient…">
      {% if search %}<a href="?{% if type_filter %}type={{ type_filter }}&{% endif %}{% if status_filter %}status={{ status_filter }}&{% endif %}{% if show_archived %}archived=1{% endif %}" style="color:#94a3b8;text-decoration:none;font-size:.75rem">✕</a>{% endif %}
    </form>
    {% if show_archived %}
    <a href="{% url 'cms_email_log' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Active</a>
    {% else %}
    <a href="?archived=1" class="btn-cms-ghost"><i class="fa-solid fa-box-archive me-1"></i>Archived{% if archived_count %} ({{ archived_count }}){% endif %}</a>
    {% endif %}
  </div>
</div>

{% if page_obj or type_filter or status_filter %}
<div class="cms-card" style="margin-bottom:1rem">
  <div style="font-size:.75rem;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem">Filter by Type</div>
  <div class="d-flex flex-wrap gap-2">

    <a href="?{% if search %}q={{ search }}{% endif %}"
       class="filter-pill {% if not type_filter and not status_filter %}active{% endif %}">
      All <span class="cnt">{{ total }}</span>
    </a>

    {% for val, lbl, cnt in type_choices_with_counts %}
    <a href="?type={{ val }}{% if search %}&q={{ search }}{% endif %}"
       class="filter-pill {% if type_filter == val %}active{% endif %}">
      {{ lbl }} <span class="cnt">{{ cnt }}</span>
    </a>
    {% endfor %}

    <a href="?status=ok{% if search %}&q={{ search }}{% endif %}{% if type_filter %}&type={{ type_filter }}{% endif %}"
       class="filter-pill {% if status_filter == 'ok' %}active{% endif %}">
      <i class="fa-solid fa-circle-check" style="font-size:.7rem;color:#15803d"></i> Sent <span class="cnt">{{ sent_count }}</span>
    </a>

    <a href="?status=fail{% if search %}&q={{ search }}{% endif %}{% if type_filter %}&type={{ type_filter }}{% endif %}"
       class="filter-pill {% if status_filter == 'fail' %}active{% endif %}">
      <i class="fa-solid fa-circle-xmark" style="font-size:.7rem;color:#dc2626"></i> Failed <span class="cnt">{{ fail_count }}</span>
    </a>

  </div>
</div>

{% endif %}

{% if page_obj %}
{% for email in page_obj %}
<form id="archiveForm{{ email.pk }}" method="post" action="{% url 'cms_email_log_archive' email.pk %}" style="display:none">{% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}"></form>
<form id="restoreForm{{ email.pk }}" method="post" action="{% url 'cms_email_log_restore' email.pk %}" style="display:none">{% csrf_token %}<input type="hidden" name="next" value="{{ request.get_full_path }}"></form>
<form id="edelform{{ email.pk }}" method="post" action="{% url 'cms_email_log_delete' email.pk %}" style="display:none">{% csrf_token %}<input type="hidden" name="silent" value="1"></form>
{% endfor %}
{% endif %}

<div class="cms-card" style="padding:0;overflow:hidden">
  {% if page_obj %}
  <table class="cms-table">
    <thead>
      <tr>
        <th style="width:44px">#</th>
        <th>Subject</th>
        <th>To</th>
        <th>Type</th>
        <th>Status</th>
        <th>Sent</th>
        <th style="text-align:center;width:110px">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for email in page_obj %}
      <tr id="erow-{{ email.pk }}">
        <td style="color:var(--cms-muted);font-size:.78rem">{{ email.pk }}</td>
        <td style="max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:.84rem">{{ email.subject }}</td>
        <td style="font-size:.82rem;color:var(--cms-muted)">{{ email.to_email }}</td>
        <td>
          {% if email.email_type == 'order_confirmation' %}
            <span style="background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#16517b">Order</span>
          {% elif email.email_type == 'order_cancellation' %}
            <span style="background:#fff7ed;border:1px solid #fdba74;border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#ea580c">Cancellation</span>
          {% elif email.email_type == 'admin_notification' %}
            <span style="background:#fffbeb;border:1px solid #fcd34d;border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#b45309">Admin</span>
          {% elif email.email_type == 'quote' %}
            <span style="background:#faf5ff;border:1px solid #e9d5ff;border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#7c3aed">Quote</span>
          {% elif email.email_type == 'deal' %}
            <span style="background:#f0fdf4;border:1px solid #86efac;border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#15803d">Deal</span>
          {% elif email.email_type == 'otp' %}
            <span style="background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#16517b">OTP</span>
          {% else %}
            <span style="background:rgba(22,81,123,.08);border:1px solid rgba(22,81,123,.2);border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#16517b">{{ email.get_email_type_display }}</span>
          {% endif %}
        </td>
        <td>
          {% if email.ok %}
            <span style="background:#f0fdf4;border:1px solid #86efac;border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#15803d"><i class="fa-solid fa-circle-check me-1"></i>Sent</span>
          {% else %}
            <span style="background:#fef2f2;border:1px solid #fca5a5;border-radius:20px;padding:.15rem .55rem;font-size:.7rem;font-weight:600;color:#dc2626" title="{{ email.error }}"><i class="fa-solid fa-circle-xmark me-1"></i>Failed</span>
          {% endif %}
        </td>
        <td style="font-size:.78rem;color:var(--cms-muted);white-space:nowrap">{{ email.sent_at|date:"d M Y, H:i" }}</td>
        <td style="white-space:nowrap;text-align:center">
          <a href="{% url 'cms_email_log_detail' email.pk %}" class="btn-cms-ghost" style="padding:.3rem .6rem;font-size:.8rem" title="View">
            <i class="fa-solid fa-eye"></i>
          </a>
          <a href="{% url 'cms_email_resend' email.pk %}"
             onclick="return confirm('Resend this email to {{ email.to_email }}?')"
             class="btn-cms-ghost" style="padding:.3rem .6rem;font-size:.8rem;margin-left:.2rem" title="Resend">
            <i class="fa-solid fa-paper-plane"></i>
          </a>
          {% if show_archived %}
          <button type="submit" form="restoreForm{{ email.pk }}" class="btn-cms-ghost"
                  style="padding:.3rem .6rem;font-size:.8rem;margin-left:.2rem;color:#15803d;border-color:#bbf7d0" title="Restore">
            <i class="fa-solid fa-rotate-left"></i>
          </button>
          <button type="button" onclick="scheduleEmailDelete({{ email.pk }}, '{{ email.subject|escapejs|truncatechars:40 }}')"
                  class="btn-cms-danger" style="padding:.3rem .6rem;font-size:.8rem;margin-left:.2rem"
                  title="Delete permanently. You get 15 seconds to undo">
            <i class="fa-solid fa-trash"></i>
          </button>
          {% else %}
          <button type="submit" form="archiveForm{{ email.pk }}" class="btn-cms-ghost"
                  style="padding:.3rem .6rem;font-size:.8rem;margin-left:.2rem;color:#b45309;border-color:#fcd34d" title="Archive">
            <i class="fa-solid fa-box-archive"></i>
          </button>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  {% if page_obj.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 {{ page_obj.number }} of {{ page_obj.paginator.num_pages }} &mdash; {{ page_obj.paginator.count }} emails</span>
    <div style="display:flex;gap:.3rem">
      {% if page_obj.has_previous %}
        <a href="?{% if type_filter %}type={{ type_filter }}&{% endif %}{% if status_filter %}status={{ status_filter }}&{% endif %}{% if search %}q={{ search }}&{% endif %}page={{ page_obj.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 page_obj.paginator.page_range %}
        {% if num == page_obj.number %}
          <span style="padding:.3rem .65rem;background:#033152;color:#fff;border-radius:6px;font-size:.78rem;font-weight:600">{{ num }}</span>
        {% elif num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}
          <a href="?{% if type_filter %}type={{ type_filter }}&{% endif %}{% if status_filter %}status={{ status_filter }}&{% endif %}{% if search %}q={{ search }}&{% endif %}page={{ num }}" class="btn-cms-ghost" style="padding:.3rem .65rem;font-size:.78rem">{{ num }}</a>
        {% endif %}
      {% endfor %}
      {% if page_obj.has_next %}
        <a href="?{% if type_filter %}type={{ type_filter }}&{% endif %}{% if status_filter %}status={{ status_filter }}&{% endif %}{% if search %}q={{ search }}&{% endif %}page={{ page_obj.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 %}

  {% else %}
  <div style="padding:3rem;text-align:center;color:var(--cms-muted)">
    <i class="fa-solid fa-envelope-open" style="font-size:2rem;opacity:.3;margin-bottom:.75rem;display:block"></i>
    {% if search or type_filter or status_filter %}No emails match your filters.{% else %}No emails logged yet. They appear here automatically once the system sends them.{% endif %}
  </div>
  {% endif %}
</div>

{% endblock cms_content %}

{% block extra_js %}
<script>
// Delete with undo. The row disappears straight away so the list reads as done,
// but the POST waits 15 seconds. Undo puts the row back and nothing is sent.
var _eDelTimer = null, _eDelRow = null, _eDelForm = null, _eDelSecs = 15;

function scheduleEmailDelete(pk, name) {
  if (_eDelTimer) dismissDeleteUndo(true);
  var row = document.getElementById('erow-' + pk);
  if (!row) return;
  _eDelRow  = row;
  _eDelForm = document.getElementById('edelform' + pk);
  if (!_eDelForm) return;
  _eDelSecs = 15;
  row.style.display = 'none';

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

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

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

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

// Arriving from the confirmation page, which no longer deletes anything. It
// sends you here with the record marked pending so the countdown and Undo are
// the same on both routes.
(function () {
  var pending = new URLSearchParams(window.location.search).get('pending_delete');
  if (!pending) return;
  var row = document.getElementById('erow-' + pending);
  if (!row) return;
  var cell = row.querySelector('td:nth-child(2)');
  scheduleEmailDelete(pending, cell ? cell.textContent.trim().slice(0, 40) : 'This record');
  var url = new URL(window.location.href);
  url.searchParams.delete('pending_delete');
  window.history.replaceState({}, '', url.pathname + url.search);
})();

// Leaving mid-countdown sends it rather than losing it, which is what the
// countdown promised.
window.addEventListener('beforeunload', function () {
  if (_eDelTimer && _eDelForm) { clearInterval(_eDelTimer); _eDelForm.submit(); }
});
</script>
{% endblock %}