{% extends "ui/_layout.html" %}
{% block title %}Downloads - 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="#downloads-list">Active</a>
            <span class="vr"></span>
            <a href="#downloads-activity">Activity</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    Three places things can come into bty: <strong>Fetch artifacts</strong>
    (the netboot trio + sha256 manifest matching this server's version),
    <strong>Upload Image</strong> (a local file), or
    <strong>Upload Image from URL</strong> (an
    <code>http(s)://</code> URL or <code>oras://</code> reference). Live
    progress shows in the table below; terminal rows drop out as each
    file completes. Recent history is at the bottom.
{% endcall %}
{% endblock %}

{% block content %}
<div class="card mb-3" id="downloads-list">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2 py-2">
        <span><i class="bi bi-arrow-down-circle me-1"></i>Downloads
              <span class="text-muted small bty-workers-poll-status ms-1">refreshing...</span></span>
        <span class="d-flex flex-wrap align-items-center gap-2" style="min-width: 0;">
            {# Fetch artifacts: enqueues the netboot trio + sha256
               manifest. The release tag is an editable magic value
               (Settings -> Upstream sources). Disabled when all four
               files are already cached on disk; re-enables when one
               disappears (operator ``rm``, state-dir migrate, etc.).
               Removing the cache to force a re-fetch is intentionally
               a CLI affordance, not a UI one -- the Netboot page
               shows which file maps to which path. #}
            <button type="button" class="btn btn-sm btn-primary text-nowrap"
                    id="bty-downloads-fetch-artifacts-btn"
                    data-tag="{{ release_tag }}"
                    {% if artifacts_all_cached %}disabled
                    title="Netboot artifacts for tag '{{ release_tag }}' are already cached. Remove a file from the boot directory (see Netboot page) to re-fetch."
                    {% else %}
                    title="Fetch netboot artifacts for tag '{{ release_tag }}' from {{ release_repo }}"
                    {% endif %}>
                <i class="bi bi-cloud-download me-1"></i>Fetch artifacts
                {% if release_tag == "latest" %}<small>(latest)</small>{% else %}<code>{{ release_tag }}</code>{% endif %}
                {% if artifacts_all_cached %}<i class="bi bi-check-circle ms-1" title="cached"></i>{% endif %}
            </button>
            <div class="vr"></div>
            {# Add image from URL: http(s):// trusts the upstream bytes
               on first flash; oras:// resolves the OCI manifest at add
               time. ``type="text"`` not ``url`` since browsers reject
               oras:// under HTML5 URL validation; the server-side
               Pydantic still validates. #}
            <form method="post" action="/ui/catalog/entries"
                  class="d-flex align-items-center gap-1 m-0" style="min-width: 0;">
                <input type="text" required class="form-control form-control-sm"
                       id="image_url" name="image_url"
                       style="max-width: 18rem; min-width: 0;"
                       placeholder="https://...img.gz  |  oras://owner/repo:tag"
                       title="http(s):// trusts the upstream bytes on first flash and back-fills disk_image_sha; oras:// resolves the OCI manifest digest at add time.">
                <button type="submit" class="btn btn-sm btn-primary flex-shrink-0 text-nowrap">
                    <i class="bi bi-cloud-plus me-1"></i>Add image from URL
                </button>
            </form>
            <div class="vr"></div>
            {# Streams via XHR PUT /images/<name>; HashManager
               auto-enqueues the sha256 on the post-write hook. #}
            <span class="d-flex gap-1 align-items-center" style="min-width: 0;">
                <input type="file" class="form-control form-control-sm" id="upload-file"
                       style="max-width: 15rem; min-width: 0;"
                       accept=".qcow2,.img,.img.zst,.img.xz,.img.gz,.img.bz2,.iso,.iso.gz"
                       title="Streams into the image root via PUT /images/<name>; SHA-256 auto-computed after.">
                <button type="button" class="btn btn-sm btn-primary flex-shrink-0 text-nowrap"
                        id="upload-btn" onclick="uploadSelectedFile();" disabled>
                    <i class="bi bi-upload me-1"></i>Upload image
                </button>
            </span>
        </span>
    </div>
    <div class="progress d-none mx-3 mt-2" id="upload-progress" style="height: 1rem;">
        <div class="progress-bar progress-bar-striped progress-bar-animated"
             role="progressbar" style="width: 0%;" id="upload-progress-bar">0%</div>
    </div>
    <div class="form-text small mx-3 mb-0 d-none" id="upload-status"></div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 35%;">Item</th>
                    <th>Status</th>
                    <th style="width: 35%;">Progress</th>
                    <th>Bytes</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody class="bty-workers-downloads-tbody">
                <tr><td colspan="5" class="text-muted">No active downloads.</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 progressBar(d) {
        if (d.bytes_total == null) {
            return '<div class="progress" style="height: 16px;">' +
                   '<div class="progress-bar progress-bar-striped progress-bar-animated" ' +
                   'style="width: 100%;">' + (d.status === "running" ? "..." : "") + '</div></div>';
        }
        var pct = d.bytes_total > 0 ? (100 * (d.bytes_done || 0) / d.bytes_total) : 0;
        return '<div class="progress" style="height: 16px;">' +
               '<div class="progress-bar" style="width: ' +
               pct.toFixed(1) + '%;">' + pct.toFixed(1) + '%</div></div>';
    }
    function isActive(j) {
        return j && (j.status === "queued" || j.status === "running");
    }

    // The two managers use different field names for the
    // bytes-so-far counter: catalog DownloadState exposes
    // ``bytes_downloaded``, ReleaseArtifactState exposes
    // ``bytes_done``. Normalise into ``bytes_done`` here so the
    // single ``progressBar`` + bytes formatter doesn't care which
    // source the row came from. Without this, catalog downloads
    // show 0% / 0 B regardless of actual progress (the symptom
    // that drove this fix).
    function normalize(d) {
        if (d.bytes_done == null && d.bytes_downloaded != null) {
            d.bytes_done = d.bytes_downloaded;
        }
        return d;
    }
    function renderDownloads(catalog, releases) {
        var tbody = document.querySelector(".bty-workers-downloads-tbody");
        if (!tbody) return;
        var rows = [];
        (catalog || []).forEach(function (j) {
            if (!isActive(j)) return;
            rows.push({
                label: esc(j.name),
                kind: "catalog",
                key: j.name,
                d: normalize(j),
            });
        });
        (releases || []).forEach(function (rf) {
            (rf.artifacts || []).forEach(function (a) {
                if (!isActive(a)) return;
                rows.push({
                    label: '<code>' + esc(rf.tag) + '</code> <small class="text-muted">' +
                           esc(a.name) + '</small>',
                    kind: "release",
                    key: rf.tag,
                    d: normalize(a),
                });
            });
        });
        if (!rows.length) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-muted">No active downloads.</td></tr>';
            return;
        }
        rows.sort(function (a, b) {
            var aS = a.d.status === "running" ? 0 : 1;
            var bS = b.d.status === "running" ? 0 : 1;
            return aS - bS;
        });
        tbody.innerHTML = rows.map(function (r) {
            var d = r.d;
            var bytes = fmtBytes(d.bytes_done || 0);
            if (d.bytes_total != null) bytes += " / " + fmtBytes(d.bytes_total);
            var cancel = '<button type="button" class="btn btn-sm btn-outline-danger text-nowrap ' +
                         'bty-workers-cancel" data-kind="' + r.kind + '" data-key="' +
                         esc(r.key) + '"><i class="bi bi-x-circle me-1"></i>Cancel</button>';
            return "<tr>" +
                   "<td>" + r.label + "</td>" +
                   "<td>" + statusBadge(d.status) + "</td>" +
                   "<td>" + progressBar(d) + "</td>" +
                   "<td class=\"small\">" + esc(bytes) + "</td>" +
                   "<td class=\"text-end\">" + cancel + "</td>" +
                   "</tr>";
        }).join("");
    }

    // Track which keys completed since the last poll so we can reload
    // the page once any release-fetch terminates. The reload picks up
    // the freshly-cached state into the server-rendered button (e.g.
    // disables Fetch artifacts when all four files landed).
    var seenCompletedKeys = null;  // null until the first poll seeds it
    function refresh() {
        var ts = "updated " + new Date().toLocaleTimeString();
        return Promise.allSettled([
            fetch("/catalog/downloads", { credentials: "same-origin" })
                .then(function (r) { return r.ok ? r.json() : null; }),
            fetch("/boot/releases", { credentials: "same-origin" })
                .then(function (r) { return r.ok ? r.json() : null; }),
        ]).then(function (results) {
            var dl = results[0].status === "fulfilled" ? results[0].value : null;
            var rl = results[1].status === "fulfilled" ? results[1].value : null;
            renderDownloads(dl ? dl.downloads : [], rl ? rl.fetches : []);
            var statusEl = document.querySelector(".bty-workers-poll-status");
            if (statusEl) statusEl.textContent = (dl && rl) ? ts : "(poll failed)";

            // Detect a newly-terminal release fetch + reload so the
            // server-rendered button state updates.
            var nowCompleted = new Set();
            (rl ? rl.fetches : []).forEach(function (f) {
                if (f.status === "completed" || f.status === "failed") {
                    nowCompleted.add("release:" + f.tag);
                }
            });
            (dl ? dl.downloads : []).forEach(function (d) {
                if (d.status === "completed" || d.status === "failed") {
                    nowCompleted.add("catalog:" + d.name);
                }
            });
            if (seenCompletedKeys === null) {
                seenCompletedKeys = nowCompleted;
                return;
            }
            var fresh = false;
            nowCompleted.forEach(function (k) {
                if (!seenCompletedKeys.has(k)) fresh = true;
            });
            seenCompletedKeys = nowCompleted;
            if (fresh) setTimeout(function () { window.location.reload(); }, 400);
        });
    }

    // Cancel an in-flight row (event-delegated; rows re-render every poll).
    document.addEventListener("click", function (ev) {
        var btn = ev.target.closest(".bty-workers-cancel");
        if (!btn) return;
        var kind = btn.dataset.kind;
        var key = btn.dataset.key;
        var url = ({
            "catalog": "/catalog/downloads/",
            "release": "/boot/releases/",
        }[kind] || "") + encodeURIComponent(key);
        if (!url) return;
        btn.disabled = true;
        fetch(url, { method: "DELETE", credentials: "same-origin" })
            .then(refresh)
            .catch(function () { btn.disabled = false; });
    });

    // "Fetch artifacts" trigger. The button disables immediately on
    // click and STAYS disabled while the fetch runs -- the polling
    // loop above reloads the page on completion, which picks up the
    // freshly-cached state into the server-rendered disabled / enabled
    // bit. Re-enable only on a synchronous enqueue error.
    var fetchBtn = document.getElementById("bty-downloads-fetch-artifacts-btn");
    if (fetchBtn) {
        fetchBtn.addEventListener("click", function () {
            var tag = (fetchBtn.dataset.tag || "latest").trim() || "latest";
            fetchBtn.disabled = true;
            fetch("/boot/releases", {
                method: "POST",
                credentials: "same-origin",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ tag: tag }),
            }).then(function (r) {
                if (!r.ok) throw new Error("HTTP " + r.status);
                return refresh();
            }).catch(function (e) {
                alert("Fetch failed: " + e.message);
                fetchBtn.disabled = false;
            });
        });
    }

    // Enable Upload once a file is picked.
    var fileInput = document.getElementById("upload-file");
    var uploadBtn = document.getElementById("upload-btn");
    if (fileInput && uploadBtn) {
        fileInput.addEventListener("change", function () {
            uploadBtn.disabled = !fileInput.files || fileInput.files.length === 0;
        });
    }

    // SSE-driven refresh; the 30s interval is a safety net for the rare
    // case where the EventSource drops without auto-reconnect. The page
    // tracks both catalog downloads and release fetches, so it listens
    // for both kinds.
    var handle = null;
    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) return;
        if (e.detail.kind === "download" || e.detail.kind === "release") refresh();
    });
    document.addEventListener("bty-worker-events-connected", refresh);
    start();
})();

