{% extends "base.html" %}

{% block title %}Pipeline — Job Cannon{% endblock %}

{% block content %}
<div class="flex flex-col h-full">

  <!-- Page header -->
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold text-slate-100">Pipeline</h1>
    <span class="text-sm text-slate-400">Drag cards between columns to update status</span>
  </div>

  <!-- ── Kanban Board ── -->
  {# Live-refreshes on sse:pipeline-changed / sse:jobs-changed so cards that   #}
  {# move via the background pipeline-detection job (or get archived nightly)  #}
  {# re-flow without a reload. The [!window.__kanbanDragging] trigger filter   #}
  {# skips a refresh while a drag is in progress; SortableJS is re-initialised #}
  {# on htmx:afterSettle since the innerHTML swap tears its bindings down.     #}
  <!-- Horizontal scroll container so all columns fit on wide screens -->
  <div id="kanban-board" class="flex gap-4 overflow-x-auto pb-4 min-h-[600px]"
       data-move-url="{{ url_for('pipeline.move') }}"
       hx-get="{{ url_for('pipeline.board_fragment') }}"
       hx-trigger="sse:pipeline-changed, sse:jobs-changed"
       hx-swap="innerHTML">

    {% include "pipeline/_board_columns.html" %}

  </div><!-- end kanban board -->

</div>

<script>
  // ── Rejected column toggle ──────────────────────────────────────────────
  function toggleRejected() {
    const body = document.getElementById('rejected-body');
    const chevron = document.getElementById('rejected-chevron');
    const label = document.getElementById('rejected-toggle-label');
    const toggleBar = document.getElementById('rejected-toggle-bar');

    const isHidden = body.classList.contains('hidden');
    if (isHidden) {
      body.classList.remove('hidden');
      chevron.style.transform = 'rotate(180deg)';
      label.textContent = 'Hide rejected';
      toggleBar.setAttribute('aria-expanded', 'true');
    } else {
      body.classList.add('hidden');
      chevron.style.transform = 'rotate(0deg)';
      const count = body.querySelectorAll('[data-job-id]').length;
      label.textContent = 'Show ' + count + ' rejected';
      toggleBar.setAttribute('aria-expanded', 'false');
    }
  }

  // ── Placeholder visibility helper ──────────────────────────────────────
  function updatePlaceholder(columnEl) {
    var placeholder = columnEl.querySelector('[data-empty-placeholder]');
    if (!placeholder) return;
    var cardCount = columnEl.querySelectorAll('[data-job-id]').length;
    if (cardCount > 0) {
      placeholder.classList.add('hidden');
    } else {
      placeholder.classList.remove('hidden');
    }
  }

  // ── SortableJS — drag-and-drop between Kanban columns ──────────────────
  // window.__kanbanDragging guards the SSE-driven board refresh: a background
  // pipeline-changed event must not swap the board out from under an in-flight
  // drag. initKanban() is idempotent and re-run after every board swap because
  // the innerHTML replacement discards the previous Sortable instances.
  window.__kanbanDragging = false;

  function initKanban() {
    document.querySelectorAll('.kanban-column-body').forEach(function(col) {
      new Sortable(col, {
        group: 'kanban',
        animation: 150,
        ghostClass: 'opacity-30',
        onStart: function() { window.__kanbanDragging = true; },
        onAdd: function(evt) {
          updatePlaceholder(evt.to);
        },
        onRemove: function(evt) {
          updatePlaceholder(evt.from);
        },
        onEnd: function(evt) {
          window.__kanbanDragging = false;
          var jobId = evt.item.dataset.jobId;
          var newStatus = evt.to.dataset.status;
          if (!jobId || !newStatus) return;
          htmx.ajax('POST', document.getElementById('kanban-board').dataset.moveUrl, {
            values: { job_id: jobId, new_status: newStatus },
            swap: 'none'
          });
        }
      });
    });
  }

  initKanban();

  // Re-attach Sortable after the board fragment swaps in (SSE live refresh).
  var kanbanBoard = document.getElementById('kanban-board');
  if (kanbanBoard) {
    // Cancel a live refresh that arrives mid-drag — the drag's own move POST
    // will persist the change, and the next event refreshes cleanly.
    kanbanBoard.addEventListener('htmx:beforeRequest', function(evt) {
      if (window.__kanbanDragging) evt.preventDefault();
    });
    kanbanBoard.addEventListener('htmx:afterSettle', function() {
      initKanban();
    });
  }
</script>
{% endblock %}