{% extends "base.html" %}
{% block title %}callmem — Feed{% endblock %}
{% block content %}
<hgroup>
    <h2>{{ project_name }}</h2>
    <p>
        Events: {{ event_count }} &middot;
        Entities: {{ entity_count }} &middot;
        Sessions: {{ session_count }}
    </p>
</hgroup>

<div id="feed-status-bar" class="feed-status-bar" data-state="idle" aria-live="polite">
    <div class="feed-status-track" title="Stacked view of active queue state">
        <div class="feed-status-seg feed-status-seg-running" data-seg="running" style="width:0%"></div>
        <div class="feed-status-seg feed-status-seg-pending" data-seg="pending" style="width:0%"></div>
        <div class="feed-status-seg feed-status-seg-failed"  data-seg="failed"  style="width:0%"></div>
        <div class="feed-status-heartbeat" aria-hidden="true"></div>
    </div>
    <div class="feed-status-labels">
        <span class="feed-status-label feed-status-label-running">
            <span class="feed-status-swatch feed-status-swatch-running"></span>
            <b data-counter="running">0</b> processing
        </span>
        <span class="feed-status-label feed-status-label-pending">
            <span class="feed-status-swatch feed-status-swatch-pending"></span>
            <b data-counter="pending">0</b> pending
        </span>
        <span class="feed-status-label feed-status-label-failed" data-label="failed" hidden>
            <span class="feed-status-swatch feed-status-swatch-failed"></span>
            <b data-counter="failed">0</b> failed
        </span>
        <span class="feed-status-label feed-status-label-done">
            <span class="feed-status-swatch feed-status-swatch-done"></span>
            <b data-counter="completed">0</b> completed
        </span>
        <span class="feed-status-spacer"></span>
        {% if extraction_model %}
        <span class="feed-status-model" title="Current extraction LLM (from config.toml)">
            extraction: <code>{{ extraction_model }}</code>
        </span>
        {% endif %}
    </div>
</div>

<div class="feed-filters" style="display:flex;flex-wrap:wrap;gap:0.35rem;align-items:center;margin-bottom:1rem;">
    <button class="filter-pill {% if not active_type %}filter-active{% endif %}"
            hx-get="/partials/feed" hx-target="#feed-content" hx-swap="innerHTML"
            style="padding:0.25rem 0.65rem;border-radius:9999px;border:1px solid #475569;background:transparent;color:#cbd5e1;font-size:0.8rem;cursor:pointer;">
        All
    </button>
    {% for t in entity_types %}
    <button class="filter-pill {% if active_type == t %}filter-active{% endif %}"
            hx-get="/partials/feed?type={{ t }}{% if active_query %}&q={{ active_query }}{% endif %}{% if active_order %}&order={{ active_order }}{% endif %}" hx-target="#feed-content" hx-swap="innerHTML"
            style="padding:0.25rem 0.65rem;border-radius:9999px;border:1px solid #475569;background:transparent;color:#cbd5e1;font-size:0.8rem;cursor:pointer;">
        {{ t | upper }}
    </button>
    {% endfor %}
    <input type="text" id="feed-search" placeholder="Search..." value="{{ active_query or '' }}"
           hx-get="/partials/feed" hx-trigger="keyup changed delay:300ms" hx-target="#feed-content" hx-swap="innerHTML"
           name="q"
           style="margin-left:0.5rem;padding:0.25rem 0.5rem;border-radius:0.375rem;border:1px solid #475569;background:#0f172a;color:#e2e8f0;font-size:0.8rem;width:160px;">
    <button id="order-toggle" title="Toggle sort order"
            hx-get="/partials/feed?order={% if active_order == 'desc' %}asc{% else %}desc{% endif %}{% if active_type %}&type={{ active_type }}{% endif %}{% if active_query %}&q={{ active_query }}{% endif %}"
            hx-target="#feed-content" hx-swap="innerHTML"
            style="padding:0.25rem 0.5rem;border-radius:0.375rem;border:1px solid #475569;background:transparent;color:#cbd5e1;font-size:0.8rem;cursor:pointer;">
        {% if active_order == 'desc' %}&#x2193; Newest{% else %}&#x2191; Oldest{% endif %}
    </button>
    <button class="feed-filter-toggle {% if include_stale %}active{% endif %}"
            title="Toggle display of entities marked stale by the auto-detector"
            hx-get="/partials/feed?include_stale={% if include_stale %}false{% else %}true{% endif %}{% if active_type %}&type={{ active_type }}{% endif %}{% if active_query %}&q={{ active_query }}{% endif %}{% if active_order %}&order={{ active_order }}{% endif %}"
            hx-target="#feed-content" hx-swap="innerHTML">
        {% if include_stale %}✓ Showing stale{% else %}Show stale{% endif %}
    </button>
