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

{% block content %}
<div class="page-header">
    <h1>
        📢 {{ kampagne.titel }}
        {% set ks_farben = kat_farben("kampagne_status") %}
        <span class="tag-chip" style="background: {{ ks_farben.get(kampagne.status, '#2196F3') }}; color: white; font-size: 0.8rem; vertical-align: middle;">
            {{ kampagne.status_label }}
        </span>
    </h1>
    <div class="btn-group">
        <a href="/kampagnen" role="button" class="btn-sm outline">← Liste</a>
        <a href="/kampagnen/{{ kampagne.id }}/bearbeiten" role="button" class="btn-sm">Bearbeiten</a>
        <button class="btn-sm btn-icon" onclick="if(confirm('Kampagne wirklich löschen?')) window.location='/kampagnen/{{ kampagne.id }}/loeschen'">🗑️</button>
    </div>
</div>

{% if kampagne.beschreibung %}
<div class="card" style="margin-bottom: 1rem;">
    <div style="font-size: 0.9rem; white-space: pre-wrap;">{{ kampagne.beschreibung }}</div>
</div>
{% endif %}

<!-- KPI Leiste -->
{% set kk_farben = kat_farben("kampagne_kontakt_status") %}
<div class="kpi-grid" style="margin-bottom: 1.5rem;">
    <div class="kpi-card">
        <div class="kpi-value">{{ kampagne.kontakte|length }}</div>
        <div class="kpi-label">Gesamt</div>
    </div>
    {% for opt in kat_optionen("kampagne_kontakt_status") %}
    <div class="kpi-card">
        <div class="kpi-value" style="color: {{ opt.farbe or '#607D8B' }};">{{ status_counts.get(opt.wert, 0) }}</div>
        <div class="kpi-label">{{ opt.label }}</div>
    </div>
    {% endfor %}
</div>

