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

{% block control-buttons %}{% endblock control-buttons %}
{% block extra_controls %}{{ block.super }}{% endblock extra_controls %}

{% block content %}

<div class="row mb-3">

  <div class="col col-12 col-md-5">
    <div class="card h-100">
      <h2 class="card-header d-flex align-items-center gap-2">
        <a href="{{ object.job.get_absolute_url }}" class="btn btn-sm btn-outline-secondary" title="{% trans 'Back to job' %}">
          <i class="mdi mdi-arrow-left"></i>
        </a>
        {% trans "Step" %}
      </h2>
      <table class="table table-hover attr-table">
        <tr>
          <th scope="row">{% trans "Job" %}</th>
          <td>{{ object.job|linkify }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Step name" %}</th>
          <td>{{ object.name }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Step key" %}</th>
          <td><code>{{ object.step_key }}</code></td>
        </tr>
        <tr>
          <th scope="row">{% trans "Status" %}</th>
          <td><span id="task-status">{% badge object.get_status_display %}</span></td>
        </tr>
        <tr>
          <th scope="row">{% trans "Started" %}</th>
          <td>{{ object.started_at|placeholder }}</td>
        </tr>
        <tr>
          <th scope="row">{% trans "Finished" %}</th>
          <td>{{ object.finished_at|placeholder }}</td>
        </tr>
        {% 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-7">
    <div class="card h-100">
      <h2 class="card-header">{% trans "Outputs" %}</h2>
      <div class="card-body">
        <pre class="border rounded p-3 font-monospace mb-0 small" style="background:var(--bs-tertiary-bg); max-height:400px; overflow-y:auto;">{{ outputs_json }}</pre>
      </div>
    </div>
  </div>

</div>

<div class="card">
  <h2 class="card-header">{% trans "Log Output" %}</h2>

  {% if object.error %}
  <div class="alert alert-danger mb-0 rounded-0 border-start-0 border-end-0 border-top-0 d-flex align-items-start gap-2">
    <i class="mdi mdi-alert-circle-outline mdi-24px flex-shrink-0 mt-1"></i>
    <div>
      <strong>{% trans "Step failed" %}</strong><br>
      <span id="task-error-msg">{{ object.error }}</span>
    </div>
  </div>
  {% endif %}

  <div class="card-body p-0">
    {% if object.log %}
      <pre id="task-log" class="task-log"></pre>
    {% else %}
      <pre id="task-log" class="task-log"><span class="text-muted">{% trans "No log output yet." %}</span></pre>
    {% endif %}
  </div>
</div>

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

  // ── ANSI → HTML ────────────────────────────────────────────────────────────
  const ANSI_COLORS = {
    '30':'#555','31':'#ff5555','32':'#50fa7b','33':'#f1fa8c',
    '34':'#6272a4','35':'#ff79c6','36':'#8be9fd','37':'#f8f8f2',
    '90':'#6272a4','91':'#ff6e6e','92':'#69ff94','93':'#ffffa5',
    '94':'#d6acff','95':'#ff92df','96':'#a4ffff','97':'#ffffff',
  };
  function escHtml(s) {
    return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  }
  function ansiToHtml(raw) {
    const parts = raw.split('\x1b[');
    let out = escHtml(parts[0]);
    let open = false;
    for (let i = 1; i < parts.length; i++) {
      const m = parts[i].match(/^([0-9;]*)m([\s\S]*)/);
      if (!m) { out += escHtml(parts[i]); continue; }
      if (open) { out += '</span>'; open = false; }
      const codes = m[1].split(';').filter(Boolean);
      const rest  = m[2];
      if (codes[0] === '0' || !codes.length) {
        // reset
      } else if (codes[0] === '1') {
        out += '<span style="font-weight:bold">'; open = true;
      } else if (codes[0] === '2') {
        out += '<span style="opacity:.55">'; open = true;
      } else {
        const col = ANSI_COLORS[codes[codes.length - 1]];
        if (col) { out += `<span style="color:${col}">`; open = true; }
      }
      out += escHtml(rest);
    }
    if (open) out += '</span>';
    return out;
  }

  const liveUrl    = "{{ live_url }}";
  const isTerminal = {{ is_terminal|yesno:"true,false" }};
  const POLL_MS    = 1500;
  const rawLog     = "{{ object.log|escapejs }}";

  const logEl = document.getElementById('task-log');
  if (logEl && rawLog) logEl.innerHTML = ansiToHtml(rawLog);

  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>`;
  }

  let logLength = rawLog.length;

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

      const statusEl = document.getElementById('task-status');
      if (statusEl) statusEl.innerHTML = badgeHtml(data.status);

      if (data.log && logEl) {
        if (logLength === 0) logEl.innerHTML = '';
        logEl.innerHTML += ansiToHtml(data.log);
        logLength += data.log.length;
        logEl.scrollTop = logEl.scrollHeight;
      }

      if (data.is_terminal) return;
      setTimeout(poll, POLL_MS);
    } catch {
      setTimeout(poll, POLL_MS * 2);
    }
  }

  if (!isTerminal) setTimeout(poll, POLL_MS);
})();
</script>

<style>
  .task-log {
    background: #0d0d0d;
    color: #e2e2e2;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .82rem;
    padding: 1rem;
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    border-radius: 0;
  }
</style>

{% endblock content %}