{% extends "base.html" %}
{% block title %}{{ kampagne.titel }} – Auswertung{{ " - " + app_name() }}{% endblock %}

{% block content %}
<style>
.status-bar-lg { display:flex; height:24px; border-radius:6px; overflow:hidden; margin-bottom:0.75rem; }
.status-bar-lg div { display:flex; align-items:center; justify-content:center; font-size:0.7rem; color:white; font-weight:600; transition:width 0.3s; }
.legend-row { display:flex; flex-wrap:wrap; gap:1rem; font-size:0.85rem; }
.legend-item { display:flex; align-items:center; gap:0.4rem; }
.legend-dot { width:12px; height:12px; border-radius:3px; flex-shrink:0; }
@media print {
    .sidebar, .top-bar, .no-print { display:none !important; }
    .main-content { margin:0 !important; padding:0 !important; }
    .page-content { padding:0 !important; }
    .card { break-inside:avoid; box-shadow:none; border:1px solid #ccc; }
    a[href]:after { content:none !important; }
}
</style>

<div class="page-header">
    <div>
        <div style="font-size:0.85rem; color:var(--kw-text-muted); margin-bottom:0.25rem;">
            <a href="/auswertungen">← Auswertungen</a>
        </div>
        <h1 style="margin:0;">
            📢 {{ kampagne.titel }}
            <span class="tag-chip" style="background:
                {% if kampagne.status == 'aktiv' %}#4CAF50
                {% elif kampagne.status == 'abgeschlossen' %}#9E9E9E
                {% else %}#2196F3{% endif %}; color:white; font-size:0.8rem; vertical-align:middle;">
                {{ kampagne.status_label }}
            </span>
        </h1>
        {% if kampagne.projekt %}<div style="font-size:0.85rem; color:var(--kw-text-muted);">Projekt: {{ kampagne.projekt }}</div>{% endif %}
    </div>
    <div class="btn-group no-print">
        <a href="/kampagnen/{{ kampagne.id }}" class="btn-sm outline">Zur Kampagne →</a>
        <button onclick="window.print()" class="btn-sm outline">🖨️</button>
    </div>
</div>

<!-- KPIs -->
<div class="kpi-grid" style="margin-bottom:1.5rem;">
    <div class="kpi-card">
        <div class="kpi-value">{{ gesamt }}</div>
        <div class="kpi-label">Kontakte</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value" style="color:{% if erfolgsquote >= 50 %}#4CAF50{% elif erfolgsquote >= 20 %}#FF9800{% else %}#9E9E9E{% endif %};">
            {{ erfolgsquote }}%
        </div>
        <div class="kpi-label">Erfolgsquote</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value">{{ '%.2f'|format(spenden_summe) }}</div>
        <div class="kpi-label">Spenden EUR</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value">{{ kampagne.veranstaltungen|length }}</div>
        <div class="kpi-label">Veranstaltungen</div>
    </div>
    <div class="kpi-card">
        <div class="kpi-value">{{ aktivitaeten|length }}</div>
        <div class="kpi-label">Aktivitäten</div>
    </div>
    {% if kampagne.spenden %}
    <div class="kpi-card">
        <div class="kpi-value">{{ '%.2f'|format(sp_avg) }}</div>
        <div class="kpi-label">Ø Spende EUR</div>
    </div>
    {% endif %}
</div>

<!-- Status-Verteilung -->
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header">
        <h3>Kontakt-Status-Verteilung</h3>
    </div>
    {% if gesamt > 0 %}
    <div style="padding:0.5rem 0;">
        <div class="status-bar-lg">
            {% if pct_neu > 0 %}<div style="width:{{pct_neu}}%;background:#607D8B;" title="Neu: {{n_neu}}">{% if pct_neu >= 8 %}{{pct_neu}}%{% endif %}</div>{% endif %}
            {% if pct_kontaktiert > 0 %}<div style="width:{{pct_kontaktiert}}%;background:#2196F3;" title="Kontaktiert: {{n_kontaktiert}}">{% if pct_kontaktiert >= 8 %}{{pct_kontaktiert}}%{% endif %}</div>{% endif %}
            {% if pct_reagiert > 0 %}<div style="width:{{pct_reagiert}}%;background:#4CAF50;" title="Reagiert: {{n_reagiert}}">{% if pct_reagiert >= 8 %}{{pct_reagiert}}%{% endif %}</div>{% endif %}
            {% if pct_abgelehnt > 0 %}<div style="width:{{pct_abgelehnt}}%;background:#e53e3e;" title="Abgelehnt: {{n_abgelehnt}}">{% if pct_abgelehnt >= 8 %}{{pct_abgelehnt}}%{% endif %}</div>{% endif %}
            {% if pct_erledigt > 0 %}<div style="width:{{pct_erledigt}}%;background:#9E9E9E;" title="Erledigt: {{n_erledigt}}">{% if pct_erledigt >= 8 %}{{pct_erledigt}}%{% endif %}</div>{% endif %}
        </div>
        <div class="legend-row">
            <div class="legend-item"><div class="legend-dot" style="background:#607D8B;"></div><span>Neu: <strong>{{n_neu}}</strong> ({{pct_neu}}%)</span></div>
            <div class="legend-item"><div class="legend-dot" style="background:#2196F3;"></div><span>Kontaktiert: <strong>{{n_kontaktiert}}</strong> ({{pct_kontaktiert}}%)</span></div>
            <div class="legend-item"><div class="legend-dot" style="background:#4CAF50;"></div><span>Reagiert: <strong>{{n_reagiert}}</strong> ({{pct_reagiert}}%)</span></div>
            <div class="legend-item"><div class="legend-dot" style="background:#e53e3e;"></div><span>Abgelehnt: <strong>{{n_abgelehnt}}</strong> ({{pct_abgelehnt}}%)</span></div>
            <div class="legend-item"><div class="legend-dot" style="background:#9E9E9E;"></div><span>Erledigt: <strong>{{n_erledigt}}</strong> ({{pct_erledigt}}%)</span></div>
        </div>
    </div>
    {% else %}
    <div class="empty-state"><p>Noch keine Kontakte in dieser Kampagne.</p></div>
    {% endif %}
</div>

<!-- Kontakte-Liste -->
{% if kontakte_sortiert %}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header">
        <h3>Kontakte ({{ gesamt }})</h3>
        <a href="/kampagnen/{{ kampagne.id }}/export/csv" class="btn-sm outline no-print">CSV Export</a>
    </div>
    <div style="overflow-x:auto;">
    <table class="data-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Organisation</th>
                <th>E-Mail</th>
                <th>Telefon</th>
                <th>Status</th>
                <th>Notiz</th>
            </tr>
        </thead>
        <tbody>
            {% set status_colors = kat_farben("kampagne_kontakt_status") %}
            {% for kk in kontakte_sortiert %}
            {% set c = kk.kontakt %}
            <tr>
                <td style="font-weight:500;"><a href="/kontakte/{{ c.id }}">{{ c.anzeigename }}</a></td>
                <td style="font-size:0.85rem;">{{ c.firmenname or '–' }}</td>
                <td style="font-size:0.85rem;">{{ c.email1 or '–' }}</td>
                <td style="font-size:0.85rem;">{{ c.telefon or c.mobil or '–' }}</td>
                <td>
                    <span class="tag-chip" style="background:{{ status_colors[kk.status] or '#607D8B' }}; color:white; font-size:0.75rem;">
                        {{ kk.status_label }}
                    </span>
                </td>
                <td style="font-size:0.85rem; color:var(--kw-text-muted);">{{ kk.notiz or '–' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</div>
{% endif %}

<!-- Spenden -->
{% if kampagne.spenden %}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header">
        <h3>Spenden ({{ kampagne.spenden|length }})</h3>
        <span style="font-weight:600; color:var(--kw-primary);">{{ '%.2f'|format(spenden_summe) }} EUR gesamt</span>
    </div>
    <table class="data-table">
        <thead>
            <tr>
                <th>Datum</th>
                <th>Kontakt</th>
                <th style="text-align:right;">Betrag EUR</th>
                <th>Typ</th>
                <th>Zweck</th>
            </tr>
        </thead>
        <tbody>
            {% for s in kampagne.spenden|sort(attribute='datum', reverse=True) %}
            <tr>
                <td style="font-size:0.85rem; white-space:nowrap;">{{ s.datum.strftime('%d.%m.%Y') if s.datum else '–' }}</td>
                <td><a href="/kontakte/{{ s.kontakt_id }}" style="font-size:0.85rem;">{{ s.kontakt.anzeigename if s.kontakt else '–' }}</a></td>
                <td style="text-align:right; font-weight:600; color:var(--kw-primary);">{{ '%.2f'|format(s.betrag) }}</td>
                <td style="font-size:0.85rem;">{{ s.typ or '–' }}</td>
                <td style="font-size:0.85rem;">{{ s.zweck or '–' }}</td>
            </tr>
            {% endfor %}
        </tbody>
        <tfoot>
            <tr style="font-weight:700; border-top:2px solid var(--kw-border);">
                <td colspan="2">Gesamt</td>
                <td style="text-align:right; color:var(--kw-primary);">{{ '%.2f'|format(spenden_summe) }}</td>
                <td colspan="2"></td>
            </tr>
        </tfoot>
    </table>
</div>
{% endif %}

<!-- Veranstaltungen -->
{% if kampagne.veranstaltungen %}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header">
        <h3>Veranstaltungen ({{ kampagne.veranstaltungen|length }})</h3>
    </div>
    <table class="data-table">
        <thead>
            <tr><th>Titel</th><th>Datum</th><th>Ort</th><th>Status</th><th style="text-align:right;">Teiln.</th></tr>
        </thead>
        <tbody>
            {% for v in kampagne.veranstaltungen|sort(attribute='start_datum', reverse=True) %}
            <tr>
                <td><a href="/veranstaltungen/{{ v.id }}">{{ v.titel }}</a></td>
                <td style="font-size:0.85rem;">{{ v.start_datum.strftime('%d.%m.%Y') if v.start_datum else '–' }}</td>
                <td style="font-size:0.85rem;">{{ v.ort or '–' }}</td>
                <td><span class="tag-chip" style="font-size:0.75rem;">{{ v.status }}</span></td>
                <td style="text-align:right; font-size:0.85rem;">{{ v.teilnehmer|length }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Aktivitäten -->
{% if aktivitaeten %}
<div class="card" style="margin-bottom:1rem;">
    <div class="card-header">
        <h3>Aktivitäten ({{ aktivitaeten|length }})</h3>
        <a href="/aktivitaeten?kampagne_id={{ kampagne.id }}" class="btn-sm outline no-print">Alle anzeigen</a>
    </div>
    <div class="timeline">
        {% for akt in aktivitaeten %}
        {% include "components/aktivitaet_item.html" %}
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Meta -->
<div class="card" style="margin-bottom:1rem;">
    <div class="info-grid">
        <div class="info-label">Typ</div><div class="info-value">{{ kampagne.typ_label }}</div>
        {% if kampagne.projekt %}<div class="info-label">Projekt</div><div class="info-value">{{ kampagne.projekt }}</div>{% endif %}
        <div class="info-label">Erstellt</div>
        <div class="info-value">{{ kampagne.erstellt_am.strftime('%d.%m.%Y') if kampagne.erstellt_am else '–' }}{% if kampagne.erstellt_von %} ({{ kampagne.erstellt_von }}){% endif %}</div>
    </div>
</div>

{% endblock %}
