{% extends 'generic/_base.html' %}
{% load helpers %}
{% load i18n %}

{% block title %}{% trans "Workflow Queue" %}{% endblock %}

{% block subtitle %}
  <div class="text-secondary fs-5">
    {% trans "Auto-refresh every 2s" %}
  </div>
{% endblock %}

{% block content %}

{% if engine_settings.engine_status == "maintenance" %}
<div class="alert alert-warning" role="alert">
  <strong>{% trans "Engine in Maintenance" %}</strong> —
  {% trans "New jobs are being held. They will be released automatically when the engine returns to Active." %}
  {% if engine_settings.maintenance_message %}
    <span class="text-muted ms-1">{{ engine_settings.maintenance_message }}</span>
  {% endif %}
</div>
{% elif engine_settings.engine_status == "disabled" %}
<div class="alert alert-danger" role="alert">
  <strong>{% trans "Engine Disabled" %}</strong> —
  {% trans "The orchestrator is not accepting or processing jobs." %}
  {% if engine_settings.maintenance_message %}
    <span class="ms-1">{{ engine_settings.maintenance_message }}</span>
  {% endif %}
</div>
{% endif %}

{% if not snapshot.available %}
  <div class="alert alert-danger">
    <strong>{% trans "Queue unavailable" %}:</strong> {{ snapshot.error }}
  </div>
{% endif %}

<div class="row mb-3">
  <div class="col col-12 col-md-3">
    <div class="card text-center">
      <div class="card-body">
        <div class="text-muted">{% trans "RQ queued" %}</div>
        <div class="display-6" id="stat-queued">{{ snapshot.rq_queued_count }}</div>
      </div>
    </div>
  </div>
  <div class="col col-12 col-md-3">
    <div class="card text-center">
      <div class="card-body">
        <div class="text-muted">{% trans "RQ started" %}</div>
        <div class="display-6" id="stat-started">{{ snapshot.rq_started_count }}</div>
      </div>
    </div>
  </div>
  <div class="col col-12 col-md-3">
    <div class="card text-center">
      <div class="card-body">
        <div class="text-muted">{% trans "RQ failed" %}</div>
        <div class="display-6 text-danger" id="stat-failed">{{ snapshot.rq_failed_count }}</div>
      </div>
    </div>
  </div>
  <div class="col col-12 col-md-3">
    <div class="card text-center">
      <div class="card-body">
        <div class="text-muted">{% trans "Workers" %}</div>
        <div class="display-6" id="stat-workers">{{ snapshot.workers|length }}</div>
      </div>
    </div>
  </div>
</div>

