{% extends "layout.html" %}
{% from "shared/components.html" import stat_card %}
{% block content %}
  <div class="amq-page"
       data-asyncmq-metrics
       data-events-url="{{ url_prefix }}/events"
       data-history-url="{{ url_prefix }}/metrics/history?limit=60">
    <section class="amq-section">
      <div class="amq-stat-grid">
        {{ stat_card("Throughput", metrics.throughput, "throughput", "accent", "Completed jobs") }}
        {{ stat_card("Retries", metrics.retries, "retries", "warning", "Failed job count") }}
        {{ stat_card("Failures", metrics.failures, "failures", "danger", "Current failed jobs") }}
        {{ stat_card("Avg Duration", metrics.avg_duration or "-", "avg-duration", "neutral", "Runtime-owned when available") }}
      </div>

      <div class="amq-stat-grid">
        {{ stat_card("Total Queues", total_queues, "total-queues", "neutral") }}
        {{ stat_card("Total Workers", total_workers, "total-workers", "success") }}
        {{ stat_card("Waiting Jobs", counts.waiting, "waiting-count", "warning") }}
        {{ stat_card("Active Jobs", counts.active, "active-count", "accent") }}
      </div>
    </section>

    <section class="amq-grid-2">
      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Metrics Over Time</h2>
          <span class="amq-card-meta">Latest samples</span>
        </div>
        <div class="amq-card-body amq-chart-panel">
          <canvas id="metrics-chart" class="w-full h-full"></canvas>
        </div>
      </article>

      <article class="amq-card">
        <div class="amq-card-header">
          <h2 class="amq-card-title">Queue State Distribution</h2>
          <span class="amq-card-meta">Current counts</span>
        </div>
        <div class="amq-card-body amq-chart-panel">
          <canvas id="state-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">Recent Metrics History</h2>
          <p class="amq-card-meta">Latest 20 snapshots</p>
        </div>
      </div>
      <table class="amq-table amq-metrics-table">
        <thead>
          <tr>
            <th scope="col">Time</th>
            <th scope="col">Throughput</th>
            <th scope="col">Retries</th>
            <th scope="col">Failures</th>
            <th scope="col">Waiting</th>
            <th scope="col">Active</th>
            <th scope="col">Delayed</th>
            <th scope="col">Completed</th>
            <th scope="col">Failed</th>
            <th scope="col">Workers</th>
          </tr>
        </thead>
        <tbody id="metrics-history-body"></tbody>
      </table>
    </section>

    <template id="metrics-history-data">{{ metrics_history | tojson }}</template>
    <script src="{{ url_for('statics', path='/vendor/chartjs/chart.umd-4.5.1.min.js') }}"></script>
  </div>
{% endblock %}