{% extends "ui/_layout.html" %}
{% block title %}Backups - bty-web{% endblock %}

{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#backups-list">Active</a>
            <span class="vr"></span>
            <a href="#backups-on-disk">On disk</a>
            <span class="vr"></span>
            <a href="#backups-activity">Activity</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    Metadata-only bundles of the per-machine hardware identity (MAC +
    <code>lshw</code> + <code>known_disks</code>) -- the same shape
    <code>bty-web export</code> produces. Image bytes live in
    <code>BTY_IMAGE_ROOT</code> and are NOT included; they're either
    still on disk or re-fetchable from the catalog. Trigger one now
    with the button below, or enable a scheduled cadence on the <a
    href="/ui/settings#backup-schedule">Settings</a> page. Backups land
    under <code>{{ backups_root }}</code>; retention prunes the oldest.
{% endcall %}
{% endblock %}

{% block content %}
<div class="card mb-3" id="backups-list">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-shield-check me-1"></i>Backups
              <span class="text-muted small bty-workers-poll-status ms-1">refreshing...</span></span>
        <span class="d-flex gap-1 align-items-center">
            <button type="button" class="btn btn-sm btn-primary text-nowrap"
                    id="bty-workers-backup-now"
                    title="Run a backup now -- writes a bundle to {{ backups_root }}">
                <i class="bi bi-shield-plus me-1"></i>Back up now
            </button>
        </span>
    </div>
    <div class="card-body py-2 small text-muted border-bottom">
        <span class="me-3"><strong>Schedule:</strong>
            {% if backup_enabled %}{{ backup_cadence }}{% else %}off{% endif %}
            (<a href="/ui/settings#backup-schedule">change</a>)</span>
        <span class="me-3"><strong>Retention:</strong>
            keep last {{ backup_retention }}
            (prunes oldest on every successful backup)</span>
        <span class="me-3"><strong>Last scheduled run:</strong>
            {% if backup_last_run_at %}<code>{{ backup_last_run_at }}</code>{% else %}never{% endif %}</span>
        <span class="me-3"><strong>Destination:</strong>
            <code>{{ backups_root }}</code></span>
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 45%;">Backup ID</th>
                    <th>Status</th>
                    <th>Trigger</th>
                    <th>Bytes</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody class="bty-workers-backup-tbody">
                <tr><td colspan="5" class="text-muted">No active backups.</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    // esc + fmtBytes come from /static/bty-utils.js (loaded by the
    // layout); local aliases keep the per-page <script> readable.
    var esc = window.btyUtils.esc;
    var fmtBytes = window.btyUtils.fmtBytes;
    function statusBadge(s) {
        var cls = {
            "queued": "bg-secondary", "running": "bg-primary",
            "completed": "bg-success", "cancelled": "bg-warning text-dark",
            "failed": "bg-danger",
        }[s] || "bg-secondary";
        return '<span class="badge ' + cls + '">' + esc(s) + '</span>';
    }
    function isActive(j) {
        return j && (j.status === "queued" || j.status === "running");
    }
    function render(jobs) {
        var tbody = document.querySelector(".bty-workers-backup-tbody");
        if (!tbody) return;
        var rows = (jobs || []).filter(isActive);
        if (!rows.length) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-muted">No active backups.</td></tr>';
            return;
        }
        tbody.innerHTML = rows.map(function (d) {
            var cancel = '<button type="button" class="btn btn-sm btn-outline-danger text-nowrap ' +
                         'bty-workers-cancel" data-id="' +
                         esc(d.backup_id) + '"><i class="bi bi-x-circle me-1"></i>Cancel</button>';
            return "<tr>" +
                   "<td><code>" + esc(d.backup_id) + "</code></td>" +
                   "<td>" + statusBadge(d.status) + "</td>" +
                   "<td>" + esc(d.trigger || "") + "</td>" +
                   "<td class=\"small\">" + esc(fmtBytes(d.bytes_done || 0)) + "</td>" +
                   "<td class=\"text-end\">" + cancel + "</td>" +
                   "</tr>";
        }).join("");
    }
    // Active-job count from the previous poll. The on-disk listing +
    // Recent activity cards are server-rendered; when a backup
    // transitions from active to terminal (queued|running -> done)
    // we need a fresh server render so they reflect the new bundle +
    // the new event row. Tracking this lets us reload exactly once
    // per backup completion -- not every poll, and not when nothing
    // changed.
    var lastActiveCount = 0;
    function refresh() {
        var ts = "updated " + new Date().toLocaleTimeString();
        return fetch("/workers/backups", { credentials: "same-origin" })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                var jobs = (data && data.backups) || [];
                render(jobs);
                var activeCount = jobs.filter(isActive).length;
                if (lastActiveCount > 0 && activeCount === 0) {
                    // A backup just finished. Reload so the on-disk +
                    // activity cards pick up the new state. The worker
                    // commits to the DB + prunes before flipping status
                    // to terminal, so the page render is coherent at
                    // the moment we observe activeCount drop to 0.
                    window.location.reload();
                    return;
                }
                lastActiveCount = activeCount;
                var statusEl = document.querySelector(".bty-workers-poll-status");
                if (statusEl) statusEl.textContent = data ? ts : "(poll failed)";
            }).catch(function () {
                var statusEl = document.querySelector(".bty-workers-poll-status");
                if (statusEl) statusEl.textContent = "(poll failed)";
            });
    }
    document.addEventListener("click", function (ev) {
        var btn = ev.target.closest(".bty-workers-cancel");
        if (!btn) return;
        var bid = btn.dataset.id;
        if (!bid) return;
        btn.disabled = true;
        fetch("/workers/backups/" + encodeURIComponent(bid),
              { method: "DELETE", credentials: "same-origin" })
            .then(refresh)
            .catch(function () { btn.disabled = false; });
    });
    var backupNow = document.getElementById("bty-workers-backup-now");
    if (backupNow) {
        backupNow.addEventListener("click", function () {
            backupNow.disabled = true;
            fetch("/workers/backups", {
                method: "POST",
                credentials: "same-origin",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ trigger: "manual" }),
            }).then(function (r) {
                if (!r.ok) throw new Error("HTTP " + r.status);
                return refresh();
            }).catch(function (e) {
                alert("Backup failed to enqueue: " + e.message);
            }).then(function () { backupNow.disabled = false; });
        });
    }
    var handle = null;
    // SSE is the fast-path signal (refresh() runs in ~tens of ms after
    // a worker transitions); the 30s interval is the safety net for a
    // silently-dropped EventSource. Was 2s pre-SSE.
    function start() { if (!handle) { refresh(); handle = setInterval(refresh, 30000); } }
    function stop()  { if (handle) { clearInterval(handle); handle = null; } }
    document.addEventListener("visibilitychange", function () {
        if (document.hidden) stop(); else start();
    });
    document.addEventListener("bty-worker-state-changed", function (e) {
        if (e.detail && e.detail.kind === "backup") refresh();
    });
    document.addEventListener("bty-worker-events-connected", refresh);
    start();
})();
</script>