<div class="row mb-3">
  <div class="col col-12">
    <div class="card">
      <h2 class="card-header">{% trans "Workers" %}</h2>
      <div id="workers-table-wrap">
        {% if snapshot.workers %}
          <table class="table table-hover mb-0">
            <thead>
              <tr>
                <th>{% trans "Name" %}</th>
                <th>{% trans "State" %}</th>
                <th>{% trans "Current job" %}</th>
              </tr>
            </thead>
            <tbody id="workers-tbody">
              {% for w in snapshot.workers %}
                <tr>
                  <td><code>{{ w.name }}</code></td>
                  <td>
                    {% if w.state == "idle" %}
                      <span class="badge text-bg-secondary">idle</span>
                    {% elif w.state == "busy" %}
                      <span class="badge text-bg-primary">busy</span>
                    {% elif w.state == "started" %}
                      <span class="badge text-bg-info">started</span>
                    {% elif w.state == "suspended" %}
                      <span class="badge text-bg-warning">suspended</span>
                    {% else %}
                      <span class="badge text-bg-secondary">{{ w.state }}</span>
                    {% endif %}
                  </td>
                  <td><code>{{ w.current_job_id|default:"-" }}</code></td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% else %}
          <div class="card-body text-center text-muted">
            <i class="mdi mdi-alert-circle-outline"></i>
            {% trans "No workers connected. Start one with: python manage.py rqworker netbox_orchestrator.workflows" %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<div class="row mb-3">
  <div class="col col-12">
    <div class="card">
      <h2 class="card-header">{% trans "Pending / Queued" %}</h2>
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th>{% trans "Job" %}</th>
            <th>{% trans "Workflow" %}</th>
            <th>{% trans "Status" %}</th>
            <th>{% trans "Reporter" %}</th>
            <th>{% trans "Queued at" %}</th>
            <th class="text-end">{% trans "Actions" %}</th>
          </tr>
        </thead>
        <tbody id="pending-tbody">
          {% for j in snapshot.pending_jobs %}
            <tr data-job-id="{{ j.pk }}">
              <td><a href="{{ j.get_absolute_url }}">#{{ j.pk }}</a></td>
              <td><a href="{{ j.workflow.get_absolute_url }}">{{ j.workflow.name }}</a></td>
              <td>{% badge j.get_status_display %}</td>
              <td>
                {% if j.created_by %}
                  <em>{% if j.created_by.first_name or j.created_by.last_name %}{{ j.created_by.get_full_name }}{% else %}{{ j.created_by.username }}{% endif %}</em>
                {% else %}—{% endif %}
              </td>
              <td>{{ j.queued_at|placeholder }}</td>
              <td class="text-end">
                {% include 'netbox_orchestrator/partials/kill_button.html' with job=j %}
              </td>
            </tr>
          {% empty %}
            <tr><td colspan="5" class="text-center text-muted py-4">{% trans "Queue is idle." %}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="row">
  <div class="col col-12">
    <div class="card">
      <h2 class="card-header">{% trans "Running" %}</h2>
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th>{% trans "Job" %}</th>
            <th>{% trans "Workflow" %}</th>
            <th>{% trans "Status" %}</th>
            <th>{% trans "Reporter" %}</th>
            <th>{% trans "Started" %}</th>
            <th class="text-end">{% trans "Actions" %}</th>
          </tr>
        </thead>
        <tbody id="running-tbody">
          {% for j in snapshot.running_jobs %}
            <tr data-job-id="{{ j.pk }}">
              <td><a href="{{ j.get_absolute_url }}">#{{ j.pk }}</a></td>
              <td><a href="{{ j.workflow.get_absolute_url }}">{{ j.workflow.name }}</a></td>
              <td>{% badge j.get_status_display %}</td>
              <td>
                {% if j.created_by %}
                  <em>{% if j.created_by.first_name or j.created_by.last_name %}{{ j.created_by.get_full_name }}{% else %}{{ j.created_by.username }}{% endif %}</em>
                {% else %}—{% endif %}
              </td>
              <td>{{ j.started_at|placeholder }}</td>
              <td class="text-end">
                {% include 'netbox_orchestrator/partials/kill_button.html' with job=j %}
              </td>
            </tr>
          {% empty %}
            <tr><td colspan="5" class="text-center text-muted py-4">{% trans "Nothing running." %}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
(function() {
  const liveUrl = "{% url 'plugins:netbox_orchestrator:queue_live' %}";
  const csrfToken = "{{ csrf_token }}";
  const POLL_MS = 2000;
  const HOLD_MS = 800;

  const statusColors = {
    pending: "secondary", queued: "info", waiting: "primary",
    running: "primary", cancelling: "warning",
    succeeded: "success", failed: "danger",
    cancelled: "warning", skipped: "secondary"
  };

  function statusBadge(status) {
    const color = statusColors[status] || "secondary";
    return `<span class="badge text-bg-${color}">${status}</span>`;
  }

  function renderKillButton(jobId, cancelUrl) {
    return `
      <button type="button"
              class="btn btn-sm btn-warning kill-btn"
              data-cancel-url="${cancelUrl}">
        <i class="mdi mdi-stop"></i> Kill
      </button>
    `;
  }

  function attachKillHandlers(root) {
    root.querySelectorAll(".kill-btn").forEach(btn => {
      if (btn.dataset.bound) return;
      btn.dataset.bound = "1";
      let holdTimer = null;
      let didHold = false;

      function sendCancel(mode) {
        const fd = new FormData();
        fd.append("csrfmiddlewaretoken", csrfToken);
        fd.append("mode", mode);
        return fetch(btn.dataset.cancelUrl, {
          method: "POST",
          body: fd,
          headers: { "Accept": "application/json" },
        });
      }

      btn.addEventListener("mousedown", () => {
        didHold = false;
        btn.classList.remove("btn-warning");
        btn.classList.add("btn-danger");
        holdTimer = setTimeout(async () => {
          didHold = true;
          await sendCancel("immediate");
        }, HOLD_MS);
      });

      function release() {
        if (holdTimer) { clearTimeout(holdTimer); holdTimer = null; }
        btn.classList.add("btn-warning");
        btn.classList.remove("btn-danger");
      }

      btn.addEventListener("mouseup", async () => {
        const wasHold = didHold;
        release();
        if (!wasHold) {
          await sendCancel("graceful");
        }
      });
      btn.addEventListener("mouseleave", release);
    });
  }

  async function poll() {
    try {
      const res = await fetch(liveUrl, { headers: { "Accept": "application/json" } });
      if (!res.ok) return;
      const data = await res.json();

      document.getElementById("stat-queued").textContent = data.rq_queued_count;
      document.getElementById("stat-started").textContent = data.rq_started_count;
      document.getElementById("stat-failed").textContent = data.rq_failed_count;
      document.getElementById("stat-workers").textContent = (data.workers || []).length;

      const workersTbody = document.getElementById("workers-tbody");
      if (workersTbody && data.workers) {
        const stateColor = { idle: "secondary", busy: "primary", started: "info", suspended: "warning" };
        workersTbody.innerHTML = data.workers.map(w => `
          <tr>
            <td><code>${w.name}</code></td>
            <td><span class="badge text-bg-${stateColor[w.state] || 'secondary'}">${w.state}</span></td>
            <td><code>${w.current_job_id || "-"}</code></td>
          </tr>
        `).join("");
      }

      const pendingTbody = document.getElementById("pending-tbody");
      if (data.pending_jobs.length === 0) {
        pendingTbody.innerHTML = `<tr><td colspan="5" class="text-center text-muted py-4">Queue is idle.</td></tr>`;
      } else {
        pendingTbody.innerHTML = data.pending_jobs.map(j => `
          <tr data-job-id="${j.id}">
            <td><a href="${j.url}">#${j.id}</a></td>
            <td>${j.workflow}</td>
            <td>${statusBadge(j.status)}</td>
            <td><em>${j.reporter || '—'}</em></td>
            <td>${j.queued_at ? new Date(j.queued_at).toLocaleString() : "-"}</td>
            <td class="text-end">${renderKillButton(j.id, j.cancel_url)}</td>
          </tr>
        `).join("");
      }

      const runningTbody = document.getElementById("running-tbody");
      if (data.running_jobs.length === 0) {
        runningTbody.innerHTML = `<tr><td colspan="5" class="text-center text-muted py-4">Nothing running.</td></tr>`;
      } else {
        runningTbody.innerHTML = data.running_jobs.map(j => `
          <tr data-job-id="${j.id}">
            <td><a href="${j.url}">#${j.id}</a></td>
            <td>${j.workflow}</td>
            <td>${statusBadge(j.status)}</td>
            <td><em>${j.reporter || '—'}</em></td>
            <td>${j.started_at ? new Date(j.started_at).toLocaleString() : "-"}</td>
            <td class="text-end">${renderKillButton(j.id, j.cancel_url)}</td>
          </tr>
        `).join("");
      }

      attachKillHandlers(document);
    } catch (e) {
      // swallow
    } finally {
      setTimeout(poll, POLL_MS);
    }
  }

  attachKillHandlers(document);
  setTimeout(poll, POLL_MS);
})();
</script>
{% endblock content %}