{% extends "base.html" %}
{% block title %}Services · syspanel{% endblock %}
{% block heading %}Service Watchlist{% endblock %}
{% block content %}
<div class="toolbar">
  <input type="search" id="search" placeholder="Filter services…" 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 style="width:8%">Watch</th>
          <th style="width:28%">Display name</th>
          <th style="width:20%">Status</th>
          <th style="width:12%">Start type</th>
          <th style="width:8%">PID</th>
          <th style="width:24%"></th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
</div>
{% endblock %}

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

  let rows = [];
  let loader;

  function statusPill(s) {
    const cls = s.status === "running" ? "good" : s.in_violation ? "danger" : "";
    return `<span class="pill ${cls}">${s.status}${s.in_violation ? " ⚠ expected " + s.desired_state : ""}</span>`;
  }

  function render() {
    const filter = document.getElementById("search").value.toLowerCase();
    const filtered = rows.filter((r) => !filter || r.display_name.toLowerCase().includes(filter) ||
      r.name.toLowerCase().includes(filter));
    document.getElementById("row-count").textContent = `${filtered.length} services`;
    document.querySelector("#table tbody").innerHTML = filtered.map((s) => `
      <tr>
        <td><input type="checkbox" class="watch-cb" data-name="${s.name}" ${s.watched ? "checked" : ""}></td>
        <td title="${s.display_name}">${s.display_name}<div class="faint">${s.name}</div></td>
        <td>${statusPill(s)}</td>
        <td>${s.start_type || ""}</td>
        <td class="num">${s.pid || ""}</td>
        <td>
          <button data-name="${s.name}" data-action="start" class="ctrl-btn">Start</button>
          <button data-name="${s.name}" data-action="stop" class="ctrl-btn">Stop</button>
          <button data-name="${s.name}" data-action="restart" class="ctrl-btn">Restart</button>
        </td>
      </tr>`).join("");

    document.querySelectorAll(".watch-cb").forEach((cb) => {
      cb.addEventListener("change", async () => {
        try {
          await api("/services/watch", {
            method: "POST",
            body: JSON.stringify({ name: cb.dataset.name, desired_state: cb.checked ? "running" : null }),
          });
          toast(cb.checked ? "Added to watchlist" : "Removed from watchlist", "success");
          loader.refresh();
        } catch (e) {
          toast(e.message, "error");
          cb.checked = !cb.checked;
        }
      });
    });

    document.querySelectorAll(".ctrl-btn").forEach((btn) => {
      btn.addEventListener("click", async () => {
        const ok = await confirmModal({
          title: `${btn.dataset.action} ${btn.dataset.name}?`,
          body: "This requires administrator privileges.",
          confirmLabel: btn.dataset.action[0].toUpperCase() + btn.dataset.action.slice(1),
        });
        if (!ok) return;
        try {
          await api("/services/control", {
            method: "POST",
            body: JSON.stringify({ name: btn.dataset.name, action: btn.dataset.action }),
          });
          toast(`${btn.dataset.name}: ${btn.dataset.action} ok`, "success");
          loader.refresh();
        } catch (e) {
          toast(e.message, "error");
        }
      });
    });
  }

  document.getElementById("search").addEventListener("input", render);

  loader = cachedPageLoader({
    cacheKey: "services",
    fetchFn: () => api("/services"),
    renderFn: (data) => { rows = data; render(); },
    loaderEl: document.getElementById("loader"),
    contentEl: document.getElementById("table-wrap"),
    refreshButton: document.getElementById("refresh-btn"),
    loadingMessage: "Loading services…",
  });
</script>
{% endblock %}