function uploadSelectedFile() {
    var input = document.getElementById("upload-file");
    var btn = document.getElementById("upload-btn");
    var progress = document.getElementById("upload-progress");
    var bar = document.getElementById("upload-progress-bar");
    var status = document.getElementById("upload-status");
    if (!input.files || !input.files.length) return;
    var file = input.files[0];
    var url = "/images/" + encodeURIComponent(file.name);
    var xhr = new XMLHttpRequest();
    xhr.open("PUT", url, true);
    xhr.setRequestHeader("Content-Type", "application/octet-stream");
    xhr.withCredentials = true;
    xhr.upload.onprogress = function (ev) {
        if (!ev.lengthComputable) return;
        var pct = Math.round(ev.loaded * 100 / ev.total);
        bar.style.width = pct + "%";
        bar.textContent = pct + "%";
    };
    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
            status.textContent = "Upload complete; refreshing...";
            setTimeout(function () { window.location = "/ui/downloads"; }, 600);
        } else {
            status.textContent = "Upload failed: HTTP " + xhr.status + " " + xhr.responseText;
            btn.disabled = false;
            progress.classList.add("d-none");
        }
    };
    xhr.onerror = function () {
        status.textContent = "Upload failed: network error";
        btn.disabled = false;
        progress.classList.add("d-none");
    };
    btn.disabled = true;
    progress.classList.remove("d-none");
    status.classList.remove("d-none");
    bar.style.width = "0%";
    bar.textContent = "0%";
    status.textContent = "Uploading " + file.name + " (" + file.size.toLocaleString() + " bytes)...";
    xhr.send(file);
}
</script>

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