{% extends "settings_layout.html" %}
{% block panel %}
<div class="settings-container container mt-3">

    <h2>Tasks</h2>
    <p class="text-secondary">Live view of the background work queue. Updates stream from
        the server as tasks progress.</p>

    <h4 class="mt-4 mb-3">Queue</h4>
    <div class="task-scroll">
        <ul id="queueTasks" class="task-list"></ul>
    </div>
    <p id="queueEmpty" class="text-secondary fst-italic">Nothing queued.</p>
    <p id="queueTruncated" class="text-secondary fst-italic d-none">
        Showing the {{ max_tasks }} oldest tasks — more are queued behind them.</p>

    <h4 class="mt-4 mb-3">Scheduled</h4>
    <ul id="scheduledTasks" class="task-list"></ul>
    <p id="scheduledEmpty" class="text-secondary fst-italic">Nothing scheduled.</p>

    <div class="task-section-head mt-4 mb-3">
        <h4 class="mb-0">Failed</h4>
        <button type="button" id="purgeFailed" class="icon-btn ms-auto d-none"
                onClick="purgeFailed()" title="Dismiss all failed tasks">
            <i class="bi bi-trash"></i>
        </button>
    </div>
    <div class="task-scroll">
        <ul id="failedTasks" class="task-list"></ul>
    </div>
    <p id="failedEmpty" class="text-secondary fst-italic">No failures.</p>

    <hr class="hr-settings">
    <h2 class="pb-2">Workers</h2>
    <div id="workerCards" class="row g-3"></div>

</div>
{% endblock %}