</div>

<button id="feed-back-to-top" type="button" hidden
        title="Catch up on new items and return to top">
    <span class="feed-back-to-top-arrow" aria-hidden="true">&uarr;</span>
    <span id="feed-back-to-top-count">0</span>
    <span class="feed-back-to-top-label">new</span>
</button>

<div id="feed-content">
{% include "feed_partial.html" %}
</div>

<script>
(function() {
    var container = document.getElementById('feed-content');
    var reconnectDelay = 1000;
    var maxDelay = 30000;
    var fallbackInterval = null;

    function connectSSE() {
        var source = new EventSource('/events');

        source.addEventListener('entity_created', function(e) {
            var data = JSON.parse(e.data);
            if (!isFrozen()) prependCard(data, 'entity');
            scheduleRealRefresh();
        });

        source.addEventListener('session_started', function(e) {
            var data = JSON.parse(e.data);
            if (!isFrozen()) prependCard(data, 'session');
            scheduleRealRefresh();
        });

        source.addEventListener('session_ended', function(e) {
            var data = JSON.parse(e.data);
            if (!isFrozen()) prependCard(data, 'summary');
            scheduleRealRefresh();
        });

        source.addEventListener('error', function() {
            source.close();
            if (!fallbackInterval) {
                startFallbackPolling();
            }
            setTimeout(function() {
                connectSSE();
                reconnectDelay = Math.min(reconnectDelay * 2, maxDelay);
            }, reconnectDelay);
        });

        source.addEventListener('open', function() {
            reconnectDelay = 1000;
            if (fallbackInterval) {
                clearInterval(fallbackInterval);
                fallbackInterval = null;
            }
        });
    }

    function prependCard(data, kind) {
        var existing = container.querySelector('[data-entity-id="' + data.id + '"]');
        if (existing) return;

        var card = document.createElement('div');
        card.setAttribute('data-entity-id', data.id);
        card.className = 'feed-card-new';
        card.style.cssText = 'max-width:700px;margin:0 auto 1.25rem auto;padding:0.75rem 1.25rem;background:#1a3520;border:1px solid #22c55e;border-radius:0.75rem;opacity:0;transition:opacity 0.3s,background 0.3s;';

        var category = data.category || data.type || kind;
        var title = data.title || (kind === 'session' ? 'Session started' : 'New event');
        var time = relativeTime(data.created_at || data.started_at || '');

        card.innerHTML = '<span class="badge badge-' + category + '">' + category.toUpperCase() + '</span> ' +
            '<strong style="color:#e2e8f0;">' + escapeHtml(title) + '</strong> ' +
            '<span style="font-size:0.75rem;opacity:0.5;">' + time + '</span>';

        container.insertBefore(card, container.firstChild);
        requestAnimationFrame(function() {
            card.style.opacity = '1';
        });
        setTimeout(function() {
            card.style.background = '#1e293b';
            card.style.borderColor = '#334155';
        }, 2000);
    }

    function escapeHtml(text) {
        var div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    function relativeTime(ts) {
        if (!ts) return '';
        var d = new Date(ts);
        if (isNaN(d.getTime())) return ts.substring(0, 19).replace('T', ' ');
        var now = new Date();
        var secs = Math.floor((now - d) / 1000);
        if (secs < 0) secs = 0;
        if (secs < 60) return 'just now';
        if (secs < 3600) return Math.floor(secs / 60) + 'm ago';
        if (secs < 86400) return Math.floor(secs / 3600) + 'h ago';
        if (secs < 604800) return Math.floor(secs / 86400) + 'd ago';
        return d.toLocaleDateString('en-US', {month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'});
    }

    function startFallbackPolling() {
        fallbackInterval = setInterval(function() {
            if (isFrozen()) return;
            doRefetch();
        }, 30000);
    }

    // ── Freeze-aware refresh ─────────────────────────────────────────
    // The background refetch replaces container.innerHTML, which wipes
    // any <details open> the user expanded. Two behaviors:
    //   1. If the user has expanded a card or scrolled past the top,
    //      we *freeze* refetching and just count new items.
    //   2. While frozen, a floating "↑ N new" button appears; clicking
    //      it closes expanded cards, scrolls to top, and refreshes.
    // Outside freeze, refetch still preserves any card the user happens
    // to have open at the moment of swap (race-proof).

    var pendingNew = 0;
    var refreshTimer = null;
    var backBtn = document.getElementById('feed-back-to-top');
    var backBtnCount = document.getElementById('feed-back-to-top-count');
    var FREEZE_SCROLL_THRESHOLD = 80;  // px — ignore tiny scroll nudges

    function isFrozen() {
        if (container.querySelector('details[open]')) return true;
        if (window.scrollY > FREEZE_SCROLL_THRESHOLD) return true;
        return false;
    }

    function captureOpenState() {
        var state = {};
        container.querySelectorAll('details.feed-card[open]').forEach(function(d) {
            var view = 'keypoints';
            var active = d.querySelector('.toggle-btn.toggle-active');
            if (active) view = active.getAttribute('data-view') || 'keypoints';
            state[d.id] = {open: true, view: view};
        });
        return state;
    }

    function restoreOpenState(state) {
        Object.keys(state).forEach(function(id) {
            var el = document.getElementById(id);
            if (!el || el.tagName !== 'DETAILS') return;
            el.open = true;
            var view = state[id].view;
            if (view === 'synopsis') {
                // Simulate the Synopsis tab click by toggling classes + visibility
                el.querySelectorAll('.toggle-btn').forEach(function(b) {
                    b.classList.remove('toggle-active');
                });
                var btn = el.querySelector('.toggle-btn[data-view="synopsis"]');
                if (btn) btn.classList.add('toggle-active');
                var kp = el.querySelector('.feed-card-keypoints');
                var syn = el.querySelector('.feed-card-synopsis');
                if (kp) kp.style.display = 'none';
                if (syn) syn.style.display = '';
            }
        });
    }

    function doRefetch() {
        var state = captureOpenState();
        var url = '/partials/feed' + window.location.search;
        return fetch(url, {headers: {'HX-Request': 'true'}})
            .then(function(r) { return r.ok ? r.text() : null; })
            .then(function(html) {
                if (html === null) return;
                container.innerHTML = html;
                restoreOpenState(state);
                pendingNew = 0;
                updateBackBtn();
            })
            .catch(function() { /* silent — next SSE will retry */ });
    }

    function updateBackBtn() {
        if (pendingNew > 0 && isFrozen()) {
            backBtnCount.textContent = pendingNew;
            backBtn.hidden = false;
        } else {
            backBtn.hidden = true;
        }
    }

    function scheduleRealRefresh() {
        if (isFrozen()) {
            pendingNew += 1;
            updateBackBtn();
            return;
        }
        if (refreshTimer) clearTimeout(refreshTimer);
        refreshTimer = setTimeout(function() {
            refreshTimer = null;
            doRefetch();
        }, 750);
    }

    backBtn.addEventListener('click', function() {
        // Close any expanded cards so the freeze lifts, then swap + scroll.
        container.querySelectorAll('details.feed-card[open]').forEach(function(d) {
            d.open = false;
        });
        doRefetch().then(function() {
            window.scrollTo({top: 0, behavior: 'smooth'});
        });
    });

    // `toggle` doesn't bubble — listen in capture phase at the container
    container.addEventListener('toggle', function() {
        // When the user closes their last open card AND is near the top,
        // freeze lifts. If pending events accrued, catch up immediately.
        if (!isFrozen() && pendingNew > 0) {
            doRefetch();
        } else {
            updateBackBtn();
        }
    }, true);

    var scrollTimer = null;
    window.addEventListener('scroll', function() {
        if (scrollTimer) clearTimeout(scrollTimer);
        scrollTimer = setTimeout(function() {
            if (!isFrozen() && pendingNew > 0) {
                doRefetch();
            } else {
                updateBackBtn();
            }
        }, 150);
    }, {passive: true});

    connectSSE();

    // ── Feed status bar (stacked horizontal bar) ─────────────────────
    // Reuses /api/queue-status and the queue_updated SSE event from
    // base.html. Segments are sized as a share of (pending+running+
    // failed); when all three are zero the heartbeat kicks in.
    (function() {
        var bar = document.getElementById('feed-status-bar');
        if (!bar) return;
        var segs = {
            running: bar.querySelector('[data-seg="running"]'),
            pending: bar.querySelector('[data-seg="pending"]'),
            failed:  bar.querySelector('[data-seg="failed"]'),
        };
        var counters = {
            pending:   bar.querySelector('[data-counter="pending"]'),
            running:   bar.querySelector('[data-counter="running"]'),
            failed:    bar.querySelector('[data-counter="failed"]'),
            completed: bar.querySelector('[data-counter="completed"]'),
        };
        var failedLabel = bar.querySelector('[data-label="failed"]');

        function apply(data) {
            var pending   = data.pending   || 0;
            var running   = data.running   || 0;
            var failed    = data.failed    || 0;
            var completed = data.completed || 0;
            var active = pending + running + failed;

            counters.pending.textContent   = pending;
            counters.running.textContent   = running;
            counters.failed.textContent    = failed;
            counters.completed.textContent = completed;

            failedLabel.hidden = failed === 0;

            // Size segments as % of active. When idle, collapse to 0 and
            // the heartbeat (driven by data-state="idle") takes over.
            if (active === 0) {
                bar.setAttribute('data-state', 'idle');
                segs.running.style.width = '0%';
                segs.pending.style.width = '0%';
                segs.failed.style.width  = '0%';
            } else {
                bar.setAttribute('data-state', 'busy');
                segs.running.style.width = (100 * running / active) + '%';
                segs.pending.style.width = (100 * pending / active) + '%';
                segs.failed.style.width  = (100 * failed  / active) + '%';
            }
        }

        fetch('/api/queue-status')
            .then(function(r) { return r.ok ? r.json() : null; })
            .then(function(d) { if (d) apply(d); })
            .catch(function() {});

        // Poll every 3s as a safety net — queue_updated SSE fires when
        // workers cycle, but if the stream is silent during a long
        // Ollama call the bar would freeze and look broken.
        setInterval(function() {
            fetch('/api/queue-status')
                .then(function(r) { return r.ok ? r.json() : null; })
                .then(function(d) { if (d) apply(d); })
                .catch(function() {});
        }, 3000);

        if (typeof EventSource !== 'undefined') {
            var es = new EventSource('/events');
            es.addEventListener('queue_updated', function(e) {
                try { apply(JSON.parse(e.data)); } catch (ex) { /* ignore */ }
            });
            es.onerror = function() { es.close(); };
        }
    })();
})();
</script>
{% endblock %}