{% extends "base.html" %}
{% block title %}Quarantine{% endblock %}

{% block extra_head %}
<style>
  .filter-bar { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
  .bulk-bar   { background: #e9ecef; border-radius: .375rem; padding: .5rem .75rem; margin-bottom: .5rem; }
  .table th   { white-space: nowrap; font-size: .85rem; }
  .table td   { font-size: .875rem; vertical-align: middle; }
  .subject-cell { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .addr-cell    { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
</style>
{% endblock %}

{% block content %}
{% if held_domains is defined and held_domains %}
<div class="alert alert-warning d-flex align-items-center mb-3" role="alert">
  <i class="bi bi-exclamation-triangle-fill me-2 fs-5"></i>
  <div>
    <strong>Per-domain hold active.</strong>
    Clean mail for these domains is being held, not delivered:
    <strong>{{ held_domains | join(', ') }}</strong>.
  </div>
</div>
{% endif %}
<div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
  <h4 class="fw-bold mb-0">
    {% if view == 'recent' %}
      <i class="bi bi-clock-history me-2 text-primary"></i>Recent Messages
      <small class="text-muted fw-normal fs-6 ms-2">Last 24 hours</small>
    {% elif view == 'day' %}
      <i class="bi bi-calendar3 me-2 text-primary"></i>{{ title }}
    {% elif view == 'search' %}
      <i class="bi bi-search me-2 text-primary"></i>Search
    {% else %}
      <i class="bi bi-inbox me-2 text-primary"></i>Quarantine
    {% endif %}
  </h4>
  <div class="d-flex align-items-center gap-2">
    <span class="text-muted small" id="refreshCountdown"></span>
    <span class="text-muted small">
      {% if total is defined and total is not none %}
        {{ total }} message{{ 's' if total != 1 else '' }} found
      {% endif %}
    </span>
    <a href="{{ request.url }}" class="btn btn-outline-secondary btn-sm" title="Refresh now">
      <i class="bi bi-arrow-clockwise"></i>
    </a>
    <div class="input-group input-group-sm" style="width:auto;">
      <button class="btn btn-outline-secondary btn-sm" id="autoRefreshToggle" title="Toggle auto-refresh">
        <i class="bi bi-pause-circle" id="autoRefreshIcon"></i>
        <span id="autoRefreshLabel" class="ms-1">Auto</span>
      </button>
      <select class="form-select form-select-sm" id="autoRefreshInterval" style="width:5rem;">
        <option value="30">30s</option>
        <option value="60">60s</option>
        <option value="300">5m</option>
      </select>
    </div>
  </div>
</div>

<!-- Filter Bar -->
<div class="filter-bar shadow-sm">
{% if view == 'search' %}
  <form method="GET" action="{{ url_for('quarantine.search') }}" id="filterForm">
    <div class="row g-2 align-items-end">
      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Search Field</label>
        <select name="field" id="searchField" class="form-select form-select-sm">
          <option value="">-- Select --</option>
          <option value="date"        {% if filters.field == 'date'        %}selected{% endif %}>Date</option>
          <option value="from"        {% if filters.field == 'from'        %}selected{% endif %}>From</option>
          <option value="from_domain" {% if filters.field == 'from_domain' %}selected{% endif %}>From Domain</option>
          <option value="to"          {% if filters.field == 'to'          %}selected{% endif %}>To</option>
          <option value="to_domain"   {% if filters.field == 'to_domain'   %}selected{% endif %}>To Domain</option>
          <option value="subject"     {% if filters.field == 'subject'     %}selected{% endif %}>Subject</option>
        </select>
      </div>
      <div class="col-12 col-md-5 col-lg-4">
        <label class="form-label form-label-sm mb-1 fw-semibold">Value</label>
        <input type="text" name="value" id="searchValue" class="form-control form-control-sm"
               placeholder="Enter search value..." value="{{ filters.value | default('') }}">
      </div>
      <div class="col-12 col-md-auto">
        <div class="d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-search me-1"></i>Search
          </button>
          <a href="{{ url_for('quarantine.search') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-x-circle me-1"></i>Clear
          </a>
        </div>
      </div>
    </div>
  </form>
{% elif view != 'all' %}
  <form method="GET" action="{{ url_for(list_endpoint, **list_endpoint_kwargs) }}" id="filterForm">
    <div class="row g-2 align-items-end">
      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Status</label>
        <select name="status" class="form-select form-select-sm">
          <option value="">All Statuses</option>
          {% for s in ['clean','spam','review','released'] %}
            <option value="{{ s }}" {% if filters.status == s %}selected{% endif %}>
              {{ s | capitalize }}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Direction</label>
        <select name="direction" class="form-select form-select-sm">
          <option value="inbound"  {% if direction == 'inbound'  %}selected{% endif %}>Inbound</option>
          <option value="outbound" {% if direction == 'outbound' %}selected{% endif %}>Outbound</option>
          <option value="all"      {% if direction == 'all'      %}selected{% endif %}>All</option>
        </select>
      </div>
      <div class="col-12 col-md-auto ms-md-auto">
        <div class="d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-search me-1"></i>Filter
          </button>
          <a href="{{ url_for(list_endpoint, **list_endpoint_kwargs) }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-x-circle me-1"></i>Clear
          </a>
        </div>
      </div>
    </div>
  </form>
{% else %}
  <form method="GET" action="{{ url_for(list_endpoint, **list_endpoint_kwargs) }}" id="filterForm">
    <div class="row g-2 align-items-end">

      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Status</label>
        <select name="status" class="form-select form-select-sm">
          <option value="">All Statuses</option>
          {% for s in ['clean','spam','review','released','deleted'] %}
            <option value="{{ s }}" {% if filters.status == s %}selected{% endif %}>
              {{ s | capitalize }}
            </option>
          {% endfor %}
        </select>
      </div>

      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Sender</label>
        <input type="text" name="sender" class="form-control form-control-sm"
               placeholder="sender@example.com" value="{{ filters.sender | default('') }}">
      </div>

      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Recipient</label>
        <input type="text" name="recipient" class="form-control form-control-sm"
               placeholder="recipient@example.com" value="{{ filters.recipient | default('') }}">
      </div>

      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Subject</label>
        <input type="text" name="subject" class="form-control form-control-sm"
               placeholder="Keywords..." value="{{ filters.subject | default('') }}">
      </div>

      <div class="col-4 col-md-2 col-lg-1">
        <label class="form-label form-label-sm mb-1 fw-semibold">Score Min</label>
        <input type="number" name="score_min" class="form-control form-control-sm"
               step="0.1" placeholder="0" value="{{ filters.score_min | default('') }}">
      </div>

      <div class="col-4 col-md-2 col-lg-1">
        <label class="form-label form-label-sm mb-1 fw-semibold">Score Max</label>
        <input type="number" name="score_max" class="form-control form-control-sm"
               step="0.1" placeholder="max" value="{{ filters.score_max | default('') }}">
      </div>

      <div class="col-6 col-md-3 col-lg-1">
        <label class="form-label form-label-sm mb-1 fw-semibold">From Date</label>
        <input type="text" name="date_from" class="form-control form-control-sm"
               placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" title="ISO date: YYYY-MM-DD"
               value="{{ filters.date_from | default('') }}">
      </div>

      <div class="col-6 col-md-3 col-lg-1">
        <label class="form-label form-label-sm mb-1 fw-semibold">To Date</label>
        <input type="text" name="date_to" class="form-control form-control-sm"
               placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}" title="ISO date: YYYY-MM-DD"
               value="{{ filters.date_to | default('') }}">
      </div>

      {% if node_names is defined and node_names %}
      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Node</label>
        <select name="node" class="form-select form-select-sm">
          <option value="">All Nodes</option>
          {% for n in node_names %}
            <option value="{{ n }}" {% if filters.node == n %}selected{% endif %}>
              {{ n.split('.')[0] }}
            </option>
          {% endfor %}
        </select>
      </div>
      {% endif %}

      <div class="col-6 col-md-3 col-lg-2">
        <label class="form-label form-label-sm mb-1 fw-semibold">Direction</label>
        <select name="direction" class="form-select form-select-sm">
          <option value="inbound"  {% if direction == 'inbound'  %}selected{% endif %}>Inbound</option>
          <option value="outbound" {% if direction == 'outbound' %}selected{% endif %}>Outbound</option>
          <option value="all"      {% if direction == 'all'      %}selected{% endif %}>All</option>
        </select>
      </div>

      <div class="col-12 col-md-auto ms-md-auto">
        <div class="d-flex gap-2">
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-search me-1"></i>Filter
          </button>
          <a href="{{ url_for(list_endpoint, **list_endpoint_kwargs) }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-x-circle me-1"></i>Clear
          </a>
          <a href="{{ url_for('quarantine.export_csv', **filters) if filters is defined else url_for('quarantine.export_csv') }}"
             class="btn btn-outline-success btn-sm" title="Export current results as CSV">
            <i class="bi bi-download me-1"></i>CSV
          </a>
        </div>
      </div>

    </div>
  </form>
{% endif %}
</div>

<!-- Bulk Actions + Table -->
<form method="POST" action="{{ url_for('quarantine.bulk_action') }}" id="bulkForm">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

  <!-- Bulk Actions Bar -->
  {% if not current_user.is_mailbox_user %}
  <div class="bulk-bar d-flex flex-wrap align-items-center gap-2">
    <div class="form-check mb-0 me-2">
      <input class="form-check-input" type="checkbox" id="selectAll" title="Select all on page">
      <label class="form-check-label text-muted small fw-semibold" for="selectAll">Select All</label>
    </div>
    <select name="bulk_action" class="form-select form-select-sm" style="width:auto;">
      <option value="">-- Action --</option>
      <option value="release">Release</option>
      <option value="mark_spam">Mark as Spam</option>
      <option value="mark_ham">Mark as Ham</option>
      <option value="delete">Delete</option>
    </select>
    <button type="submit" class="btn btn-sm btn-warning fw-semibold" id="applyBulk"
            onclick="return confirmBulk()">
      <i class="bi bi-lightning-fill me-1"></i>Apply
    </button>
    <span class="text-muted small ms-auto" id="selectedCount"></span>
  </div>
  {% endif %}

  <!-- Messages Table -->
  <div class="card border-0 shadow-sm">
    <div class="table-responsive">
      <table class="table table-hover table-striped align-middle mb-0">
        <thead class="table-dark">
          <tr>
            {% if not current_user.is_mailbox_user %}<th style="width:2.5rem;"></th>{% endif %}
            <th style="width:4rem;">ID</th>
            <th>Date</th>
            {% if node_names is defined and node_names %}<th style="width:6rem;">Node</th>{% endif %}
            <th>From</th>
            <th>To</th>
            <th>Subject</th>
            <th style="width:5rem;">Score</th>
            <th style="width:6rem;">Status</th>
            <th style="width:5rem;">Dir</th>
            <th style="width:9rem;">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% if emails %}
            {% for email in emails %}
            <tr>
              {% if not current_user.is_mailbox_user %}
              <td class="text-center">
                <input class="form-check-input row-check" type="checkbox"
                       name="selected_ids" value="{{ email.id }}">
              </td>
              {% endif %}
              <td class="text-muted small">{{ email.id }}</td>
              <td class="small text-nowrap">
                {{ email.received_at.strftime('%Y-%m-%d %H:%M') if email.received_at else '-' }}
              </td>
              {% if node_names is defined and node_names %}
              <td class="small text-muted text-nowrap" title="{{ email.node_hostname | default('') }}">
                {{ (email.node_hostname or '').split('.')[0] or '-' }}
              </td>
              {% endif %}
              <td class="addr-cell" title="{{ email.sender | default('') }}">
                {{ email.sender | default('-') }}
              </td>
              {% set rcpts = email.recipients_json if email.recipients_json else ([email.recipient] if email.recipient else []) %}
              <td class="addr-cell" title="{{ rcpts | join(', ') if rcpts else '' }}">
                {% if rcpts %}
                  {{ rcpts[0] }}{% if rcpts | length > 1 %} <span class="text-muted">(+{{ rcpts | length - 1 }} more)</span>{% endif %}
                {% else %}
                  -
                {% endif %}
              </td>
              <td class="subject-cell" title="{{ email.subject | default('') }}">
                <a href="{{ url_for('quarantine.detail', email_id=email.id) }}" class="text-decoration-none text-dark fw-semibold">
                  {{ email.subject | default('(no subject)') }}
                </a>
              </td>
              <td>
                {% set score = email.rspamd_score | default(0) | float %}
                {% if score < 4 %}
                  <span class="badge score-badge-low">{{ '%.2f' % score }}</span>
                {% elif score < 6 %}
                  <span class="badge score-badge-medium">{{ '%.2f' % score }}</span>
                {% elif score < 15 %}
                  <span class="badge score-badge-high">{{ '%.2f' % score }}</span>
                {% else %}
                  <span class="badge score-badge-severe">{{ '%.2f' % score }}</span>
                {% endif %}
              </td>
              <td>
                {% 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>
                {% else %}
                  <span class="badge bg-light text-dark">{{ status | capitalize }}</span>
                {% endif %}
              </td>
              <td>
                <span class="badge bg-{{ 'secondary' if email.direction == 'inbound' else 'info' }}">
                  {{ 'IN' if email.direction == 'inbound' else 'OUT' }}
                </span>
              </td>
              <td>
                <div class="d-flex gap-1">
                  <a href="{{ url_for('quarantine.detail', email_id=email.id) }}"
                     class="btn btn-xs btn-outline-primary btn-sm py-0 px-1" title="View">
                    <i class="bi bi-eye"></i>
                  </a>
                  {% if email.status != 'released' %}
                  <button type="button"
                          class="btn btn-xs btn-outline-success btn-sm py-0 px-1 row-action-btn"
                          data-url="{{ url_for('quarantine.release', email_id=email.id) }}"
                          data-confirm="Release this message?"
                          title="Release to recipient">
                    <i class="bi bi-send"></i>
                  </button>
                  {% endif %}
                  {% if email.status != 'deleted' %}
                  <button type="button"
                          class="btn btn-xs btn-outline-danger btn-sm py-0 px-1 row-action-btn"
                          data-url="{{ url_for('quarantine.delete', email_id=email.id) }}"
                          data-confirm="Delete this message permanently?"
                          title="Delete">
                    <i class="bi bi-trash"></i>
                  </button>
                  {% endif %}
                </div>
              </td>
            </tr>
            {% endfor %}
          {% else %}
            <tr>
              <td colspan="10" class="text-center text-muted py-5">
                {% if view == 'search' and not searched %}
                  <i class="bi bi-search fs-2 d-block mb-2 text-secondary"></i>
                  Select a field and enter a value to search.
                {% else %}
                  <i class="bi bi-inbox fs-2 d-block mb-2 text-secondary"></i>
                  No messages match your filters.
                {% endif %}
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>

</form>

<!-- Hidden form for per-row release/delete actions (avoids nesting inside bulkForm) -->
<form method="POST" id="rowActionForm" style="display:none;">
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
</form>

<!-- Pagination -->
{% if pagination is defined and pagination and pagination.pages > 1 %}
<nav aria-label="Quarantine pagination" class="mt-3">
  <ul class="pagination pagination-sm justify-content-center flex-wrap">
    <li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
      <a class="page-link" href="{{ url_for(list_endpoint, page=pagination.prev_num, **pagination_args) if pagination.has_prev else '#' }}">
        <i class="bi bi-chevron-left"></i>
      </a>
    </li>
    {% for page_num in pagination.iter_pages(left_edge=2, left_current=2, right_current=3, right_edge=2) %}
      {% if page_num %}
        <li class="page-item {% if page_num == pagination.page %}active{% endif %}">
          <a class="page-link" href="{{ url_for(list_endpoint, page=page_num, **pagination_args) }}">
            {{ page_num }}
          </a>
        </li>
      {% else %}
        <li class="page-item disabled"><span class="page-link">...</span></li>
      {% endif %}
    {% endfor %}
    <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
      <a class="page-link" href="{{ url_for(list_endpoint, page=pagination.next_num, **pagination_args) if pagination.has_next else '#' }}">
        <i class="bi bi-chevron-right"></i>
      </a>
    </li>
  </ul>
  <p class="text-center text-muted small">
    Page {{ pagination.page }} of {{ pagination.pages }}
    &mdash; {{ pagination.total }} total messages
  </p>
</nav>
{% endif %}

{% endblock %}

{% block extra_scripts %}
<script>
(function () {
  // Select all checkbox
  const selectAll   = document.getElementById('selectAll');
  const rowChecks   = document.querySelectorAll('.row-check');
  const countSpan   = document.getElementById('selectedCount');

  function updateCount() {
    const n = document.querySelectorAll('.row-check:checked').length;
    countSpan.textContent = n > 0 ? n + ' selected' : '';
  }

  if (selectAll) {
    selectAll.addEventListener('change', function () {
      rowChecks.forEach(cb => { cb.checked = this.checked; });
      updateCount();
    });
  }
  rowChecks.forEach(cb => cb.addEventListener('change', updateCount));

  // Auto-refresh
  (function () {
    const toggleBtn      = document.getElementById('autoRefreshToggle');
    const toggleIcon     = document.getElementById('autoRefreshIcon');
    const toggleLabel    = document.getElementById('autoRefreshLabel');
    const intervalSelect = document.getElementById('autoRefreshInterval');
    const countdown      = document.getElementById('refreshCountdown');

    let timer    = null;
    let remaining = 0;
    let countdownTimer = null;

    function loadPrefs() {
      const enabled  = localStorage.getItem('qAutoRefresh') !== 'false';
      const interval = localStorage.getItem('qAutoRefreshInterval') || '30';
      intervalSelect.value = interval;
      return enabled;
    }

    function setActive(enabled) {
      if (enabled) {
        toggleIcon.className  = 'bi bi-play-circle text-success';
        toggleLabel.textContent = 'Auto';
        localStorage.setItem('qAutoRefresh', 'true');
        startRefresh();
      } else {
        toggleIcon.className  = 'bi bi-pause-circle';
        toggleLabel.textContent = 'Auto';
        localStorage.setItem('qAutoRefresh', 'false');
        stopRefresh();
      }
    }

    function startRefresh() {
      stopRefresh();
      const secs = parseInt(intervalSelect.value, 10);
      remaining = secs;
      updateCountdown();
      countdownTimer = setInterval(function () {
        remaining -= 1;
        updateCountdown();
        if (remaining <= 0) {
          // Clear the interval BEFORE reloading.  location.reload() is not
          // instant -- the tab keeps running JS while the server produces
          // the response.  Without this, the next 1s tick sees
          // remaining <= 0 and fires another reload, which the browser
          // treats as "abandon in-flight request, start a new one".  The
          // server-side query from the aborted request keeps running to
          // completion, so a slow response piles up multiple concurrent
          // queries and can wedge all sync workers.
          stopRefresh();
          location.reload();
        }
      }, 1000);
    }

    function stopRefresh() {
      clearInterval(countdownTimer);
      countdownTimer = null;
      countdown.textContent = '';
    }

    function updateCountdown() {
      const m = Math.floor(remaining / 60);
      const s = remaining % 60;
      countdown.textContent = m > 0
        ? 'Refresh in ' + m + 'm ' + (s < 10 ? '0' : '') + s + 's'
        : 'Refresh in ' + remaining + 's';
    }

    const enabled = loadPrefs();
    setActive(enabled);

    toggleBtn.addEventListener('click', function () {
      const currently = localStorage.getItem('qAutoRefresh') !== 'false';
      setActive(!currently);
    });

    intervalSelect.addEventListener('change', function () {
      localStorage.setItem('qAutoRefreshInterval', this.value);
      if (localStorage.getItem('qAutoRefresh') !== 'false') {
        startRefresh();
      }
    });
  })();

  // Per-row action buttons (release / delete) - submit via hidden form outside bulkForm
  const rowActionForm = document.getElementById('rowActionForm');
  document.querySelectorAll('.row-action-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      if (!confirm(btn.dataset.confirm)) { return; }
      rowActionForm.action = btn.dataset.url;
      rowActionForm.submit();
    });
  });

  // Search field selector: adjust placeholder/validation per field.
  // The Date field stays a text input so the date shows in ISO (YYYY-MM-DD)
  // rather than the browser-locale rendering a native date picker forces.
  (function () {
    var fieldSel = document.getElementById('searchField');
    var valueIn  = document.getElementById('searchValue');
    if (!fieldSel || !valueIn) { return; }

    var placeholders = {
      'date':        'YYYY-MM-DD',
      'from':        'sender@example.com or partial',
      'from_domain': 'example.com or partial',
      'to':          'recipient@example.com or partial',
      'to_domain':   'example.com or partial',
      'subject':     'Keywords...'
    };

    function updateInput() {
      var f = fieldSel.value;
      valueIn.type = 'text';
      if (f === 'date') {
        valueIn.setAttribute('pattern', '\\d{4}-\\d{2}-\\d{2}');
        valueIn.title = 'ISO date: YYYY-MM-DD';
      } else {
        valueIn.removeAttribute('pattern');
        valueIn.removeAttribute('title');
      }
      valueIn.placeholder = placeholders[f] || 'Enter value...';
    }

    fieldSel.addEventListener('change', updateInput);
    updateInput();
  })();

  // Confirm bulk action
  window.confirmBulk = function () {
    const action = document.querySelector('[name="bulk_action"]').value;
    const n = document.querySelectorAll('.row-check:checked').length;
    if (!action) { alert('Please select an action.'); return false; }
    if (n === 0)  { alert('Please select at least one message.'); return false; }
    if (action === 'delete') {
      return confirm('Delete ' + n + ' selected message(s)?');
    }
    return confirm(action.replace('_', ' ') + ' ' + n + ' selected message(s)?');
  };
})();
</script>
{% endblock %}