{% extends "layout.html" %}
{% from "shared/components.html" import stat_card, status_badge, empty_state %}
{% block content %}
  <div class="amq-page" data-asyncmq-overview data-events-url="{{ url_prefix }}/events">
    <section class="amq-overview-hero" aria-label="Runtime summary">
      <div class="amq-stat-grid amq-stat-grid--three">
        {{ stat_card("Total queues", total_queues, "total-queues", "accent") }}
        {{ stat_card("Total jobs", total_jobs, "total-jobs", "neutral") }}
        {{ stat_card("Total workers", total_workers, "total-workers", "success") }}
      </div>
      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Job Distribution</h2>
          <span class="amq-card-meta">Live</span>
        </div>
        <div class="amq-chart-panel">
          <canvas id="jobdist-chart" class="w-full h-full"></canvas>
        </div>
      </article>
    </section>

    <section class="amq-grid-2">
      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Throughput Over Time</h2>
          <span class="amq-card-meta">Last 20 samples</span>
        </div>
        <div class="amq-card-body amq-chart-panel">
          <canvas id="overview-line-chart" class="w-full h-full"></canvas>
        </div>
      </article>
      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Waiting Jobs Per Queue</h2>
          <span class="amq-card-meta">Backend counts</span>
        </div>
        <div class="amq-card-body amq-chart-panel">
          <canvas id="queue-bar-chart" class="w-full h-full"></canvas>
        </div>
      </article>
    </section>

    <section class="amq-table-wrap">
      <div class="amq-table-toolbar">
        <div>
          <h2 class="amq-card-title">Latest Jobs</h2>
          <p class="amq-card-meta">Most recent jobs visible through the backend</p>
        </div>
        <a href="{{ url_prefix }}/queues" class="amq-button">Open Queues</a>
      </div>
      <table class="amq-table">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">Queue</th>
            <th scope="col">State</th>
            <th scope="col">Time</th>
          </tr>
        </thead>
        <tbody id="latest-jobs-body">
          {% for job in latest_jobs %}
          <tr>
            <td class="amq-mono">{{ job.id }}</td>
            <td>{{ job.queue }}</td>
            <td>
              {{ status_badge(job.state) }}
            </td>
            <td>{{ job.time }}</td>
          </tr>
          {% else %}
          <tr>
            <td colspan="4">
              {{ empty_state("No recent jobs") }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </section>

    <section class="amq-table-wrap">
      <div class="amq-table-toolbar">
        <div>
          <h2 class="amq-card-title">Recently Active Queues</h2>
          <p class="amq-card-meta">Queue activity reported by AsyncMQ</p>
        </div>
      </div>
      <table class="amq-table">
        <thead>
          <tr>
            <th scope="col">Queue</th>
            <th scope="col">Last Activity</th>
          </tr>
        </thead>
        <tbody id="latest-queues-body">
          {% for q in latest_queues %}
          <tr>
            <td class="amq-mono">{{ q.name }}</td>
            <td>{{ q.time }}</td>
          </tr>
          {% else %}
          <tr>
            <td colspan="2">
              {{ empty_state("No queues found") }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </section>
  </div>
  <script src="{{ url_for('statics', path='/vendor/chartjs/chart.umd-4.5.1.min.js') }}"></script>

{% endblock %}