{% extends "admin/base_site.html" %}

{% load static %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static 'admin/css/changelists.css' %}">
  <style>
    #content-main.djq-dashboard {
      --djq-status-live-fg: #0b6b2d;
      --djq-status-stale-fg: #8a4b00;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow-x: hidden;
      display: grid;
      gap: 3rem;
      box-sizing: border-box;
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme="light"]) #content-main.djq-dashboard {
        --djq-status-live-fg: #7ad7a2;
        --djq-status-stale-fg: #ffbf69;
      }
    }

    html[data-theme="dark"] #content-main.djq-dashboard {
      --djq-status-live-fg: #7ad7a2;
      --djq-status-stale-fg: #ffbf69;
    }

    .djq-hero,
    .djq-summary-grid,
    .djq-section {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      margin-bottom: 0;
    }

    .djq-hero {
      display: grid;
      gap: 1rem;
      padding: 1.25rem;
      border: 1px solid var(--hairline-color);
      background: var(--darkened-bg);
    }

    .djq-hero-main {
      display: grid;
      gap: 0.95rem;
      min-width: 0;
    }

    p.djq-eyebrow {
      padding: 0;
      margin: 0;
      color: var(--link-fg);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .djq-title {
      margin: 0;
      font-size: 2rem;
      line-height: 1.05;
    }

    p.djq-subtitle {
      max-width: 44rem;
      padding: 0;
      margin: 0;
      color: var(--body-quiet-color);
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .djq-backend-strip {
      display: grid;
      gap: 0.9rem;
      padding: 1rem;
      border: 1px solid var(--hairline-color);
      background: var(--body-bg);
      min-width: 0;
    }

    @media (min-width: 900px) {
      .djq-backend-strip {
        grid-template-columns: minmax(16rem, 20rem) minmax(0, 1fr);
        align-items: start;
      }
    }

    .djq-backend-switch {
      display: grid;
      gap: 0.4rem;
      align-content: start;
    }

    .djq-backend-switch label {
      color: var(--link-selected-fg);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .djq-backend-switch form {
      margin: 0;
    }

    .djq-backend-switch select {
      min-width: 14rem;
      max-width: 100%;
    }

    p.djq-backend-caption {
      padding: 0;
      margin: 0;
      color: var(--body-quiet-color);
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .djq-backend-facts {
      display: grid;
      gap: 0.8rem 1rem;
      grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
      margin: 0;
      min-width: 0;
    }

    .djq-backend-facts div {
      min-width: 0;
    }

    .djq-backend-facts dt {
      margin: 0;
      color: var(--body-quiet-color);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .djq-backend-facts dd {
      margin: 0.2rem 0 0;
      color: var(--body-fg);
      font-size: 0.95rem;
      line-height: 1.3;
      word-break: break-word;
    }

    .djq-raw-panel {
      padding: 0.95rem 1rem;
      border: 1px solid var(--hairline-color);
      background: var(--body-bg);
      min-width: 0;
    }

    .djq-raw-panel p {
      padding: 0;
      margin: 0;
      line-height: 1.5;
    }

    .djq-raw-panel {
      display: grid;
      gap: 0.9rem;
    }

    .djq-raw-grid {
      display: grid;
      gap: 0.9rem;
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }

    .djq-summary-card h2,
    .djq-section-banner h2 {
      margin: 0;
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .djq-raw-group {
      display: grid;
      gap: 0.45rem;
    }

    .djq-raw-group h3 {
      padding: 0;
      margin: 0;
      color: var(--body-quiet-color);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .djq-raw-links,
    .djq-queue-controls {
      display: flex;
      gap: 0.6rem;
      align-items: center;
      flex-wrap: wrap;
    }

    .djq-queue-controls .button {
      padding: 4px 10px;
    }

    .djq-queue-controls .djq-button-pause,
    .djq-queue-controls .djq-button-resume {
      border-color: transparent;
      color: #fff;
    }

    .djq-queue-controls .djq-button-pause {
      background: #b86a00;
    }

    .djq-queue-controls .djq-button-pause:hover,
    .djq-queue-controls .djq-button-pause:focus {
      background: #965400;
    }

    .djq-queue-controls .djq-button-resume {
      background: #2f7d4a;
    }

    .djq-queue-controls .djq-button-resume:hover,
    .djq-queue-controls .djq-button-resume:focus {
      background: #25633b;
    }

    .djq-summary-grid {
      display: grid;
      gap: 0.8rem;
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }

    .djq-summary-card {
      border: 1px solid var(--hairline-color);
      background: var(--body-bg);
      min-width: 0;
    }

    .djq-summary-card-content {
      padding: 1rem 0;
    }

    .djq-summary-card p {
      margin: 0;
    }

    .djq-summary-value {
      margin-top: 0.25rem;
      font-size: 1.7rem;
      font-weight: 700;
      line-height: 1.1;
      color: var(--body-fg);
    }

    .djq-summary-detail {
      margin-top: 0.35rem;
      color: var(--body-quiet-color);
      font-size: 0.88rem;
    }

    .djq-summary-detail a {
      color: inherit;
    }

    .djq-section {
      overflow: hidden;
    }

    .djq-section-banner {
      margin: 0;
      padding: 0;
    }

    .djq-section-banner h2 {
      display: block;
      width: 100%;
      padding: 0.5rem;
      background: var(--primary);
      color: var(--primary-fg);
      box-sizing: border-box;
    }

    .djq-section-copy {
      margin: 0;
      padding: 0.5rem;
      color: var(--body-quiet-color);
      font-size: 0.9rem;
      line-height: 1.45;
      border-bottom: 1px solid var(--hairline-color);
    }

    .djq-table-wrap {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .djq-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto;
    }

    .djq-table-queues {
      min-width: 72rem;
    }

    .djq-table-processes {
      min-width: 62rem;
    }

    .djq-table-recurring {
      min-width: 58rem;
    }

    .djq-table-semaphores {
      min-width: 48rem;
    }

    .djq-table-shared-queues {
      min-width: 56rem;
      table-layout: fixed;
    }

    .djq-table-shared-queues col.djq-shared-col-name {
      width: 20%;
    }

    .djq-table-shared-queues col.djq-shared-col-via {
      width: 20%;
    }

    .djq-table-shared-queues col.djq-shared-col-paused {
      width: 20%;
    }

    .djq-table-shared-queues col.djq-shared-col-controls {
      width: 20%;
    }

    .djq-table th,
    .djq-table td {
      white-space: nowrap;
      vertical-align: middle;
      padding: 6px 8px;
    }

    .djq-table thead th {
      padding: 0;
    }

    .djq-table code {
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 0.82rem;
    }

    .djq-col-name {
      min-width: 12rem;
    }

    .djq-col-controls {
      min-width: 11rem;
    }

    .djq-col-controls .text {
      min-width: 11rem;
      padding: 8px 10px;
    }

    .djq-col-metadata {
      min-width: 20rem;
      white-space: normal;
    }

    .djq-col-shared-via {
      min-width: 16rem;
    }

    .djq-table-shared-queues .djq-col-controls,
    .djq-table-shared-queues td.djq-col-controls {
      min-width: 13rem;
    }

    .djq-process-row-group {
      background: var(--selected-bg);
    }

    .djq-process-row-child th:first-child {
      position: relative;
      padding-left: 2rem;
    }

    .djq-process-row-child th:first-child::before {
      content: "";
      position: absolute;
      left: 0.9rem;
      top: 0.7rem;
      bottom: 0.7rem;
      width: 2px;
      background: var(--border-color);
    }

    .djq-process-meta {
      display: block;
      margin-top: 0.15rem;
      color: var(--body-quiet-color);
      font-size: 0.78rem;
      font-weight: 400;
      white-space: normal;
    }

    .djq-status-live {
      color: var(--djq-status-live-fg);
      font-weight: 700;
    }

    .djq-status-stale {
      color: var(--djq-status-stale-fg);
      font-weight: 700;
    }

    .djq-table-footer {
      padding: 0.5rem;
      border-top: 1px solid var(--hairline-color);
      border-bottom: 1px solid var(--hairline-color);
    }

    .djq-table-footer .paginator {
      padding: 0;
      border: none;
    }

    .djq-table-footer .paginator ul {
      padding: 0;
    }

    .djq-table-footer .paginator span[aria-current="page"] {
      display: inline-block;
      padding: 2px 6px;
      color: var(--body-quiet-color);
      font-weight: bold;
    }

    .djq-empty {
      margin: 0;
      padding: 1rem;
      color: var(--body-quiet-color);
      font-size: 0.86rem;
      line-height: 1.45;
    }

    .djq-reason-list {
      display: flex;
      gap: 0.45rem;
      flex-wrap: wrap;
    }

    .djq-reason-pill {
      display: inline-flex;
      align-items: center;
      min-height: 1.6rem;
      padding: 0 0.6rem;
      border: 1px solid var(--hairline-color);
      border-radius: 999px;
      background: var(--body-bg);
      color: var(--body-quiet-color);
      font-size: 0.76rem;
      font-weight: 600;
      line-height: 1;
    }

    @media (max-width: 900px) {
      .djq-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .djq-summary-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
{% endblock extrastyle %}

{% block breadcrumbs %}
  <div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Home</a>
    › dj_queue
  </div>
{% endblock breadcrumbs %}

{% block content_title %}{% endblock content_title %}

{% block content %}
  <div id="content-main" class="djq-dashboard">
    <section class="module djq-hero">
      <div class="djq-hero-main">
        <p class="djq-eyebrow">operator view</p>
        <h1 class="djq-title">dj_queue dashboard</h1>
        <p class="djq-subtitle">
          Watch queue pressure, process freshness, and control-plane state for the selected backend without leaving Django admin.
          Switch backend context here, then drill into queues or raw changelists only when the overview is not enough.
        </p>

        <div class="djq-backend-strip">
          <div class="djq-backend-switch">
            <label for="id_backend">backend</label>
            <form method="get" action="{% url 'admin:dj_queue_dashboard_changelist' %}">
              <select id="id_backend" name="backend" onchange="this.form.submit()">
                {% for choice in backend_choices %}
                  <option value="{{ choice.alias }}"{% if choice.alias == backend_alias %} selected{% endif %}>{{ choice.alias }}</option>
                {% endfor %}
              </select>
              <noscript><button type="submit" class="button">Switch</button></noscript>
            </form>
            <p class="djq-backend-caption">Jobs, processes, pauses, and recurring tasks are scoped to the selected backend. Semaphores remain shared on that backend's queue database.</p>
          </div>

          <dl class="djq-backend-facts">
            {% for fact in backend_facts %}
              <div>
                <dt>{{ fact.label }}</dt>
                <dd>{{ fact.value }}</dd>
              </div>
            {% endfor %}
          </dl>
        </div>

        <div class="djq-summary-grid">
          {% for card in summary_cards %}
            <div class="djq-summary-card">
              <h2>{{ card.label }}</h2>
              <div class="djq-summary-card-content">
                <p class="djq-summary-value">{{ card.value }}</p>
                <p class="djq-summary-detail">
                  {% if card.detail_parts %}
                    {% for part in card.detail_parts %}
                      {% if part.url %}
                        <a href="{{ part.url }}">{{ part.label }}</a>
                      {% else %}
                        {{ part.label }}
                      {% endif %}
                    {% endfor %}
                  {% else %}
                    {{ card.detail }}
                  {% endif %}
                </p>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
    </section>

    <section class="module djq-section" id="queue-summary">
      <div class="djq-section-banner"><h2>queues</h2></div>
      <p class="djq-section-copy">Live queue pressure, pause state, recurring ownership, and first-line controls for this backend.</p>
      {% if queue_section.rows %}
        <div class="djq-table-wrap">
          <table class="djq-table djq-table-queues" id="result_list">
            <thead>
              <tr>
                {% include "admin/dj_queue/_sortable_header_cells.html" with headers=queue_section.headers num_sorted_fields=queue_section.num_sorted_fields %}
                <th class="djq-col-controls"><div class="text">Controls</div></th>
              </tr>
            </thead>
            <tbody>
              {% for queue in queue_section.rows %}
                <tr class="{% cycle 'row1' 'row2' %}">
                  <th class="djq-col-name"><a href="{% url 'admin:dj_queue_dashboard_queue' queue.name %}?backend={{ backend_alias }}&state=ready">{{ queue.name }}</a></th>
                  <td><a href="{% url 'admin:dj_queue_dashboard_queue' queue.name %}?backend={{ backend_alias }}&state=ready">{{ queue.ready_count }}</a></td>
                  <td><a href="{% url 'admin:dj_queue_dashboard_queue' queue.name %}?backend={{ backend_alias }}&state=claimed">{{ queue.claimed_count }}</a></td>
                  <td><a href="{% url 'admin:dj_queue_dashboard_queue' queue.name %}?backend={{ backend_alias }}&state=scheduled">{{ queue.scheduled_count }}</a></td>
                  <td><a href="{% url 'admin:dj_queue_dashboard_queue' queue.name %}?backend={{ backend_alias }}&state=blocked">{{ queue.blocked_count }}</a></td>
                  <td><a href="{% url 'admin:dj_queue_dashboard_queue' queue.name %}?backend={{ backend_alias }}&state=failed">{{ queue.failed_count }}</a></td>
                  <td><a href="{% url 'admin:dj_queue_dashboard_queue' queue.name %}?backend={{ backend_alias }}&state=finished">{{ queue.finished_count }}</a></td>
                  <td>{{ queue.paused|yesno:"yes,no" }}</td>
                  <td>{% if queue.latency_seconds != None %}{{ queue.latency_seconds|floatformat:1 }}s{% else %}-{% endif %}</td>
                  <td>{{ queue.live_worker_count }}</td>
                  <td>{{ queue.oldest_scheduled_at|date:"Y-m-d H:i:s"|default:"-" }}</td>
                  <td>{{ queue.oldest_blocked_at|date:"Y-m-d H:i:s"|default:"-" }}</td>
                  <td class="djq-col-controls">
                    {% include "admin/dj_queue/_queue_controls.html" with queue_name=queue.name backend_alias=backend_alias next_url=request.get_full_path paused=queue.paused show_clear=True pause_toggle_pause_class="button djq-button-pause" pause_toggle_resume_class="button djq-button-resume" clear_button_class="button" controls_class="djq-queue-controls" %}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        <div class="djq-table-footer">
          {% include "admin/dj_queue/_paginator.html" with pagination_id="pagination-queues" pagination_label="Pagination queues" pagination_required=queue_section.pagination_required page_links=queue_section.page_links result_count_text=queue_section.result_count_text current_page_class="" link_role_button=True %}
        </div>
      {% else %}
        <p class="djq-empty">No queues found for this backend.</p>
      {% endif %}
    </section>

    {% include "admin/dj_queue/_dashboard_section_table.html" with section_id="process-summary" title="processes" copy="Supervisor-first runtime topology so workers, dispatchers, and schedulers read as one grouped runtime." section=process_section table_class="djq-table djq-table-processes" rows_template="admin/dj_queue/_dashboard_process_rows.html" pagination_id="pagination-processes" pagination_label="Pagination processes" empty_text="No registered processes." %}

    {% include "admin/dj_queue/_dashboard_section_table.html" with section_id="recurring-summary" title="recurring tasks" copy="Scheduled work defined for this backend, with next-fire context for operators." section=recurring_section table_class="djq-table djq-table-recurring" rows_template="admin/dj_queue/_dashboard_recurring_rows.html" pagination_id="pagination-recurring" pagination_label="Pagination recurring tasks" empty_text="No recurring tasks configured." %}

    {% include "admin/dj_queue/_dashboard_section_table.html" with section_id="semaphore-summary" title="semaphores" copy="Concurrency state for hot keys, including waiters and expiry windows." section=semaphore_section table_class="djq-table djq-table-semaphores" rows_template="admin/dj_queue/_dashboard_semaphore_rows.html" pagination_id="pagination-semaphores" pagination_label="Pagination semaphores" empty_text="No active semaphores." %}

    <section class="module djq-section" id="raw-summary">
      <div class="djq-section-banner"><h2>inspect raw rows</h2></div>
      <p class="djq-section-copy">Use the model changelists for exhaustive filtering, lower-level debugging, and record-by-record inspection.</p>
      <div class="djq-raw-grid">
        <div class="djq-raw-panel">
          <div class="djq-raw-group">
            <h3>queue data</h3>
            <p>Job-centric rows scoped to the selected backend where possible.</p>
          </div>
          <div class="djq-raw-links">
            <a href="{% url 'admin:dj_queue_job_changelist' %}?backend={{ backend_alias }}">Jobs</a>
            <a href="{% url 'admin:dj_queue_failedexecution_changelist' %}?backend={{ backend_alias }}">Failed executions</a>
            <a href="{% url 'admin:dj_queue_pause_changelist' %}?backend={{ backend_alias }}">Pauses</a>
          </div>
        </div>

        <div class="djq-raw-panel">
          <div class="djq-raw-group">
            <h3>runtime data</h3>
            <p>Processes, pauses, and recurring rows are backend-scoped. Semaphores remain scoped by the selected backend's queue database alias.</p>
          </div>
          <div class="djq-raw-links">
            <a href="{% url 'admin:dj_queue_process_changelist' %}?backend={{ backend_alias }}">Processes</a>
            <a href="{% url 'admin:dj_queue_recurringtask_changelist' %}?backend={{ backend_alias }}">Recurring tasks</a>
            <a href="{% url 'admin:dj_queue_semaphore_changelist' %}?backend={{ backend_alias }}">Semaphores</a>
          </div>
        </div>
      </div>
    </section>
  </div>
{% endblock content %}