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

{% block content %}
<div class="page-header">
  <h1>Email-Verwaltung</h1>
  <p>Posteingang und Email-Versand</p>
</div>

{% if not email_config_valid %}
<div class="alert alert-warning">
  <strong>Konfiguration erforderlich</strong><br>
  <small>Setze <code>IMAP_SERVER</code>, <code>SMTP_SERVER</code>, <code>EMAIL_ADDRESS</code>, <code>EMAIL_PASSWORD</code> in der <code>.env</code>-Datei.</small>
</div>
{% else %}
<div class="alert alert-success">
  <strong>Verbunden</strong> · {{ current_email }}
</div>
{% endif %}

<div class="row g-4">
  <!-- Neue Email -->
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header bg-dark">
        <h5 class="mb-0">Neue Email</h5>
      </div>
      <div class="card-body">
        <form method="POST" action="/emails">
          <input type="hidden" name="action" value="send">
          <div class="mb-3">
            <label for="to_address" class="form-label">An</label>
            <input type="email" class="form-control" id="to_address" name="to_address" required>
          </div>
          <div class="mb-3">
            <label for="subject" class="form-label">Betreff</label>
            <input type="text" class="form-control" id="subject" name="subject" required>
          </div>
          <div class="mb-3">
            <label for="body" class="form-label">Nachricht</label>
            <textarea class="form-control" id="body" name="body" rows="8" required></textarea>
          </div>
          <button type="submit" class="btn btn-primary w-100">Versenden</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Posteingang -->
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header bg-dark d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Posteingang</h5>
        <span class="badge bg-secondary">{{ emails|length }} Emails</span>
      </div>
      <div class="card-body p-0" style="max-height:600px;overflow-y:auto;">
        {% if email_config_valid and emails %}
          {% if emails[0].error is defined and emails[0].error %}
            <div class="alert alert-danger m-3">{{ emails[0].error }}</div>
          {% else %}
            <ul class="list-group list-group-flush">
              {% for mail in emails %}
              <li class="list-group-item list-group-item-action d-flex align-items-start gap-2" style="cursor:pointer;">
                <div class="flex-grow-1" onclick="viewEmail('{{ mail.id }}', '{{ mail.subject|e }}', '{{ mail.from|e }}')">
                  <div class="d-flex justify-content-between align-items-start">
                    <strong style="font-size:.875rem;">{{ mail.subject }}</strong>
                    <small style="color:var(--text-muted);white-space:nowrap;margin-left:.5rem;">{{ mail.date[:10] }}</small>
                  </div>
                  <div style="font-size:.8rem;color:var(--text-muted);">{{ mail.from }}</div>
                  <div style="font-size:.78rem;color:var(--text-muted);margin-top:.2rem;">{{ mail.preview }}</div>
                </div>
                <form method="POST" action="/emails/inbox/{{ mail.id }}/delete"
                      onsubmit="return confirm('Email aus Posteingang löschen?')" style="flex-shrink:0;">
                  <button type="submit" class="btn btn-sm btn-outline-danger" title="Löschen">✕</button>
                </form>
              </li>
              {% endfor %}
            </ul>
          {% endif %}
        {% elif not email_config_valid %}
          <div class="text-center py-5" style="color:var(--text-muted);">
            <p>Email-Konfiguration erforderlich</p>
          </div>
        {% else %}
          <div class="text-center py-5" style="color:var(--text-muted);">
            <p>Keine Emails vorhanden</p>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Email Modal -->
<div class="modal fade" id="emailModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="emailSubject"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p style="color:var(--text-muted);font-size:.85rem;"><strong>Von:</strong> <span id="emailFrom"></span></p>
        <hr>
        <pre id="emailBody" style="background:var(--bg-elevated);color:var(--text-primary);
          border-radius:var(--radius-sm);padding:1rem;white-space:pre-wrap;
          max-height:400px;overflow-y:auto;font-size:.85rem;">Wird geladen…</pre>
      </div>
    </div>
  </div>
</div>

<div class="row g-4 mt-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-secondary d-flex justify-content-between align-items-center">
        <h5 class="mb-0">📋 Email Journal / Log</h5>
        <a href="/email-log" class="btn btn-sm btn-outline-light">Vollständiges Log</a>
      </div>
      <div class="card-body">
        <p class="text-muted">
          Das vollständige Email-Journal zeigt alle verarbeiteten Emails mit Details zu Status, Agent-Zuweisungen und Zeitstempeln.
        </p>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function viewEmail(emailId, subject, from) {
  document.getElementById('emailSubject').textContent = subject;
  document.getElementById('emailFrom').textContent = from;
  document.getElementById('emailBody').textContent = 'Wird geladen…';
  const modal = new bootstrap.Modal(document.getElementById('emailModal'));
  modal.show();
  fetch('/emails/' + emailId)
    .then(r => r.json())
    .then(d => { document.getElementById('emailBody').textContent = d.content; })
    .catch(e => { document.getElementById('emailBody').textContent = 'Fehler: ' + e.message; });
}
</script>
{% endblock %}