<!-- Kontakt-Tabelle -->
<div class="card">
    <div class="card-header">
        <h3>Kontakte ({{ kampagne.kontakte|length }})</h3>
        <div class="btn-group">
            {% if verfuegbare_kontakte %}
            <div class="search-dropdown" style="margin: 0;">
                <button type="button" class="search-dropdown-toggle btn-sm"
                        onclick="var menu=this.nextElementSibling; menu.classList.toggle('open'); if(menu.classList.contains('open')){var inp=menu.querySelector('input[type=text]'); if(inp){inp.value='';} menu.querySelectorAll('.search-dropdown-item').forEach(function(el){el.style.display='';}); if(inp) inp.focus();}">
                    + Kontakt
                </button>
                <div class="search-dropdown-menu" style="right: 0; left: auto; min-width: 280px;">
                    <input type="text" placeholder="Suchen…" autocomplete="off"
                           onclick="event.stopPropagation();"
                           oninput="var q=this.value.toLowerCase(); this.closest('.search-dropdown-menu').querySelectorAll('.search-dropdown-item').forEach(function(el){el.style.display=el.dataset.search.indexOf(q)>=0?'':'none';});">
                    {% for c in verfuegbare_kontakte %}
                    <div class="search-dropdown-item" data-search="{{ (c.anzeigename + ' ' + (c.firmenname or ''))|lower }}"
                         hx-post="/kampagnen/{{ kampagne.id }}/kontakte"
                         hx-vals='{"kontakt_id": "{{ c.id }}"}'
                         hx-target="#kontakte-tbody"
                         hx-swap="beforeend"
                         hx-on::after-request="this.closest('.search-dropdown-menu').classList.remove('open')"
                         style="cursor: pointer;">
                        {{ c.anzeigename }}{% if c.firmenname %} <span style="font-size: 0.8rem; color: var(--kw-text-muted);">· {{ c.firmenname }}</span>{% endif %}
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            {% if kampagne.kontakte %}
            <a href="/kampagnen/{{ kampagne.id }}/export/csv" class="btn-sm outline">CSV</a>
            <a href="/kampagnen/{{ kampagne.id }}/export/emails" class="btn-sm outline">E-Mails</a>
            {% endif %}
        </div>
    </div>

    {% if kampagne.kontakte %}
    <!-- Bulk-Leiste -->
    <form id="bulk-form" method="post" action="/kampagnen/{{ kampagne.id }}/kontakte/bulk">
        <input type="hidden" name="als_aktivitaet" id="bulk-als-aktivitaet" value="">
        <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; background: var(--kw-bg); border-bottom: 1px solid var(--kw-border); flex-wrap: wrap;">
            <span style="font-size: 0.8rem; font-weight: 600; color: var(--kw-text-muted); white-space: nowrap;">Für alle ({{ kampagne.kontakte|length }}):</span>
            <select name="bulk_status" style="margin: 0; padding: 0.25rem 0.4rem; font-size: 0.8rem; min-width: 130px;">
                <option value="">– Status unverändert –</option>
                {% for opt in kat_optionen("kampagne_kontakt_status") %}
                <option value="{{ opt.wert }}" {% if bulk_status == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                {% endfor %}
            </select>
            <input type="text" name="bulk_notiz" id="bulk-notiz-input" value="{{ bulk_notiz }}" placeholder="Notiz für alle..." style="margin: 0; padding: 0.25rem 0.4rem; font-size: 0.8rem; flex: 1; min-width: 150px;">
            <button type="button" class="btn-sm outline"
                    onclick="if(confirm('Status/Notiz für alle {{ kampagne.kontakte|length }} Kontakte übernehmen?')){document.getElementById('bulk-als-aktivitaet').value='';document.getElementById('bulk-form').submit();}">
                Übernehmen
            </button>
            <button type="button" class="btn-sm"
                    onclick="if(confirm('Status/Notiz als Aktivität bei allen {{ kampagne.kontakte|length }} Kontakten speichern?')){document.getElementById('bulk-als-aktivitaet').value='1';document.getElementById('bulk-form').submit();}">
                + Als Aktivität
            </button>
        </div>
    </form>
    {% endif %}

    {% if not kampagne.kontakte %}
    <div class="empty-state" id="kontakte-empty">
        <div class="empty-state-icon">👥</div>
        <p>Noch keine Kontakte in dieser Kampagne.</p>
        <p style="font-size: 0.85rem; color: var(--kw-text-muted);">Kontakte über <a href="/recherche">Recherche</a> oder den Button oben hinzufügen.</p>
    </div>
    {% endif %}
    <table class="data-table" {% if not kampagne.kontakte %}style="display: none;" id="kontakte-table"{% endif %}>
        <thead>
            <tr>
                <th>Name</th>
                <th>Organisation</th>
                <th>E-Mail</th>
                <th>Telefon</th>
                <th>Status</th>
                <th>Notiz</th>
                <th></th>
            </tr>
        </thead>
        <tbody id="kontakte-tbody"
               {% if not kampagne.kontakte %}hx-on::htmx:after-swap="document.getElementById('kontakte-empty')&&document.getElementById('kontakte-empty').remove(); document.getElementById('kontakte-table')&&(document.getElementById('kontakte-table').style.display='')"{% endif %}>
            {% for kk in kampagne.kontakte %}
            {% set c = kk.kontakt %}
            {% set status_colors = kat_farben("kampagne_kontakt_status") %}
            <tr id="kk-{{ kk.id }}">
                <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>
                    <select name="status" style="margin: 0; padding: 0.2rem 0.4rem; font-size: 0.8rem; border-color: {{ status_colors[kk.status] or '#607D8B' }}; color: {{ status_colors[kk.status] or '#607D8B' }}; min-width: 110px;"
                            hx-post="/kampagnen/{{ kampagne.id }}/kontakte/{{ kk.id }}/status"
                            hx-target="#kk-{{ kk.id }}" hx-swap="outerHTML">
                        {% for opt in kat_optionen("kampagne_kontakt_status") %}
                        <option value="{{ opt.wert }}" {% if kk.status == opt.wert %}selected{% endif %}>{{ opt.label }}</option>
                        {% endfor %}
                    </select>
                </td>
                <td>
                    <div style="display: flex; gap: 0.25rem; align-items: center;">
                        <input type="text" name="notiz" id="notiz-{{ kk.id }}" value="{{ kk.notiz or '' }}"
                               placeholder="Notiz..."
                               style="margin: 0; padding: 0.2rem 0.4rem; font-size: 0.8rem; min-width: 120px;"
                               hx-post="/kampagnen/{{ kampagne.id }}/kontakte/{{ kk.id }}/notiz"
                               hx-target="#kk-{{ kk.id }}" hx-swap="outerHTML"
                               hx-trigger="blur changed">
                        <button class="btn-icon" title="Als Aktivität speichern"
                                style="font-size: 0.75rem; padding: 0.1rem 0.3rem; flex-shrink: 0;"
                                hx-post="/kampagnen/{{ kampagne.id }}/kontakte/{{ kk.id }}/als-aktivitaet"
                                hx-include="#notiz-{{ kk.id }}"
                                hx-target="#kk-{{ kk.id }}" hx-swap="outerHTML">📋</button>
                    </div>
                </td>
                <td>
                    <button class="btn-icon" style="font-size: 0.75rem; padding: 0.1rem 0.3rem; color: #e53e3e; border: 1px solid #e53e3e;"
                            hx-delete="/kampagnen/{{ kampagne.id }}/kontakte/{{ kk.id }}"
                            hx-target="#kk-{{ kk.id }}" hx-swap="outerHTML"
                            hx-confirm="Kontakt aus Kampagne entfernen?">x</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Aktivitäten Timeline -->
<div class="card" style="margin-top: 1rem;">
    <div class="card-header">
        <h3>Aktivitäten{% if aktivitaeten %} ({{ aktivitaeten|length }}){% endif %}</h3>
        <a href="/aktivitaeten/neu?kampagne_id={{ kampagne.id }}" role="button" class="btn-sm">+ Neu</a>
    </div>
    {% if aktivitaeten %}
    <div class="timeline">
        {% for akt in aktivitaeten %}
        {% include "components/aktivitaet_item.html" %}
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state"><p>Keine Aktivitäten vorhanden.</p></div>
    {% endif %}
</div>

<!-- Veranstaltungen -->
{% if veranstaltungen %}
<div class="card" style="margin-top: 1rem;">
    <div class="card-header">
        <h3>Veranstaltungen ({{ veranstaltungen|length }})</h3>
    </div>
    <table class="data-table">
        <thead>
            <tr><th>Titel</th><th>Datum</th><th>Ort</th><th>Status</th></tr>
        </thead>
        <tbody>
            {% for v in veranstaltungen %}
            <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">{{ v.status }}</span></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Spenden -->
{% if spenden %}
<div class="card" style="margin-top: 1rem;">
    <div class="card-header">
        <h3>Spenden ({{ spenden|length }})</h3>
        <span style="font-weight: 600; color: var(--kw-primary);">{{ '%.2f'|format(spenden_summe) }} EUR</span>
    </div>
    <table class="data-table">
        <thead>
            <tr><th>Datum</th><th>Kontakt</th><th style="text-align: right;">Betrag</th><th>Zweck</th></tr>
        </thead>
        <tbody>
            {% for s in spenden %}
            <tr>
                <td style="font-size: 0.85rem;">{{ 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="font-size: 0.85rem; font-weight: 600; text-align: right;">{{ '%.2f'|format(s.betrag) }} EUR</td>
                <td style="font-size: 0.85rem;">{{ s.zweck or '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

<!-- Meta -->
<div class="card" style="margin-top: 1rem;">
    <div class="info-grid">
        {% if kampagne.typ %}<div class="info-label">Typ</div><div class="info-value">{{ kampagne.typ_label }}</div>{% endif %}
        {% 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 %}
