{% extends 'generic/_base.html' %}

{% block title %}Sync Log — {{ runner.name }}{% endblock %}

{% block content %}
<div class="row">
  <div class="col col-md-12">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <div>
          <strong>Sync Log</strong>
          <span id="status-badge" class="ms-2 badge text-bg-{% if sync_log.status == 'running' %}warning{% elif sync_log.status == 'completed' %}success{% else %}danger{% endif %}">
            {{ sync_log.get_status_display }}
          </span>
        </div>
        <div>
          <a href="{% url 'plugins:netbox_zabbix_sync_plugin:sync_log_list' pk=runner.pk %}" class="btn btn-sm btn-outline-secondary">
            All Logs
          </a>
          <a href="{{ runner.get_absolute_url }}" class="btn btn-sm btn-outline-secondary">
            Back to Runner
          </a>
        </div>
      </div>
      <div class="card-body">
        <table class="table table-hover attr-table mb-3">
          <tr>
            <th scope="row">Runner</th>
            <td><a href="{{ runner.get_absolute_url }}">{{ runner.name }}</a></td>
          </tr>
          <tr>
            <th scope="row">Log Level</th>
            <td><span class="badge text-bg-secondary">{{ sync_log.log_level }}</span></td>
          </tr>
          <tr>
            <th scope="row">Started</th>
            <td>{{ sync_log.started|date:"Y-m-d H:i:s" }}</td>
          </tr>
          <tr>
            <th scope="row">Finished</th>
            <td id="finished-time">
              {% if sync_log.finished %}
                {{ sync_log.finished|date:"Y-m-d H:i:s" }}
              {% else %}
                <span class="text-muted">&mdash;</span>
              {% endif %}
            </td>
          </tr>
        </table>

        <h6>Output</h6>
        <pre id="log-output" class="bg-dark text-light p-3 rounded" style="max-height:600px; overflow-y:auto; font-size:0.85rem; white-space:pre-wrap; word-wrap:break-word;">{{ sync_log.output }}</pre>
      </div>
    </div>
  </div>
</div>

{% if sync_log.status == "running" %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const logOutput = document.getElementById("log-output");
    const statusBadge = document.getElementById("status-badge");
    const finishedTime = document.getElementById("finished-time");
    const pollUrl = "{% url 'plugins:netbox_zabbix_sync_plugin:sync_log_poll' pk=sync_log.pk %}";
    let offset = logOutput.textContent.length;
    let polling = true;

    function poll() {
      if (!polling) return;
      fetch(pollUrl + "?offset=" + offset)
        .then(function (r) { return r.json(); })
        .then(function (data) {
          if (data.output) {
            logOutput.textContent += data.output;
            logOutput.scrollTop = logOutput.scrollHeight;
          }
          offset = data.offset;
          if (data.status !== "running") {
            polling = false;
            if (data.status === "completed") {
              statusBadge.className = "ms-2 badge text-bg-success";
              statusBadge.textContent = "Completed";
            } else {
              statusBadge.className = "ms-2 badge text-bg-danger";
              statusBadge.textContent = "Failed";
            }
            if (data.finished) {
              finishedTime.textContent = new Date(data.finished).toLocaleString();
            }
          } else {
            setTimeout(poll, 2000);
          }
        })
        .catch(function () {
          setTimeout(poll, 5000);
        });
    }

    setTimeout(poll, 2000);
  });
</script>
{% endif %}
{% endblock content %}