{% extends "base.html" %}
{% block title %}Cleanup · syspanel{% endblock %}
{% block heading %}Cleanup Manager{% endblock %}
{% block content %}
<div class="card">
  <div class="toolbar" style="margin-bottom:0">
    <p class="card-title" style="margin:0">Targets</p>
    <button id="refresh-btn">Refresh</button>
  </div>
  <div id="loader"></div>
  <div id="targets" style="display:none"></div>
  <div class="toolbar" style="margin-top:16px">
    <button id="preview-btn" class="primary">Preview selected</button>
    <span class="faint" id="preview-summary"></span>
  </div>
</div>
<div class="card" id="result-card" style="margin-top:16px;display:none">
  <p class="card-title">Last result</p>
  <div id="result-body"></div>
</div>
{% endblock %}

{% block scripts %}
<script type="module">
  import { api, formatBytes, toast, confirmModal, cachedPageLoader } from "/static/js/core.js";

  let lastPreview = null;
  let loader;

  function render(targets) {
    document.getElementById("targets").innerHTML = targets.map((t) => `
      <div style="display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)">
        <input type="checkbox" class="target-cb" data-id="${t.id}" ${t.available ? "" : "disabled"}>
        <div style="flex:1">
          <div>${t.label} ${t.disposition === "recycle" ? '<span class="faint">(recoverable)</span>' : ""}</div>
          <div class="faint">${t.description}</div>
        </div>
        <div style="text-align:right">
          ${t.available
            ? `<div>${t.file_count ?? "-"} files</div><div class="muted">${formatBytes(t.total_bytes)}</div>`
            : `<span class="lock-badge">🔒 ${t.reason || "unavailable"}</span>`}
        </div>
      </div>`).join("");
  }

  loader = cachedPageLoader({
    cacheKey: "cleanup-targets",
    fetchFn: () => api("/cleanup/targets"),
    renderFn: render,
    loaderEl: document.getElementById("loader"),
    contentEl: document.getElementById("targets"),
    refreshButton: document.getElementById("refresh-btn"),
    loadingMessage: "Measuring cleanup targets…",
  });

  document.getElementById("preview-btn").addEventListener("click", async () => {
    const ids = [...document.querySelectorAll(".target-cb:checked")].map((cb) => cb.dataset.id);
    if (!ids.length) {
      toast("Select at least one target", "error");
      return;
    }
    try {
      // Preview always re-resolves the exact file list live on the server —
      // the counts shown in the target list above may be a cached estimate,
      // but what gets deleted is never based on stale data.
      lastPreview = await api("/cleanup/preview", { method: "POST", body: JSON.stringify({ targets: ids }) });
      document.getElementById("preview-summary").textContent =
        `${lastPreview.file_count} files, ${formatBytes(lastPreview.total_bytes)} — token valid 120s`;

      const ok = await confirmModal({
        title: "Confirm cleanup",
        body: `This will permanently affect <b>${lastPreview.file_count} files</b> ` +
          `(${formatBytes(lastPreview.total_bytes)}). This action is logged. Proceed?`,
        confirmLabel: "Execute cleanup",
        danger: true,
      });
      if (!ok) return;

      const result = await api("/cleanup/execute", {
        method: "POST",
        body: JSON.stringify({ token: lastPreview.token, targets: ids, confirm: true }),
      });
      document.getElementById("result-card").style.display = "block";
      document.getElementById("result-body").innerHTML = `
        <div>Deleted: <b>${result.deleted_count}</b> · Freed: <b>${formatBytes(result.freed_bytes)}</b> ·
          Skipped: <b>${result.skipped_count}</b></div>
        ${result.errors.length ? `<pre class="faint" style="white-space:pre-wrap">${result.errors.join("\n")}</pre>` : ""}`;
      toast(`Freed ${formatBytes(result.freed_bytes)}`, "success");
      loader.refresh();
    } catch (e) {
      toast(e.message, "error");
    }
  });
</script>
{% endblock %}