{% extends "base.html" %}
{% block content %}

<div class="page-header">
  <h1><span class="live-dot"></span>Overview</h1>
  <p>Real-time queue and worker stats</p>
</div>

<div id="sse-stats"
     hx-ext="sse"
     sse-connect="/sse/stats"
     sse-swap="message"
     hx-swap="none">
</div>

<div id="queue-stats" class="stat-grid">
  {% for queue, counts in stats.items() %}
    {% set total = counts.values()|sum %}
    <div class="card">
      <div class="card-title">{{ queue }}</div>
      <div class="stat-value">{{ total }}</div>
      <div style="margin-top:0.6rem; display:flex; gap:0.35rem; flex-wrap:wrap;">
        {% for status, count in counts.items() %}
          <span class="badge badge-{{ status }}">{{ status }} {{ count }}</span>
        {% endfor %}
      </div>
    </div>
  {% else %}
    <div class="card" style="grid-column:1/-1; color:var(--muted); font-size:0.875rem;">No queues yet.</div>
  {% endfor %}
</div>

<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem;">
  <h2 style="font-size:0.875rem; font-weight:600; color:var(--text);">Workers</h2>
  <span id="worker-count" style="font-size:0.78rem; color:var(--muted);">{{ workers|length }} registered</span>
</div>

<div id="worker-list" class="card">
  {% if workers %}
  <table>
    <thead>
      <tr>
        <th>Worker ID</th>
        <th>Queues</th>
        <th>Last heartbeat</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for w in workers %}
      <tr>
        <td><code style="font-size:0.78rem;">{{ w.worker_id[:16] }}…</code></td>
        <td style="color:var(--text-dim);">{{ w.queues | join(", ") }}</td>
        <td style="font-size:0.8rem; color:var(--muted);">{{ w.last_heartbeat }}</td>
        <td>
          {% if w.alive %}
            <span class="dot dot-alive"></span><span style="color:#4ade80; font-size:0.82rem;">alive</span>
          {% else %}
            <span class="dot dot-dead"></span><span style="color:var(--muted); font-size:0.82rem;">dead</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <p style="color:var(--muted); font-size:0.875rem;">No workers registered.</p>
  {% endif %}
</div>

<script>
document.getElementById("sse-stats").addEventListener("message", function(e) {
  const data = JSON.parse(e.data);
  refreshStats(data.stats, data.workers);
});

function refreshStats(stats, workers) {
  const grid = document.getElementById("queue-stats");
  if (Object.keys(stats).length === 0) return;

  let html = "";
  for (const [queue, counts] of Object.entries(stats)) {
    const total = Object.values(counts).reduce((a,b)=>a+b, 0);
    const badges = Object.entries(counts)
      .map(([s,c]) => `<span class="badge badge-${s}">${s} ${c}</span>`)
      .join("");
    html += `<div class="card">
      <div class="card-title">${queue}</div>
      <div class="stat-value">${total}</div>
      <div style="margin-top:0.6rem;display:flex;gap:0.35rem;flex-wrap:wrap;">${badges}</div>
    </div>`;
  }
  grid.innerHTML = html;

  const workerDiv = document.getElementById("worker-list");
  const workerCount = document.getElementById("worker-count");
  if (workerCount) workerCount.textContent = `${workers ? workers.length : 0} registered`;

  if (!workers || workers.length === 0) {
    workerDiv.innerHTML = '<p style="color:var(--muted);font-size:0.875rem;">No workers registered.</p>';
    return;
  }
  let whtml = `<table><thead><tr><th>Worker ID</th><th>Queues</th><th>Last heartbeat</th><th>Status</th></tr></thead><tbody>`;
  for (const w of workers) {
    const dot = w.alive
      ? '<span class="dot dot-alive"></span><span style="color:#4ade80;font-size:0.82rem;">alive</span>'
      : '<span class="dot dot-dead"></span><span style="color:var(--muted);font-size:0.82rem;">dead</span>';
    whtml += `<tr>
      <td><code style="font-size:0.78rem;">${w.worker_id.slice(0,16)}…</code></td>
      <td style="color:var(--text-dim);">${w.queues.join(", ")}</td>
      <td style="font-size:0.8rem;color:var(--muted);">${w.last_heartbeat}</td>
      <td>${dot}</td>
    </tr>`;
  }
  whtml += "</tbody></table>";
  workerDiv.innerHTML = whtml;
}
</script>
{% endblock %}