{% extends 'base.html' %}
{% load humanize %}

{% block title %}E-Mail-Eingang - Stiftungsverwaltung{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-envelope-open-text me-2"></i>E-Mail-Eingang
            </h1>
            <div class="d-flex gap-2">
                <form method="post" action="{% url 'stiftung:email_eingang_poll_trigger' %}" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-outline-primary btn-sm">
                        <i class="fas fa-sync-alt me-1"></i>Jetzt abrufen
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{# Statuskarten #}
<div class="row mb-4">
    <div class="col-md-3 col-6 mb-2">
        <div class="card border-left-primary h-100 py-2">
            <div class="card-body">
                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Gesamt</div>
                <div class="h5 mb-0 font-weight-bold">{{ counts.gesamt }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 mb-2">
        <div class="card border-left-warning h-100 py-2">
            <div class="card-body">
                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Neu</div>
                <div class="h5 mb-0 font-weight-bold">{{ counts.neu }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 mb-2">
        <div class="card border-left-info h-100 py-2">
            <div class="card-body">
                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Rechnungen</div>
                <div class="h5 mb-0 font-weight-bold">{{ counts.rechnung }}</div>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-6 mb-2">
        <div class="card border-left-danger h-100 py-2">
            <div class="card-body">
                <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Unbekannt</div>
                <div class="h5 mb-0 font-weight-bold">{{ counts.unbekannt }}</div>
            </div>
        </div>
    </div>
</div>

{# Filter #}
<div class="card mb-4">
    <div class="card-header"><i class="fas fa-filter me-2"></i>Filter</div>
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Suche</label>
                <input type="text" class="form-control" name="q" value="{{ search }}"
                       placeholder="Absender, Betreff...">
            </div>
            <div class="col-md-3">
                <label class="form-label">Kategorie</label>
                <select class="form-select" name="kategorie">
                    <option value="">Alle</option>
                    {% for value, label in kategorie_choices %}
                    <option value="{{ value }}" {% if kategorie_filter == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Status</label>
                <select class="form-select" name="status">
                    <option value="">Alle</option>
                    {% for value, label in status_choices %}
                    <option value="{{ value }}" {% if status_filter == value %}selected{% endif %}>{{ label }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-1 d-flex align-items-end">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            {% if search or status_filter or kategorie_filter %}
            <div class="col-md-2 d-flex align-items-end">
                <a href="{% url 'stiftung:email_eingang_list' %}" class="btn btn-outline-secondary w-100">
                    <i class="fas fa-times me-1"></i>Reset
                </a>
            </div>
            {% endif %}
        </form>
    </div>
</div>

{# Tabelle #}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="fas fa-inbox me-2"></i>Eingegangene E-Mails</span>
        <span class="text-muted small">{{ page_obj.paginator.count }} Eintraege</span>
    </div>
    <div class="card-body p-0">
        {% if page_obj %}
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th>Datum</th>
                        <th>Absender</th>
                        <th>Betreff</th>
                        <th>Kategorie</th>
                        <th>Zuordnung</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for e in page_obj %}
                    <tr>
                        <td class="text-nowrap">
                            <small>{{ e.eingangsdatum|date:"d.m.Y H:i" }}</small>
                        </td>
                        <td>
                            <div>{{ e.absender_name|default:e.absender_email }}</div>
                            {% if e.absender_name %}
                            <small class="text-muted">{{ e.absender_email }}</small>
                            {% endif %}
                        </td>
                        <td>{{ e.betreff|truncatechars:50 }}</td>
                        <td>
                            {% if e.kategorie == "rechnung" %}
                            <span class="badge bg-warning text-dark"><i class="fas fa-file-invoice me-1"></i>Rechnung</span>
                            {% elif e.kategorie == "destinataer" %}
                            <span class="badge bg-info"><i class="fas fa-user me-1"></i>Destinataer</span>
                            {% elif e.kategorie == "land_pacht" %}
                            <span class="badge bg-success"><i class="fas fa-map me-1"></i>Land/Pacht</span>
                            {% elif e.kategorie == "stiftungsgeschichte" %}
                            <span class="badge bg-dark"><i class="fas fa-landmark me-1"></i>Geschichte</span>
                            {% else %}
                            <span class="badge bg-secondary">Allgemein</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if e.destinataer %}
                            <a href="{% url 'stiftung:destinataer_detail' e.destinataer.pk %}" class="text-decoration-none">
                                {{ e.destinataer }}
                            </a>
                            {% elif e.verwaltungskosten %}
                            <span class="text-info"><i class="fas fa-file-invoice-dollar me-1"></i>{{ e.verwaltungskosten.bezeichnung|truncatechars:30 }}</span>
                            {% else %}
                            <span class="text-muted">–</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if e.status == "neu" %}
                            <span class="badge bg-warning text-dark">Neu</span>
                            {% elif e.status == "zugewiesen" %}
                            <span class="badge bg-primary">Zugewiesen</span>
                            {% elif e.status == "verarbeitet" %}
                            <span class="badge bg-success">Verarbeitet</span>
                            {% elif e.status == "rechnung_erfasst" %}
                            <span class="badge bg-info">Rechnung erfasst</span>
                            {% elif e.status == "zahlung_gebucht" %}
                            <span class="badge bg-success">Bezahlt</span>
                            {% elif e.status == "unbekannt" %}
                            <span class="badge bg-danger">Unbekannt</span>
                            {% elif e.status == "fehler" %}
                            <span class="badge bg-secondary">Fehler</span>
                            {% endif %}
                        </td>
                        <td>
                            <a href="{% url 'stiftung:email_eingang_detail' e.pk %}" class="btn btn-sm btn-outline-primary" title="Details">
                                <i class="fas fa-eye"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        {# Pagination #}
        {% if page_obj.has_other_pages %}
        <div class="d-flex justify-content-center py-3">
            <nav>
                <ul class="pagination mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}&q={{ search }}&status={{ status_filter }}&kategorie={{ kategorie_filter }}">
                            &laquo;
                        </a>
                    </li>
                    {% endif %}
                    <li class="page-item disabled">
                        <span class="page-link">Seite {{ page_obj.number }} von {{ page_obj.paginator.num_pages }}</span>
                    </li>
                    {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}&q={{ search }}&status={{ status_filter }}&kategorie={{ kategorie_filter }}">
                            &raquo;
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}

        {% else %}
        <div class="text-center py-5 text-muted">
            <i class="fas fa-inbox fa-3x mb-3"></i>
            <p>Keine E-Mails gefunden.</p>
            <small>Der automatische Abruf erfolgt alle 15 Minuten.</small>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}