{% block panel_scripts %}
<script src="{{ url_for('static', filename='js/realtime.js') }}"></script>
<script>

    const CANCEL_MUTATION = `
        mutation Cancel($id: ID!) {
            cancelTask(id: $id)
        }`;

    const DISMISS_MUTATION = `
        mutation Dismiss($id: ID!) {
            dismissTask(id: $id)
        }`;

    const PURGE_MUTATION = `
        mutation Purge {
            purgeFailedTasks
        }`;

    // Task rows the server has dropped. Kept on screen briefly so work that finishes
    // does not simply blink out of existence, then faded and forgotten.
    const FADE_AFTER_MS = 10000;

    // The server sends at most this many tasks, so the page never has to cap anything
    // itself. Injected rather than duplicated, so the limit has one definition.
    const MAX_TASKS = {{ max_tasks }};

    let tasks = {};      // id -> task, including ones being faded out
    let workers = {};    // id -> worker
    let renderQueued = false;
    // Cancelling deletes the row, which reaches us as an ordinary removal. Remembering
    // what we cancelled is what keeps it from being reported back as "finished".
    const cancelled = new Set();

    function scheduleRender() {
        // Several updates can land per second; coalesce them into one paint.
        if (renderQueued) return;
        renderQueued = true;
        requestAnimationFrame(() => { renderQueued = false; render(); });
    }

    async function mutate(query, variables) {
        const r = await fetch('/api/graphql', {
            method: 'POST',
            headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
            credentials: 'same-origin',
            body: JSON.stringify({query: query, variables: variables || {}}),
        });
        if (!r.ok) throw new Error(`GraphQL HTTP ${r.status}`);
        const body = await r.json();
        if (body.errors && body.errors.length) {
            throw new Error('GraphQL errors: ' + JSON.stringify(body.errors));
        }
        return body.data;
    }

    /** Undo an optimistic cancel mark, correcting the row if the removal already used it. */
    function unmarkCancelled(key) {
        cancelled.delete(key);
        const task = tasks[key];
        if (task && task.cancelled) {
            task.cancelled = false;
            task.completionPct = 100;
            scheduleRender();
        }
    }

    async function cancelTask(id) {
        const key = String(id);
        $(`.task-cancel[data-id="${id}"]`).prop('disabled', true);
        // Marked before the request, not after it. Cancelling a *running* task restarts
        // its worker process, which takes far longer than the poll interval, so the row's
        // removal reaches us over the WebSocket well before this response does — and
        // markDone has to already know the row was cancelled rather than finished.
        cancelled.add(key);
        try {
            // False means it was already finished or failed, so it was never cancelled.
            if (!(await mutate(CANCEL_MUTATION, {id: key})).cancelTask) unmarkCancelled(key);
        } catch (e) {
            console.error(e);
            unmarkCancelled(key);
            $(`.task-cancel[data-id="${id}"]`).prop('disabled', false);
        }
    }

    /** Drop rows locally so the incoming removal has nothing left to dress up. */
    function forget(keys) {
        // A dismissed failure is not an accomplishment: it should just go, without the
        // green tick and ten-second fade that markDone gives work that ran to the end.
        keys.forEach(key => { delete tasks[key]; });
        scheduleRender();
    }

    async function dismissTask(id) {
        const key = String(id);
        $(`.task-cancel[data-id="${id}"]`).prop('disabled', true);
        try {
            if ((await mutate(DISMISS_MUTATION, {id: key})).dismissTask) forget([key]);
        } catch (e) {
            console.error(e);
            $(`.task-cancel[data-id="${id}"]`).prop('disabled', false);
        }
    }

    async function purgeFailed() {
        const button = $('#purgeFailed').prop('disabled', true);
        try {
            await mutate(PURGE_MUTATION);
            forget(Object.values(tasks).filter(t => t.status === 'failed').map(t => String(t.id)));
        } catch (e) {
            console.error(e);
        } finally {
            button.prop('disabled', false);
        }
    }

    // --- Formatting ---

    // Wall clock the rows are measured against. While the stream is down the task data
    // is frozen, so the clock has to freeze with it — otherwise elapsed times climb and
    // "3m left" counts down against numbers that stopped arriving, which reads as live
    // progress on a page that is not receiving any.
    let stoppedAt = null;

    function clockNow() {
        return stoppedAt ?? Date.now();
    }

    function humanizeDuration(ms) {
        const s = Math.round(ms / 1000);
        if (s < 60) return `${s}s`;
        const m = Math.floor(s / 60);
        if (m < 60) return `${m}m ${s % 60}s`;
        const h = Math.floor(m / 60);
        if (h < 24) return `${h}h ${m % 60}m`;
        return `${Math.floor(h / 24)}d ${h % 24}h`;
    }

    function relativeTime(iso) {
        const delta = new Date(iso).getTime() - clockNow();
        return delta <= 0 ? 'due now' : `in ${humanizeDuration(delta)}`;
    }

    function taskMeta(task) {
        if (task.cancelled) return 'cancelled';
        if (task.done) return 'finished';
        if (task.status === 'failed') return task.errorMessage || 'failed';
        if (task.runAfter) {
            return `${new Date(task.runAfter).toLocaleString()} — ${relativeTime(task.runAfter)}`;
        }
        if (!task.startedAt) return '';

        const elapsed = clockNow() - new Date(task.startedAt).getTime();
        let meta = `running for ${humanizeDuration(elapsed)}`;
        if (task.completionPct > 0 && task.completionPct < 100) {
            // The bar is too slim to hold a legible label, so the percentage lives here.
            const remaining = elapsed / (task.completionPct / 100) - elapsed;
            meta = `${task.completionPct}% — ${meta} — ${humanizeDuration(remaining)} left`;
        }
        return meta;
    }

    const ICONS = {
        cancelled: '<i class="bi bi-slash-circle-fill text-secondary"></i>',
        done:      '<i class="bi bi-check-circle-fill text-success"></i>',
        failed:    '<i class="bi bi-exclamation-circle-fill text-danger"></i>',
        pending:   '<i class="bi bi-hourglass-split text-secondary"></i>',
        running:   '<i class="bi bi-arrow-repeat spin text-info"></i>',
    };

    function statusIconKey(task) {
        if (task.cancelled) return 'cancelled';
        if (task.done) return 'done';
        if (task.status === 'failed') return 'failed';
        if (task.status === 'pending') return 'pending';
        return 'running';
    }

    // --- Rendering ---

    // A task that finishes moves above the live rows and holds there until it fades out.
    // The finished group runs oldest-finished first, so each new one lands at its end,
    // right above the running rows. Live rows keep their oldest-first order below: they
    // are claimed oldest-first, so it says what is running and what is waiting behind it.
    function queueOrder(a, b) {
        if (!!a.done !== !!b.done) return a.done ? -1 : 1;
        return a.done ? a.finishSeq - b.finishSeq : a.id - b.id;
    }

    function childrenOf(id) {
        return Object.values(tasks).filter(t => t.parentId === id).sort(queueOrder);
    }

    function buildRow(task) {
        const li = document.createElement('li');
        li.className = 'task-row';
        li.dataset.id = task.id;
        li.innerHTML = `
            <div class="task-head">
                <span class="task-icon"></span>
                <span class="task-name"></span>
                <span class="task-meta text-secondary"></span>
                <button type="button" class="icon-btn task-cancel" data-id="${task.id}" title="Cancel">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <div class="progress task-progress">
                <div class="progress-bar" role="progressbar"></div>
            </div>
            <ul class="task-children"></ul>`;
        // Resolved at click time, not here: a row that was queued when it was built can
        // have failed by the time the button is pressed, and the two need different calls.
        li.querySelector(':scope > .task-head > .task-cancel')
          .addEventListener('click', () => {
              const current = tasks[String(task.id)];
              if (current && current.status === 'failed') dismissTask(task.id);
              else cancelTask(task.id);
          });
        return li;
    }

    function updateRow(li, task) {
        // `:scope >` throughout: a row contains its sub-task rows, so an unanchored
        // selector could reach into a child's markup instead of this row's own.
        const own = sel => li.querySelector(`:scope > ${sel}`);

        li.classList.toggle('task-done', !!task.done);
        li.classList.toggle('task-failed', task.status === 'failed');

        // Rewritten only when it actually changes: replacing the element on every tick
        // restarts the spinner's CSS animation, which reads as a stutter.
        const icon = own('.task-head > .task-icon');
        const iconKey = statusIconKey(task);
        if (icon.dataset.icon !== iconKey) {
            icon.dataset.icon = iconKey;
            icon.innerHTML = ICONS[iconKey];
        }

        own('.task-head > .task-name').textContent = task.displayName;
        own('.task-head > .task-meta').textContent = taskMeta(task);

        // Only a live row carries a bar: a queued one has nothing to report yet, and a
        // finished, cancelled or failed one says so in its icon and meta text already.
        const inFlight = !task.done && task.status !== 'pending' && task.status !== 'failed';
        own('.task-progress').classList.toggle('d-none', !inFlight);
        if (inFlight) {
            // A task with no reported percentage should not look stalled at 0%: only the
            // verify/compress/decompress tasks report real progress, everything else jumps
            // straight from queued to done.
            const bar = own('.task-progress > .progress-bar');
            bar.style.width = task.completionPct ? `${task.completionPct}%` : '100%';
            bar.className = 'progress-bar progress-bar-striped progress-bar-animated';
        }

        // `done` covers both finished and cancelled rows: the task is already gone
        // server-side, so the button has nothing to act on and is taken away. On a
        // failed row it stays, as the only way to clear a failure.
        const cancel = own('.task-head > .task-cancel');
        cancel.classList.toggle('d-none', !!task.done);
        cancel.title = task.status === 'failed' ? 'Dismiss' : 'Cancel';
    }

    /** Sync a <ul> to a list of tasks, reusing rows so progress bars animate instead of flicker. */
    function syncList(container, items) {
        const wanted = new Set(items.map(t => String(t.id)));
        Array.from(container.children).forEach(child => {
            if (!wanted.has(child.dataset.id)) child.remove();
        });
        const existing = {};
        Array.from(container.children).forEach(c => { existing[c.dataset.id] = c; });

        // Re-inserting a node restarts its CSS animations, so rows are walked against a
        // cursor and only moved where the order actually differs: a row that finishes
        // slots in above the live ones without disturbing their spinners.
        let cursor = container.firstChild;
        items.forEach(task => {
            let li = existing[String(task.id)];
            if (!li) li = buildRow(task);
            if (li === cursor) cursor = cursor.nextSibling;
            else container.insertBefore(li, cursor);
            updateRow(li, task);
            syncList(li.querySelector(':scope > .task-children'), childrenOf(task.id));
        });
        return items.length;
    }

    function section(listId, emptyId, items) {
        const count = syncList(document.getElementById(listId), items);
        document.getElementById(emptyId).classList.toggle('d-none', count > 0);
    }

    function renderWorkers() {
        const container = document.getElementById('workerCards');
        container.innerHTML = '';
        const list = Object.values(workers).sort((a, b) => a.id - b.id);
        if (!list.length) {
            container.innerHTML =
                '<p class="text-secondary fst-italic">No workers reported.</p>';
            return;
        }
        list.forEach(worker => {
            const task = worker.taskId ? tasks[worker.taskId] : null;
            const col = document.createElement('div');
            col.className = 'col-md-6 col-xl-4';
            col.innerHTML = `
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title d-flex justify-content-between">
                            <span>Worker ${worker.id}</span>
                            <span class="badge ${worker.alive ? 'text-bg-success' : 'text-bg-danger'}">
                                ${worker.alive ? 'alive' : 'stopped'}</span>
                        </h5>
                        <p class="card-subtitle text-secondary small mb-2">pid ${worker.pid ?? '—'}</p>
                        <div class="worker-task"></div>
                    </div>
                </div>`;
            const slot = col.querySelector('.worker-task');
            if (task) {
                slot.innerHTML = `<div class="fw-semibold">${task.displayName}</div>
                    <div class="text-secondary small">${taskMeta(task)}</div>`;
            } else {
                slot.innerHTML = '<span class="text-secondary fst-italic">Idle</span>';
            }
            container.appendChild(col);
        });
    }

    function render() {
        // Sub-tasks are rendered nested under their parent, so the sections only list
        // roots — plus any child whose parent has already gone, which would vanish.
        const roots = Object.values(tasks)
            .filter(t => t.parentId === null || !(t.parentId in tasks))
            .sort(queueOrder);

        // Running and pending share one list, under the rows that just finished.
        section('queueTasks', 'queueEmpty', roots.filter(
            t => t.status !== 'failed' && !t.runAfter));
        section('scheduledTasks', 'scheduledEmpty', roots.filter(
            t => t.status === 'pending' && t.runAfter));
        const failed = roots.filter(t => t.status === 'failed');
        section('failedTasks', 'failedEmpty', failed);
        document.getElementById('purgeFailed').classList.toggle('d-none', !failed.length);

        // A full window means the server had more rows to give. Counting what arrived
        // avoids asking it for a total nothing else needs.
        document.getElementById('queueTruncated').classList.toggle(
            'd-none', Object.keys(tasks).length < MAX_TASKS);
        renderWorkers();
    }

    // --- Wiring ---

    function upsert(task) {
        delete task.done;
        tasks[task.id] = task;
    }

    // Stamped on each row as it finishes, to order the finished group by end time: a task
    // is deleted on completion rather than timestamped, so the row arrives here with no
    // end time on it and the order these events land in is the only one there is.
    let finishes = 0;

    function markDone(task) {
        // The row is gone server-side: completed tasks are deleted rather than kept in a
        // terminal state, so completion is shown here and then dropped.
        const known = tasks[task.id];
        if (!known) return;
        const wasCancelled = cancelled.delete(String(task.id));
        Object.assign(known, task, {
            done: true,
            finishSeq: ++finishes,
            cancelled: wasCancelled,
            completionPct: wasCancelled ? known.completionPct : 100,
        });
        setTimeout(() => {
            const li = document.querySelector(`.task-row[data-id="${task.id}"]`);
            if (li) li.classList.add('task-fading');
            setTimeout(() => { delete tasks[task.id]; scheduleRender(); }, 600);
        }, FADE_AFTER_MS);
    }

    const live = new Realtime(['tasks', 'workers']);

    live.on('tasks', (type, data) => {
        if (type === 'snapshot') {
            const faded = Object.values(tasks).filter(t => t.done);
            tasks = {};
            faded.forEach(t => { tasks[t.id] = t; });  // keep rows still fading out
            data.forEach(upsert);
        } else if (type === 'remove') {
            markDone(data);
        } else {
            upsert(data);
        }
        scheduleRender();
    });

    live.on('workers', (type, data) => {
        if (type === 'snapshot') {
            workers = {};
            data.forEach(w => { workers[w.id] = w; });
        } else if (type === 'remove') {
            delete workers[data.id];
        } else {
            workers[data.id] = data;
        }
        scheduleRender();
    });

    live.onStatus(connected => {
        // Only stamp the first drop: this fires again on every failed reconnect, and
        // re-stamping would let the frozen clock creep forward with each attempt.
        if (connected) {
            stoppedAt = null;
        } else if (stoppedAt === null) {
            stoppedAt = Date.now();
        }
        scheduleRender();
    });

    live.start();

    // Elapsed times and countdowns move on their own, without a server event — but only
    // while connected, since nothing on a frozen page changes between ticks.
    setInterval(() => { if (stoppedAt === null) scheduleRender(); }, 1000);

</script>
{% endblock %}