{% extends "base.html" %}

{% block title %}Inbox-Triage{% endblock %}
{% block heading %}Mails ohne klare Klassifikation{% endblock %}

{% block content %}

<div class="card" style="margin-bottom: 12px;">
  <div style="display:flex; align-items:center; gap: 10px; flex-wrap: wrap;">
    <span>Status:</span>
    {% for s, label in [('pending', 'Zur Triage'), ('as_inquiry', 'Angelegt'),
                         ('spam', 'Spam'), ('ignored', 'Ignoriert'),
                         ('forwarded', 'Weitergeleitet')] %}
    <a href="/inbox/triage?status={{ s }}"
       class="btn btn-sm {% if status_filter == s %}btn-primary{% else %}btn-ghost{% endif %}">
      {{ label }}
    </a>
    {% endfor %}
    <span style="margin-left: auto; color: var(--card-text-muted); font-size: 0.85em;">
      {{ items|length }} Mail{% if items|length != 1 %}s{% endif %}
    </span>
  </div>
</div>

{% if items %}
<div class="card">
  <table class="data-table">
    <thead>
      <tr>
        <th style="width: 120px;">Eingang</th>
        <th style="width: 200px;">Absender</th>
        <th>Subject + Vorschau</th>
        <th style="width: 280px;">Aktion</th>
      </tr>
    </thead>
    <tbody>
      {% for it in items %}
      <tr>
        <td class="text-xs nums">{{ (it.received_at or '')[:16] }}</td>
        <td class="text-xs">
          <div style="font-weight: 600;">{{ it.from_name or it.from_addr }}</div>
          {% if it.from_name %}<div style="color: var(--card-text-muted);">{{ it.from_addr }}</div>{% endif %}
        </td>
        <td>
          <div style="font-weight: 600;">{{ it.subject or '(kein Subject)' }}</div>
          <div style="color: var(--card-text-muted); font-size: 0.85em; margin-top: 2px;">
            {{ (it.body_preview or '')[:200] }}
          </div>
        </td>
        <td>
          {% if it.status == 'pending' %}
          <div style="display: flex; gap: 4px; flex-wrap: wrap;">
            <button class="btn btn-sm btn-primary triage-act" data-id="{{ it.id }}" data-act="promote">
              + Als Anfrage anlegen
            </button>
            <button class="btn btn-sm btn-ghost triage-act" data-id="{{ it.id }}" data-act="mark" data-status="spam"
                    style="color: #b91c1c;">Spam</button>
            <button class="btn btn-sm btn-ghost triage-act" data-id="{{ it.id }}" data-act="mark" data-status="ignored">Ignorieren</button>
            <button class="btn btn-sm btn-ghost triage-act" data-id="{{ it.id }}" data-act="mark" data-status="forwarded">Forward</button>
          </div>
          {% else %}
          <span class="badge badge-neutral">{{ it.status }}</span>
          {% if it.created_inquiry_id %}
          <a href="/inquiries/{{ it.created_inquiry_id }}" class="btn btn-sm btn-secondary" style="margin-left: 6px;">
            &rarr; Anfrage {{ it.created_inquiry_id }}
          </a>
          {% endif %}
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card">
  <div style="text-align: center; padding: 3em 1em;">
    <h3 style="margin: 0 0 8px;">Inbox ist leer</h3>
    <p style="color: var(--card-text-muted);">
      Keine Mails mit Status &laquo;{{ status_filter }}&raquo; zur Triage.
    </p>
  </div>
</div>
{% endif %}

<script>
document.querySelectorAll('.triage-act').forEach(btn => {
  btn.addEventListener('click', async () => {
    const id = btn.dataset.id;
    const act = btn.dataset.act;
    const status = btn.dataset.status;
    btn.disabled = true; btn.textContent = '...';
    try {
      const csrf = (document.cookie.split('; ').find(r => r.startsWith('csrf_token='))||'=').split('=')[1] || '';
      let url, body;
      if (act === 'promote') {
        url = `/api/inbox/${id}/promote`;
        body = '{}';
      } else {
        url = `/api/inbox/${id}/mark`;
        body = JSON.stringify({status});
      }
      const r = await fetch(url, {
        method: 'POST',
        headers: {'Content-Type': 'application/json', 'X-CSRF-Token': csrf},
        body
      });
      const d = await r.json();
      if (d.ok) location.reload();
      else { btn.disabled = false; alert(d.error || 'Fehler'); }
    } catch (e) {
      btn.disabled = false; alert(e.message);
    }
  });
});
</script>

{% endblock %}