/**
 * OSINT Lagemonitor - Hauptanwendungslogik.
 */

/** Feste Zeitzone fuer alle Anzeigen — NIEMALS aendern. */
const TIMEZONE = 'Europe/Berlin';

/** Gibt Jahr/Monat(0-basiert)/Tag/Stunde/Minute in Berliner Zeit zurueck. */
function _tz(d) {
    const s = d.toLocaleString('en-CA', {
        timeZone: TIMEZONE, year: 'numeric', month: '2-digit', day: '2-digit',
        hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false
    });
    const m = s.match(/(\d{4})-(\d{2})-(\d{2}),?\s*(\d{2}):(\d{2}):(\d{2})/);
    if (!m) return { year: d.getFullYear(), month: d.getMonth(), date: d.getDate(), hours: d.getHours(), minutes: d.getMinutes() };
    return { year: +m[1], month: +m[2] - 1, date: +m[3], hours: +m[4], minutes: +m[5] };
}

/**
 * Theme Manager: Dark/Light Theme Toggle mit localStorage-Persistenz.
 */
const ThemeManager = {
    _key: 'osint_theme',
    init() {
        const saved = localStorage.getItem(this._key);
        const theme = saved || 'dark';
        document.documentElement.setAttribute('data-theme', theme);
        this._updateIcon(theme);
    },
    toggle() {
        const current = document.documentElement.getAttribute('data-theme') || 'dark';
        const next = current === 'dark' ? 'light' : 'dark';
        document.documentElement.setAttribute('data-theme', next);
        localStorage.setItem(this._key, next);
        this._updateIcon(next);
        UI.updateMapTheme();
    },
    _updateIcon(theme) {
        const el = document.getElementById('theme-toggle');
        if (!el) return;
        el.classList.remove('dark', 'light');
        el.classList.add(theme);
        el.setAttribute('aria-checked', theme === 'dark' ? 'true' : 'false');
    }
};

/**
 * Barrierefreiheits-Manager: Panel mit 4 Schaltern (Kontrast, Focus, Schrift, Animationen).
 */
const A11yManager = {
    _key: 'osint_a11y',
    _isOpen: false,
    _settings: { contrast: false, focus: false, fontsize: false, motion: false },

    init() {
        // Einstellungen aus localStorage laden
        try {
            const saved = JSON.parse(localStorage.getItem(this._key) || '{}');
            Object.keys(this._settings).forEach(k => {
                if (typeof saved[k] === 'boolean') this._settings[k] = saved[k];
            });
        } catch (e) { /* Ungültige Daten ignorieren */ }

        // Button + Panel dynamisch in .header-right einfügen (vor Theme-Toggle)
        const headerRight = document.querySelector('.header-right');
        const themeToggle = document.getElementById('theme-toggle');
        if (!headerRight) return;

        const container = document.createElement('div');
        container.className = 'a11y-center';
        container.innerHTML = `
            <button class="a11y-btn" id="a11y-btn" title="Barrierefreiheit"
                    aria-label="Barrierefreiheit" aria-expanded="false" aria-haspopup="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                    <circle cx="12" cy="4" r="2"/>
                    <path d="M12 8c-3.3 0-6 .5-6 .5v2s2.7-.5 5-.5v3l-3 7h2.5l2.5-5.5 2.5 5.5h2.5l-3-7v-3c2.3 0 5 .5 5 .5v-2S15.3 8 12 8z"/>
                </svg>
            </button>
            <div class="a11y-panel" id="a11y-panel" role="group" aria-label="Barrierefreiheits-Einstellungen" style="display:none;">
                <div class="a11y-panel-title">Barrierefreiheit</div>
                <label class="a11y-option">
                    <input type="checkbox" id="a11y-contrast">
                    <span class="toggle-switch"></span>
                    <span>Hoher Kontrast</span>
                </label>
                <label class="a11y-option">
                    <input type="checkbox" id="a11y-focus">
                    <span class="toggle-switch"></span>
                    <span>Verstärkte Focus-Anzeige</span>
                </label>
                <label class="a11y-option">
                    <input type="checkbox" id="a11y-fontsize">
                    <span class="toggle-switch"></span>
                    <span>Größere Schrift</span>
                </label>
                <label class="a11y-option">
                    <input type="checkbox" id="a11y-motion">
                    <span class="toggle-switch"></span>
                    <span>Animationen aus</span>
                </label>
            </div>
        `;

        if (themeToggle) {
            headerRight.insertBefore(container, themeToggle);
        } else {
            headerRight.prepend(container);
        }

        // Toggle-Event-Listener
        ['contrast', 'focus', 'fontsize', 'motion'].forEach(key => {
            document.getElementById('a11y-' + key).addEventListener('change', () => this.toggle(key));
        });

        // Button öffnet/schließt Panel
        document.getElementById('a11y-btn').addEventListener('click', (e) => {
            e.stopPropagation();
            this._isOpen ? this._closePanel() : this._openPanel();
        });

        // Klick außerhalb schließt Panel
        document.addEventListener('click', (e) => {
            if (this._isOpen && !container.contains(e.target)) {
                this._closePanel();
            }
        });

        // Keyboard: Esc schließt, Pfeiltasten navigieren
        container.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && this._isOpen) {
                e.stopPropagation();
                this._closePanel();
                return;
            }
            if (!this._isOpen) return;
            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
                e.preventDefault();
                const options = Array.from(document.querySelectorAll('.a11y-option input[type="checkbox"]'));
                const idx = options.indexOf(document.activeElement);
                let next;
                if (e.key === 'ArrowDown') {
                    next = idx < options.length - 1 ? idx + 1 : 0;
                } else {
                    next = idx > 0 ? idx - 1 : options.length - 1;
                }
                options[next].focus();
            }
        });

        // Einstellungen anwenden + Checkboxen synchronisieren
        this._apply();
        this._syncUI();
    },

    toggle(key) {
        this._settings[key] = !this._settings[key];
        this._apply();
        this._syncUI();
        this._save();
    },

    _apply() {
        const root = document.documentElement;
        Object.keys(this._settings).forEach(k => {
            if (this._settings[k]) {
                root.setAttribute('data-a11y-' + k, 'true');
            } else {
                root.removeAttribute('data-a11y-' + k);
            }
        });
    },

    _syncUI() {
        Object.keys(this._settings).forEach(k => {
            const cb = document.getElementById('a11y-' + k);
            if (cb) cb.checked = this._settings[k];
        });
    },

    _save() {
        localStorage.setItem(this._key, JSON.stringify(this._settings));
    },

    _openPanel() {
        this._isOpen = true;
        document.getElementById('a11y-panel').style.display = '';
        document.getElementById('a11y-btn').setAttribute('aria-expanded', 'true');
        // Fokus auf erste Option setzen
        requestAnimationFrame(() => {
            const first = document.querySelector('.a11y-option input[type="checkbox"]');
            if (first) first.focus();
        });
    },

    _closePanel() {
        this._isOpen = false;
        document.getElementById('a11y-panel').style.display = 'none';
        const btn = document.getElementById('a11y-btn');
        btn.setAttribute('aria-expanded', 'false');
        btn.focus();
    }
};

/**
 * Notification-Center: Glocke mit Badge + History-Panel.
 */
const NotificationCenter = {
    _notifications: [],
    _unreadCount: 0,
    _isOpen: false,
    _maxItems: 50,
    _syncTimer: null,

    async init() {
        // Glocken-Container dynamisch in .header-right vor #header-user einfügen
        const headerRight = document.querySelector('.header-right');
        const headerUser = document.getElementById('header-user');
        if (!headerRight || !headerUser) return;

        const container = document.createElement('div');
        container.className = 'notification-center';
        container.innerHTML = `
            <button class="notification-bell" id="notification-bell" title="Benachrichtigungen" aria-label="Benachrichtigungen" aria-expanded="false" aria-haspopup="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                    <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                </svg>
                <span class="notification-badge" id="notification-badge" style="display:none;">0</span>
            </button>
            <div class="notification-panel" id="notification-panel" style="display:none;">
                <div class="notification-panel-header">
                    <span class="notification-panel-title">Benachrichtigungen</span>
                    <button class="notification-mark-read" id="notification-mark-read">Alle gelesen</button>
                </div>
                <div class="notification-panel-list" id="notification-panel-list">
                    <div class="notification-empty">Keine Benachrichtigungen</div>
                </div>
            </div>
        `;
        headerRight.insertBefore(container, headerUser);

        // Event-Listener
        document.getElementById('notification-bell').addEventListener('click', (e) => {
            e.stopPropagation();
            this.toggle();
        });
        document.getElementById('notification-mark-read').addEventListener('click', (e) => {
            e.stopPropagation();
            this.markAllRead();
        });
        // Klick außerhalb schließt Panel
        document.addEventListener('click', (e) => {
            if (this._isOpen && !container.contains(e.target)) {
                this.close();
            }
        });

        // Notifications aus DB laden
        await this._loadFromDB();
    },

    add(notification) {
        // Optimistisches UI: sofort anzeigen
        notification.read = false;
        notification.timestamp = notification.timestamp || new Date().toISOString();
        this._notifications.unshift(notification);
        if (this._notifications.length > this._maxItems) {
            this._notifications.pop();
        }
        this._unreadCount++;
        this._updateBadge();
        this._renderList();

        // DB-Sync mit Debounce (Orchestrator schreibt parallel in DB)
        clearTimeout(this._syncTimer);
        this._syncTimer = setTimeout(() => this._syncFromDB(), 500);
    },

    toggle() {
        this._isOpen ? this.close() : this.open();
    },

    open() {
        this._isOpen = true;
        const panel = document.getElementById('notification-panel');
        if (panel) panel.style.display = 'flex';
        const bell = document.getElementById('notification-bell');
        if (bell) bell.setAttribute('aria-expanded', 'true');
    },

    close() {
        this._isOpen = false;
        const panel = document.getElementById('notification-panel');
        if (panel) panel.style.display = 'none';
        const bell = document.getElementById('notification-bell');
        if (bell) bell.setAttribute('aria-expanded', 'false');
    },

    async markAllRead() {
        this._notifications.forEach(n => n.read = true);
        this._unreadCount = 0;
        this._updateBadge();
        this._renderList();

        // In DB als gelesen markieren (fire-and-forget)
        try {
            await API.markNotificationsRead(null);
        } catch (e) {
            console.warn('Notifications als gelesen markieren fehlgeschlagen:', e);
        }
    },

    _updateBadge() {
        const badge = document.getElementById('notification-badge');
        if (!badge) return;
        if (this._unreadCount > 0) {
            badge.style.display = 'flex';
            badge.textContent = this._unreadCount > 99 ? '99+' : this._unreadCount;
            document.title = `(${this._unreadCount}) ${App._originalTitle}`;
        } else {
            badge.style.display = 'none';
            document.title = App._originalTitle;
        }
    },

    _renderList() {
        const list = document.getElementById('notification-panel-list');
        if (!list) return;

        if (this._notifications.length === 0) {
            list.innerHTML = '<div class="notification-empty">Keine Benachrichtigungen</div>';
            return;
        }

        list.innerHTML = this._notifications.map(n => {
            const time = new Date(n.timestamp);
            const timeStr = time.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE });
            const unreadClass = n.read ? '' : ' unread';
            const icon = n.icon || 'info';
            return `<div class="notification-item${unreadClass}" onclick="NotificationCenter._handleClick(${n.incident_id})" data-id="${n.incident_id}" role="button" tabindex="0">
                <div class="notification-item-icon ${icon}">${this._iconSymbol(icon)}</div>
                <div class="notification-item-body">
                    <div class="notification-item-title">${this._escapeHtml(n.title)}</div>
                    <div class="notification-item-text">${this._escapeHtml(n.text)}</div>
                </div>
                <div class="notification-item-time">${timeStr}</div>
            </div>`;
        }).join('');
    },

    _handleClick(incidentId) {
        this.close();
        if (incidentId) {
            App.selectIncident(incidentId);
        }
    },

    _iconSymbol(type) {
        switch (type) {
            case 'success': return '\u2713';
            case 'warning': return '!';
            case 'error': return '\u2717';
            default: return 'i';
        }
    },

    _escapeHtml(text) {
        const d = document.createElement('div');
        d.textContent = text || '';
        return d.innerHTML;
    },

    async _loadFromDB() {
        try {
            const items = await API.listNotifications(50);
            this._notifications = items.map(n => ({
                id: n.id,
                incident_id: n.incident_id,
                title: n.title,
                text: n.text,
                icon: n.icon || 'info',
                type: n.type,
                read: !!n.is_read,
                timestamp: n.created_at,
            }));
            this._unreadCount = this._notifications.filter(n => !n.read).length;
            this._updateBadge();
            this._renderList();
        } catch (e) {
            console.warn('Notifications laden fehlgeschlagen:', e);
        }
    },

    async _syncFromDB() {
        try {
            const items = await API.listNotifications(50);
            this._notifications = items.map(n => ({
                id: n.id,
                incident_id: n.incident_id,
                title: n.title,
                text: n.text,
                icon: n.icon || 'info',
                type: n.type,
                read: !!n.is_read,
                timestamp: n.created_at,
            }));
            this._unreadCount = this._notifications.filter(n => !n.read).length;
            this._updateBadge();
            this._renderList();
        } catch (e) {
            console.warn('Notifications sync fehlgeschlagen:', e);
        }
    },
};

