// retoor <retoor@molodetz.nl>
import { Http } from "./Http.js";
import { Poller } from "./Poller.js";

export class ServiceMonitor {
  constructor() {
    this.root = document.querySelector("[data-service-monitor]");
    if (!this.root) {
      return;
    }
    this.mode = this.root.dataset.serviceMonitor;
    this.poller = new Poller(() => this.refresh(), 3000).start();
  }

  async refresh() {
    if (this.mode === "detail") {
      const payload = await Http.getJson(`/admin/services/${encodeURIComponent(this.root.dataset.service)}`);
      this.renderDetail(payload.service || {});
    } else {
      const payload = await Http.getJson("/admin/services");
      (payload.services || []).forEach((service) => this.renderRow(service));
    }
  }

  setStatus(node, status) {
    if (node) {
      node.className = `status ${status}`;
      node.textContent = status;
    }
  }

  setTime(node, iso) {
    if (!node) {
      return;
    }
    node.replaceChildren();
    if (iso) {
      const time = document.createElement("time");
      time.dataset.dt = iso;
      time.dataset.mode = "datetime";
      time.dateTime = iso;
      time.textContent = iso;
      node.append(time);
    }
  }

  renderRow(service) {
    const row = this.root.querySelector(`[data-service="${CSS.escape(service.name)}"]`);
    if (!row) {
      return;
    }
    this.setStatus(row.querySelector('[data-field="status"]'), service.status);
    this.setTime(row.querySelector('[data-field="last_run"]'), service.last_run);
    this.setTime(row.querySelector('[data-field="next_run"]'), service.next_run);
  }

  renderDetail(service) {
    this.setStatus(this.root.querySelector('[data-field="status"]'), service.status);
    const logs = this.root.querySelector('[data-field="logs"]');
    if (logs) {
      logs.textContent = (service.logs || []).join("\n");
    }
    const cards = this.root.querySelector('[data-field="cards"]');
    if (cards && service.metrics?.cards) {
      cards.replaceChildren(...service.metrics.cards.map((card) => {
        const box = document.createElement("div");
        box.className = "stat-card";
        const value = document.createElement("span");
        value.className = "value";
        value.textContent = card.value;
        const name = document.createElement("span");
        name.className = "name";
        name.textContent = card.label;
        box.append(value, name);
        return box;
      }));
    }
  }
}

window.serviceMonitor = new ServiceMonitor();