<div class="card mb-3" id="backups-on-disk">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-archive me-1"></i>Backups on disk
              <span class="text-muted small ms-1">{{ backups_on_disk|length }} bundle{{ '' if backups_on_disk|length == 1 else 's' }}</span></span>
        <span class="text-muted small">
            under <code>{{ backups_root }}</code>
        </span>
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Backup ID</th>
                    <th class="text-end">Machines</th>
                    <th class="text-end">Catalog entries</th>
                    <th class="text-end">Images</th>
                    <th class="text-end">Size</th>
                    <th>bty version</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% if not backups_on_disk %}
                <tr><td colspan="7" class="text-muted">No backups on disk yet. Click <em>Back up now</em> above, or enable a schedule on the <a href="/ui/settings#backup-schedule">Settings</a> page.</td></tr>
                {% else %}
                {% for b in backups_on_disk %}
                <tr>
                    <td><code>{{ b.backup_id }}</code></td>
                    <td class="text-end">{{ b.machines }}</td>
                    <td class="text-end">{{ b.catalog_entries }}</td>
                    <td class="text-end">{{ b.images }}</td>
                    <td class="text-end small">
                        {% set n = b.bytes_on_disk %}
                        {% if n < 1024 %}{{ n }} B
                        {%- elif n < 1024 * 1024 %}{{ '%.1f'|format(n / 1024) }} KiB
                        {%- elif n < 1024 * 1024 * 1024 %}{{ '%.1f'|format(n / (1024 * 1024)) }} MiB
                        {%- elif n < 1024 * 1024 * 1024 * 1024 %}{{ '%.1f'|format(n / (1024 * 1024 * 1024)) }} GiB
                        {%- else %}{{ '%.1f'|format(n / (1024 * 1024 * 1024 * 1024)) }} TiB{% endif %}
                    </td>
                    <td class="small text-muted">{{ b.bty_version or '(unreadable)' }}</td>
                    <td class="text-end">
                        <div class="btn-group btn-group-sm" role="group">
                            <a class="btn btn-outline-primary text-nowrap"
                               href="/ui/backups/{{ b.backup_id }}/download"
                               title="Download {{ b.backup_id }}.json to this browser">
                                <i class="bi bi-download me-1"></i>.json
                            </a>
                            <button type="button"
                                    class="btn btn-outline-danger text-nowrap bty-backups-delete"
                                    data-backup-id="{{ b.backup_id }}"
                                    title="Delete {{ b.backup_id }} from {{ backups_root }}">
                                <i class="bi bi-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    // Confirm-then-DELETE handler for the per-row trash button. The
    // server validates the slug before touching the filesystem; here
    // we just guard against an accidental click + reload the page on
    // success so the operator sees the row gone + a fresh event in
    // the activity card.
    document.addEventListener("click", function (ev) {
        var btn = ev.target.closest(".bty-backups-delete");
        if (!btn) return;
        var bid = btn.dataset.backupId;
        if (!bid) return;
        if (!window.confirm("Delete backup " + bid + "?\n\nThis removes the bundle from disk. The action is logged but cannot be undone.")) {
            return;
        }
        btn.disabled = true;
        fetch("/ui/backups/" + encodeURIComponent(bid), {
            method: "DELETE",
            credentials: "same-origin",
        }).then(function (r) {
            if (!r.ok) throw new Error("HTTP " + r.status);
            window.location.reload();
        }).catch(function (e) {
            alert("Delete failed: " + e.message);
            btn.disabled = false;
        });
    });
})();
</script>

{% with events=backup_events,
        title="Recent activity",
        link_to_full="/ui/events?subject_kind=backup",
        card_id="backups-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}