{% extends 'admin/master.html' %}
{% block body %}
{% set error_count = tasks | selectattr('result') | selectattr('result.error') | list | length %}
<div class="container-fluid" style="margin-top: 20px;">
  <div class="row">
    <div class="col">
      <div class="card border-info">
        <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center" style="font-size: 0.85em;">
          <span>Resync Task Status</span>
          <div class="d-flex align-items-center" id="header-controls">
            <span id="refresh-status" style="font-style: italic; margin-right: 12px;">
              {% if pending_count > 0 %}
                polling for updates…
              {% elif error_count > 0 %}
                completed with {{ error_count }} error(s)
              {% else %}
                all tasks finished
              {% endif %}
            </span>
            {% if tasks and pending_count == 0 %}
            <form id="clear-form" method="post" action="{{ url_for('tasks.clear') }}" style="margin: 0;">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn btn-sm btn-outline-light" style="font-size: 0.8em; padding: 2px 8px;">
                Clear
              </button>
            </form>
            {% endif %}
          </div>
        </div>
        {% if not tasks %}
          <div class="card-body text-muted text-center" style="font-size: 0.9em;">
            No tasks queued in this session.
          </div>
        {% else %}
          <table class="table table-striped table-hover mb-0" id="task-table">
            <thead>
              <tr>
                <th>Build</th>
                <th style="width: 60px;">Action</th>
                <th style="width: 130px;">Status</th>
                <th>Detail</th>
              </tr>
            </thead>
            <tbody>
              {% for task in tasks %}
              {% set has_error = task.result and task.result.get('error') %}
              <tr id="row-{{ task.id }}">
                <td>
                  {% if task.label %}
                    {{ task.label }}
                  {% elif task.result and task.result.label %}
                    {{ task.result.label }}
                  {% else %}
                    <code>{{ task.id[:12] }}…</code>
                  {% endif %}
                </td>
                <td style="text-align: center;">
                  {% if task.type == "upload" %}
                    <i class="fa fa-cloud-upload" title="Upload"></i>
                  {% elif task.type == "rehome" %}
                    <i class="fa fa-download" title="Re-home"></i>
                  {% elif task.type == "resync_info" %}
                    <i class="fa fa-refresh" title="Resync Info"></i>
                  {% elif task.type == "resync_file" %}
                    <i class="fa fa-file" title="Resync File"></i>
                  {% endif %}
                </td>
                <td>
                  {% if has_error or task.state == 'FAILURE' %}
                    <i class="fa fa-times-circle text-danger"></i>
                    <span style="font-size: 0.85em; margin-left: 4px;">ERROR</span>
                  {% elif task.state == 'SUCCESS' %}
                    <i class="fa fa-check-circle text-success"></i>
                    <span style="font-size: 0.85em; margin-left: 4px;">SUCCESS</span>
                  {% elif task.state in ('PENDING', 'STARTED', 'RETRY') %}
                    <i class="fa fa-circle-o-notch fa-spin" style="color: #f0ad4e;"></i>
                    <span style="font-size: 0.85em; margin-left: 4px;">{{ task.state }}</span>
                  {% else %}
                    <i class="fa fa-minus-circle text-muted"></i>
                    <span style="font-size: 0.85em; margin-left: 4px;">{{ task.state }}</span>
                  {% endif %}
                </td>
                <td style="font-size: 0.9em;">
                  {% if has_error %}
                    <span class="text-danger">{{ task.result.error }}</span>
                  {% elif task.state == 'FAILURE' and task.result %}
                    <span class="text-danger">{{ task.result }}</span>
                  {% elif task.state == 'SUCCESS' %}
                    <span class="text-muted">Done</span>
                  {% elif task.state in ('PENDING', 'STARTED', 'RETRY') %}
                    <span class="text-muted">In progress…</span>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var pendingCount = {{ pending_count }};
  var pollInterval = 3000;
  var statusEl = document.getElementById("refresh-status");

  function iconForState(state, hasError) {
    if (hasError || state === "FAILURE") {
      return '<i class="fa fa-times-circle text-danger"></i>';
    }
    if (state === "SUCCESS") {
      return '<i class="fa fa-check-circle text-success"></i>';
    }
    if (state === "PENDING" || state === "STARTED" || state === "RETRY") {
      return '<i class="fa fa-circle-o-notch fa-spin" style="color:#f0ad4e;"></i>';
    }
    return '<i class="fa fa-minus-circle text-muted"></i>';
  }

  function labelForState(state, hasError) {
    if (hasError || state === "FAILURE") return "ERROR";
    return state;
  }

  function updateTable(tasks) {
    var errorCount = 0;
    tasks.forEach(function (t) {
      var row = document.getElementById("row-" + t.id);
      if (!row) return;
      var hasError = !!t.error;
      if (hasError) errorCount++;
      if (t.label && t.label !== t.id) row.cells[0].textContent = t.label;
      var actionIcon = "";
      if (t.type === "upload") actionIcon = '<i class="fa fa-cloud-upload" title="Upload"></i>';
      else if (t.type === "rehome") actionIcon = '<i class="fa fa-download" title="Re-home"></i>';
      else if (t.type === "resync_info") actionIcon = '<i class="fa fa-refresh" title="Resync Info"></i>';
      else if (t.type === "resync_file") actionIcon = '<i class="fa fa-file" title="Resync File"></i>';
      row.cells[1].innerHTML = actionIcon;
      row.cells[2].innerHTML = iconForState(t.state, hasError) +
        '<span style="font-size:0.85em;margin-left:4px;">' + labelForState(t.state, hasError) + '</span>';
      if (hasError) {
        row.cells[3].innerHTML = '<span class="text-danger">' + t.error + '</span>';
      } else if (t.state === "SUCCESS") {
        row.cells[3].innerHTML = '<span class="text-muted">Done</span>';
      } else if (t.state === "FAILURE") {
        row.cells[3].innerHTML = '<span class="text-danger">' + (t.error || t.state) + '</span>';
      } else {
        row.cells[3].innerHTML = '<span class="text-muted">In progress…</span>';
      }
    });
    return errorCount;
  }

  function finalize(errorCount) {
    if (statusEl) {
      statusEl.textContent = errorCount > 0
        ? "completed with " + errorCount + " error(s)"
        : "all tasks finished";
    }
    // Show clear button if not already present
    if (!document.getElementById("clear-form")) {
      var controls = document.getElementById("header-controls");
      if (controls) {
        var form = document.createElement("form");
        form.id = "clear-form";
        form.method = "post";
        form.action = "{{ url_for('tasks.clear') }}";
        form.style.margin = "0";
        form.innerHTML = '<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">' +
          '<button type="submit" class="btn btn-sm btn-outline-light" style="font-size:0.8em;padding:2px 8px;">Clear</button>';
        controls.appendChild(form);
      }
    }
  }

  function poll() {
    fetch("{{ url_for('tasks.status_json') }}")
      .then(function (r) { return r.json(); })
      .then(function (data) {
        var errorCount = updateTable(data.tasks);
        pendingCount = data.pending_count;
        if (statusEl) statusEl.textContent = "last updated " + new Date().toLocaleTimeString();
        if (pendingCount > 0) {
          setTimeout(poll, pollInterval);
        } else {
          finalize(errorCount);
        }
      })
      .catch(function () { setTimeout(poll, pollInterval * 2); });
  }

  if (pendingCount > 0) {
    setTimeout(poll, pollInterval);
  }
})();
</script>
{% endblock %}