{% extends "base.html" %}
{% block title %}Live Activity - Supavision{% endblock %}
{% block content %}

<div class="page-header">
  <div class="page-header-left">
    <h2>Live Activity</h2>
    <span class="page-subtitle">Real-time system activity and job output</span>
  </div>
  <div class="page-header-right">
    <span id="live-status" class="live-indicator">
      <span class="live-dot"></span> Connecting...
    </span>
    <a href="/activity" class="btn btn-outline btn-sm">History</a>
  </div>
</div>

<div id="connection-error" class="alert alert--warning mb-4" style="display:none">
  Connection lost after multiple attempts. <a href="javascript:location.reload()">Reload to reconnect</a>.
</div>

{# ── Active Jobs Panel ── #}
<p class="text-muted text-sm mb-3">Active Jobs shows currently running checks. Log Stream shows real-time output from all jobs.</p>
<div class="settings-section" id="active-jobs-panel">
  <h4>Active Jobs <span id="active-count" class="tab-count">{{ active_items | length }}</span></h4>

  <div id="active-jobs-list">
    {% if active_items %}
    <table class="table" id="active-jobs-table">
      <thead>
        <tr><th>Type</th><th>Resource</th><th>Status</th><th>Elapsed</th></tr>
      </thead>
      <tbody id="jobs-tbody">
        {% for item in active_items %}
        <tr data-job-id="{{ item.id }}">
          <td><span class="badge badge--type">{{ item.type }}</span></td>
          <td>{{ item.resource }}</td>
          <td><span class="badge badge--running">{{ item.status }}</span></td>
          <td class="text-muted text-sm job-elapsed" data-started="{{ item.started_at or '' }}">{{ item.elapsed or '—' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="empty-state p-6" id="no-jobs-msg">
      <svg class="empty-state-icon" aria-hidden="true" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" width="48" height="48"><circle cx="24" cy="24" r="20"/><path d="M24 14v10l7 7"/></svg>
      <h3>System is idle</h3>
      <p class="text-muted">No active jobs. Run a health check from a <a href="/resources">resource page</a> to see live output here.</p>
    </div>
    {% endif %}
  </div>
</div>

{# ── Log Stream Panel ── #}
<div class="settings-section">
  <div class="log-stream-header">
    <h4>Log Stream</h4>
    <label class="toggle-switch">
      <input type="checkbox" id="show-timestamps">
      <span class="toggle-switch-track"></span>
      Timestamps
    </label>
    <button class="btn btn-sm btn-outline ml-auto" id="clear-log-btn">Clear</button>
  </div>
  <div class="log-stream-container" role="log" aria-live="polite">
    <pre id="log-output" class="log-stream-pre"></pre>
  </div>
  <div class="log-stream-footer">
    <span class="text-sm text-muted"><span id="log-line-count">0</span> lines</span>
    <label class="toggle-switch">
      <input type="checkbox" id="auto-scroll" checked>
      <span class="toggle-switch-track"></span>
      Auto-scroll
    </label>
  </div>
</div>

<script>
(function() {
  var logOutput = document.getElementById("log-output");
  var liveStatus = document.getElementById("live-status");
  var activeCount = document.getElementById("active-count");
  var logLineCountEl = document.getElementById("log-line-count");
  var autoScroll = document.getElementById("auto-scroll");
  var showTimestamps = document.getElementById("show-timestamps");
  var activeJobsList = document.getElementById("active-jobs-list");
  var connectionError = document.getElementById("connection-error");
  var lineCount = 0;

  var MAX_LOG_LINES = 2000;
  var MAX_RECONNECTS = 5;
  var source = null;
  var reconnectAttempts = 0;
  var activeJobs = {};

  function esc(str) {
    var d = document.createElement("div");
    d.textContent = str;
    return d.innerHTML;
  }

  function setStatus(text, connected) {
    liveStatus.innerHTML = connected
      ? '<span class="live-dot"></span> ' + text
      : '<span class="live-dot live-dot--disconnected"></span> ' + text;
  }

  function fmtElapsed(startedAt) {
    if (!startedAt) return "\u2014";
    var secs = Math.floor((Date.now() - new Date(startedAt).getTime()) / 1000);
    if (secs < 0) secs = 0;
    return secs < 60 ? secs + "s" : Math.floor(secs / 60) + "m " + (secs % 60) + "s";
  }

  // ── Log stream ──

  function appendLog(text, jobId, severity) {
    var line = document.createElement("div");
    line.className = "log-line" + (severity ? " log-line--" + severity : "");

    if (showTimestamps.checked) {
      var ts = document.createElement("span");
      ts.className = "log-ts";
      ts.textContent = new Date().toLocaleTimeString();
      line.appendChild(ts);
    }

    if (jobId && activeJobs[jobId]) {
      var tag = document.createElement("span");
      tag.className = "log-tag";
      tag.textContent = "[" + activeJobs[jobId].type + "]";
      line.appendChild(tag);
    }

    var msg = document.createElement("span");
    msg.textContent = text;
    line.appendChild(msg);

    logOutput.appendChild(line);
    lineCount++;

    while (logOutput.childNodes.length > MAX_LOG_LINES) {
      logOutput.removeChild(logOutput.firstChild);
      lineCount--;
    }

    logLineCountEl.textContent = lineCount;

    if (autoScroll.checked) {
      var container = logOutput.parentElement;
      container.scrollTop = container.scrollHeight;
    }
  }

  document.getElementById("clear-log-btn").addEventListener("click", function() {
    logOutput.textContent = "";
    lineCount = 0;
    logLineCountEl.textContent = "0";
  });

  // ── Jobs table (targeted DOM updates, no innerHTML rebuild) ──

  function ensureTable() {
    var table = document.getElementById("active-jobs-table");
    if (table) return document.getElementById("jobs-tbody");
    activeJobsList.innerHTML =
      '<table class="table" id="active-jobs-table">' +
      '<thead><tr><th>Type</th><th>Resource</th><th>Status</th><th>Elapsed</th></tr></thead>' +
      '<tbody id="jobs-tbody"></tbody></table>';
    return document.getElementById("jobs-tbody");
  }

  function showEmpty() {
    activeJobsList.innerHTML =
      '<div class="empty-state p-6">' +
      '<svg class="empty-state-icon" aria-hidden="true" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" width="48" height="48"><circle cx="24" cy="24" r="20"/><path d="M24 14v10l7 7"/></svg>' +
      '<h3>System is idle</h3>' +
      '<p class="text-muted">No active jobs. Run a health check from a <a href="/resources">resource page</a> to see live output here.</p>' +
      '</div>';
  }

  function addJobRow(id, job) {
    var tbody = ensureTable();
    var tr = document.createElement("tr");
    tr.setAttribute("data-job-id", id);
    tr.innerHTML =
      '<td><span class="badge badge--type">' + esc(job.type) + '</span></td>' +
      '<td>' + esc(job.resource) + '</td>' +
      '<td><span class="badge badge--running">' + esc(job.status) + '</span></td>' +
      '<td class="text-muted text-sm job-elapsed" data-started="' + esc(job.startedAt) + '">' + fmtElapsed(job.startedAt) + '</td>';
    tbody.appendChild(tr);
  }

  function removeJobRow(id) {
    var row = document.querySelector('tr[data-job-id="' + id + '"]');
    if (row) row.remove();
    if (Object.keys(activeJobs).length === 0) showEmpty();
  }

  // Tick elapsed cells every 1 second
  setInterval(function() {
    var cells = document.querySelectorAll(".job-elapsed[data-started]");
    cells.forEach(function(cell) {
      var started = cell.getAttribute("data-started");
      if (started) cell.textContent = fmtElapsed(started);
    });
  }, 1000);

  // ── SSE connection ──

  function connect() {
    if (source) source.close();
    connectionError.style.display = "none";

    source = new EventSource("/api/activity/stream");
    setStatus("Live", true);
    reconnectAttempts = 0;

    source.onmessage = function(e) {
      try {
        var data = JSON.parse(e.data);

        if (data.type === "job_start") {
          activeJobs[data.id] = {
            type: data.job_type,
            resource: data.resource,
            status: data.status,
            startedAt: new Date().toISOString()
          };
          activeCount.textContent = Object.keys(activeJobs).length;
          addJobRow(data.id, activeJobs[data.id]);
          appendLog("Started: " + data.job_type + " on " + data.resource, data.id, "start");
        }
        else if (data.type === "log") {
          var severity = null;
          if (data.text && (data.text.indexOf("Error") !== -1 || data.text.indexOf("FAIL") !== -1)) severity = "error";
          appendLog(data.text, data.id, severity);
        }
        else if (data.type === "job_done") {
          appendLog("Completed: " + (activeJobs[data.id] ? activeJobs[data.id].type : data.id), data.id, "done");
          delete activeJobs[data.id];
          activeCount.textContent = Object.keys(activeJobs).length;
          removeJobRow(data.id);
        }
        else if (data.type === "heartbeat") {
          activeCount.textContent = data.active;
        }
      } catch (err) {}
    };

    source.onerror = function() {
      source.close();
      source = null;
      reconnectAttempts++;
      if (reconnectAttempts >= MAX_RECONNECTS) {
        setStatus("Disconnected", false);
        connectionError.style.display = "block";
        return;
      }
      var delay = Math.min(reconnectAttempts * 2000, 10000);
      setStatus("Reconnecting...", false);
      setTimeout(connect, delay);
    };
  }

  connect();

  window.addEventListener("beforeunload", function() {
    if (source) source.close();
  });
})();
</script>

{% endblock %}