{% extends "layout/base.html" %}

{# Pager macro must be defined before it is used #}
{% macro pager(position, page, total_pages, has_prev, has_next) -%}
<div class="d-flex justify-content-between align-items-center my-2">
  <div>
    {% if has_prev %}
      <a class="btn btn-outline-secondary btn-sm" href="{{ url_for('main.inbox_deleted_mails', page=page-1) }}">Previous</a>
    {% else %}
      <button class="btn btn-outline-secondary btn-sm" disabled>Previous</button>
    {% endif %}
    {% if has_next %}
      <a class="btn btn-outline-secondary btn-sm ms-2" href="{{ url_for('main.inbox_deleted_mails', page=page+1) }}">Next</a>
    {% else %}
      <button class="btn btn-outline-secondary btn-sm ms-2" disabled>Next</button>
    {% endif %}
  </div>

  <div class="d-flex align-items-center">
    <span class="me-2">Page {{ page }} of {{ total_pages }}</span>
    <form method="get" class="d-flex align-items-center mb-0">
      <label for="page_{{ position }}" class="form-label me-1 mb-0">Go to:</label>
      <input
        type="number"
        min="1"
        max="{{ total_pages }}"
        class="form-control form-control-sm me-1"
        id="page_{{ position }}"
        name="page"
        value="{{ page }}"
        style="width: 5rem;"
      />
      <button type="submit" class="btn btn-primary btn-sm">Go</button>
    </form>
  </div>
</div>
{%- endmacro %}

{% block content %}
<h2 class="mb-3">Deleted mails</h2>

{{ pager("top", page, total_pages, has_prev, has_next) }}

<div class="table-responsive">
  <table class="table table-sm table-hover align-middle">
    <thead class="table-light">
      <tr>
        <th scope="col">From</th>
        <th scope="col">Subject</th>
        <th scope="col">Received</th>
        <th scope="col">Deleted by</th>
        <th scope="col">Deleted at</th>
        <th scope="col">EML</th>
        <th scope="col">Actions</th>
      </tr>
    </thead>
    <tbody>
      {% if rows %}
        {% for row in rows %}
          <tr class="deleted-mail-row" data-message-id="{{ row.id }}" style="cursor: pointer;">
            <td>{{ row.from_address }}</td>
            <td>{{ row.subject }}</td>
            <td>{{ row.received_at|local_datetime }}</td>
            <td>{{ row.deleted_by }}</td>
            <td>{{ row.deleted_at|local_datetime }}</td>
            <td>
              {% if row.has_eml %}
                <a class="eml-download" href="{{ url_for('main.inbox_message_eml', message_id=row.id) }}">EML</a>
              {% endif %}
            </td>
            <td>
              <form method="POST" action="{{ url_for('main.inbox_deleted_restore', message_id=row.id) }}" class="mb-0 restore-form" onsubmit="return confirm('Restore this message to the Inbox?');">
                <button type="submit" class="btn btn-sm btn-outline-primary">Restore</button>
              </form>
            </td>
          </tr>
        {% endfor %}
      {% else %}
        <tr>
          <td colspan="7" class="text-center text-muted py-3">
            No deleted messages found.
          </td>
        </tr>
      {% endif %}
    </tbody>
  </table>
</div>

{{ pager("bottom", page, total_pages, has_prev, has_next) }}

<!-- Inline popup modal for deleted message details -->
<div class="modal fade" id="deletedMailModal" tabindex="-1" aria-labelledby="deletedMailModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable modal-xxl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deletedMailModalLabel">Message details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-3">
            <dl class="row mb-0 dl-compact">
              <dt class="col-4">From</dt>
              <dd class="col-8 ellipsis-field" id="dmsg_from"></dd>

              <dt class="col-4">Received</dt>
              <dd class="col-8 ellipsis-field" id="dmsg_received"></dd>

              <dt class="col-4">Deleted by</dt>
              <dd class="col-8 ellipsis-field" id="dmsg_deleted_by"></dd>

              <dt class="col-4">Deleted at</dt>
              <dd class="col-8 ellipsis-field" id="dmsg_deleted_at"></dd>
            </dl>
          </div>

          <div class="col-md-9">
            <div class="border rounded p-2 p-0" style="overflow:hidden;">
              <iframe id="dmsg_body_iframe" class="w-100" style="height:60vh; border:0; background:transparent;" sandbox="allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"></iframe>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
  (function () {
        function wrapMailHtml(html) {
      html = html || "";
      var trimmed = (typeof html === "string") ? html.trim() : "";
      var injection = '<meta charset="utf-8"><meta name="color-scheme" content="light"><meta name="supported-color-schemes" content="light"><meta name="viewport" content="width=device-width, initial-scale=1"><base target="_blank"><style>:root{color-scheme:light;}html{color-scheme:light;}body{margin:0;padding:8px;background:#fff;forced-color-adjust:none;-ms-high-contrast-adjust:none;}</style>';

      function injectIntoFullDoc(doc) {
        var d = doc || "";
        if (/<head[^>]*>/i.test(d)) {
          return d.replace(/<head[^>]*>/i, function (m) { return m + injection; });
        }
        if (/<html[^>]*>/i.test(d)) {
          return d.replace(/<html[^>]*>/i, function (m) { return m + "<head>" + injection + "</head>"; });
        }
        return "<!doctype html><html><head>" + injection + "</head><body>" + d + "</body></html>";
      }

      if (trimmed.toLowerCase().indexOf("<!doctype") === 0 || trimmed.toLowerCase().indexOf("<html") === 0) {
        return injectIntoFullDoc(trimmed);
      }

      return "<!doctype html><html><head>" + injection + "</head><body>" + html + "</body></html>";
    }

function attachHandlers() {
      var emlLinks = document.querySelectorAll("a.eml-download");
      emlLinks.forEach(function (a) {
        a.addEventListener("click", function (ev) {
          ev.stopPropagation();
        });
      });

      var restoreForms = document.querySelectorAll("form.restore-form");
      restoreForms.forEach(function (f) {
        f.addEventListener("click", function (ev) {
          ev.stopPropagation();
        });
      });

      var rows = document.querySelectorAll("tr.deleted-mail-row");
      var modalEl = document.getElementById("deletedMailModal");
      if (!modalEl) return;
      var modal = new bootstrap.Modal(modalEl);

      rows.forEach(function (row) {
        row.addEventListener("click", function () {
          var id = row.getAttribute("data-message-id");
          if (!id) return;

          fetch("{{ url_for('main.inbox_message_detail', message_id=0) }}".replace("0", id))
            .then(function (resp) {
              if (!resp.ok) throw new Error("Failed to load message details");
              return resp.json();
            })
            .then(function (data) {
              if (data.status !== "ok") throw new Error("Unexpected response");
              var meta = data.meta || {};

              document.getElementById("deletedMailModalLabel").textContent = meta.subject || "Message details";
              document.getElementById("dmsg_from").textContent = meta.from_address || "";
              document.getElementById("dmsg_received").textContent = meta.received_at || "";
              document.getElementById("dmsg_deleted_by").textContent = meta.deleted_by || "";
              document.getElementById("dmsg_deleted_at").textContent = meta.deleted_at || "";

              var bodyFrame = document.getElementById("dmsg_body_iframe");
              if (bodyFrame) bodyFrame.srcdoc = wrapMailHtml(data.body_html || "");

              modal.show();
            })
            .catch(function (err) {
              console.error(err);
            });
        });
      });
    }

    document.addEventListener("DOMContentLoaded", attachHandlers);
  })();
</script>

{% endblock %}