{% extends "base.html" %}
{% block title %}Processes · syspanel{% endblock %}
{% block heading %}Process Monitor{% endblock %}
{% block content %}
<div class="toolbar">
  <input type="search" id="search" placeholder="Filter by name or pid…" style="width:260px">
  <button id="refresh-btn">Refresh</button>
  <span class="faint" id="row-count"></span>
</div>
<div class="card" style="padding:0">
  <div id="loader"></div>
  <div class="table-scroll" id="table-wrap" style="display:none">
    <table class="data-table" id="table">
      <thead>
        <tr>
          <th data-key="name" style="width:22%">Name</th>
          <th data-key="pid" class="num" style="width:8%">PID</th>
          <th data-key="username" style="width:16%">User</th>
          <th data-key="cpu_percent" class="num" style="width:9%">CPU%</th>
          <th data-key="mem_bytes" class="num" style="width:11%">Memory</th>
          <th data-key="num_threads" class="num" style="width:9%">Threads</th>
          <th data-key="status" style="width:12%">Status</th>
          <th style="width:13%"></th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>
{% endblock %}

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

  let rows = [];
  let sortKey = "cpu_percent";
  let sortDesc = true;

  function render() {
    const filter = document.getElementById("search").value.toLowerCase();
    let filtered = rows.filter((r) =>
      !filter || r.name.toLowerCase().includes(filter) || String(r.pid).includes(filter));
    filtered = filtered.slice().sort((a, b) => {
      const av = a[sortKey], bv = b[sortKey];
      const cmp = typeof av === "string" ? av.localeCompare(bv) : av - bv;
      return sortDesc ? -cmp : cmp;
    });
    document.getElementById("row-count").textContent = `${filtered.length} processes`;
    document.querySelector("#table tbody").innerHTML = filtered.map((p) => `
      <tr>
        <td title="${p.name}">${p.name}</td>
        <td class="num">${p.pid}</td>
        <td title="${p.username || ""}">${p.username || ""}</td>
        <td class="num">${p.cpu_percent.toFixed(1)}</td>
        <td class="num">${formatBytes(p.mem_bytes)}</td>
        <td class="num">${p.num_threads}</td>
        <td>${p.status}</td>
        <td>${p.protected
          ? '<span class="lock-badge">🔒 protected</span>'
          : `<button data-pid="${p.pid}" data-name="${p.name}" class="kill-btn danger">Kill</button>`}</td>
      </tr>`).join("");

    document.querySelectorAll(".kill-btn").forEach((btn) => {
      btn.addEventListener("click", async () => {
        const pid = Number(btn.dataset.pid);
        const ok = await confirmModal({
          title: `Kill ${btn.dataset.name} (pid ${pid})?`,
          body: "The process will be asked to terminate, then forcefully killed after 3 seconds if it doesn't.",
          confirmLabel: "Kill process",
          danger: true,
        });
        if (!ok) return;
        try {
          const result = await api("/processes/kill", { method: "POST", body: JSON.stringify({ pid }) });
          toast(`${btn.dataset.name} ${result.outcome}`, "success");
        } catch (e) {
          toast(e.message, "error");
        }
      });
    });
  }

  document.querySelectorAll("#table th[data-key]").forEach((th) => {
    th.addEventListener("click", () => {
      const key = th.dataset.key;
      if (sortKey === key) sortDesc = !sortDesc;
      else { sortKey = key; sortDesc = true; }
      render();
    });
  });
  document.getElementById("search").addEventListener("input", render);

  // Cache-first: a session revisit renders instantly from last time's data.
  // Background refresh every 5 minutes, plus the manual Refresh button —
  // both silent (no spinner replay), keeping the table visible throughout.
  cachedPageLoader({
    cacheKey: "processes",
    fetchFn: () => api("/processes"),
    renderFn: (data) => { rows = data; render(); },
    loaderEl: document.getElementById("loader"),
    contentEl: document.getElementById("table-wrap"),
    refreshButton: document.getElementById("refresh-btn"),
    loadingMessage: "Loading processes…",
  });
</script>
{% endblock %}