{% extends "base.html" %}
{% block title %}Power · syspanel{% endblock %}
{% block heading %}Power{% endblock %}
{% block content %}
<div class="card" id="restart-card">
  <p class="card-title">Restart this PC</p>
  <p class="muted">Schedules a restart with a countdown you can cancel at any time before it fires.
    Every request is logged to the audit log.</p>
  <div class="toolbar">
    <label class="muted" for="delay-select">Delay before restart</label>
    <select id="delay-select">
      <option value="30">30 seconds</option>
      <option value="60" selected>1 minute</option>
      <option value="120">2 minutes</option>
      <option value="300">5 minutes</option>
    </select>
    <button id="restart-btn" class="danger">Restart PC</button>
  </div>
</div>

<div class="card" id="countdown-card" style="margin-top:16px;display:none">
  <p class="card-title">Restart pending</p>
  <div class="stat-value" id="countdown-value" style="color:var(--danger)">–</div>
  <p class="muted">The system will restart when this reaches zero.</p>
  <button id="cancel-btn" class="primary">Cancel restart</button>
</div>
{% endblock %}

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

  let countdownTimer = null;
  let remaining = 0;

  function showCountdown(seconds) {
    remaining = seconds;
    document.getElementById("restart-card").style.display = "none";
    document.getElementById("countdown-card").style.display = "block";
    tick();
    clearInterval(countdownTimer);
    countdownTimer = setInterval(tick, 1000);
  }

  function tick() {
    if (remaining <= 0) {
      clearInterval(countdownTimer);
      document.getElementById("countdown-value").textContent = "Restarting…";
      return;
    }
    document.getElementById("countdown-value").textContent =
      `${Math.floor(remaining / 60)}:${String(remaining % 60).padStart(2, "0")}`;
    remaining -= 1;
  }

  function hideCountdown() {
    clearInterval(countdownTimer);
    document.getElementById("countdown-card").style.display = "none";
    document.getElementById("restart-card").style.display = "block";
  }

  document.getElementById("restart-btn").addEventListener("click", async () => {
    const delaySeconds = Number(document.getElementById("delay-select").value);
    const ok = await confirmModal({
      title: "Restart this PC?",
      body: `The system will restart in ${delaySeconds} seconds. You'll get a countdown ` +
        "with a Cancel button before it happens. This is logged.",
      confirmLabel: "Schedule restart",
      danger: true,
      requirePhrase: "RESTART",
    });
    if (!ok) return;
    try {
      const status = await api("/power/restart", {
        method: "POST",
        body: JSON.stringify({ delay_seconds: delaySeconds, confirm: true }),
      });
      showCountdown(status.delay_seconds);
      toast("Restart scheduled", "success");
    } catch (e) {
      toast(e.message, "error");
    }
  });

  document.getElementById("cancel-btn").addEventListener("click", async () => {
    try {
      await api("/power/cancel", { method: "POST" });
      hideCountdown();
      toast("Restart cancelled", "success");
    } catch (e) {
      toast(e.message, "error");
    }
  });

  // On load, pick up a restart scheduled from a previous page visit (the OS
  // countdown keeps running independently of this page being open).
  api("/power/status").then((status) => {
    if (status.scheduled) showCountdown(status.delay_seconds);
  }).catch(() => {});
</script>
{% endblock %}