{% extends "ui/_layout.html" %}
{% block title %}Images - bty-web{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="h3 mb-0"><i class="bi bi-disc me-2"></i>Images</h1>
    <span class="text-muted small">
        {{ unified|length }} entr{{ "y" if unified|length == 1 else "ies" }}
        | image-root <code>{{ image_root }}</code>
    </span>
</div>

<div class="card mb-3">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-cloud-plus me-1"></i>Add image by URL
    </div>
    <div class="card-body">
        <form method="post" action="/ui/catalog/entries">
            <div class="row g-2 align-items-end">
                <div class="col-md-5">
                    <label for="image_url" class="form-label small mb-1">Image URL or <code>oras://</code> ref</label>
                    {# type="text" rather than type="url": some browsers
                       reject non-http schemes (oras://) under HTML5 URL
                       validation. Server-side Pydantic validation still
                       runs (regex covers http/https/oras schemes). #}
                    <input type="text" required class="form-control" id="image_url" name="image_url"
                           placeholder="https://example.com/ubuntu.img.gz  |  oras://ghcr.io/owner/repo:tag">
                </div>
                <div class="col-md-5">
                    <label for="sha_url" class="form-label small mb-1">SHA URL <span class="text-muted">(optional)</span></label>
                    <input type="url" class="form-control" id="sha_url" name="sha_url"
                           placeholder="https://example.com/ubuntu-22.04.img.gz.sha256">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-plus-lg me-1"></i>Add
                    </button>
                </div>
            </div>
            <div class="form-text small mt-2">
                Image URL is required.
                For <code>http(s)://</code> URLs, providing a SHA URL (a sha256sum-style manifest)
                pins the content sha at add time so cache-through can verify it; without it the
                first flash trusts the upstream bytes and back-fills <code>disk_image_sha</code>
                with what it observed. Either way the entry is bindable to a machine via its
                <code>bty_image_ref</code>.
                For <code>oras://</code> refs the server resolves the OCI manifest at add time and
                uses the layer's content-addressed digest -- no SHA URL needed (it's ignored).
            </div>
        </form>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-upload me-1"></i>Upload image file
    </div>
    <div class="card-body">
        {# Streams the file via XHR PUT to /images/<name> -- the
           existing API endpoint that takes ``application/octet-
           stream``. JS handles progress + auth (cookie, same-
           origin); on success we reload so the new file shows
           up in the catalog table below. The HashManager picks
           up the upload via PUT /images/<name>'s post-write
           hook (auto-enqueue), so a SHA appears in seconds. #}
        <div class="row g-2 align-items-end">
            <div class="col-md-9">
                <label for="upload-file" class="form-label small mb-1">Local image file</label>
                <input type="file" class="form-control" id="upload-file"
                       accept=".qcow2,.img,.img.zst,.img.xz,.img.gz,.img.bz2,.iso,.iso.gz">
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-primary w-100" id="upload-btn"
                        onclick="uploadSelectedFile();" disabled>
                    <i class="bi bi-upload me-1"></i>Upload
                </button>
            </div>
        </div>
        <div class="progress mt-2 d-none" id="upload-progress" style="height: 1.25rem;">
            <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 mt-2" id="upload-status">
            Pick a file -- it streams directly into the image root via
            <code>PUT /images/&lt;name&gt;</code>. SHA-256 is auto-computed
            in the background after upload completes.
        </div>
    </div>
</div>

<script>
    (function () {
        var input = document.getElementById("upload-file");
        var btn = document.getElementById("upload-btn");
        input.addEventListener("change", function () {
            btn.disabled = !input.files || input.files.length === 0;
        });
    })();

    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];
        // PUT /images/<filename> takes raw bytes. Server uses the
        // path-segment name; ``filename`` from <input type=file> is
        // already just the basename in browsers.
        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; reloading catalog...";
                setTimeout(function () { window.location.reload(); }, 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");
        bar.style.width = "0%";
        bar.textContent = "0%";
        status.textContent = "Uploading " + file.name + " (" + file.size.toLocaleString() + " bytes)...";
        xhr.send(file);
    }
</script>

{% if not unified %}
<div class="alert alert-light border">
    <i class="bi bi-info-circle me-2"></i>
    No images yet. Add one with the form above, drop a
    <code>.qcow2</code> / <code>.img</code> / <code>.img.zst</code> /
    <code>.img.xz</code> / <code>.img.gz</code> / <code>.img.bz2</code> file
    under <code>{{ image_root }}</code>, or author a <code>catalog.toml</code>
    manifest. Refresh the page after either to see them here.
</div>
{% else %}

<div class="card mb-3">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-list-ul me-1"></i>Unified catalog (dir scan + manifest, SHA-keyed)
    </div>
    <div class="table-responsive">
        <table class="table table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Name(s)</th>
                    {# Observed content sha (``disk_image_sha`` on
                       the catalog row). Machines bind via
                       ``bty_image_ref`` -- shown in the machine-
                       detail picker, not here. #}
                    <th>Content SHA</th>
                    <th>Format</th>
                    <th>Sources</th>
                    <th>Cached</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for u in unified %}
                <tr>
                    <td>
                        <i class="bi bi-file-earmark-binary text-secondary me-1"></i>
                        {% for n in u.names %}
                        <code>{{ n }}</code>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        {% if u.sha256 %}
                        <code title="{{ u.sha256 }}">{{ u.sha256[:12] }}...</code>
                        {% else %}
                        <span class="badge bg-warning text-dark"
                              title="content sha not computed yet; the entry is still bindable because machines bind by bty_image_ref. The sha lands when the HashManager finishes or after the first cache-through fetch">unhashed</span>
                        {% endif %}
                    </td>
                    <td><span class="badge bg-secondary">{{ u.format or "?" }}</span></td>
                    <td class="small">
                        {% for s in u.sources %}
                        {% if s.kind == "local" %}
                        <i class="bi bi-hdd text-muted me-1" title="local file"></i><code>{{ s.location }}</code>
                        {% elif s.kind == "url" %}
                        <i class="bi bi-cloud-plus text-muted me-1" title="operator-added URL"></i><code>{{ s.location }}</code>
                        {% else %}
                        <i class="bi bi-cloud text-muted me-1" title="manifest src"></i><code>{{ s.location }}</code>
                        {% endif %}
                        {% if not loop.last %}<br>{% endif %}
                        {% endfor %}
                    </td>
                    <td>
                        {% if u.cached %}
                        <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>cached</span>
                        {% else %}
                        <span class="badge bg-light text-dark border">available</span>
                        {% endif %}
                    </td>
                    <td class="text-end">
                        {% if not u.sha256 %}
                        {# Unhashed dir-scan file: a hash button
                           enqueues via the HashManager (background,
                           single-worker by default). #}
                        <button type="button"
                                class="btn btn-sm btn-warning bty-hash-btn"
                                data-name="{{ u.names[0] }}">
                            <i class="bi bi-hash me-1"></i>Hash
                        </button>
                        {% elif not u.cached %}
                        {# Manifest-only entry not yet in cache: a fetch
                           button enqueues via the DownloadManager. #}
                        <button type="button"
                                class="btn btn-sm btn-primary bty-fetch-btn"
                                data-name="{{ u.names[0] }}">
                            <i class="bi bi-cloud-arrow-down me-1"></i>Fetch
                        </button>
                        {% else %}
                        <span class="text-muted small">-</span>
                        {% endif %}
                        {# Operator-added catalog_entries rows are
                           identified by a ``url``-kind source. Show
                           a Delete button to remove via the
                           ``DELETE /catalog/entries?src=...`` API. #}
                        {% set url_src = u.sources|selectattr('kind','equalto','url')|map(attribute='location')|first %}
                        {% if url_src %}
                        <button type="button"
                                class="btn btn-sm btn-outline-danger ms-1 bty-catalog-entry-delete-btn"
                                data-src="{{ url_src }}"
                                title="Remove this URL from the catalog">
                            <i class="bi bi-trash"></i>
                        </button>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center">
        <span><i class="bi bi-arrow-down-circle me-1"></i>Downloads</span>
        <span class="text-muted small bty-poll-status">refreshing...</span>
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Name</th>
                    <th>Status</th>
                    <th style="width: 30%;">Progress</th>
                    <th>Bytes</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody class="bty-downloads-tbody">
                <tr><td colspan="5" class="text-muted">No downloads yet.</td></tr>
            </tbody>
        </table>
    </div>
</div>

<div class="card">
    <div class="card-header bg-light fw-semibold">
        <i class="bi bi-hash me-1"></i>Hashes
        <small class="text-muted ms-2">background SHA-256 of dir-scan files; default 1 at a time so small hardware (Pi / NUC) stays responsive</small>
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th>Name</th>
                    <th>Status</th>
                    <th style="width: 30%;">Progress</th>
                    <th>Bytes</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody class="bty-hashes-tbody">
                <tr><td colspan="5" class="text-muted">No hashes yet.</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    "use strict";

    // HTML-escape arbitrary strings before innerHTML interpolation.
    // ``d.name`` is operator-controlled (catalog manifest entries
    // and operator-added URL entries), and Pydantic's
    // ``CatalogEnqueueRequest`` only blocks path-traversal chars
    // (``/`` ``\`` NUL) -- not HTML metacharacters. Without esc()
    // an authenticated operator could craft a catalog entry whose
    // name embeds ``<script>``; with esc() that just renders as
    // visible text. Defence-in-depth.
    function esc(v) {
        if (v === null || v === undefined) return "";
        return String(v)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#39;");
    }

    function fmtBytes(n) {
        if (n === null || n === undefined) return "-";
        if (n < 1024) return n + " B";
        var units = ["KiB", "MiB", "GiB", "TiB"];
        var v = n / 1024;
        var i = 0;
        while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
        return v.toFixed(1) + " " + units[i];
    }

    function statusBadge(status) {
        var cls = {
            "queued":    "bg-secondary",
            "running":   "bg-primary",
            "completed": "bg-success",
            "cancelled": "bg-warning text-dark",
            "failed":    "bg-danger",
        }[status] || "bg-secondary";
        return '<span class="badge ' + cls + '">' + esc(status) + '</span>';
    }

    function progressBar(d) {
        if (d.bytes_total === null || d.bytes_total === undefined) {
            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_downloaded / d.bytes_total) : 0;
        var color = d.status === "completed" ? "bg-success" :
                    d.status === "failed"    ? "bg-danger"  :
                    d.status === "cancelled" ? "bg-warning" : "";
        return '<div class="progress" style="height: 16px;">' +
               '<div class="progress-bar ' + color + '" style="width: ' +
               pct.toFixed(1) + '%;">' + pct.toFixed(1) + '%</div></div>';
    }

    function renderJobs(tbody, jobs, byteField, cancelEndpoint, emptyMsg) {
        if (!tbody) return;
        if (jobs.length === 0) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-muted">' +
                              emptyMsg + '</td></tr>';
            return;
        }
        var order = { "running": 0, "queued": 1, "failed": 2, "cancelled": 3, "completed": 4 };
        jobs.sort(function (a, b) {
            return (order[a.status] || 9) - (order[b.status] || 9);
        });
        var rows = jobs.map(function (d) {
            var dl = d[byteField] || 0;
            var bytes = fmtBytes(dl);
            // Both download + hash carry bytes_total, but the
            // download mode allows null (Content-Length absent)
            // whereas hashing always knows the size from stat().
            if (d.bytes_total !== null && d.bytes_total !== undefined) {
                bytes += " / " + fmtBytes(d.bytes_total);
            }
            // Adapt progress shape to the renderer (which keys on
            // ``bytes_downloaded``).
            var pdata = {
                bytes_downloaded: dl,
                bytes_total: d.bytes_total,
                status: d.status,
            };
            return "<tr>" +
                   "<td><code>" + esc(d.name) + "</code></td>" +
                   "<td>" + statusBadge(d.status) + "</td>" +
                   "<td>" + progressBar(pdata) + "</td>" +
                   "<td class=\"small\">" + esc(bytes) + "</td>" +
                   "<td class=\"text-end\">" + actionCellFor(d, cancelEndpoint) + "</td>" +
                   "</tr>";
        });
        tbody.innerHTML = rows.join("");
    }

    function actionCellFor(d, cancelEndpoint) {
        if (d.status === "queued" || d.status === "running") {
            return '<button type="button" class="btn btn-sm btn-outline-danger bty-cancel-btn" ' +
                   'data-name="' + esc(d.name) + '" data-endpoint="' + esc(cancelEndpoint) + '">' +
                   '<i class="bi bi-x-circle me-1"></i>Cancel</button>';
        }
        if (d.status === "failed") {
            return '<span class="text-danger small" title="' + esc(d.error || "") + '">' +
                   '<i class="bi bi-exclamation-triangle me-1"></i>' +
                   esc((d.error || "failed").substring(0, 60)) + '</span>';
        }
        return "";
    }

    var pollHandle = null;
    var lastSeenCompleted = new Set();  // download:<name> | hash:<name>
    var firstPoll = true;
    function refresh() {
        var statusEl = document.querySelector(".bty-poll-status");
        // Both endpoints in parallel; render whichever returns
        // first without blocking the other.
        var pDl = fetch("/catalog/downloads", { credentials: "same-origin" })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                var downloads = data.downloads || [];
                renderJobs(
                    document.querySelector(".bty-downloads-tbody"),
                    downloads,
                    "bytes_downloaded",
                    "/catalog/downloads/",
                    "No downloads yet."
                );
                return downloads.map(function (d) {
                    return { kind: "download", name: d.name, status: d.status };
                });
            }).catch(function () { return []; });
        var pHa = fetch("/catalog/hashes", { credentials: "same-origin" })
            .then(function (r) { return r.json(); })
            .then(function (data) {
                var hashes = data.hashes || [];
                renderJobs(
                    document.querySelector(".bty-hashes-tbody"),
                    hashes,
                    "bytes_hashed",
                    "/catalog/hashes/",
                    "No hashes yet."
                );
                return hashes.map(function (h) {
                    return { kind: "hash", name: h.name, status: h.status };
                });
            }).catch(function () { return []; });
        return Promise.all([pDl, pHa]).then(function (results) {
            var jobs = results[0].concat(results[1]);
            if (statusEl) statusEl.textContent = "updated " +
                new Date().toLocaleTimeString();
            if (firstPoll) {
                jobs.forEach(function (j) {
                    if (j.status === "completed") {
                        lastSeenCompleted.add(j.kind + ":" + j.name);
                    }
                });
                firstPoll = false;
                return;
            }
            // A newly-completed download means a catalog row's
            // ``cached`` flipped; a newly-completed hash means an
            // image's ``sha256`` flipped. Either way the catalog
            // table needs to reload to pick the change up.
            jobs.forEach(function (j) {
                var key = j.kind + ":" + j.name;
                if (j.status === "completed" && !lastSeenCompleted.has(key)) {
                    lastSeenCompleted.add(key);
                    setTimeout(function () { window.location.reload(); }, 800);
                }
            });
        }).catch(function (err) {
            if (statusEl) statusEl.textContent = "poll failed: " + err.message;
        });
    }

    function startPolling() {
        refresh();
        pollHandle = setInterval(refresh, 2000);
    }
    function stopPolling() {
        if (pollHandle !== null) clearInterval(pollHandle);
        pollHandle = null;
    }
    document.addEventListener("visibilitychange", function () {
        if (document.hidden) stopPolling(); else startPolling();
    });

    document.addEventListener("click", function (ev) {
        var fetchBtn = ev.target.closest(".bty-fetch-btn");
        if (fetchBtn) {
            ev.preventDefault();
            var name = fetchBtn.getAttribute("data-name");
            fetchBtn.disabled = true;
            fetch("/catalog/downloads", {
                method: "POST",
                credentials: "same-origin",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name: name }),
            }).then(refresh).catch(function () {
                fetchBtn.disabled = false;
            });
            return;
        }
        var hashBtn = ev.target.closest(".bty-hash-btn");
        if (hashBtn) {
            ev.preventDefault();
            var name = hashBtn.getAttribute("data-name");
            hashBtn.disabled = true;
            fetch("/catalog/hashes", {
                method: "POST",
                credentials: "same-origin",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ name: name }),
            }).then(refresh).catch(function () {
                hashBtn.disabled = false;
            });
            return;
        }
        var cancelBtn = ev.target.closest(".bty-cancel-btn");
        if (cancelBtn) {
            ev.preventDefault();
            var name = cancelBtn.getAttribute("data-name");
            var endpoint = cancelBtn.getAttribute("data-endpoint") ||
                           "/catalog/downloads/";
            cancelBtn.disabled = true;
            fetch(endpoint + encodeURIComponent(name), {
                method: "DELETE",
                credentials: "same-origin",
            }).then(refresh);
            return;
        }
        var entryDeleteBtn = ev.target.closest(".bty-catalog-entry-delete-btn");
        if (entryDeleteBtn) {
            ev.preventDefault();
            var src = entryDeleteBtn.getAttribute("data-src");
            if (!confirm("Remove this URL from the catalog?\n\n" + src)) return;
            entryDeleteBtn.disabled = true;
            fetch("/catalog/entries?src=" + encodeURIComponent(src), {
                method: "DELETE",
                credentials: "same-origin",
            }).then(function () {
                // Full reload so the row disappears + flash banner
                // (if any) renders. Refresh just hits the polling
                // endpoints; we want the page tree re-rendered.
                window.location.reload();
            }).catch(function () {
                entryDeleteBtn.disabled = false;
            });
        }
    });

    startPolling();
})();
</script>

{% endif %}

{# Image-relevant event slice (uploads, hashes, catalog adds /
   deletes). The /ui/events drill-down filters to subject_kind=
   image; catalog rows are picked up via the broader filter at
   /ui/events itself. #}
{% with events=image_events,
        title="Recent image-catalog activity",
        link_to_full="/ui/events?subject_kind=image" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}