{% 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>

<!-- Stats updated via SSE -->
<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.5rem; display:flex; gap:0.4rem; 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:#64748b;">No queues yet.</div>
  {% endfor %}
</div>

<h2 style="font-size:1.1rem; font-weight:600; color:#f8fafc; margin-bottom:1rem;">Workers</h2>
<div id="worker-list" class="card">
  {% if workers %}
  <table>
    <thead>
      <tr>
        <th>Worker ID</th>
        <th>Queues</th>
        <th>Registered</th>
        <th>Last heartbeat</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {% for w in workers %}
      <tr>
        <td style="font-family:monospace; font-size:0.8rem;">{{ w.worker_id[:16] }}…</td>
        <td>{{ w.queues | join(", ") }}</td>
        <td style="font-size:0.8rem; color:#64748b;">{{ w.registered_at }}</td>
        <td style="font-size:0.8rem; color:#64748b;">{{ w.last_heartbeat }}</td>
        <td>
          {% if w.alive %}
            <span class="dot dot-alive"></span>alive
          {% else %}
            <span class="dot dot-dead"></span>dead
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
    <p style="color:#64748b; font-size:0.875rem;">No workers registered.</p>
  {% endif %}
</div>

<script>
// SSE handler — update stats cards in-place
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.5rem; display:flex; gap:0.4rem; flex-wrap:wrap;">${badges}</div>
    </div>`;
  }
  grid.innerHTML = html;

  const workerDiv = document.getElementById("worker-list");
  if (!workers || workers.length === 0) {
    workerDiv.innerHTML = '<p style="color:#64748b; 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>alive'
      : '<span class="dot dot-dead"></span>dead';
    whtml += `<tr>
      <td style="font-family:monospace;font-size:0.8rem">${w.worker_id.slice(0,16)}…</td>
      <td>${w.queues.join(", ")}</td>
      <td style="font-size:0.8rem;color:#64748b">${w.last_heartbeat}</td>
      <td>${dot}</td>
    </tr>`;
  }
  whtml += '</tbody></table>';
  workerDiv.innerHTML = whtml;
}
</script>
{% endblock %}