const App = {
    currentIncidentId: null,
    incidents: [],
    _originalTitle: document.title,
    _refreshingIncidents: new Set(),
    _editingIncidentId: null,
    _currentArticles: [],
    _currentIncidentType: 'adhoc',
    _sidebarFilter: 'all',
    _currentUsername: '',
    _allSources: [],
    _sourcesOnly: [],
    _myExclusions: [],  // [{domain, notes, created_at}]
    _expandedGroups: new Set(),
    _editingSourceId: null,
    _timelineFilter: 'all',
    _timelineRange: 'all',
    _activePointIndex: null,
    _timelineSearchTimer: null,
    _pendingComplete: null,
    _pendingCompleteTimer: null,

    async init() {
        ThemeManager.init();
        A11yManager.init();
        // Auth prüfen
        const token = localStorage.getItem('osint_token');
        if (!token) {
            window.location.href = '/';
            return;
        }

        try {
            const user = await API.getMe();
            this._currentUsername = user.email;
            document.getElementById('header-user').textContent = user.email;

            // Dropdown-Daten befuellen
            const orgNameEl = document.getElementById('header-org-name');
            if (orgNameEl) orgNameEl.textContent = user.org_name || '-';

            const licInfoEl = document.getElementById('header-license-info');
            if (licInfoEl) {
                const licenseLabels = {
                    trial: 'Trial',
                    annual: 'Jahreslizenz',
                    permanent: 'Permanent',
                };
                const label = user.read_only ? 'Abgelaufen'
                    : licenseLabels[user.license_type] || user.license_status || '-';
                licInfoEl.textContent = label;
            }

            // Dropdown Toggle
            const userBtn = document.getElementById('header-user-btn');
            const userDropdown = document.getElementById('header-user-dropdown');
            if (userBtn && userDropdown) {
                userBtn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const isOpen = userDropdown.classList.toggle('open');
                    userBtn.setAttribute('aria-expanded', isOpen);
                });
                document.addEventListener('click', () => {
                    userDropdown.classList.remove('open');
                    userBtn.setAttribute('aria-expanded', 'false');
                });
            }

            // Warnung bei abgelaufener Lizenz
            const warningEl = document.getElementById('header-license-warning');
            if (warningEl && user.read_only) {
                warningEl.textContent = 'Lizenz abgelaufen – nur Lesezugriff';
                warningEl.classList.add('visible');
            }
        } catch {
            window.location.href = '/';
            return;
        }

        // Event-Listener
        document.getElementById('logout-btn').addEventListener('click', () => this.logout());
        document.getElementById('new-incident-btn').addEventListener('click', () => openModal('modal-new'));
        document.getElementById('new-incident-form').addEventListener('submit', (e) => this.handleFormSubmit(e));
        document.getElementById('refresh-btn').addEventListener('click', () => this.handleRefresh());
        document.getElementById('delete-incident-btn').addEventListener('click', () => this.handleDelete());
        document.getElementById('edit-incident-btn').addEventListener('click', () => this.handleEdit());
        document.getElementById('archive-incident-btn').addEventListener('click', () => this.handleArchive());
        document.getElementById('inc-international').addEventListener('change', () => updateSourcesHint());
        document.getElementById('inc-visibility').addEventListener('change', () => updateVisibilityHint());

        // Feedback
        document.getElementById('feedback-form').addEventListener('submit', (e) => this.submitFeedback(e));
        document.getElementById('fb-message').addEventListener('input', (e) => {
            document.getElementById('fb-char-count').textContent = e.target.value.length.toLocaleString('de-DE');
        });

        // Sidebar-Chevrons initial auf offen setzen (Archiv geschlossen)
        document.querySelectorAll('.sidebar-chevron').forEach(c => c.classList.add('open'));
        document.getElementById('chevron-archived-incidents').classList.remove('open');

        // Lagen laden (frueh, damit Sidebar sofort sichtbar)
        await this.loadIncidents();

        // Notification-Center initialisieren
        try { await NotificationCenter.init(); } catch (e) { console.warn('NotificationCenter:', e); }

        // WebSocket
        WS.connect();
        WS.on('status_update', (msg) => this.handleStatusUpdate(msg));
        WS.on('refresh_complete', (msg) => this.handleRefreshComplete(msg));
        WS.on('refresh_summary', (msg) => this.handleRefreshSummary(msg));
        WS.on('refresh_error', (msg) => this.handleRefreshError(msg));
        WS.on('refresh_cancelled', (msg) => this.handleRefreshCancelled(msg));

        // Laufende Refreshes wiederherstellen
        try {
            const data = await API.getRefreshingIncidents();
            if (data.refreshing && data.refreshing.length > 0) {
                data.refreshing.forEach(id => this._refreshingIncidents.add(id));
                // Sidebar-Dots aktualisieren
                data.refreshing.forEach(id => this._updateSidebarDot(id));
            }
        } catch (e) { /* Kein kritischer Fehler */ }

        // Zuletzt ausgewählte Lage wiederherstellen
        const savedId = localStorage.getItem('selectedIncidentId');
        if (savedId) {
            const id = parseInt(savedId, 10);
            if (this.incidents.some(inc => inc.id === id)) {
                await this.selectIncident(id);
            }
        }

        // Leaflet-Karte nachladen falls CDN langsam war
        setTimeout(() => UI.retryPendingMap(), 2000);
    },

    async loadIncidents() {
        try {
            this.incidents = await API.listIncidents();
            this.renderSidebar();
        } catch (err) {
            UI.showToast('Fehler beim Laden der Lagen: ' + err.message, 'error');
        }
    },

    renderSidebar() {
        const activeContainer = document.getElementById('active-incidents');
        const researchContainer = document.getElementById('active-research');
        const archivedContainer = document.getElementById('archived-incidents');

        // Filter-Buttons aktualisieren
        document.querySelectorAll('.sidebar-filter-btn').forEach(btn => {
            const isActive = btn.dataset.filter === this._sidebarFilter;
            btn.classList.toggle('active', isActive);
            btn.setAttribute('aria-pressed', String(isActive));
        });

        // Lagen nach Filter einschränken
        let filtered = this.incidents;
        if (this._sidebarFilter === 'mine') {
            filtered = filtered.filter(i => i.created_by_username === this._currentUsername);
        }

        // Aktive Lagen nach Typ aufteilen
        const activeAdhoc = filtered.filter(i => i.status === 'active' && (!i.type || i.type === 'adhoc'));
        const activeResearch = filtered.filter(i => i.status === 'active' && i.type === 'research');
        const archived = filtered.filter(i => i.status === 'archived');

        const emptyLabelAdhoc = this._sidebarFilter === 'mine' ? 'Keine eigenen Ad-hoc-Lagen' : 'Keine Ad-hoc-Lagen';
        const emptyLabelResearch = this._sidebarFilter === 'mine' ? 'Keine eigenen Recherchen' : 'Keine Recherchen';

        activeContainer.innerHTML = activeAdhoc.length
            ? activeAdhoc.map(i => UI.renderIncidentItem(i, i.id === this.currentIncidentId)).join('')
            : `<div style="padding:8px 12px;font-size:12px;color:var(--text-tertiary);">${emptyLabelAdhoc}</div>`;

        researchContainer.innerHTML = activeResearch.length
            ? activeResearch.map(i => UI.renderIncidentItem(i, i.id === this.currentIncidentId)).join('')
            : `<div style="padding:8px 12px;font-size:12px;color:var(--text-tertiary);">${emptyLabelResearch}</div>`;

        archivedContainer.innerHTML = archived.length
            ? archived.map(i => UI.renderIncidentItem(i, i.id === this.currentIncidentId)).join('')
            : '<div style="padding:8px 12px;font-size:12px;color:var(--text-tertiary);">Kein Archiv</div>';

        // Zähler aktualisieren
        const countAdhoc = document.getElementById('count-active-incidents');
        const countResearch = document.getElementById('count-active-research');
        const countArchived = document.getElementById('count-archived-incidents');
        if (countAdhoc) countAdhoc.textContent = `(${activeAdhoc.length})`;
        if (countResearch) countResearch.textContent = `(${activeResearch.length})`;
        if (countArchived) countArchived.textContent = `(${archived.length})`;

        // Sidebar-Stats aktualisieren
        this.updateSidebarStats();
    },

    setSidebarFilter(filter) {
        this._sidebarFilter = filter;
        this.renderSidebar();
    },

    _announceForSR(text) {
        let el = document.getElementById('sr-announcement');
        if (!el) {
            el = document.createElement('div');
            el.id = 'sr-announcement';
            el.setAttribute('role', 'status');
            el.setAttribute('aria-live', 'polite');
            el.className = 'sr-only';
            document.body.appendChild(el);
        }
        el.textContent = '';
        requestAnimationFrame(() => { el.textContent = text; });
    },

    async selectIncident(id) {
        this.closeRefreshHistory();
        this.currentIncidentId = id;
        localStorage.setItem('selectedIncidentId', id);
        // SR-Announcement
        const inc = this.incidents.find(i => i.id === id);
        if (inc) this._announceForSR('Lage ausgewählt: ' + inc.title);
        this.renderSidebar();

        document.getElementById('empty-state').style.display = 'none';
        document.getElementById('incident-view').style.display = 'flex';

        // gridstack-Layout initialisieren (einmalig)
        if (typeof LayoutManager !== 'undefined') LayoutManager.init();

        // Refresh-Status für diese Lage wiederherstellen
        const isRefreshing = this._refreshingIncidents.has(id);
        this._updateRefreshButton(isRefreshing);
        if (isRefreshing) {
            UI.showProgress('researching');
        } else {
            UI.hideProgress();
        }

        await this.loadIncidentDetail(id);
    },

    async loadIncidentDetail(id) {
        try {
            const [incident, articles, factchecks, snapshots, locations] = await Promise.all([
                API.getIncident(id),
                API.getArticles(id),
                API.getFactChecks(id),
                API.getSnapshots(id),
                API.getLocations(id).catch(() => []),
            ]);

            this.renderIncidentDetail(incident, articles, factchecks, snapshots, locations);
        } catch (err) {
            UI.showToast('Fehler beim Laden: ' + err.message, 'error');
        }
    },

    renderIncidentDetail(incident, articles, factchecks, snapshots, locations) {
        // Header Strip
        document.getElementById('incident-title').textContent = incident.title;
        document.getElementById('incident-description').textContent = incident.description || '';

        // Typ-Badge
        const typeBadge = document.getElementById('incident-type-badge');
        typeBadge.className = 'incident-type-badge ' + (incident.type === 'research' ? 'type-research' : 'type-adhoc');
        typeBadge.textContent = incident.type === 'research' ? 'Recherche' : 'Breaking';

        // Archiv-Button Text
        this._updateArchiveButton(incident.status);

        // Ersteller anzeigen
        const creatorEl = document.getElementById('incident-creator');
        if (creatorEl) {
            creatorEl.textContent = (incident.created_by_username || '').split('@')[0];
        }

        // Delete-Button: nur Ersteller darf löschen
        const deleteBtn = document.getElementById('delete-incident-btn');
        const isCreator = incident.created_by_username === this._currentUsername;
        deleteBtn.disabled = !isCreator;
        deleteBtn.title = isCreator ? '' : `Nur ${(incident.created_by_username || '').split('@')[0]} kann diese Lage löschen`;

        // Zusammenfassung mit Quellenverzeichnis
        const summaryText = document.getElementById('summary-text');
        if (incident.summary) {
            summaryText.innerHTML = UI.renderSummary(
                incident.summary,
                incident.sources_json,
                incident.type
            );
        } else {
            summaryText.innerHTML = '<span style="color:var(--text-disabled);">Noch keine Zusammenfassung. Klicke auf "Aktualisieren" um die Recherche zu starten.</span>';
        }

        // Meta (im Header-Strip) — relative Zeitangabe mit vollem Datum als Tooltip
        const updated = incident.updated_at ? parseUTC(incident.updated_at) : null;
        const metaUpdated = document.getElementById('meta-updated');
        if (updated) {
            const fullDate = `${updated.toLocaleDateString('de-DE', { timeZone: TIMEZONE })} ${updated.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE })}`;
            metaUpdated.textContent = `Stand: ${App._timeAgo(updated)}`;
            metaUpdated.title = fullDate;
        } else {
            metaUpdated.textContent = '';
            metaUpdated.title = '';
        }

        // Zeitstempel direkt im Lagebild-Card-Header
        const lagebildTs = document.getElementById('lagebild-timestamp');
        if (lagebildTs) {
            lagebildTs.textContent = updated
                ? `Stand: ${updated.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: TIMEZONE })} ${updated.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE })} Uhr`
                : '';
        }

        document.getElementById('meta-refresh-mode').textContent = incident.refresh_mode === 'auto'
            ? `Auto alle ${App._formatInterval(incident.refresh_interval)}`
            : 'Manuell';

        // International-Badge
        const intlBadge = document.getElementById('intl-badge');
        if (intlBadge) {
            const isIntl = incident.international_sources !== false && incident.international_sources !== 0;
            intlBadge.className = 'intl-badge ' + (isIntl ? 'intl-yes' : 'intl-no');
            intlBadge.textContent = isIntl ? 'International' : 'Nur DE';
        }

        // Faktencheck
        const fcFilters = document.getElementById('fc-filters');
        const factcheckList = document.getElementById('factcheck-list');
        if (factchecks.length > 0) {
            fcFilters.innerHTML = UI.renderFactCheckFilters(factchecks);
            factcheckList.innerHTML = factchecks.map(fc => UI.renderFactCheck(fc)).join('');
        } else {
            fcFilters.innerHTML = '';
            factcheckList.innerHTML = '<div style="padding:12px;font-size:13px;color:var(--text-tertiary);">Noch keine Fakten geprüft</div>';
        }

        // Quellenübersicht
        const sourceOverview = document.getElementById('source-overview-content');
        if (sourceOverview) {
            sourceOverview.innerHTML = UI.renderSourceOverview(articles);
            // Kachel an Inhalt anpassen
            if (typeof LayoutManager !== 'undefined' && LayoutManager._grid) {
                if (sourceOverview.style.display !== 'none') {
                    // Offen → an Inhalt anpassen
                    requestAnimationFrame(() => requestAnimationFrame(() => {
                        LayoutManager.resizeTileToContent('quellen');
                    }));
                } else {
                    // Geschlossen → einheitliche Default-Höhe
                    const defaults = LayoutManager.DEFAULT_LAYOUT.find(d => d.id === 'quellen');
                    if (defaults) {
                        const node = LayoutManager._grid.engine.nodes.find(
                            n => n.el && n.el.getAttribute('gs-id') === 'quellen'
                        );
                        if (node) LayoutManager._grid.update(node.el, { h: defaults.h });
                    }
                }
            }
        }

        // Timeline - Artikel + Snapshots zwischenspeichern und rendern
        this._currentArticles = articles;
        this._currentSnapshots = snapshots || [];
        this._currentIncidentType = incident.type;
        this._timelineFilter = 'all';
        this._timelineRange = 'all';
        this._activePointIndex = null;
        document.getElementById('timeline-search').value = '';
        document.querySelectorAll('.ht-filter-btn').forEach(btn => {
            const isActive = btn.dataset.filter === 'all';
            btn.classList.toggle('active', isActive);
            btn.setAttribute('aria-pressed', String(isActive));
        });
        document.querySelectorAll('.ht-range-btn').forEach(btn => {
            const isActive = btn.dataset.range === 'all';
            btn.classList.toggle('active', isActive);
            btn.setAttribute('aria-pressed', String(isActive));
        });
        this.rerenderTimeline();
        this._resizeTimelineTile();

        // Karte rendern
        UI.renderMap(locations || []);
    },

    _collectEntries(filterType, searchTerm, range) {
        const type = this._currentIncidentType;
        const getArticleDate = (a) => (type === 'research' && a.published_at) ? a.published_at : a.collected_at;

        let entries = [];

        if (filterType === 'all' || filterType === 'articles') {
            let articles = this._currentArticles || [];
            if (searchTerm) {
                articles = articles.filter(a => {
                    const text = `${a.headline || ''} ${a.headline_de || ''} ${a.source || ''} ${a.content_de || ''} ${a.content_original || ''}`.toLowerCase();
                    return text.includes(searchTerm);
                });
            }
            articles.forEach(a => entries.push({ kind: 'article', data: a, timestamp: getArticleDate(a) || '' }));
        }

        if (filterType === 'all' || filterType === 'snapshots') {
            let snapshots = this._currentSnapshots || [];
            if (searchTerm) {
                snapshots = snapshots.filter(s => (s.summary || '').toLowerCase().includes(searchTerm));
            }
            snapshots.forEach(s => entries.push({ kind: 'snapshot', data: s, timestamp: s.created_at || '' }));
        }

        if (range && range !== 'all') {
            const now = Date.now();
            const cutoff = range === '24h' ? now - 24 * 60 * 60 * 1000 : now - 7 * 24 * 60 * 60 * 1000;
            entries = entries.filter(e => new Date(e.timestamp || 0).getTime() >= cutoff);
        }

        return entries;
    },

    _updateTimelineCount(entries) {
        const articleCount = entries.filter(e => e.kind === 'article').length;
        const snapshotCount = entries.filter(e => e.kind === 'snapshot').length;
        const countEl = document.getElementById('article-count');
        if (articleCount > 0 && snapshotCount > 0) {
            countEl.innerHTML = `<span class="ht-legend-dot"></span> ${articleCount} Meldung${articleCount !== 1 ? 'en' : ''} + <span class="ht-legend-dot ht-legend-gold"></span> ${snapshotCount} Lagebericht${snapshotCount !== 1 ? 'e' : ''}`;
        } else if (articleCount > 0) {
            countEl.innerHTML = `<span class="ht-legend-dot"></span> ${articleCount} Meldung${articleCount !== 1 ? 'en' : ''}`;
        } else if (snapshotCount > 0) {
            countEl.innerHTML = `<span class="ht-legend-dot ht-legend-gold"></span> ${snapshotCount} Lagebericht${snapshotCount !== 1 ? 'e' : ''}`;
        } else {
            countEl.textContent = '0 Meldungen';
        }
    },

    debouncedRerenderTimeline() {
        clearTimeout(this._timelineSearchTimer);
        this._timelineSearchTimer = setTimeout(() => this.rerenderTimeline(), 250);
    },

    rerenderTimeline() {
        const container = document.getElementById('timeline');
        const searchTerm = (document.getElementById('timeline-search').value || '').toLowerCase();
        const filterType = this._timelineFilter;
        const range = this._timelineRange;

        let entries = this._collectEntries(filterType, searchTerm, range);
        this._updateTimelineCount(entries);

        if (entries.length === 0) {
            this._activePointIndex = null;
            container.innerHTML = (searchTerm || range !== 'all')
                ? '<div class="ht-empty">Keine Einträge im gewählten Zeitraum.</div>'
                : '<div class="ht-empty">Noch keine Meldungen. Starte eine Recherche mit "Aktualisieren".</div>';
            return;
        }

        entries.sort((a, b) => new Date(a.timestamp || 0) - new Date(b.timestamp || 0));

        const granularity = this._calcGranularity(entries, range);
        let buckets = this._buildBuckets(entries, granularity);
        buckets = this._mergeCloseBuckets(buckets);

        // Aktiven Index validieren
        if (this._activePointIndex !== null && this._activePointIndex >= buckets.length) {
            this._activePointIndex = null;
        }

        // Achsen-Bereich
        const rangeStart = buckets[0].timestamp;
        const rangeEnd = buckets[buckets.length - 1].timestamp;
        const maxCount = Math.max(...buckets.map(b => b.entries.length));

        // Stunden- vs. Tages-Granularität
        const isHourly = granularity === 'hour';
        const axisLabels = this._buildAxisLabels(buckets, granularity, true);

        // HTML aufbauen
        let html = `<div class="ht-axis${isHourly ? ' ht-axis--hourly' : ''}">`;

        // Datums-Marker (immer anzeigen, ausgedünnt)
        const dayMarkers = this._thinLabels(this._buildDayMarkers(buckets, rangeStart, rangeEnd), 10);
        html += '<div class="ht-day-markers">';
        dayMarkers.forEach(m => {
            html += `<div class="ht-day-marker" style="left:${m.pos}%;">`;
            html += `<div class="ht-day-marker-label">${UI.escape(m.text)}</div>`;
            html += `<div class="ht-day-marker-line"></div>`;
            html += `</div>`;
        });
        html += '</div>';

        // Punkte
        html += '<div class="ht-points">';
        buckets.forEach((bucket, idx) => {
            const pos = this._bucketPositionPercent(bucket, rangeStart, rangeEnd, buckets.length);
            const size = this._calcPointSize(bucket.entries.length, maxCount);
            const hasSnapshots = bucket.entries.some(e => e.kind === 'snapshot');
            const hasArticles = bucket.entries.some(e => e.kind === 'article');

            let pointClass = 'ht-point';
            if (filterType === 'snapshots') {
                pointClass += ' ht-snapshot-point';
            } else if (hasSnapshots) {
                pointClass += ' ht-mixed-point';
            }
            if (this._activePointIndex === idx) pointClass += ' active';

            const tooltip = `${bucket.label}: ${bucket.entries.length} Eintr${bucket.entries.length === 1 ? 'ag' : 'äge'}`;

            html += `<div class="${pointClass}" style="left:${pos}%;width:${size}px;height:${size}px;" onclick="App.openTimelineDetail(${idx})" data-idx="${idx}">`;
            html += `<div class="ht-tooltip">${UI.escape(tooltip)}</div>`;
            html += `</div>`;
        });
        html += '</div>';

        // Achsenlinie
        html += '<div class="ht-axis-line"></div>';

        // Achsen-Labels (ausgedünnt um Überlappung zu vermeiden)
        const thinned = this._thinLabels(axisLabels);
        html += '<div class="ht-axis-labels">';
        thinned.forEach(lbl => {
            html += `<div class="ht-axis-label" style="left:${lbl.pos}%;">${UI.escape(lbl.text)}</div>`;
        });
        html += '</div>';
        html += '</div>';

        // Detail-Panel (wenn ein Punkt aktiv ist)
        if (this._activePointIndex !== null && this._activePointIndex < buckets.length) {
            html += this._renderDetailPanel(buckets[this._activePointIndex]);
        }

        container.innerHTML = html;
    },

    _calcGranularity(entries, range) {
        if (entries.length < 2) return 'day';
        const timestamps = entries.map(e => new Date(e.timestamp || 0).getTime()).filter(t => t > 0);
        if (timestamps.length < 2) return 'day';
        const span = Math.max(...timestamps) - Math.min(...timestamps);
        if (range === '24h' || span <= 48 * 60 * 60 * 1000) return 'hour';
        return 'day';
    },

    _buildBuckets(entries, granularity) {
        const bucketMap = {};
        entries.forEach(e => {
            const d = new Date(e.timestamp || 0);
            const b = _tz(d);
            let key, label, ts;
            if (granularity === 'hour') {
                key = `${b.year}-${b.month + 1}-${b.date}-${b.hours}`;
                label = d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE }) + ', ' + b.hours.toString().padStart(2, '0') + ':00';
                ts = new Date(b.year, b.month, b.date, b.hours).getTime();
            } else {
                key = `${b.year}-${b.month + 1}-${b.date}`;
                label = d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short', timeZone: TIMEZONE });
                ts = new Date(b.year, b.month, b.date, 12).getTime();
            }
            if (!bucketMap[key]) {
                bucketMap[key] = { key, label, timestamp: ts, entries: [] };
            }
            bucketMap[key].entries.push(e);
        });
        return Object.values(bucketMap).sort((a, b) => a.timestamp - b.timestamp);
    },

    _mergeCloseBuckets(buckets) {
        if (buckets.length < 2) return buckets;
        const rangeStart = buckets[0].timestamp;
        const rangeEnd = buckets[buckets.length - 1].timestamp;
        if (rangeEnd <= rangeStart) return buckets;

        const container = document.getElementById('timeline');
        const axisWidth = (container ? container.offsetWidth : 800) * 0.92;
        const maxCount = Math.max(...buckets.map(b => b.entries.length));
        const result = [buckets[0]];

        for (let i = 1; i < buckets.length; i++) {
            const prev = result[result.length - 1];
            const curr = buckets[i];

            const distPx = ((curr.timestamp - prev.timestamp) / (rangeEnd - rangeStart)) * axisWidth;
            const prevSize = Math.min(32, this._calcPointSize(prev.entries.length, maxCount));
            const currSize = Math.min(32, this._calcPointSize(curr.entries.length, maxCount));
            const minDistPx = (prevSize + currSize) / 2 + 6;

            if (distPx < minDistPx) {
                prev.entries = prev.entries.concat(curr.entries);
            } else {
                result.push(curr);
            }
        }
        return result;
    },

    _bucketPositionPercent(bucket, rangeStart, rangeEnd, totalBuckets) {
        if (totalBuckets === 1) return 50;
        if (rangeEnd === rangeStart) return 50;
        return ((bucket.timestamp - rangeStart) / (rangeEnd - rangeStart)) * 100;
    },

    _calcPointSize(count, maxCount) {
        if (maxCount <= 1) return 16;
        const minSize = 12;
        const maxSize = 32;
        const logScale = Math.log(count + 1) / Math.log(maxCount + 1);
        return Math.round(minSize + logScale * (maxSize - minSize));
    },

    _buildAxisLabels(buckets, granularity, timeOnly) {
        if (buckets.length === 0) return [];
        const maxLabels = 8;
        const labels = [];
        const rangeStart = buckets[0].timestamp;
        const rangeEnd = buckets[buckets.length - 1].timestamp;

        const getLabelText = (b) => {
            if (timeOnly) {
                // Bei Tages-Granularität: Uhrzeit des ersten Eintrags nehmen
                const ts = (granularity === 'day' && b.entries && b.entries.length > 0)
                    ? new Date(b.entries[0].timestamp || b.timestamp)
                    : new Date(b.timestamp);
                const tp = _tz(ts);
                return tp.hours.toString().padStart(2, '0') + ':' + tp.minutes.toString().padStart(2, '0');
            }
            return b.label;
        };

        if (buckets.length <= maxLabels) {
            buckets.forEach(b => {
                labels.push({ text: getLabelText(b), pos: this._bucketPositionPercent(b, rangeStart, rangeEnd, buckets.length) });
            });
        } else {
            const step = (buckets.length - 1) / (maxLabels - 1);
            for (let i = 0; i < maxLabels; i++) {
                const idx = Math.round(i * step);
                const b = buckets[idx];
                labels.push({ text: getLabelText(b), pos: this._bucketPositionPercent(b, rangeStart, rangeEnd, buckets.length) });
            }
        }
        return labels;
    },

    _thinLabels(labels, minGapPercent) {
        if (!labels || labels.length <= 1) return labels;
        const gap = minGapPercent || 8;
        const result = [labels[0]];
        for (let i = 1; i < labels.length; i++) {
            if (labels[i].pos - result[result.length - 1].pos >= gap) {
                result.push(labels[i]);
            }
        }
        return result;
    },

    _buildDayMarkers(buckets, rangeStart, rangeEnd) {
        const seen = {};
        const markers = [];
        buckets.forEach(b => {
            const d = new Date(b.timestamp);
            const bp = _tz(d);
            const dayKey = `${bp.year}-${bp.month}-${bp.date}`;
            if (!seen[dayKey]) {
                seen[dayKey] = true;
                const np = _tz(new Date());
                const todayKey = `${np.year}-${np.month}-${np.date}`;
                const yp = _tz(new Date(Date.now() - 86400000));
                const yesterdayKey = `${yp.year}-${yp.month}-${yp.date}`;
                let label;
                const dateStr = d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE });
                if (dayKey === todayKey) {
                    label = 'Heute, ' + dateStr;
                } else if (dayKey === yesterdayKey) {
                    label = 'Gestern, ' + dateStr;
                } else {
                    label = d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short', timeZone: TIMEZONE });
                }
                const pos = this._bucketPositionPercent(b, rangeStart, rangeEnd, buckets.length);
                markers.push({ text: label, pos });
            }
        });
        return markers;
    },

    _renderDetailPanel(bucket) {
        const type = this._currentIncidentType;
        const sorted = [...bucket.entries].sort((a, b) => {
            if (a.kind === 'snapshot' && b.kind !== 'snapshot') return -1;
            if (a.kind !== 'snapshot' && b.kind === 'snapshot') return 1;
            return new Date(b.timestamp || 0) - new Date(a.timestamp || 0);
        });

        let entriesHtml = '';
        sorted.forEach(e => {
            if (e.kind === 'snapshot') {
                entriesHtml += this._renderSnapshotEntry(e.data);
            } else {
                entriesHtml += this._renderArticleEntry(e.data, type, 0);
            }
        });

        return `<div class="ht-detail-panel">
            <div class="ht-detail-header">
                <span class="ht-detail-title">${UI.escape(bucket.label)} (${bucket.entries.length} Eintr${bucket.entries.length === 1 ? 'ag' : 'äge'})</span>
                <button class="ht-detail-close" onclick="App.closeTimelineDetail()">&times;</button>
            </div>
            <div class="ht-detail-content">${entriesHtml}</div>
        </div>`;
    },

    setTimelineFilter(filter) {
        this._timelineFilter = filter;
        this._activePointIndex = null;
        document.querySelectorAll('.ht-filter-btn').forEach(btn => {
            const isActive = btn.dataset.filter === filter;
            btn.classList.toggle('active', isActive);
            btn.setAttribute('aria-pressed', String(isActive));
        });
        this.rerenderTimeline();
    },

    setTimelineRange(range) {
        this._timelineRange = range;
        this._activePointIndex = null;
        document.querySelectorAll('.ht-range-btn').forEach(btn => {
            const isActive = btn.dataset.range === range;
            btn.classList.toggle('active', isActive);
            btn.setAttribute('aria-pressed', String(isActive));
        });
        this.rerenderTimeline();
    },

    openTimelineDetail(bucketIndex) {
        if (this._activePointIndex === bucketIndex) {
            this._activePointIndex = null;
        } else {
            this._activePointIndex = bucketIndex;
        }
        this.rerenderTimeline();
        this._resizeTimelineTile();
    },

    closeTimelineDetail() {
        this._activePointIndex = null;
        this.rerenderTimeline();
        this._resizeTimelineTile();
    },

    _resizeTimelineTile() {
        if (typeof LayoutManager === 'undefined' || !LayoutManager._grid) return;
        requestAnimationFrame(() => { requestAnimationFrame(() => {
            // Prüfen ob Detail-Panel oder expandierter Eintrag offen ist
            const hasDetail = document.querySelector('.ht-detail-panel') !== null;
            const hasExpanded = document.querySelector('.timeline-card .vt-entry.expanded') !== null;

            if (hasDetail || hasExpanded) {
                LayoutManager.resizeTileToContent('timeline');
            } else {
                // Zurück auf Default-Höhe
                const defaults = LayoutManager.DEFAULT_LAYOUT.find(d => d.id === 'timeline');
                if (defaults) {
                    const node = LayoutManager._grid.engine.nodes.find(
                        n => n.el && n.el.getAttribute('gs-id') === 'timeline'
                    );
                    if (node) {
                        LayoutManager._grid.update(node.el, { h: defaults.h });
                        LayoutManager._debouncedSave();
                    }
                }
            }
            // Scroll in Sicht
            const card = document.querySelector('.timeline-card');
            const main = document.querySelector('.main-content');
            if (!card || !main) return;
            const cardBottom = card.getBoundingClientRect().bottom;
            const mainBottom = main.getBoundingClientRect().bottom;
            if (cardBottom > mainBottom) {
                main.scrollBy({ top: cardBottom - mainBottom + 16, behavior: document.documentElement.dataset.a11yMotion ? 'instant' : 'smooth' });
            }
        }); });
    },

    _buildFullVerticalTimeline(filterType, searchTerm) {
        let entries = this._collectEntries(filterType, searchTerm);
        if (entries.length === 0) {
            return '<div class="ht-empty">Keine Einträge.</div>';
        }

        entries.sort((a, b) => new Date(b.timestamp || 0) - new Date(a.timestamp || 0));
        const granularity = this._calcGranularity(entries);
        const groups = this._groupByTimePeriod(entries, granularity);

        let html = '<div class="vt-timeline">';
        groups.forEach(g => {
            html += `<div class="vt-time-group">`;
            html += `<div class="vt-time-label"><span class="vt-time-label-text">${UI.escape(g.label)}</span></div>`;
            html += this._renderTimeGroupEntries(g.entries, this._currentIncidentType);
            html += `</div>`;
        });
        html += '</div>';
        return html;
    },

    /**
     * Einträge nach Zeitperiode gruppieren.
     */
    _groupByTimePeriod(entries, granularity) {
        const np = _tz(new Date());
        const todayKey = `${np.year}-${np.month}-${np.date}`;
        const yp = _tz(new Date(Date.now() - 86400000));
        const yesterdayKey = `${yp.year}-${yp.month}-${yp.date}`;

        const groups = [];
        let currentGroup = null;

        entries.forEach(entry => {
            const d = entry.timestamp ? new Date(entry.timestamp) : null;
            let key, label;

            if (!d || isNaN(d.getTime())) {
                key = 'unknown';
                label = 'Unbekannt';
            } else if (granularity === 'hour') {
                const ep = _tz(d);
                key = `${ep.year}-${ep.month}-${ep.date}-${ep.hours}`;
                label = `${ep.hours.toString().padStart(2, '0')}:00 Uhr`;
            } else {
                const ep = _tz(d);
                key = `${ep.year}-${ep.month}-${ep.date}`;
                if (key === todayKey) {
                    label = 'Heute';
                } else if (key === yesterdayKey) {
                    label = 'Gestern';
                } else {
                    label = d.toLocaleDateString('de-DE', { weekday: 'short', day: 'numeric', month: 'short', timeZone: TIMEZONE });
                }
            }

            if (!currentGroup || currentGroup.key !== key) {
                currentGroup = { key, label, entries: [] };
                groups.push(currentGroup);
            }
            currentGroup.entries.push(entry);
        });

        return groups;
    },

    /**
     * Entries einer Zeitgruppe rendern, mit Cluster-Erkennung.
     */
    _renderTimeGroupEntries(entries, type) {
        // Cluster-Erkennung: ≥4 Artikel pro Minute
        const minuteCounts = {};
        entries.forEach(e => {
            if (e.kind === 'article') {
                const mk = this._getMinuteKey(e.timestamp);
                minuteCounts[mk] = (minuteCounts[mk] || 0) + 1;
            }
        });

        const minuteRendered = {};
        let html = '';

        entries.forEach(e => {
            if (e.kind === 'snapshot') {
                html += this._renderSnapshotEntry(e.data);
            } else {
                const mk = this._getMinuteKey(e.timestamp);
                const isCluster = minuteCounts[mk] >= 4;
                const isFirstInCluster = isCluster && !minuteRendered[mk];
                if (isFirstInCluster) minuteRendered[mk] = true;
                html += this._renderArticleEntry(e.data, type, isFirstInCluster ? minuteCounts[mk] : 0);
            }
        });

        return html;
    },

    /**
     * Artikel-Eintrag für den Zeitstrahl rendern.
     */
    _renderArticleEntry(article, type, clusterCount) {
        const dateField = (type === 'research' && article.published_at)
            ? article.published_at : article.collected_at;
        const time = dateField
            ? (parseUTC(dateField) || new Date(dateField)).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE })
            : '--:--';

        const headline = article.headline_de || article.headline;
        const sourceUrl = article.source_url
            ? `<a href="${UI.escape(article.source_url)}" target="_blank" rel="noopener" onclick="event.stopPropagation()">${UI.escape(article.source)}</a>`
            : UI.escape(article.source);

        const langBadge = article.language && article.language !== 'de'
            ? `<span class="lang-badge">${article.language.toUpperCase()}</span>` : '';

        const clusterBadge = clusterCount > 0
            ? `<span class="vt-cluster-count">${clusterCount}</span>` : '';

        const content = article.content_de || article.content_original || '';
        const hasContent = content.length > 0;

        let detailHtml = '';
        if (hasContent) {
            const truncated = content.length > 400 ? content.substring(0, 400) + '...' : content;
            detailHtml = `<div class="vt-article-detail">
                <div class="vt-article-detail-content">${UI.escape(truncated)}</div>
                ${article.source_url ? `<a href="${UI.escape(article.source_url)}" target="_blank" rel="noopener" class="vt-article-detail-link" onclick="event.stopPropagation()">Artikel öffnen &rarr;</a>` : ''}
            </div>`;
        }

        return `<div class="vt-entry ${hasContent ? 'expandable' : ''}" ${hasContent ? 'onclick="App.toggleTimelineEntry(this)"' : ''}>
            <div class="vt-article-header">
                <span class="vt-article-time">${time}</span>
                <span class="vt-article-source">${sourceUrl}</span>
                ${langBadge}${clusterBadge}
            </div>
            <div class="vt-article-headline">${UI.escape(headline)}</div>
            ${detailHtml}
        </div>`;
    },

    /**
     * Snapshot/Lagebericht-Eintrag für den Zeitstrahl rendern.
     */
    _renderSnapshotEntry(snapshot) {
        const time = snapshot.created_at
            ? (parseUTC(snapshot.created_at) || new Date(snapshot.created_at)).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE })
            : '--:--';

        const stats = [];
        if (snapshot.article_count) stats.push(`${snapshot.article_count} Artikel`);
        if (snapshot.fact_check_count) stats.push(`${snapshot.fact_check_count} Fakten`);
        const statsText = stats.join(', ');

        // Vorschau: erste 200 Zeichen der Zusammenfassung
        const summaryText = snapshot.summary || '';
        const preview = summaryText.length > 200 ? summaryText.substring(0, 200) + '...' : summaryText;

        // Vollständige Zusammenfassung via UI.renderSummary
        const fullSummary = UI.renderSummary(snapshot.summary, snapshot.sources_json, this._currentIncidentType);

        return `<div class="vt-entry vt-snapshot expandable" onclick="App.toggleTimelineEntry(this)">
            <div class="vt-snapshot-header">
                <span class="vt-snapshot-badge">Lagebericht</span>
                <span class="vt-snapshot-time">${time}</span>
                <span class="vt-snapshot-stats">${UI.escape(statsText)}</span>
            </div>
            <div class="vt-snapshot-preview">${UI.escape(preview)}</div>
            <div class="vt-snapshot-detail">${fullSummary}</div>
        </div>`;
    },

    /**
     * Timeline-Eintrag auf-/zuklappen (mutual-exclusive pro Zeitgruppe).
     */
    toggleTimelineEntry(el) {
        const container = el.closest('.ht-detail-content') || el.closest('.vt-time-group');
        if (container) {
            container.querySelectorAll('.vt-entry.expanded').forEach(item => {
                if (item !== el) item.classList.remove('expanded');
            });
        }
        el.classList.toggle('expanded');
        if (el.classList.contains('expanded')) {
            requestAnimationFrame(() => {
                var scrollParent = el.closest('.ht-detail-content');
                if (scrollParent && el.classList.contains('vt-snapshot')) {
                    scrollParent.scrollTo({ top: 0, behavior: document.documentElement.dataset.a11yMotion ? 'instant' : 'smooth' });
                } else {
                    el.scrollIntoView({ behavior: document.documentElement.dataset.a11yMotion ? 'instant' : 'smooth', block: 'nearest' });
                }
            });
        }
        // Timeline-Kachel an Inhalt anpassen
        this._resizeTimelineTile();
    },

    /**
     * Minutenschlüssel für Cluster-Erkennung.
     */
    _getMinuteKey(timestamp) {
        if (!timestamp) return 'none';
        const d = new Date(timestamp);
        const p = _tz(d);
        return `${p.year}-${p.month}-${p.date}-${p.hours}-${p.minutes}`;
    },

    // === Event Handlers ===

    _getFormData() {
        const value = parseInt(document.getElementById('inc-refresh-value').value) || 15;
        const unit = parseInt(document.getElementById('inc-refresh-unit').value) || 1;
        const interval = Math.max(10, Math.min(10080, value * unit));
        return {
            title: document.getElementById('inc-title').value.trim(),
            description: document.getElementById('inc-description').value.trim() || null,
            type: document.getElementById('inc-type').value,
            refresh_mode: document.getElementById('inc-refresh-mode').value,
            refresh_interval: interval,
            retention_days: parseInt(document.getElementById('inc-retention').value) || 0,
            international_sources: document.getElementById('inc-international').checked,
            visibility: document.getElementById('inc-visibility').checked ? 'public' : 'private',
        };
    },

    _clearFormErrors(formEl) {
        formEl.querySelectorAll('.form-error').forEach(el => el.remove());
        formEl.querySelectorAll('[aria-invalid]').forEach(el => {
            el.removeAttribute('aria-invalid');
            el.removeAttribute('aria-describedby');
        });
    },

    _showFieldError(field, message) {
        field.setAttribute('aria-invalid', 'true');
        const errorId = field.id + '-error';
        field.setAttribute('aria-describedby', errorId);
        const errorEl = document.createElement('div');
        errorEl.className = 'form-error';
        errorEl.id = errorId;
        errorEl.setAttribute('role', 'alert');
        errorEl.textContent = message;
        field.parentNode.appendChild(errorEl);
    },

    async handleFormSubmit(e) {
        e.preventDefault();
        const submitBtn = document.getElementById('modal-new-submit');
        const form = document.getElementById('new-incident-form');
        this._clearFormErrors(form);

        // Validierung
        const titleField = document.getElementById('inc-title');
        if (!titleField.value.trim()) {
            this._showFieldError(titleField, 'Bitte einen Titel eingeben.');
            titleField.focus();
            return;
        }

        submitBtn.disabled = true;

        try {
            const data = this._getFormData();

            if (this._editingIncidentId) {
                // Edit-Modus: ID sichern bevor closeModal sie löscht
                const editId = this._editingIncidentId;
                await API.updateIncident(editId, data);

                // E-Mail-Subscription speichern
                await API.updateSubscription(editId, {
                    notify_email_summary: document.getElementById('inc-notify-summary').checked,
                    notify_email_new_articles: document.getElementById('inc-notify-new-articles').checked,
                    notify_email_status_change: document.getElementById('inc-notify-status-change').checked,
                });

                closeModal('modal-new');
                await this.loadIncidents();
                await this.loadIncidentDetail(editId);
                UI.showToast('Lage aktualisiert.', 'success');
            } else {
                // Create-Modus
                const incident = await API.createIncident(data);

                // E-Mail-Subscription speichern
                await API.updateSubscription(incident.id, {
                    notify_email_summary: document.getElementById('inc-notify-summary').checked,
                    notify_email_new_articles: document.getElementById('inc-notify-new-articles').checked,
                    notify_email_status_change: document.getElementById('inc-notify-status-change').checked,
                });

                closeModal('modal-new');

                await this.loadIncidents();
                await this.selectIncident(incident.id);

                // Sofort ersten Refresh starten
                this._refreshingIncidents.add(incident.id);
                this._updateRefreshButton(true);
                UI.showProgress('queued');
                await API.refreshIncident(incident.id);
                UI.showToast(`Lage "${incident.title}" angelegt. Recherche gestartet.`, 'success');
            }
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        } finally {
            submitBtn.disabled = false;
            this._editingIncidentId = null;
        }
    },

    async handleRefresh() {
        if (!this.currentIncidentId) return;
        if (this._refreshingIncidents.has(this.currentIncidentId)) {
            UI.showToast('Recherche läuft bereits...', 'warning');
            return;
        }
        try {
            this._refreshingIncidents.add(this.currentIncidentId);
            this._updateRefreshButton(true);
            UI.showProgress('queued');
            const result = await API.refreshIncident(this.currentIncidentId);
            if (result && result.status === 'skipped') {
                this._refreshingIncidents.delete(this.currentIncidentId);
                this._updateRefreshButton(false);
                UI.hideProgress();
                UI.showToast('Recherche läuft bereits oder ist in der Warteschlange.', 'warning');
            }
        } catch (err) {
            this._refreshingIncidents.delete(this.currentIncidentId);
            this._updateRefreshButton(false);
            UI.hideProgress();
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    _geoparsePolling: null,

    async triggerGeoparse() {
        if (!this.currentIncidentId) return;
        const btn = document.getElementById('geoparse-btn');
        if (btn) { btn.disabled = true; btn.textContent = 'Wird gestartet...'; }
        try {
            const result = await API.triggerGeoparse(this.currentIncidentId);
            if (result.status === 'done') {
                UI.showToast(result.message, 'info');
                if (btn) { btn.disabled = false; btn.textContent = 'Orte erkennen'; }
                return;
            }
            UI.showToast(result.message, 'info');
            this._pollGeoparse(this.currentIncidentId);
        } catch (err) {
            UI.showToast('Geoparsing fehlgeschlagen: ' + err.message, 'error');
            if (btn) { btn.disabled = false; btn.textContent = 'Orte erkennen'; }
        }
    },

    _pollGeoparse(incidentId) {
        if (this._geoparsePolling) clearInterval(this._geoparsePolling);
        const btn = document.getElementById('geoparse-btn');
        this._geoparsePolling = setInterval(async () => {
            try {
                const st = await API.getGeoparseStatus(incidentId);
                if (st.status === 'running') {
                    if (btn) btn.textContent = `${st.processed}/${st.total} Artikel...`;
                } else {
                    clearInterval(this._geoparsePolling);
                    this._geoparsePolling = null;
                    if (btn) { btn.disabled = false; btn.textContent = 'Orte erkennen'; }
                    if (st.status === 'done' && st.locations > 0) {
                        UI.showToast(`${st.locations} Orte aus ${st.processed} Artikeln erkannt`, 'success');
                        const locations = await API.getLocations(incidentId).catch(() => []);
                        UI.renderMap(locations);
                    } else if (st.status === 'done') {
                        UI.showToast('Keine neuen Orte gefunden', 'info');
                    } else if (st.status === 'error') {
                        UI.showToast('Geoparsing fehlgeschlagen: ' + (st.error || ''), 'error');
                    }
                }
            } catch {
                clearInterval(this._geoparsePolling);
                this._geoparsePolling = null;
                if (btn) { btn.disabled = false; btn.textContent = 'Orte erkennen'; }
            }
        }, 3000);
    },

    _formatInterval(minutes) {
        if (minutes >= 10080 && minutes % 10080 === 0) {
            const w = minutes / 10080;
            return w === 1 ? '1 Woche' : `${w} Wochen`;
        }
        if (minutes >= 1440 && minutes % 1440 === 0) {
            const d = minutes / 1440;
            return d === 1 ? '1 Tag' : `${d} Tage`;
        }
        if (minutes >= 60 && minutes % 60 === 0) {
            const h = minutes / 60;
            return h === 1 ? '1 Stunde' : `${h} Stunden`;
        }
        return `${minutes} Min.`;
    },

    _setIntervalFields(minutes) {
        let value, unit;
        if (minutes >= 10080 && minutes % 10080 === 0) {
            value = minutes / 10080; unit = '10080';
        } else if (minutes >= 1440 && minutes % 1440 === 0) {
            value = minutes / 1440; unit = '1440';
        } else if (minutes >= 60 && minutes % 60 === 0) {
            value = minutes / 60; unit = '60';
        } else {
            value = minutes; unit = '1';
        }
        const input = document.getElementById('inc-refresh-value');
        input.value = value;
        input.min = unit === '1' ? 10 : 1;
        document.getElementById('inc-refresh-unit').value = unit;
    },

    _refreshHistoryOpen: false,

    toggleRefreshHistory() {
        if (this._refreshHistoryOpen) {
            this.closeRefreshHistory();
        } else {
            this._openRefreshHistory();
        }
    },

    async _openRefreshHistory() {
        if (!this.currentIncidentId) return;
        const popover = document.getElementById('refresh-history-popover');
        if (!popover) return;

        this._refreshHistoryOpen = true;
        popover.style.display = 'flex';

        // Lade Refresh-Log
        const list = document.getElementById('refresh-history-list');
        list.innerHTML = '<div style="padding:12px;color:var(--text-disabled);font-size:12px;">Lade...</div>';

        try {
            const logs = await API.getRefreshLog(this.currentIncidentId, 20);
            this._renderRefreshHistory(logs);
        } catch (e) {
            list.innerHTML = '<div style="padding:12px;color:var(--error);font-size:12px;">Fehler beim Laden</div>';
        }

        // Outside-Click Listener
        setTimeout(() => {
            const handler = (e) => {
                if (!popover.contains(e.target) && !e.target.closest('.meta-updated-link')) {
                    this.closeRefreshHistory();
                    document.removeEventListener('click', handler);
                }
            };
            document.addEventListener('click', handler);
            popover._outsideHandler = handler;
        }, 0);
    },

    closeRefreshHistory() {
        this._refreshHistoryOpen = false;
        const popover = document.getElementById('refresh-history-popover');
        if (popover) {
            popover.style.display = 'none';
            if (popover._outsideHandler) {
                document.removeEventListener('click', popover._outsideHandler);
                delete popover._outsideHandler;
            }
        }
    },

    _renderRefreshHistory(logs) {
        const list = document.getElementById('refresh-history-list');
        if (!list) return;

        if (!logs || logs.length === 0) {
            list.innerHTML = '<div style="padding:12px;color:var(--text-disabled);font-size:12px;">Noch keine Refreshes durchgeführt</div>';
            return;
        }

        list.innerHTML = logs.map(log => {
            const started = parseUTC(log.started_at) || new Date(log.started_at);
            const timeStr = started.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', timeZone: TIMEZONE }) + ' ' +
                started.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE });

            let detail = '';
            if (log.status === 'completed') {
                detail = `${log.articles_found} Artikel`;
                if (log.duration_seconds != null) {
                    detail += ` in ${this._formatDuration(log.duration_seconds)}`;
                }
            } else if (log.status === 'running') {
                detail = 'Läuft...';
            } else if (log.status === 'error') {
                detail = '';
            }

            const retryInfo = log.retry_count > 0 ? ` (Versuch ${log.retry_count + 1})` : '';
            const errorHtml = log.error_message
                ? `<div class="rh-info-error" title="${log.error_message.replace(/"/g, '&quot;')}">${log.error_message}</div>`
                : '';

            return `<div class="refresh-history-entry">
                <div class="rh-status-dot ${log.status}"></div>
                <div class="rh-info">
                    <div class="rh-info-time">${timeStr}${retryInfo}</div>
                    ${detail ? `<div class="rh-info-detail">${detail}</div>` : ''}
                    ${errorHtml}
                </div>
                <span class="rh-trigger-badge ${log.trigger_type}">${log.trigger_type === 'auto' ? 'Auto' : 'Manuell'}</span>
            </div>`;
        }).join('');
    },

    _formatDuration(seconds) {
        if (seconds == null) return '';
        if (seconds < 60) return `${Math.round(seconds)}s`;
        const m = Math.floor(seconds / 60);
        const s = Math.round(seconds % 60);
        return s > 0 ? `${m}m ${s}s` : `${m}m`;
    },

    _timeAgo(date) {
        if (!date) return '';
        const now = new Date();
        const diff = Math.floor((now - date) / 1000);
        if (diff < 60) return 'gerade eben';
        if (diff < 3600) return `vor ${Math.floor(diff / 60)}m`;
        if (diff < 86400) return `vor ${Math.floor(diff / 3600)}h`;
        return `vor ${Math.floor(diff / 86400)}d`;
    },

    _updateRefreshButton(disabled) {
        const btn = document.getElementById('refresh-btn');
        if (!btn) return;
        btn.disabled = disabled;
        btn.textContent = disabled ? 'Läuft...' : 'Aktualisieren';
    },

    async handleDelete() {
        if (!this.currentIncidentId) return;
        if (!await confirmDialog('Lage wirklich löschen? Alle gesammelten Daten gehen verloren.')) return;

        try {
            await API.deleteIncident(this.currentIncidentId);
            this.currentIncidentId = null;
            if (typeof LayoutManager !== 'undefined') LayoutManager.destroy();
            document.getElementById('incident-view').style.display = 'none';
            document.getElementById('empty-state').style.display = 'flex';
            await this.loadIncidents();
            UI.showToast('Lage gelöscht.', 'success');
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    async handleEdit() {
        if (!this.currentIncidentId) return;
        const incident = this.incidents.find(i => i.id === this.currentIncidentId);
        if (!incident) return;

        this._editingIncidentId = this.currentIncidentId;

        // Formular mit aktuellen Werten füllen
        document.getElementById('inc-title').value = incident.title;
        document.getElementById('inc-description').value = incident.description || '';
        document.getElementById('inc-type').value = incident.type || 'adhoc';
        document.getElementById('inc-refresh-mode').value = incident.refresh_mode;
        App._setIntervalFields(incident.refresh_interval);
        document.getElementById('inc-retention').value = incident.retention_days;
        document.getElementById('inc-international').checked = incident.international_sources !== false && incident.international_sources !== 0;
        document.getElementById('inc-visibility').checked = incident.visibility !== 'private';
        updateVisibilityHint();
        updateSourcesHint();
        toggleTypeDefaults();
        toggleRefreshInterval();

        // Modal-Titel und Submit ändern
        document.getElementById('modal-new-title').textContent = 'Lage bearbeiten';
        document.getElementById('modal-new-submit').textContent = 'Speichern';

        // E-Mail-Subscription laden
        try {
            const sub = await API.getSubscription(this.currentIncidentId);
            document.getElementById('inc-notify-summary').checked = !!sub.notify_email_summary;
            document.getElementById('inc-notify-new-articles').checked = !!sub.notify_email_new_articles;
            document.getElementById('inc-notify-status-change').checked = !!sub.notify_email_status_change;
        } catch (e) {
            document.getElementById('inc-notify-summary').checked = false;
            document.getElementById('inc-notify-new-articles').checked = false;
            document.getElementById('inc-notify-status-change').checked = false;
        }

        openModal('modal-new');
    },

    async handleArchive() {
        if (!this.currentIncidentId) return;
        const incident = this.incidents.find(i => i.id === this.currentIncidentId);
        if (!incident) return;

        const isArchived = incident.status === 'archived';
        const action = isArchived ? 'wiederherstellen' : 'archivieren';

        if (!await confirmDialog(`Lage wirklich ${action}?`)) return;

        try {
            const newStatus = isArchived ? 'active' : 'archived';
            await API.updateIncident(this.currentIncidentId, { status: newStatus });
            await this.loadIncidents();
            await this.loadIncidentDetail(this.currentIncidentId);
            this._updateArchiveButton(newStatus);
            UI.showToast(isArchived ? 'Lage wiederhergestellt.' : 'Lage archiviert.', 'success');
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    _updateSidebarDot(incidentId, mode) {
        const dot = document.getElementById(`dot-${incidentId}`);
        if (!dot) return;
        const incident = this.incidents.find(i => i.id === incidentId);
        const baseClass = incident ? (incident.status === 'active' ? 'active' : 'archived') : 'active';

        if (mode === 'error') {
            dot.className = `incident-dot refresh-error`;
            setTimeout(() => {
                dot.className = `incident-dot ${baseClass}`;
            }, 3000);
        } else if (this._refreshingIncidents.has(incidentId)) {
            dot.className = `incident-dot refreshing`;
        } else {
            dot.className = `incident-dot ${baseClass}`;
        }
    },

    _updateArchiveButton(status) {
        const btn = document.getElementById('archive-incident-btn');
        if (!btn) return;
        btn.textContent = status === 'archived' ? 'Wiederherstellen' : 'Archivieren';
    },

    // === WebSocket Handlers ===

    handleStatusUpdate(msg) {
        const status = msg.data.status;
        if (status === 'retrying') {
            // Retry-Status → Fehleranzeige mit Retry-Info
            if (msg.incident_id === this.currentIncidentId) {
                UI.showProgressError('', true, msg.data.delay || 120);
            }
            return;
        }
        if (status !== 'idle') {
            this._refreshingIncidents.add(msg.incident_id);
        }
        this._updateSidebarDot(msg.incident_id);
        if (msg.incident_id === this.currentIncidentId) {
            UI.showProgress(status, msg.data);
            this._updateRefreshButton(status !== 'idle');
        }
    },

    async handleRefreshComplete(msg) {
        this._refreshingIncidents.delete(msg.incident_id);
        this._updateSidebarDot(msg.incident_id);

        if (msg.incident_id === this.currentIncidentId) {
            this._updateRefreshButton(false);
            await this.loadIncidentDetail(msg.incident_id);

            // Progress-Bar nicht sofort ausblenden — auf refresh_summary warten
            this._pendingComplete = msg.incident_id;
            // Fallback: Wenn nach 5s kein refresh_summary kommt → direkt ausblenden
            if (this._pendingCompleteTimer) clearTimeout(this._pendingCompleteTimer);
            this._pendingCompleteTimer = setTimeout(() => {
                if (this._pendingComplete === msg.incident_id) {
                    this._pendingComplete = null;
                    UI.hideProgress();
                }
            }, 5000);
        }

        await this.loadIncidents();
    },



    handleRefreshSummary(msg) {
        const d = msg.data;
        const title = d.incident_title || 'Lage';

        // Abschluss-Animation auslösen wenn pending
        if (this._pendingComplete === msg.incident_id) {
            if (this._pendingCompleteTimer) {
                clearTimeout(this._pendingCompleteTimer);
                this._pendingCompleteTimer = null;
            }
            this._pendingComplete = null;
            UI.showProgressComplete(d);
            setTimeout(() => UI.hideProgress(), 4000);
        }

        // Toast-Text zusammenbauen
        const parts = [];
        if (d.new_articles > 0) {
            parts.push(`${d.new_articles} neue Meldung${d.new_articles !== 1 ? 'en' : ''}`);
        }
        if (d.confirmed_count > 0) {
            parts.push(`${d.confirmed_count} bestätigt`);
        }
        if (d.contradicted_count > 0) {
            parts.push(`${d.contradicted_count} widersprochen`);
        }
        if (d.status_changes && d.status_changes.length > 0) {
            parts.push(`${d.status_changes.length} Statusänderung${d.status_changes.length !== 1 ? 'en' : ''}`);
        }

        const summaryText = parts.length > 0
            ? parts.join(', ')
            : 'Keine neuen Entwicklungen';

        // 1 Toast statt 5-10
        UI.showToast(`Recherche abgeschlossen: ${summaryText}`, 'success', 6000);

        // Ins NotificationCenter eintragen
        NotificationCenter.add({
            incident_id: msg.incident_id,
            title: title,
            text: `Recherche: ${summaryText}`,
            icon: d.contradicted_count > 0 ? 'warning' : 'success',
        });

        // Status-Änderungen als separate Einträge
        if (d.status_changes) {
            d.status_changes.forEach(sc => {
                const oldLabel = this._translateStatus(sc.old_status);
                const newLabel = this._translateStatus(sc.new_status);
                NotificationCenter.add({
                    incident_id: msg.incident_id,
                    title: title,
                    text: `${sc.claim}: ${oldLabel} \u2192 ${newLabel}`,
                    icon: sc.new_status === 'contradicted' || sc.new_status === 'disputed' ? 'error' : 'success',
                });
            });
        }

        // Sidebar-Dot blinken
        const dot = document.getElementById(`dot-${msg.incident_id}`);
        if (dot) {
            dot.classList.add('has-notification');
            setTimeout(() => dot.classList.remove('has-notification'), 10000);
        }
    },

    _translateStatus(status) {
        const map = {
            confirmed: 'Bestätigt',
            established: 'Gesichert',
            unconfirmed: 'Unbestätigt',
            contradicted: 'Widersprochen',
            disputed: 'Umstritten',
            developing: 'In Entwicklung',
            unverified: 'Ungeprüft',
        };
        return map[status] || status;
    },

    handleRefreshError(msg) {
        this._refreshingIncidents.delete(msg.incident_id);
        this._updateSidebarDot(msg.incident_id, 'error');
        if (msg.incident_id === this.currentIncidentId) {
            this._updateRefreshButton(false);
            // Pending-Complete aufräumen
            if (this._pendingCompleteTimer) {
                clearTimeout(this._pendingCompleteTimer);
                this._pendingCompleteTimer = null;
            }
            this._pendingComplete = null;
            UI.showProgressError(msg.data.error, false);
        }
        UI.showToast(`Recherche-Fehler: ${msg.data.error}`, 'error');
    },

    handleRefreshCancelled(msg) {
        this._refreshingIncidents.delete(msg.incident_id);
        this._updateSidebarDot(msg.incident_id);
        if (msg.incident_id === this.currentIncidentId) {
            this._updateRefreshButton(false);
            if (this._pendingCompleteTimer) {
                clearTimeout(this._pendingCompleteTimer);
                this._pendingCompleteTimer = null;
            }
            this._pendingComplete = null;
            UI.hideProgress();
        }
        UI.showToast('Recherche abgebrochen.', 'info');
    },

    async cancelRefresh() {
        if (!this.currentIncidentId) return;
        const ok = await confirmDialog('Laufende Recherche abbrechen?');
        if (!ok) return;

        const btn = document.getElementById('progress-cancel-btn');
        if (btn) {
            btn.textContent = 'Wird abgebrochen...';
            btn.disabled = true;
        }

        try {
            await API.cancelRefresh(this.currentIncidentId);
        } catch (err) {
            UI.showToast('Abbrechen fehlgeschlagen: ' + err.message, 'error');
            if (btn) {
                btn.textContent = 'Abbrechen';
                btn.disabled = false;
            }
        }
    },

    // === Export ===

    toggleExportDropdown(event) {
        event.stopPropagation();
        const menu = document.getElementById('export-dropdown-menu');
        if (!menu) return;
        const isOpen = menu.classList.toggle('show');
        const btn = menu.previousElementSibling;
        if (btn) btn.setAttribute('aria-expanded', String(isOpen));
    },

    _closeExportDropdown() {
        const menu = document.getElementById('export-dropdown-menu');
        if (menu) {
            menu.classList.remove('show');
            const btn = menu.previousElementSibling;
            if (btn) btn.setAttribute('aria-expanded', 'false');
        }
    },

    async exportIncident(format, scope) {
        this._closeExportDropdown();
        if (!this.currentIncidentId) return;
        try {
            const response = await API.exportIncident(this.currentIncidentId, format, scope);
            if (!response.ok) {
                const err = await response.json().catch(() => ({}));
                throw new Error(err.detail || 'Fehler ' + response.status);
            }
            const blob = await response.blob();
            const disposition = response.headers.get('Content-Disposition') || '';
            let filename = 'export.' + format;
            const match = disposition.match(/filename="?([^"]+)"?/);
            if (match) filename = match[1];
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
            UI.showToast('Export heruntergeladen', 'success');
        } catch (err) {
            UI.showToast('Export fehlgeschlagen: ' + err.message, 'error');
        }
    },

    printIncident() {
        this._closeExportDropdown();
        window.print();
    },

    // === Sidebar-Stats ===

    async updateSidebarStats() {
        try {
            const stats = await API.getSourceStats();
            const srcCount = document.getElementById('stat-sources-count');
            const artCount = document.getElementById('stat-articles-count');
            if (srcCount) srcCount.textContent = `${stats.total_sources} Quellen`;
            if (artCount) artCount.textContent = `${stats.total_articles} Artikel`;
        } catch {
            // Fallback: aus Lagen berechnen
            const totalArticles = this.incidents.reduce((sum, i) => sum + i.article_count, 0);
            const totalSources = this.incidents.reduce((sum, i) => sum + i.source_count, 0);
            const srcCount = document.getElementById('stat-sources-count');
            const artCount = document.getElementById('stat-articles-count');
            if (srcCount) srcCount.textContent = `${totalSources} Quellen`;
            if (artCount) artCount.textContent = `${totalArticles} Artikel`;
        }
    },

    // === Soft-Refresh (F5) ===

    async softRefresh() {
        try {
            await this.loadIncidents();
            if (this.currentIncidentId) {
                await this.selectIncident(this.currentIncidentId);
            }
            UI.showToast('Daten aktualisiert.', 'success', 2000);
        } catch (err) {
            UI.showToast('Aktualisierung fehlgeschlagen: ' + err.message, 'error');
        }
    },

    // === Feedback ===

    openFeedback() {
        const form = document.getElementById('feedback-form');
        if (form) form.reset();
        const counter = document.getElementById('fb-char-count');
        if (counter) counter.textContent = '0';
        openModal('modal-feedback');
    },

    async submitFeedback(e) {
        e.preventDefault();
        const form = document.getElementById('feedback-form');
        this._clearFormErrors(form);

        const btn = document.getElementById('fb-submit-btn');
        const category = document.getElementById('fb-category').value;
        const msgField = document.getElementById('fb-message');
        const message = msgField.value.trim();

        if (message.length < 10) {
            this._showFieldError(msgField, 'Bitte mindestens 10 Zeichen eingeben.');
            msgField.focus();
            return;
        }

        btn.disabled = true;
        btn.textContent = 'Wird gesendet...';
        try {
            await API.sendFeedback({ category, message });
            closeModal('modal-feedback');
            UI.showToast('Feedback gesendet. Vielen Dank!', 'success');
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        } finally {
            btn.disabled = false;
            btn.textContent = 'Absenden';
        }
    },

    // === Sidebar Sektionen ein-/ausklappen ===

    toggleSidebarSection(sectionId) {
        const list = document.getElementById(sectionId);
        if (!list) return;
        const chevron = document.getElementById('chevron-' + sectionId);
        const isHidden = list.style.display === 'none';
        list.style.display = isHidden ? '' : 'none';
        if (chevron) {
            chevron.classList.toggle('open', isHidden);
        }
        // aria-expanded auf dem Section-Title synchronisieren
        const title = chevron ? chevron.closest('.sidebar-section-title') : null;
        if (title) title.setAttribute('aria-expanded', String(isHidden));
    },

    // === Quellenverwaltung ===

    async openSourceManagement() {
        openModal('modal-sources');
        await this.loadSources();
    },

    async loadSources() {
        try {
            const [sources, stats, myExclusions] = await Promise.all([
                API.listSources(),
                API.getSourceStats(),
                API.getMyExclusions(),
            ]);
            this._allSources = sources;
            this._sourcesOnly = sources.filter(s => s.source_type !== 'excluded');
            this._myExclusions = myExclusions || [];

            this.renderSourceStats(stats);
            this.renderSourceList();
        } catch (err) {
            UI.showToast('Fehler beim Laden der Quellen: ' + err.message, 'error');
        }
    },

    renderSourceStats(stats) {
        const bar = document.getElementById('sources-stats-bar');
        if (!bar) return;

        const rss = stats.by_type.rss_feed || { count: 0, articles: 0 };
        const web = stats.by_type.web_source || { count: 0, articles: 0 };
        const excluded = this._myExclusions.length;

        bar.innerHTML = `
            <span class="sources-stat-item"><span class="sources-stat-value">${rss.count}</span> RSS-Feeds</span>
            <span class="sources-stat-item"><span class="sources-stat-value">${web.count}</span> Web-Quellen</span>
            <span class="sources-stat-item"><span class="sources-stat-value">${excluded}</span> Ausgeschlossen</span>
            <span class="sources-stat-item"><span class="sources-stat-value">${stats.total_articles}</span> Artikel gesamt</span>
        `;
    },

    /**
     * Quellen nach Domain gruppiert rendern.
     */
    renderSourceList() {
        const list = document.getElementById('sources-list');
        if (!list) return;

        // Filter anwenden
        const typeFilter = document.getElementById('sources-filter-type')?.value || '';
        const catFilter = document.getElementById('sources-filter-category')?.value || '';
        const search = (document.getElementById('sources-search')?.value || '').toLowerCase();

        // Alle Quellen nach Domain gruppieren
        const groups = new Map();
        const excludedDomains = new Set();
        const excludedNotes = {};

        // User-Ausschlüsse sammeln
        this._myExclusions.forEach(e => {
            const domain = (e.domain || '').toLowerCase();
            if (domain) {
                excludedDomains.add(domain);
                excludedNotes[domain] = e.notes || '';
            }
        });

        // Feeds nach Domain gruppieren
        this._sourcesOnly.forEach(s => {
            const domain = (s.domain || '').toLowerCase() || `_single_${s.id}`;
            if (!groups.has(domain)) groups.set(domain, []);
            groups.get(domain).push(s);
        });

        // Ausgeschlossene Domains die keine Feeds haben auch als Gruppe
        this._myExclusions.forEach(e => {
            const domain = (e.domain || '').toLowerCase();
            if (domain && !groups.has(domain)) {
                groups.set(domain, []);
            }
        });

        // Filter auf Gruppen anwenden
        let filteredGroups = [];
        for (const [domain, feeds] of groups) {
            const isExcluded = excludedDomains.has(domain);
            const isGlobal = feeds.some(f => f.is_global);

            // Typ-Filter
            if (typeFilter === 'excluded' && !isExcluded) continue;
            if (typeFilter && typeFilter !== 'excluded') {
                const hasMatchingType = feeds.some(f => f.source_type === typeFilter);
                if (!hasMatchingType) continue;
            }

            // Kategorie-Filter
            if (catFilter) {
                const hasMatchingCat = feeds.some(f => f.category === catFilter);
                if (!hasMatchingCat) continue;
            }

            // Suche
            if (search) {
                const groupText = feeds.map(f =>
                    `${f.name} ${f.domain || ''} ${f.url || ''} ${f.notes || ''}`
                ).join(' ').toLowerCase() + ' ' + domain;
                if (!groupText.includes(search)) continue;
            }

            filteredGroups.push({ domain, feeds, isExcluded, isGlobal });
        }

        if (filteredGroups.length === 0) {
            list.innerHTML = '<div style="padding:24px;text-align:center;font-size:13px;color:var(--text-disabled);">Keine Quellen gefunden</div>';
            return;
        }

        // Sortierung: Aktive zuerst (alphabetisch), dann ausgeschlossene
        filteredGroups.sort((a, b) => {
            if (a.isExcluded !== b.isExcluded) return a.isExcluded ? 1 : -1;
            return a.domain.localeCompare(b.domain);
        });

        list.innerHTML = filteredGroups.map(g =>
            UI.renderSourceGroup(g.domain, g.feeds, g.isExcluded, excludedNotes[g.domain] || '', g.isGlobal)
        ).join('');

        // Erweiterte Gruppen wiederherstellen
        this._expandedGroups.forEach(domain => {
            const feedsEl = list.querySelector(`.source-group-feeds[data-domain="${CSS.escape(domain)}"]`);
            if (feedsEl) {
                feedsEl.classList.add('expanded');
                const header = feedsEl.previousElementSibling;
                if (header) header.classList.add('expanded');
            }
        });
    },

    filterSources() {
        this.renderSourceList();
    },

    /**
     * Domain-Gruppe auf-/zuklappen.
     */
    toggleSourceOverview() {
        const content = document.getElementById('source-overview-content');
        const chevron = document.getElementById('source-overview-chevron');
        if (!content) return;
        const isHidden = content.style.display === 'none';
        content.style.display = isHidden ? '' : 'none';
        if (chevron) {
            chevron.classList.toggle('open', isHidden);
            chevron.title = isHidden ? 'Einklappen' : 'Aufklappen';
        }
        // aria-expanded auf dem Header-Toggle synchronisieren
        const header = chevron ? chevron.closest('[role="button"]') : null;
        if (header) header.setAttribute('aria-expanded', String(isHidden));
        // gridstack-Kachel an Inhalt anpassen (doppelter rAF für vollständiges Layout)
        if (typeof LayoutManager !== 'undefined' && LayoutManager._grid) {
            if (isHidden) {
                // Aufgeklappt → Inhalt muss erst layouten
                requestAnimationFrame(() => requestAnimationFrame(() => {
                    LayoutManager.resizeTileToContent('quellen');
                }));
            } else {
                // Zugeklappt → auf Default-Höhe zurück
                const defaults = LayoutManager.DEFAULT_LAYOUT.find(d => d.id === 'quellen');
                if (defaults) {
                    const node = LayoutManager._grid.engine.nodes.find(
                        n => n.el && n.el.getAttribute('gs-id') === 'quellen'
                    );
                    if (node) {
                        LayoutManager._grid.update(node.el, { h: defaults.h });
                        LayoutManager._debouncedSave();
                    }
                }
            }
        }
    },

    toggleGroup(domain) {
        const list = document.getElementById('sources-list');
        if (!list) return;
        const feedsEl = list.querySelector(`.source-group-feeds[data-domain="${CSS.escape(domain)}"]`);
        if (!feedsEl) return;

        const isExpanded = feedsEl.classList.toggle('expanded');
        const header = feedsEl.previousElementSibling;
        if (header) {
            header.classList.toggle('expanded', isExpanded);
            header.setAttribute('aria-expanded', String(isExpanded));
        }

        if (isExpanded) {
            this._expandedGroups.add(domain);
        } else {
            this._expandedGroups.delete(domain);
        }
    },

    /**
     * Domain ausschließen (aus dem Inline-Formular).
     */
    async blockDomain() {
        const input = document.getElementById('block-domain-input');
        const domain = (input?.value || '').trim();
        if (!domain) {
            UI.showToast('Domain ist erforderlich.', 'warning');
            return;
        }

        const notes = (document.getElementById('block-domain-notes')?.value || '').trim() || null;

        try {
            await API.blockDomain(domain, notes);
            UI.showToast(`${domain} ausgeschlossen.`, 'success');
            this.showBlockDomainDialog(false);
            await this.loadSources();
            this.updateSidebarStats();
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    /**
     * Faktencheck-Filter umschalten.
     */
    toggleFactCheckFilter(status) {
        const checkbox = document.querySelector(`.fc-dropdown-item[data-status="${status}"] input`);
        if (!checkbox) return;
        const isActive = checkbox.checked;

        document.querySelectorAll(`.factcheck-item[data-fc-status="${status}"]`).forEach(el => {
            el.style.display = isActive ? '' : 'none';
        });
    },

    toggleFcDropdown(e) {
        e.stopPropagation();
        const btn = e.target.closest('.fc-dropdown-toggle');
        const menu = btn ? btn.nextElementSibling : document.getElementById('fc-dropdown-menu');
        if (!menu) return;
        const isOpen = menu.classList.toggle('open');
        if (btn) btn.setAttribute('aria-expanded', String(isOpen));
        if (isOpen) {
            const close = (ev) => {
                if (!menu.contains(ev.target)) {
                    menu.classList.remove('open');
                    document.removeEventListener('click', close);
                }
            };
            setTimeout(() => document.addEventListener('click', close), 0);
        }
    },

    filterModalTimeline(searchTerm) {
        const filterBtn = document.querySelector('.ht-modal-filter-btn.active');
        const filterType = filterBtn ? filterBtn.dataset.filter : 'all';
        const body = document.getElementById('content-viewer-body');
        if (!body) return;
        body.innerHTML = this._buildFullVerticalTimeline(filterType, (searchTerm || '').toLowerCase());
    },

    filterModalTimelineType(filterType, btn) {
        document.querySelectorAll('.ht-modal-filter-btn').forEach(b => b.classList.remove('active'));
        if (btn) btn.classList.add('active');
        const searchInput = document.querySelector('#content-viewer-header-extra .timeline-filter-input');
        const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
        const body = document.getElementById('content-viewer-body');
        if (!body) return;
        body.innerHTML = this._buildFullVerticalTimeline(filterType, searchTerm);
    },

    /**
     * Domain direkt ausschließen (aus der Gruppenliste).
     */
    async blockDomainDirect(domain) {
        if (!await confirmDialog(`"${domain}" wirklich ausschließen? Artikel dieser Domain werden bei allen deinen Recherchen ignoriert. Dies betrifft nicht andere Nutzer deiner Organisation.`)) return;

        try {
            await API.blockDomain(domain);
            UI.showToast(`${domain} ausgeschlossen.`, 'success');
            await this.loadSources();
            this.updateSidebarStats();
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    /**
     * Domain-Ausschluss aufheben.
     */
    async unblockDomain(domain) {
        try {
            await API.unblockDomain(domain);
            UI.showToast(`${domain} Ausschluss aufgehoben.`, 'success');
            await this.loadSources();
            this.updateSidebarStats();
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    /**
     * Alle Quellen einer Domain löschen.
     */
    async deleteDomain(domain) {
        if (!await confirmDialog(`Alle Quellen von "${domain}" wirklich löschen?`)) return;

        try {
            await API.deleteDomain(domain);
            UI.showToast(`${domain} gelöscht.`, 'success');
            await this.loadSources();
            this.updateSidebarStats();
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    /**
     * Einzelnen Feed löschen.
     */
    async deleteSingleFeed(sourceId) {
        try {
            await API.deleteSource(sourceId);
            this._allSources = this._allSources.filter(s => s.id !== sourceId);
            this._sourcesOnly = this._sourcesOnly.filter(s => s.id !== sourceId);
            this.renderSourceList();
            this.updateSidebarStats();
            UI.showToast('Feed gelöscht.', 'success');
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    /**
     * "Domain ausschließen" Dialog ein-/ausblenden.
     */
    showBlockDomainDialog(show) {
        const form = document.getElementById('sources-block-form');
        if (!form) return;

        if (show === undefined || show === true) {
            form.style.display = 'block';
            document.getElementById('block-domain-input').value = '';
            document.getElementById('block-domain-notes').value = '';
            // Add-Form ausblenden
            const addForm = document.getElementById('sources-add-form');
            if (addForm) addForm.style.display = 'none';
        } else {
            form.style.display = 'none';
        }
    },

    _discoveredData: null,

    toggleSourceForm(show) {
        const form = document.getElementById('sources-add-form');
        if (!form) return;

        if (show === undefined) {
            show = form.style.display === 'none';
        }

        form.style.display = show ? 'block' : 'none';

        if (show) {
            this._editingSourceId = null;
            this._discoveredData = null;
            document.getElementById('src-discover-url').value = '';
            document.getElementById('src-discovery-result').style.display = 'none';
            document.getElementById('src-discover-btn').disabled = false;
            document.getElementById('src-discover-btn').textContent = 'Erkennen';
            // Save-Button Text zurücksetzen
            const saveBtn = document.querySelector('#src-discovery-result .sources-discovery-actions .btn-primary');
            if (saveBtn) saveBtn.textContent = 'Speichern';
            // Block-Form ausblenden
            const blockForm = document.getElementById('sources-block-form');
            if (blockForm) blockForm.style.display = 'none';
        } else {
            // Beim Schließen: Bearbeitungsmodus zurücksetzen
            this._editingSourceId = null;
            const saveBtn = document.querySelector('#src-discovery-result .sources-discovery-actions .btn-primary');
            if (saveBtn) saveBtn.textContent = 'Speichern';
        }
    },

    async discoverSource() {
        const urlInput = document.getElementById('src-discover-url');
        const url = urlInput.value.trim();
        if (!url) {
            UI.showToast('Bitte URL oder Domain eingeben.', 'warning');
            return;
        }

        // Prüfen ob Domain ausgeschlossen ist
        const inputDomain = url.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0].toLowerCase();
        const isBlocked = inputDomain && this._myExclusions.some(e => (e.domain || '').toLowerCase() === inputDomain);

        if (isBlocked) {
            if (!await confirmDialog(`"${inputDomain}" ist ausgeschlossen. Trotzdem hinzufügen? Der Ausschluss wird dabei aufgehoben.`)) return;
            await API.unblockDomain(inputDomain);
        }

        const btn = document.getElementById('src-discover-btn');
        btn.disabled = true;
        btn.textContent = 'Suche Feeds...';

        try {
            const result = await API.discoverMulti(url);

            if (result.fallback_single) {
                this._discoveredData = {
                    name: result.domain,
                    domain: result.domain,
                    category: result.category,
                    source_type: result.total_found > 0 ? 'rss_feed' : 'web_source',
                    rss_url: result.sources.length > 0 ? result.sources[0].url : null,
                };
                if (result.sources.length > 0) {
                    this._discoveredData.name = result.sources[0].name;
                }

                document.getElementById('src-name').value = this._discoveredData.name || '';
                document.getElementById('src-category').value = this._discoveredData.category || 'sonstige';
                document.getElementById('src-domain').value = this._discoveredData.domain || '';
                document.getElementById('src-notes').value = '';

                const typeLabel = this._discoveredData.source_type === 'rss_feed' ? 'RSS-Feed' : 'Web-Quelle';
                document.getElementById('src-type-display').value = typeLabel;

                const rssGroup = document.getElementById('src-rss-url-group');
                const rssInput = document.getElementById('src-rss-url');
                if (this._discoveredData.rss_url) {
                    rssInput.value = this._discoveredData.rss_url;
                    rssGroup.style.display = 'block';
                } else {
                    rssInput.value = '';
                    rssGroup.style.display = 'none';
                }

                document.getElementById('src-discovery-result').style.display = 'block';

                if (result.added_count > 0) {
                    UI.showToast(`${result.domain}: Feed wurde automatisch hinzugefügt.`, 'success');
                    this.toggleSourceForm(false);
                    await this.loadSources();
                } else if (result.total_found === 0) {
                    UI.showToast('Kein RSS-Feed gefunden. Als Web-Quelle speichern?', 'info');
                } else {
                    UI.showToast('Feed bereits vorhanden.', 'info');
                }
            } else {
                document.getElementById('src-discovery-result').style.display = 'none';

                if (result.added_count > 0) {
                    UI.showToast(`${result.domain}: ${result.added_count} Feeds hinzugefügt` +
                        (result.skipped_count > 0 ? ` (${result.skipped_count} bereits vorhanden)` : ''),
                        'success');
                } else if (result.skipped_count > 0) {
                    UI.showToast(`${result.domain}: Alle ${result.skipped_count} Feeds bereits vorhanden.`, 'info');
                } else {
                    UI.showToast(`${result.domain}: Keine relevanten Feeds gefunden.`, 'info');
                }

                this.toggleSourceForm(false);
                await this.loadSources();
            }
        } catch (err) {
            UI.showToast('Erkennung fehlgeschlagen: ' + err.message, 'error');
        } finally {
            btn.disabled = false;
            btn.textContent = 'Erkennen';
        }
    },

    editSource(id) {
        const source = this._sourcesOnly.find(s => s.id === id);
        if (!source) {
            UI.showToast('Quelle nicht gefunden.', 'error');
            return;
        }

        this._editingSourceId = id;

        // Formular öffnen falls geschlossen (direkt, ohne toggleSourceForm das _editingSourceId zurücksetzt)
        const form = document.getElementById('sources-add-form');
        if (form) {
            form.style.display = 'block';
            const blockForm = document.getElementById('sources-block-form');
            if (blockForm) blockForm.style.display = 'none';
        }

        // Discovery-URL mit vorhandener URL/Domain befüllen
        const discoverUrlInput = document.getElementById('src-discover-url');
        if (discoverUrlInput) {
            discoverUrlInput.value = source.url || source.domain || '';
        }

        // Discovery-Ergebnis anzeigen und Felder befüllen
        document.getElementById('src-discovery-result').style.display = 'block';
        document.getElementById('src-name').value = source.name || '';
        document.getElementById('src-category').value = source.category || 'sonstige';
        document.getElementById('src-notes').value = source.notes || '';
        document.getElementById('src-domain').value = source.domain || '';

        const typeLabel = source.source_type === 'rss_feed' ? 'RSS-Feed' : 'Web-Quelle';
        document.getElementById('src-type-display').value = typeLabel;

        const rssGroup = document.getElementById('src-rss-url-group');
        const rssInput = document.getElementById('src-rss-url');
        if (source.url) {
            rssInput.value = source.url;
            rssGroup.style.display = 'block';
        } else {
            rssInput.value = '';
            rssGroup.style.display = 'none';
        }

        // _discoveredData setzen damit saveSource() die richtigen Werte nutzt
        this._discoveredData = {
            name: source.name,
            domain: source.domain,
            category: source.category,
            source_type: source.source_type,
            rss_url: source.url,
        };

        // Submit-Button-Text ändern
        const saveBtn = document.querySelector('#src-discovery-result .sources-discovery-actions .btn-primary');
        if (saveBtn) saveBtn.textContent = 'Quelle speichern';

        // Zum Formular scrollen
        if (form) form.scrollIntoView({ behavior: 'smooth', block: 'start' });
    },

    async saveSource() {
        const name = document.getElementById('src-name').value.trim();
        if (!name) {
            UI.showToast('Name ist erforderlich. Bitte erst "Erkennen" klicken.', 'warning');
            return;
        }

        const discovered = this._discoveredData || {};
        const data = {
            name,
            source_type: discovered.source_type || 'web_source',
            category: document.getElementById('src-category').value,
            url: discovered.rss_url || null,
            domain: document.getElementById('src-domain').value.trim() || discovered.domain || null,
            notes: document.getElementById('src-notes').value.trim() || null,
        };

        if (!data.domain && discovered.domain) {
            data.domain = discovered.domain;
        }

        try {
            if (this._editingSourceId) {
                await API.updateSource(this._editingSourceId, data);
                UI.showToast('Quelle aktualisiert.', 'success');
            } else {
                await API.createSource(data);
                UI.showToast('Quelle hinzugefügt.', 'success');
            }

            this.toggleSourceForm(false);
            await this.loadSources();
            this.updateSidebarStats();
        } catch (err) {
            UI.showToast('Fehler: ' + err.message, 'error');
        }
    },

    logout() {
        localStorage.removeItem('osint_token');
        localStorage.removeItem('osint_username');
        this._sessionWarningShown = false;
        WS.disconnect();
        window.location.href = '/';
    },
};

// === Barrierefreier Bestätigungsdialog ===

function confirmDialog(message) {
    return new Promise((resolve) => {
        // Overlay erstellen
        const overlay = document.createElement('div');
        overlay.className = 'modal-overlay active';
        overlay.setAttribute('role', 'alertdialog');
        overlay.setAttribute('aria-modal', 'true');
        overlay.setAttribute('aria-labelledby', 'confirm-dialog-msg');

        const modal = document.createElement('div');
        modal.className = 'modal';
        modal.style.maxWidth = '420px';
        modal.innerHTML = `
            <div class="modal-header">
                <div class="modal-title">Bestätigung</div>
            </div>
            <div class="modal-body" style="padding:16px 24px;">
                <p id="confirm-dialog-msg" style="margin:0;font-size:14px;color:var(--text-primary);line-height:1.5;">${message.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="confirm-cancel">Abbrechen</button>
                <button class="btn btn-primary" id="confirm-ok">Bestätigen</button>
            </div>
        `;
        overlay.appendChild(modal);
        document.body.appendChild(overlay);

        const previousFocus = document.activeElement;

        const cleanup = (result) => {
            releaseFocus(overlay);
            overlay.remove();
            if (previousFocus) previousFocus.focus();
            resolve(result);
        };

        modal.querySelector('#confirm-cancel').addEventListener('click', () => cleanup(false));
        modal.querySelector('#confirm-ok').addEventListener('click', () => cleanup(true));
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) cleanup(false);
        });
        overlay.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') cleanup(false);
        });

        trapFocus(overlay);
    });
}

// === Globale Hilfsfunktionen ===

// --- Focus-Trap für Modals (WCAG 2.4.3) ---
const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

function trapFocus(modalEl) {
    const handler = (e) => {
        if (e.key !== 'Tab') return;
        const focusable = Array.from(modalEl.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => el.offsetParent !== null);
        if (focusable.length === 0) return;
        const first = focusable[0];
        const last = focusable[focusable.length - 1];
        if (e.shiftKey && document.activeElement === first) {
            e.preventDefault();
            last.focus();
        } else if (!e.shiftKey && document.activeElement === last) {
            e.preventDefault();
            first.focus();
        }
    };
    modalEl._focusTrapHandler = handler;
    modalEl.addEventListener('keydown', handler);
    // Fokus auf erstes Element setzen
    requestAnimationFrame(() => {
        const focusable = Array.from(modalEl.querySelectorAll(FOCUSABLE_SELECTOR)).filter(el => el.offsetParent !== null);
        if (focusable.length > 0) focusable[0].focus();
    });
}

function releaseFocus(modalEl) {
    if (modalEl._focusTrapHandler) {
        modalEl.removeEventListener('keydown', modalEl._focusTrapHandler);
        delete modalEl._focusTrapHandler;
    }
}

function openModal(id) {
    if (id === 'modal-new' && !App._editingIncidentId) {
        // Create-Modus: Formular zurücksetzen
        document.getElementById('new-incident-form').reset();
        document.getElementById('modal-new-title').textContent = 'Neue Lage anlegen';
        document.getElementById('modal-new-submit').textContent = 'Lage anlegen';
        // E-Mail-Checkboxen zuruecksetzen
        document.getElementById('inc-notify-summary').checked = false;
        document.getElementById('inc-notify-new-articles').checked = false;
        document.getElementById('inc-notify-status-change').checked = false;
        toggleTypeDefaults();
        toggleRefreshInterval();
    }
    const modal = document.getElementById(id);
    modal._previousFocus = document.activeElement;
    modal.classList.add('active');
    trapFocus(modal);
}

function closeModal(id) {
    const modal = document.getElementById(id);
    releaseFocus(modal);
    modal.classList.remove('active');
    if (modal._previousFocus) {
        modal._previousFocus.focus();
        delete modal._previousFocus;
    }
    if (id === 'modal-new') {
        App._editingIncidentId = null;
        document.getElementById('modal-new-title').textContent = 'Neue Lage anlegen';
        document.getElementById('modal-new-submit').textContent = 'Lage anlegen';
    }
}

function openContentModal(title, sourceElementId) {
    const source = document.getElementById(sourceElementId);
    if (!source) return;

    document.getElementById('content-viewer-title').textContent = title;
    const body = document.getElementById('content-viewer-body');
    const headerExtra = document.getElementById('content-viewer-header-extra');
    headerExtra.innerHTML = '';

    if (sourceElementId === 'factcheck-list') {
        // Faktencheck: Filter in den Modal-Header, Liste in den Body
        const filters = document.getElementById('fc-filters');
        if (filters && filters.innerHTML.trim()) {
            headerExtra.innerHTML = `<div class="fc-filter-bar">${filters.innerHTML}</div>`;
        }
        body.innerHTML = source.innerHTML;
        // Filter im Modal auf Modal-Items umleiten
        headerExtra.querySelectorAll('.fc-dropdown-item input[type="checkbox"]').forEach(cb => {
            cb.onchange = function() {
                const status = this.closest('.fc-dropdown-item').dataset.status;
                body.querySelectorAll(`.factcheck-item[data-fc-status="${status}"]`).forEach(el => {
                    el.style.display = cb.checked ? '' : 'none';
                });
            };
        });
    } else if (sourceElementId === 'source-overview-content') {
        // Quellenübersicht: Detailansicht mit Suchleiste
        headerExtra.innerHTML = '<input type="text" class="timeline-filter-input" placeholder="Quellen durchsuchen..." oninput="App.filterModalSources(this.value)" style="width:200px;">';
        body.innerHTML = buildDetailedSourceOverview();
    } else if (sourceElementId === 'timeline') {
        // Timeline: Vollständige vertikale Timeline im Modal mit Filter + Suche
        headerExtra.innerHTML = `<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
            <div class="ht-filter-group">
                <button class="ht-modal-filter-btn active" data-filter="all" onclick="App.filterModalTimelineType('all', this)">Alle</button>
                <button class="ht-modal-filter-btn" data-filter="articles" onclick="App.filterModalTimelineType('articles', this)">Meldungen</button>
                <button class="ht-modal-filter-btn" data-filter="snapshots" onclick="App.filterModalTimelineType('snapshots', this)">Lageberichte</button>
            </div>
            <input type="text" class="timeline-filter-input" placeholder="Suche..." oninput="App.filterModalTimeline(this.value)" style="width:180px;">
        </div>`;
        body.innerHTML = App._buildFullVerticalTimeline('all', '');
    } else {
        body.innerHTML = source.innerHTML;
    }

    openModal('modal-content-viewer');
}

App.filterModalSources = function(query) {
    const q = query.toLowerCase().trim();
    const details = document.querySelectorAll('#content-viewer-body details');
    details.forEach(d => {
        if (!q) {
            d.style.display = '';
            d.removeAttribute('open');
            return;
        }
        const name = d.querySelector('summary').textContent.toLowerCase();
        // Quellenname oder Artikel-Headlines durchsuchen
        const articles = d.querySelectorAll('div > div');
        let articleMatch = false;
        articles.forEach(a => {
            const text = a.textContent.toLowerCase();
            const hit = text.includes(q);
            a.style.display = hit ? '' : 'none';
            if (hit) articleMatch = true;
        });
        const match = name.includes(q) || articleMatch;
        d.style.display = match ? '' : 'none';
        // Bei Artikeltreffer aufklappen, bei Namens-Match alle Artikel zeigen
        if (match && articleMatch && !name.includes(q)) {
            d.setAttribute('open', '');
        } else if (name.includes(q)) {
            articles.forEach(a => a.style.display = '');
        }
    });
};

function buildDetailedSourceOverview() {
    const articles = App._currentArticles || [];
    if (!articles.length) return '<div style="padding:24px;color:var(--text-disabled);">Keine Artikel vorhanden</div>';

    // Nach Quelle gruppieren
    const sourceMap = {};
    articles.forEach(a => {
        const name = a.source || 'Unbekannt';
        if (!sourceMap[name]) sourceMap[name] = { articles: [], languages: new Set() };
        sourceMap[name].articles.push(a);
        sourceMap[name].languages.add((a.language || 'de').toUpperCase());
    });

    const sources = Object.entries(sourceMap).sort((a, b) => b[1].articles.length - a[1].articles.length);

    // Sprach-Statistik Header
    const langCount = {};
    articles.forEach(a => {
        const lang = (a.language || 'de').toUpperCase();
        langCount[lang] = (langCount[lang] || 0) + 1;
    });
    const langChips = Object.entries(langCount)
        .sort((a, b) => b[1] - a[1])
        .map(([lang, count]) => `<span class="source-lang-chip">${lang} <strong>${count}</strong></span>`)
        .join('');

    let html = `<div class="source-overview-header">
        <span class="source-overview-stat">${articles.length} Artikel aus ${sources.length} Quellen</span>
        <div class="source-lang-chips">${langChips}</div>
    </div>`;

    sources.forEach(([name, data]) => {
        const langs = [...data.languages].join('/');
        const escapedName = UI.escape(name);
        html += `<details style="border:1px solid var(--border);border-radius:4px;margin-bottom:6px;">
            <summary style="display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;background:var(--bg-secondary);color:var(--text-primary);font-size:13px;list-style:none;">
                <span style="color:var(--text-secondary);font-size:12px;flex-shrink:0;">&#9656;</span>
                <span style="flex:1;font-weight:500;">${escapedName}</span>
                <span style="font-size:10px;color:var(--text-secondary);flex-shrink:0;">${langs}</span>
                <span style="font-size:12px;font-weight:700;color:var(--accent);background:var(--tint-accent);padding:1px 6px;border-radius:4px;flex-shrink:0;">${data.articles.length}</span>
            </summary>
            <div style="border-top:1px solid var(--border);">`;
        data.articles.forEach(a => {
            const headline = UI.escape(a.headline_de || a.headline || 'Ohne Titel');
            const time = a.collected_at
                ? (parseUTC(a.collected_at) || new Date(a.collected_at)).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE })
                : '';
            const langBadge = a.language && a.language !== 'de'
                ? `<span class="lang-badge">${a.language.toUpperCase()}</span>` : '';
            const link = a.source_url
                ? `<a href="${UI.escape(a.source_url)}" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;font-size:14px;flex-shrink:0;opacity:0.6;" title="Artikel öffnen">&#8599;</a>` : '';
            html += `<div style="display:flex;align-items:center;gap:10px;padding:8px 14px 8px 36px;font-size:12px;border-bottom:1px solid var(--border);">
                <span style="color:var(--text-secondary);flex-shrink:0;min-width:90px;font-size:11px;">${time}</span>
                <span style="flex:1;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${headline}</span>
                ${langBadge}
                ${link}
            </div>`;
        });
        html += `</div></details>`;
    });

    return html;
}

function toggleRefreshInterval() {
    const mode = document.getElementById('inc-refresh-mode').value;
    const field = document.getElementById('refresh-interval-field');
    field.classList.toggle('visible', mode === 'auto');
}

function updateIntervalMin() {
    const unit = parseInt(document.getElementById('inc-refresh-unit').value);
    const input = document.getElementById('inc-refresh-value');
    if (unit === 1) {
        // Minuten: Minimum 10
        input.min = 10;
        if (parseInt(input.value) < 10) input.value = 10;
    } else {
        // Stunden/Tage/Wochen: Minimum 1
        input.min = 1;
        if (parseInt(input.value) < 1) input.value = 1;
    }
}

function updateVisibilityHint() {
    const isPublic = document.getElementById('inc-visibility').checked;
    const text = document.getElementById('visibility-text');
    if (text) {
        text.textContent = isPublic
            ? 'Öffentlich — für alle Nutzer sichtbar'
            : 'Privat — nur für dich sichtbar';
    }
}

function updateSourcesHint() {
    const intl = document.getElementById('inc-international').checked;
    const hint = document.getElementById('sources-hint');
    if (hint) {
        hint.textContent = intl
            ? 'DE + internationale Feeds (Reuters, BBC, Al Jazeera etc.)'
            : 'Nur deutschsprachige Quellen (DE, AT, CH)';
    }
}

function toggleTypeDefaults() {
    const type = document.getElementById('inc-type').value;
    const hint = document.getElementById('type-hint');
    const refreshMode = document.getElementById('inc-refresh-mode');

    if (type === 'research') {
        hint.textContent = 'Nur WebSearch (Deep Research), manuelle Aktualisierung empfohlen';
        refreshMode.value = 'manual';
        toggleRefreshInterval();
    } else {
        hint.textContent = 'RSS-Feeds + WebSearch, automatische Aktualisierung empfohlen';
    }
}

// Tab-Fokus: Nur Tab-Badge (Titel-Counter) zurücksetzen, nicht alle Notifications
window.addEventListener('focus', () => {
    document.title = App._originalTitle;
});

// ESC schließt Modals
// F5: Daten aktualisieren statt Seite neu laden
document.addEventListener('keydown', (e) => {
    if (e.key === 'F5') {
        e.preventDefault();
        App.softRefresh();
    }
});

document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        // Schließ-Reihenfolge: A11y-Panel > Notification-Panel > Export-Dropdown > FC-Dropdown > Modals
        if (A11yManager._isOpen) {
            A11yManager._closePanel();
            return;
        }
        if (NotificationCenter._isOpen) {
            NotificationCenter.close();
            return;
        }
        const exportMenu = document.getElementById('export-dropdown-menu');
        if (exportMenu && exportMenu.classList.contains('show')) {
            App._closeExportDropdown();
            return;
        }
        const fcMenu = document.querySelector('.fc-dropdown-menu.open');
        if (fcMenu) {
            fcMenu.classList.remove('open');
            const fcBtn = fcMenu.previousElementSibling;
            if (fcBtn) fcBtn.setAttribute('aria-expanded', 'false');
            return;
        }
        document.querySelectorAll('.modal-overlay.active').forEach(m => {
            closeModal(m.id);
        });
    }
});

// Keyboard-Handler: Enter/Space auf [role="button"] löst click aus (WCAG 2.1.1)
document.addEventListener('keydown', (e) => {
    if ((e.key === 'Enter' || e.key === ' ') && e.target.matches('[role="button"]')) {
        e.preventDefault();
        e.target.click();
    }
});

// Session-Ablauf prüfen (alle 60 Sekunden)
setInterval(() => {
    const token = localStorage.getItem('osint_token');
    if (!token) return;
    try {
        const payload = JSON.parse(atob(token.split('.')[1]));
        const expiresAt = payload.exp * 1000;
        const remaining = expiresAt - Date.now();
        const fiveMinutes = 5 * 60 * 1000;
        if (remaining <= 0) {
            App.logout();
        } else if (remaining <= fiveMinutes && !App._sessionWarningShown) {
            App._sessionWarningShown = true;
            const mins = Math.ceil(remaining / 60000);
            UI.showToast(`Session läuft in ${mins} Minute${mins !== 1 ? 'n' : ''} ab. Bitte erneut anmelden.`, 'warning', 15000);
        }
    } catch (e) { /* Token nicht parsbar */ }
}, 60000);

// Modal-Overlays: Klick außerhalb der Box schließt das Modal
document.addEventListener('click', (e) => {
    if (e.target.classList.contains('modal-overlay') && e.target.classList.contains('active')) {
        closeModal(e.target.id);
    }
});

// App starten
document.addEventListener('click', (e) => {
    if (!e.target.closest('.export-dropdown')) {
        App._closeExportDropdown();
    }
});
document.addEventListener('DOMContentLoaded', () => App.init());