{% extends "base.html" %}
{% block title %}Message #{{ email.id }}{% endblock %}

{% block extra_head %}
<style>
  .meta-table th { width: 9rem; font-weight: 600; color: #495057; background: #f8f9fa; }
  .meta-table td { word-break: break-all; }
  .symbol-low  { color: #198754; }
  .symbol-high { color: #dc3545; }
  .pre-headers { max-height: 300px; overflow-y: auto; font-size: .8rem; background: #212529; color: #f8f9fa; border-radius: .375rem; padding: 1rem; }
  .action-bar  { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #dee2e6; padding: .75rem 1rem; z-index: 100; margin: 0 -1rem; }
  .tab-pane pre { max-height: 500px; overflow-y: auto; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: .375rem; padding: 1rem; font-size: .82rem; white-space: pre-wrap; word-break: break-all; }
</style>
{% endblock %}

{% block content %}

<!-- Breadcrumb + Back -->
<div class="d-flex align-items-center justify-content-between mb-3">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
      <li class="breadcrumb-item">
        <a href="{{ back_url }}" class="sg-back-btn">
          <i class="bi bi-inbox me-1"></i>Quarantine
        </a>
      </li>
      <li class="breadcrumb-item active" aria-current="page">Message #{{ email.id }}</li>
    </ol>
  </nav>
  <a href="{{ back_url }}" class="btn btn-sm btn-outline-secondary sg-back-btn">
    <i class="bi bi-arrow-left me-1"></i>Back to List
  </a>
</div>

<div class="row g-3">

  <!-- LEFT COLUMN: Metadata + Body -->
  <div class="col-lg-8">

    <!-- Metadata Card -->
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white d-flex align-items-center justify-content-between border-bottom py-2">
        <h6 class="mb-0 fw-bold"><i class="bi bi-envelope-fill me-2 text-primary"></i>Message Details</h6>
        <div class="d-flex align-items-center gap-2">
          <!-- Score Badge -->
          {% set score = email.rspamd_score | default(0) | float %}
          {% if score < 4 %}
            <span class="badge score-badge-low fs-6 px-2">Score: {{ '%.2f' % score }}</span>
          {% elif score < 6 %}
            <span class="badge score-badge-medium fs-6 px-2">Score: {{ '%.2f' % score }}</span>
          {% elif score < 15 %}
            <span class="badge score-badge-high fs-6 px-2">Score: {{ '%.2f' % score }}</span>
          {% else %}
            <span class="badge score-badge-severe fs-6 px-2">Score: {{ '%.2f' % score }}</span>
          {% endif %}
          <!-- Action -->
          {% if email.rspamd_action %}
            <span class="badge bg-secondary">{{ email.rspamd_action }}</span>
          {% endif %}
          <!-- Status -->
          {% set status = email.status | default('') %}
          {% if status == 'clean' %}     <span class="badge bg-success">Clean</span>
          {% elif status == 'spam' %}    <span class="badge bg-danger">Spam</span>
          {% elif status == 'review' %}  <span class="badge bg-warning text-dark">Review</span>
          {% elif status == 'released' %}<span class="badge bg-secondary">Released</span>
          {% elif status == 'deleted' %} <span class="badge bg-dark">Deleted</span>
          {% endif %}
        </div>
      </div>
      <div class="card-body p-0">
        <table class="table table-sm meta-table mb-0">
          <tbody>
            <tr>
              <th class="ps-3">From</th>
              <td>
                {% set fh = from_header %}
                {% if fh %}
                  {{ fh }}
                  <div class="text-muted small font-monospace mt-1"
                       title="SMTP envelope MAIL FROM">env: {{ email.sender | default('-') }}</div>
                {% else %}
                  {{ email.sender | default('-') }}
                {% endif %}
              </td>
            </tr>
            <tr>
              <th class="ps-3">To</th>
              <td>
                {% set rcpts = email.recipients_json if email.recipients_json else ([email.recipient] if email.recipient else []) %}
                {% if rcpts %}
                  {% for r in rcpts %}
                    <div>{{ r }}</div>
                  {% endfor %}
                {% else %}
                  -
                {% endif %}
              </td>
            </tr>
            {% if cc_header %}
            <tr>
              <th class="ps-3">Cc</th>
              <td>{{ cc_header }}</td>
            </tr>
            {% endif %}
            <tr>
              <th class="ps-3">Date</th>
              <td>{{ email.received_at.strftime('%Y-%m-%d %H:%M:%S') if email.received_at else '-' }}</td>
            </tr>
            <tr>
              <th class="ps-3">Subject</th>
              <td><strong>{{ email.subject | default('(no subject)') }}</strong></td>
            </tr>
            <tr>
              <th class="ps-3">Client IP</th>
              <td>{{ email.client_ip | default('-') }}</td>
            </tr>
            <tr>
              <th class="ps-3">Message-ID</th>
              <td class="font-monospace small">{{ email.message_id | default('-') }}</td>
            </tr>
            <tr>
              <th class="ps-3">Size</th>
              <td>
                {% if email.raw_size_bytes %}
                  {% if email.raw_size_bytes >= 1048576 %}
                    {{ '%.2f' % (email.raw_size_bytes / 1048576) }} MB
                  {% elif email.raw_size_bytes >= 1024 %}
                    {{ '%.1f' % (email.raw_size_bytes / 1024) }} KB
                  {% else %}
                    {{ email.raw_size_bytes }} bytes
                  {% endif %}
                {% else %}-{% endif %}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Rspamd Symbols Card (collapsible) -->
    {% if email.rspamd_symbols %}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-bottom py-2">
        <button class="btn btn-link btn-sm p-0 fw-semibold text-decoration-none text-dark"
                type="button" data-bs-toggle="collapse" data-bs-target="#rspamdSymbols" aria-expanded="false">
          <i class="bi bi-tags-fill me-2 text-warning"></i>Rspamd Symbols
          <i class="bi bi-chevron-down ms-1 small"></i>
        </button>
      </div>
      <div class="collapse" id="rspamdSymbols">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
              <thead class="table-light">
                <tr>
                  <th class="ps-3">Symbol</th>
                  <th style="width:7rem;">Score</th>
                  <th>Description</th>
                </tr>
              </thead>
              <tbody>
                {% for sym in email.rspamd_symbols %}
                {% set sym_score = sym.score | default(0) | float %}
                <tr>
                  <td class="ps-3 font-monospace small fw-semibold
                    {% if sym_score > 0 %}text-danger{% elif sym_score < 0 %}text-success{% endif %}">
                    {{ sym.name | default('') }}
                  </td>
                  <td class="{% if sym_score > 0 %}symbol-high{% elif sym_score < 0 %}symbol-low{% endif %} fw-semibold">
                    {{ '%+.2f' % sym_score }}
                  </td>
                  <td class="text-muted small">{{ sym.description | default('') }}</td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    {% endif %}

    <!-- Raw Headers (collapsible) -->
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-bottom py-2">
        <button class="btn btn-link btn-sm p-0 fw-semibold text-decoration-none text-dark"
                type="button" data-bs-toggle="collapse" data-bs-target="#rawHeaders" aria-expanded="false">
          <i class="bi bi-code-slash me-2"></i>Raw Headers
          <i class="bi bi-chevron-down ms-1 small"></i>
        </button>
      </div>
      <div class="collapse" id="rawHeaders">
        <div class="card-body p-2">
          <pre class="pre-headers m-0">{{ headers_text if headers_text else 'No header data available.' }}</pre>
        </div>
      </div>
    </div>

    <!-- Body Viewer Card -->
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-bottom py-2">
        <ul class="nav nav-tabs card-header-tabs" id="bodyTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active fw-semibold" id="text-tab" data-bs-toggle="tab"
                    data-bs-target="#textPane" type="button" role="tab">
              <i class="bi bi-file-text me-1"></i>Text
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link fw-semibold" id="html-tab" data-bs-toggle="tab"
                    data-bs-target="#htmlPane" type="button" role="tab">
              <i class="bi bi-file-code me-1"></i>HTML
            </button>
          </li>
        </ul>
      </div>
      <div class="card-body">
        <div class="tab-content" id="bodyTabContent">
          <div class="tab-pane fade show active" id="textPane" role="tabpanel">
            {% if email.text_body %}
              <pre>{{ email.text_body }}</pre>
            {% else %}
              <p class="text-muted fst-italic py-3 text-center">No text body available.</p>
            {% endif %}
          </div>
          <div class="tab-pane fade" id="htmlPane" role="tabpanel">
            {% if email.html_body %}
              <iframe
                sandbox="allow-same-origin"
                srcdoc="{{ email.html_body | e }}"
                style="width:100%;min-height:400px;border:1px solid #ccc;border-radius:.375rem;">
              </iframe>
            {% else %}
              <p class="text-muted fst-italic py-3 text-center">No HTML body available.</p>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- Attachments Card -->
    {% if email.has_attachments and email.attachments_json %}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-bottom py-2">
        <h6 class="mb-0 fw-bold text-warning">
          <i class="bi bi-paperclip me-2"></i>Attachments
          <span class="badge bg-secondary ms-1">{{ email.attachments_json | length }}</span>
        </h6>
      </div>
      <div class="card-body p-0">
        <table class="table table-sm mb-0">
          <thead class="table-light">
            <tr>
              <th class="ps-3">Filename</th>
              <th>Size</th>
              <th>Type</th>
              {% if current_user.is_superadmin %}<th></th>{% endif %}
            </tr>
          </thead>
          <tbody>
            {% for att in email.attachments_json %}
            <tr>
              <td class="ps-3">
                <i class="bi bi-file-earmark me-1 text-secondary"></i>
                {{ att.filename | default('unknown') }}
              </td>
              <td>
                {% if att.size_bytes %}
                  {% if att.size_bytes >= 1048576 %}{{ '%.2f' % (att.size_bytes / 1048576) }} MB
                  {% elif att.size_bytes >= 1024 %}{{ '%.1f' % (att.size_bytes / 1024) }} KB
                  {% else %}{{ att.size_bytes }} B{% endif %}
                {% else %}-{% endif %}
              </td>
              <td class="text-muted small font-monospace">{{ att.content_type | default('-') }}</td>
              {% if current_user.is_superadmin %}
              <td>
                <a href="{{ url_for('quarantine.download_attachment', email_id=email.id, index=loop.index0) }}"
                   class="btn btn-sm btn-outline-secondary py-0">
                  <i class="bi bi-download me-1"></i>Download
                </a>
              </td>
              {% endif %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

  </div><!-- /LEFT COLUMN -->

  <!-- RIGHT COLUMN: Actions + Notes -->
  <div class="col-lg-4">

    <!-- Action Buttons Card -->
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-bottom py-2">
        <h6 class="mb-0 fw-bold"><i class="bi bi-lightning-fill me-2 text-warning"></i>Actions</h6>
      </div>
      <div class="card-body d-grid gap-2">
        {% if email.status in ('released', 'clean') %}
        <button class="btn btn-success w-100" disabled>
          <i class="bi bi-send-check-fill me-2"></i>Released
        </button>
        {% if email.released_at %}
        <div class="text-muted small text-center" style="margin-top:-0.25rem;">
          {{ email.released_at.strftime('%Y-%m-%d %H:%M') }}
          {% if email.releaser %}&mdash; {{ email.releaser.username }}{% endif %}
        </div>
        {% elif email.status == 'clean' %}
        <div class="text-muted small text-center" style="margin-top:-0.25rem;">
          Auto-released (scored clean)
        </div>
        {% endif %}
        {% else %}
        <form method="POST" action="{{ url_for('quarantine.release', email_id=email.id) }}"
              onsubmit="return confirm('Release this message to the recipient?')">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-success w-100">
            <i class="bi bi-send-fill me-2"></i>Release to Recipient
          </button>
        </form>
        {% endif %}

        {% if email.is_manually_marked and email.manually_marked_as == 'spam' %}
        <button class="btn btn-danger w-100" disabled>
          <i class="bi bi-shield-exclamation me-2"></i>Marked as Spam
        </button>
        {% if email.marked_at %}
        <div class="text-muted small text-center" style="margin-top:-0.25rem;">
          {{ email.marked_at.strftime('%Y-%m-%d %H:%M') }}
          {% if email.marker %}&mdash; {{ email.marker.username }}{% endif %}
        </div>
        {% endif %}
        {% else %}
        <form method="POST" action="{{ url_for('quarantine.mark', email_id=email.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="mark_as" value="spam">
          <button type="submit" class="btn btn-danger w-100">
            <i class="bi bi-shield-exclamation me-2"></i>Mark as Spam
          </button>
        </form>
        {% endif %}

        {% if email.is_manually_marked and email.manually_marked_as == 'ham' %}
        <button class="btn btn-success w-100" disabled>
          <i class="bi bi-hand-thumbs-up me-2"></i>Marked as Ham (Not Spam)
        </button>
        {% if email.marked_at %}
        <div class="text-muted small text-center" style="margin-top:-0.25rem;">
          {{ email.marked_at.strftime('%Y-%m-%d %H:%M') }}
          {% if email.marker %}&mdash; {{ email.marker.username }}{% endif %}
        </div>
        {% endif %}
        {% else %}
        <form method="POST" action="{{ url_for('quarantine.mark', email_id=email.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="mark_as" value="ham">
          <button type="submit" class="btn btn-success w-100">
            <i class="bi bi-hand-thumbs-up me-2"></i>Mark as Ham (Not Spam)
          </button>
        </form>
        {% endif %}

        {% if email.status != 'deleted' %}
        <form method="POST" action="{{ url_for('quarantine.delete', email_id=email.id) }}"
              onsubmit="return confirm('Permanently delete this message?')">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="btn btn-outline-danger w-100">
            <i class="bi bi-trash3-fill me-2"></i>Delete Message
          </button>
        </form>
        {% endif %}
      </div>
    </div>

    <!-- Blacklist / Whitelist Quick-Add Card -->
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-bottom py-2">
        <h6 class="mb-0 fw-bold"><i class="bi bi-list-check me-2 text-info"></i>Quick List Actions</h6>
      </div>
      <div class="card-body">

        <!-- Blacklist status -->
        <p class="text-muted small mb-1 fw-semibold">Blacklist</p>
        {% if bl_email %}
          <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-danger">Blocked - email</span>
            <span class="font-monospace small text-muted">{{ bl_email.value }}</span>
          </div>
          <form method="POST" action="{{ url_for('lists.delete_blacklist', entry_id=bl_email.id) }}"
                class="mb-1" onsubmit="return confirm('Remove this blacklist entry?')">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-outline-danger">
              <i class="bi bi-trash3 me-1"></i>Remove email entry
            </button>
          </form>
        {% endif %}
        {% if bl_domain %}
          <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-danger">Blocked - domain</span>
            <span class="font-monospace small text-muted">{{ bl_domain.value }}</span>
          </div>
          <form method="POST" action="{{ url_for('lists.delete_blacklist', entry_id=bl_domain.id) }}"
                class="mb-1" onsubmit="return confirm('Remove this blacklist entry?')">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-outline-danger">
              <i class="bi bi-trash3 me-1"></i>Remove domain entry
            </button>
          </form>
        {% endif %}
        {% if not bl_email %}
          <form method="POST" action="{{ url_for('lists.add_entry') }}" class="mb-1">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="list_type" value="blacklist">
            <input type="hidden" name="entry_type" value="email">
            <div class="input-group input-group-sm">
              <input type="email" name="value" class="form-control"
                     value="{{ email.sender | default('') }}"
                     placeholder="sender@example.com">
              <button type="submit" class="btn btn-danger">
                <i class="bi bi-shield-fill-x me-1"></i>Blacklist email
              </button>
            </div>
          </form>
        {% endif %}
        {% if not bl_domain and email.sender_domain %}
          <form method="POST" action="{{ url_for('lists.add_entry') }}" class="mb-1">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="list_type" value="blacklist">
            <input type="hidden" name="entry_type" value="domain">
            <div class="input-group input-group-sm">
              <input type="text" name="value" class="form-control"
                     value="{{ email.sender_domain | default('') }}"
                     placeholder="example.com">
              <button type="submit" class="btn btn-danger">
                <i class="bi bi-shield-fill-x me-1"></i>Blacklist domain
              </button>
            </div>
          </form>
        {% endif %}

        <hr class="my-2">

        <!-- Whitelist status -->
        <p class="text-muted small mb-1 fw-semibold">Whitelist</p>
        {% if wl_email %}
          <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-success">Allowed - email</span>
            <span class="font-monospace small text-muted">{{ wl_email.value }}</span>
          </div>
          <form method="POST" action="{{ url_for('lists.delete_whitelist', entry_id=wl_email.id) }}"
                class="mb-1" onsubmit="return confirm('Remove this whitelist entry?')">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-outline-secondary">
              <i class="bi bi-trash3 me-1"></i>Remove email entry
            </button>
          </form>
        {% endif %}
        {% if wl_domain %}
          <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-success">Allowed - domain</span>
            <span class="font-monospace small text-muted">{{ wl_domain.value }}</span>
          </div>
          <form method="POST" action="{{ url_for('lists.delete_whitelist', entry_id=wl_domain.id) }}"
                class="mb-1" onsubmit="return confirm('Remove this whitelist entry?')">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-outline-secondary">
              <i class="bi bi-trash3 me-1"></i>Remove domain entry
            </button>
          </form>
        {% endif %}
        {% if not wl_email %}
          <form method="POST" action="{{ url_for('lists.add_entry') }}" class="mb-1">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="list_type" value="whitelist">
            <input type="hidden" name="entry_type" value="email">
            <div class="input-group input-group-sm">
              <input type="email" name="value" class="form-control"
                     value="{{ email.sender | default('') }}"
                     placeholder="sender@example.com">
              <button type="submit" class="btn btn-success">
                <i class="bi bi-shield-fill-check me-1"></i>Whitelist email
              </button>
            </div>
          </form>
        {% endif %}
        {% if not wl_domain and email.sender_domain %}
          <form method="POST" action="{{ url_for('lists.add_entry') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="list_type" value="whitelist">
            <input type="hidden" name="entry_type" value="domain">
            <div class="input-group input-group-sm">
              <input type="text" name="value" class="form-control"
                     value="{{ email.sender_domain | default('') }}"
                     placeholder="example.com">
              <button type="submit" class="btn btn-success">
                <i class="bi bi-shield-fill-check me-1"></i>Whitelist domain
              </button>
            </div>
          </form>
        {% endif %}

      </div>
    </div>

    <!-- Admin Notes Card -->
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-bottom py-2">
        <h6 class="mb-0 fw-bold"><i class="bi bi-journal-text me-2 text-secondary"></i>Admin Notes</h6>
      </div>
      <div class="card-body">
        <form method="POST" action="{{ url_for('quarantine.save_note', email_id=email.id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <textarea name="notes" class="form-control form-control-sm mb-2"
                    rows="4" placeholder="Internal notes about this message...">{{ email.notes | default('') }}</textarea>
          <button type="submit" class="btn btn-sm btn-outline-secondary w-100">
            <i class="bi bi-save me-1"></i>Save Notes
          </button>
        </form>
      </div>
    </div>

  </div><!-- /RIGHT COLUMN -->

</div><!-- /row -->

{% endblock %}

{% block extra_scripts %}
<script>
(function () {
    var emailId   = {{ email.id | int }};
    var storeKey  = 'sg_back_' + emailId;
    var serverUrl = {{ back_url | tojson }};

    // Patterns that identify a quarantine list page (not an action URL).
    var listPaths = [
        '/quarantine/recent',
        '/quarantine/day/',
        '/quarantine/all',
        '/quarantine/search'
    ];

    function isListUrl(url) {
        for (var i = 0; i < listPaths.length; i++) {
            if (url.indexOf(listPaths[i]) !== -1) { return true; }
        }
        return false;
    }

    // If the server gave us a genuine list URL, store it.
    if (isListUrl(serverUrl)) {
        try { sessionStorage.setItem(storeKey, serverUrl); } catch (e) {}
    }

    // Prefer the stored value; fall back to whatever the server provided.
    var stored;
    try { stored = sessionStorage.getItem(storeKey); } catch (e) {}
    var backUrl = stored || serverUrl;

    // Patch every back-navigation link on the page.
    document.querySelectorAll('.sg-back-btn').forEach(function (el) {
        el.href = backUrl;
    });
}());
</script>
{% endblock %}