{% extends 'generic/object.html' %}
{% load buttons %}
{% load helpers %}
{% load i18n %}
{% load perms %}

{% block control-buttons %}
  {% if not is_terminal %}
    <button type="button"
            id="job-cancel-btn"
            class="btn btn-warning"
            data-graceful-url="{{ cancel_url }}"
            data-immediate-url="{{ cancel_url }}"
            data-csrf="{{ csrf_token }}">
      <i class="mdi mdi-stop"></i>
      <span id="job-cancel-label">{% trans "Cancel (hold to kill)" %}</span>
    </button>
  {% endif %}
  {% if request.user|can_delete:object %}
    <a href="{% url 'plugins:netbox_orchestrator:job_delete' object.pk %}"
       class="btn btn-danger">
      <i class="mdi mdi-trash-can-outline"></i> {% trans "Delete" %}
    </a>
  {% endif %}
{% endblock control-buttons %}

{% block content %}

<div class="row mb-3">

  <div class="col col-12 col-md-6">
    <div class="card h-100">
      <h2 class="card-header">{% trans "Job" %}</h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "Workflow" %}</th>
          <td>{{ object.workflow|linkify }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Reporter" %}</th>
          <td>
            {% if object.created_by %}
              {% with u=object.created_by %}
                {% if u.first_name or u.last_name %}
                  <em>{{ u.get_full_name }}</em>
                {% else %}
                  <em>{{ u.username }}</em>
                {% endif %}
              {% endwith %}
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
        </tr>
        <tr>
          <th scope="row">{% trans "Status" %}</th>
          <td><span id="job-status">{% badge object.get_status_display %}</span></td>
        </tr>
        <tr>
          <th scope="row">{% trans "Priority" %}</th>
          <td>{% badge object.get_priority_display %}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Queued" %}</th>
          <td>{{ object.queued_at|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Started" %}</th>
          <td id="job-started">{{ object.started_at|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Finished" %}</th>
          <td id="job-finished">{{ object.finished_at|placeholder }}</td>
        </tr>
        {% if object.rq_job_id %}
        <tr>
          <th scope="row">{% trans "RQ Job ID" %}</th>
          <td><code>{{ object.rq_job_id }}</code></td>
        </tr>
        {% endif %}
        {% if object.error %}
        <tr>
          <th scope="row">{% trans "Error" %}</th>
          <td><pre class="mb-0 text-danger small">{{ object.error }}</pre></td>
        </tr>
        {% endif %}
      </table>
    </div>
  </div>

  <div class="col col-12 col-md-6">
    <div class="card h-100">
      <h2 class="card-header">{% trans "Inputs" %}</h2>
      <div class="card-body">
        <pre class="border rounded p-3 font-monospace mb-0 small" style="background:var(--bs-tertiary-bg)">{{ object.inputs|pprint }}</pre>
      </div>
    </div>
  </div>

</div>

<!-- Pipeline -->
<div class="card">
  <h2 class="card-header">Pipeline</h2>
  <div class="card-body py-4 px-4">
    <div class="pipeline-track" id="pipeline-flow">
      {% for step in planned_steps %}
        <div class="pipeline-step status-pending"
             data-step-key="{{ step.key }}"
             data-sequence="{{ forloop.counter0 }}"
             title="{{ step.key }}">
          <div class="step-dot"></div>
          <div class="step-label">
            <span class="step-num">{{ forloop.counter }}</span>
            <span class="step-name">{{ step.name }}</span>
          </div>
        </div>
        {% if not forloop.last %}
          <div class="step-line"></div>
        {% endif %}
      {% empty %}
        <p class="text-muted mb-0">{% trans "No steps available for this workflow." %}</p>
      {% endfor %}
    </div>
  </div>
</div>

<script>
(function () {
  'use strict';

  const liveUrl    = "{{ live_url }}";
  const isTerminal = {{ is_terminal|yesno:"true,false" }};
  const POLL_MS    = 1500;

  const initialTasks = {{ initial_tasks_json|safe }};

  const tasksByKey = {};
  const nodesByKey = {};

  // --- Node helpers ---
  function badgeHtml(status) {
    const map = {
      pending: 'secondary', queued: 'info', waiting: 'primary',
      running: 'warning', succeeded: 'success', failed: 'danger',
      cancelled: 'secondary', cancelling: 'warning',
    };
    return `<span class="badge text-bg-${map[status] || 'secondary'}">${status}</span>`;
  }

  function applyNode(key, task) {
    const node = nodesByKey[key];
    if (!node) return;
    node.dataset.taskId = String(task.id);
    node.dataset.taskUrl = `/plugins/orchestrator/tasks/${task.id}/`;
    node.style.cursor = 'pointer';
    node.className = node.className.replace(/\bstatus-\S+/g, '').trim();
    node.classList.add('status-' + task.status);
  }

  // --- Wire click handlers ---
  document.querySelectorAll('.pipeline-step[data-step-key]').forEach(node => {
    nodesByKey[node.dataset.stepKey] = node;
    node.addEventListener('click', () => {
      const url = node.dataset.taskUrl;
      if (url) window.location.href = url;
    });
  });

  // --- Apply initial state ---
  initialTasks.forEach(t => {
    if (!t.step_key) return;
    tasksByKey[t.step_key] = t;
    applyNode(t.step_key, t);
  });

  // --- Polling ---
  function buildSince() {
    const parts = Object.values(tasksByKey).map(t => `${t.id}:${t.log_length || 0}`);
    return parts.length ? '?since=' + encodeURIComponent(parts.join(',')) : '';
  }

  async function poll() {
    try {
      const res = await fetch(liveUrl + buildSince(), { headers: { Accept: 'application/json' } });
      if (!res.ok) { setTimeout(poll, POLL_MS * 2); return; }
      const data = await res.json();

      const jobStatusEl = document.getElementById('job-status');
      if (jobStatusEl) jobStatusEl.innerHTML = badgeHtml(data.status);
      if (data.started_at) {
        const el = document.getElementById('job-started');
        if (el) el.textContent = new Date(data.started_at).toLocaleString();
      }
      if (data.finished_at) {
        const el = document.getElementById('job-finished');
        if (el) el.textContent = new Date(data.finished_at).toLocaleString();
      }

      data.tasks.forEach(t => {
        const key = t.step_key;
        if (!key) return;
        if (!tasksByKey[key]) {
          tasksByKey[key] = { ...t, log: t.log || '' };
        } else {
          const s = tasksByKey[key];
          s.status      = t.status;
          s.log         = (s.log || '') + (t.log || '');
          s.log_length  = t.log_length;
          s.error       = t.error;
          s.started_at  = t.started_at;
          s.finished_at = t.finished_at;
        }
        applyNode(key, tasksByKey[key]);
      });

      if (data.is_terminal) {
        document.getElementById('job-cancel-btn')?.remove();
        return;
      }
      setTimeout(poll, POLL_MS);
    } catch {
      setTimeout(poll, POLL_MS * 2);
    }
  }

  if (!isTerminal) setTimeout(poll, POLL_MS);

  // --- Cancel button ---
  const cancelBtn = document.getElementById('job-cancel-btn');
  if (cancelBtn) {
    const HOLD_MS = 800;
    let holdTimer = null;
    let didHold   = false;

    function sendCancel(mode) {
      const fd = new FormData();
      fd.append('csrfmiddlewaretoken', cancelBtn.dataset.csrf);
      fd.append('mode', mode);
      const url = mode === 'immediate' ? cancelBtn.dataset.immediateUrl : cancelBtn.dataset.gracefulUrl;
      return fetch(url, { method: 'POST', body: fd, headers: { Accept: 'application/json' } });
    }

    cancelBtn.addEventListener('mousedown', () => {
      didHold = false;
      cancelBtn.classList.replace('btn-warning', 'btn-danger');
      document.getElementById('job-cancel-label').textContent = '{% trans "KEEP HOLDING TO KILL..." %}';
      holdTimer = setTimeout(async () => {
        didHold = true;
        await sendCancel('immediate');
        setTimeout(() => location.reload(), 300);
      }, HOLD_MS);
    });

    function release() {
      clearTimeout(holdTimer);
      holdTimer = null;
      cancelBtn.classList.replace('btn-danger', 'btn-warning');
      document.getElementById('job-cancel-label').textContent = '{% trans "Cancel (hold to kill)" %}';
    }

    cancelBtn.addEventListener('mouseup', async () => {
      const wasHold = didHold;
      release();
      if (!wasHold) {
        await sendCancel('graceful');
        setTimeout(() => location.reload(), 300);
      }
    });
    cancelBtn.addEventListener('mouseleave', release);
  }
})();
</script>

<style>
  /* ── Pipeline track ────────────────────────────────── */
  .pipeline-track {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  .pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    min-width: 64px;
    padding: 0 2px;
  }

  /* dot */
  .step-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #adb5bd;
    transition: background .2s, transform .15s;
    flex-shrink: 0;
  }
  .pipeline-step:hover .step-dot            { transform: scale(1.35); }
  .pipeline-step.active  .step-dot          { outline: 3px solid rgba(13,110,253,.45); outline-offset: 3px; }
  .pipeline-step.status-succeeded .step-dot { background: #20c997; }
  .pipeline-step.status-failed    .step-dot { background: #dc3545; }
  .pipeline-step.status-cancelled .step-dot { background: #6c757d; opacity: .5; }
  .pipeline-step.status-running   .step-dot {
    background: transparent;
    border: 2.5px solid #fd7e14;
    border-top-color: transparent;
    animation: dot-spin .7s linear infinite;
  }

  /* connector line */
  .step-line {
    flex: 1;
    height: 2px;
    background: var(--bs-secondary-color, #6c757d);
    opacity: 0.4;
    margin-top: 6px;
    min-width: 16px;
    flex-shrink: 1;
  }

  /* label */
  .step-label     { text-align: center; margin-top: 8px; }
  .step-num       { display: block; font-size: .68rem; color: var(--bs-secondary-color); line-height: 1; }
  .step-name      { display: block; font-size: .75rem; font-weight: 500; color: var(--bs-body-color); margin-top: 2px; max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  @keyframes dot-spin { to { transform: rotate(360deg); } }
</style>

{% endblock content %}