{% extends "base.html" %}
{% block content %}
<section class="bg-white rounded-lg shadow p-6 mb-6">
  <div class="flex items-center justify-between">
    <div>
      <h1 class="text-xl font-semibold">Pipeline Monitor</h1>
      <div class="text-sm text-slate-500">
        <span id="run-header">
          {% if current_run_id %}
            current run #{{ current_run_id }}
            {% if current_run %} · {{ current_run.stage or '—' }} · {{ current_run.status }}{% endif %}
          {% else %}
            idle
          {% endif %}
        </span>
      </div>
    </div>
    <span id="run-badge" class="stage-pill {% if locked %}bg-amber-100 text-amber-700{% else %}bg-slate-200 text-slate-700{% endif %}">
      {% if locked %}running{% else %}idle{% endif %}
    </span>
  </div>
</section>

<section class="bg-white rounded-lg shadow p-6 mb-6">
  <h2 class="text-lg font-semibold mb-4">Stage progress</h2>
  <div id="stages" class="grid grid-cols-2 md:grid-cols-6 gap-2">
    {% for s in stage_order %}
    {% set st = stage_states[s] %}
    {% if st == 'ok' %}
      {% set border_cls = 'border-emerald-500 bg-emerald-50' %}
      {% set state_cls = 'text-emerald-700' %}
      {% set label = 'ok' %}
    {% elif st == 'running' %}
      {% set border_cls = 'border-amber-500 bg-amber-50' %}
      {% set state_cls = 'text-amber-700' %}
      {% set label = 'running' %}
    {% elif st == 'fail' %}
      {% set border_cls = 'border-rose-500 bg-rose-50' %}
      {% set state_cls = 'text-rose-700' %}
      {% set label = 'fail' %}
    {% else %}
      {% set border_cls = 'border-slate-200' %}
      {% set state_cls = 'text-slate-400' %}
      {% set label = '—' %}
    {% endif %}
    <div id="stage-{{ s }}" class="p-3 rounded border {{ border_cls }} text-center text-xs">
      <div class="font-semibold stage-name">{{ s }}</div>
      <div class="stage-state {{ state_cls }}">{{ label }}</div>
    </div>
    {% endfor %}
  </div>
</section>

<section class="bg-white rounded-lg shadow p-6">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold">Live log</h2>
    <span id="sse-status" class="text-xs text-slate-400">connecting…</span>
  </div>
  <div id="log" class="bg-slate-900 text-slate-100 rounded p-4 h-96 overflow-y-auto">
    {% for l in logs %}
    <div class="log-line">
      <span class="text-slate-500">{{ l.ts }}</span>
      <span class="text-emerald-400">[{{ l.level }}]</span>
      {% if l.stage %}<span class="text-indigo-300">{{ l.stage }}</span>{% endif %}
      <span>{{ l.message }}</span>
    </div>
    {% else %}
    <div class="log-line text-slate-500">(no logs yet — waiting for events…)</div>
    {% endfor %}
  </div>
</section>

<script>
  // Pipeline live monitor via native EventSource.
  // We do NOT use htmx-sse here because we need to mutate existing DOM
  // cards (not swap them), and we need per-event-name handlers.
  //
  // All insertions use textContent to prevent XSS (log messages contain
  // arbitrary content from sources/Gemini output).
  (function () {
    var logEl = document.getElementById('log');
    var statusEl = document.getElementById('sse-status');
    var headerEl = document.getElementById('run-header');
    var badgeEl = document.getElementById('run-badge');

    function makeSpan(cls, text) {
      var el = document.createElement('span');
      if (cls) el.className = cls;
      el.textContent = text == null ? '' : String(text);
      return el;
    }

    function addLine(ts, level, stage, message) {
      // Clear the initial placeholder if present
      var placeholder = logEl.querySelector('.log-line.text-slate-500');
      if (placeholder && placeholder.textContent.indexOf('waiting') >= 0) {
        placeholder.remove();
      }
      var div = document.createElement('div');
      div.className = 'log-line';
      div.appendChild(makeSpan('text-slate-500', ts));
      div.appendChild(document.createTextNode(' '));
      div.appendChild(makeSpan('text-emerald-400', '[' + (level || 'info') + ']'));
      if (stage) {
        div.appendChild(document.createTextNode(' '));
        div.appendChild(makeSpan('text-indigo-300', stage));
      }
      div.appendChild(document.createTextNode(' '));
      div.appendChild(makeSpan(null, message || ''));
      logEl.appendChild(div);
      logEl.scrollTop = logEl.scrollHeight;
    }

    function updateStage(stage, state, meta) {
      var el = document.getElementById('stage-' + stage);
      if (!el) return;
      var colors = {
        running: 'border-amber-500 bg-amber-50',
        ok:      'border-emerald-500 bg-emerald-50',
        fail:    'border-rose-500 bg-rose-50',
      };
      el.className = 'p-3 rounded border text-center text-xs ' + (colors[state] || 'border-slate-200');
      var stateDiv = el.querySelector('.stage-state');
      if (stateDiv) {
        var textColor = state === 'ok' ? 'text-emerald-700'
                       : state === 'fail' ? 'text-rose-700'
                       : state === 'running' ? 'text-amber-700'
                       : 'text-slate-400';
        stateDiv.className = 'stage-state ' + textColor;
        var label = state;
        if (meta && meta.rounds) label += ' · r' + meta.rounds;
        stateDiv.textContent = label;
      }
    }

    function updateHeader(runId, stage, status) {
      if (!headerEl) return;
      if (runId) {
        headerEl.textContent = 'current run #' + runId + (stage ? ' · ' + stage : '') + (status ? ' · ' + status : '');
      } else {
        headerEl.textContent = 'idle';
      }
    }

    function setBadge(state) {
      if (!badgeEl) return;
      var classes = {
        running: 'stage-pill bg-amber-100 text-amber-700',
        idle:    'stage-pill bg-slate-200 text-slate-700',
        ok:      'stage-pill bg-emerald-100 text-emerald-700',
        fail:    'stage-pill bg-rose-100 text-rose-700',
      };
      badgeEl.className = classes[state] || classes.idle;
      badgeEl.textContent = state;
    }

    function parseTs(ts) {
      if (!ts) return '';
      return String(ts).split('.')[0].replace('T', ' ');
    }

    // Track the current run id so stage resets happen between runs
    var currentRun = null;
    function resetStages() {
      ['research','write','fact_check','edit','image','translate'].forEach(function (s) {
        var el = document.getElementById('stage-' + s);
        if (!el) return;
        el.className = 'p-3 rounded border border-slate-200 text-center text-xs';
        var sd = el.querySelector('.stage-state');
        if (sd) {
          sd.className = 'stage-state text-slate-400';
          sd.textContent = '—';
        }
      });
    }

    // --- Open EventSource ---
    var es;
    function connect() {
      es = new EventSource('/pipeline/stream');

      es.onopen = function () {
        statusEl.textContent = 'connected';
        statusEl.className = 'text-xs text-emerald-600';
      };
      es.onerror = function () {
        statusEl.textContent = 'disconnected — retrying…';
        statusEl.className = 'text-xs text-rose-600';
      };

      // Server sends `event: <kind>` so we register per-kind listeners.
      es.addEventListener('ping', function () { /* keepalive */ });

      es.addEventListener('run_start', function (e) {
        var d = {}; try { d = JSON.parse(e.data); } catch (_) {}
        if (currentRun !== d.run_id) {
          resetStages();
          currentRun = d.run_id;
        }
        var meta = d.meta || {};
        addLine(parseTs(d.ts), 'info', null,
                'pipeline start: ' + (meta.topic || '') + ' (run #' + d.run_id + ')');
        updateHeader(d.run_id, 'research', 'running');
        setBadge('running');
      });

      es.addEventListener('stage_start', function (e) {
        var d = {}; try { d = JSON.parse(e.data); } catch (_) {}
        if (d.stage) {
          updateStage(d.stage, 'running');
          updateHeader(d.run_id || currentRun, d.stage, 'running');
          setBadge('running');
        }
        addLine(parseTs(d.ts), 'info', d.stage || '', 'stage start: ' + (d.stage || ''));
      });

      es.addEventListener('stage_end', function (e) {
        var d = {}; try { d = JSON.parse(e.data); } catch (_) {}
        var meta = d.meta || {};
        var ok = meta.ok !== false;
        if (d.stage) updateStage(d.stage, ok ? 'ok' : 'fail', meta);
        addLine(parseTs(d.ts), ok ? 'info' : 'warn', d.stage || '',
                'stage end: ' + (d.stage || '') + ' (' + (ok ? 'ok' : 'fail') + ')');
      });

      es.addEventListener('revision', function (e) {
        var d = {}; try { d = JSON.parse(e.data); } catch (_) {}
        var meta = d.meta || {};
        addLine(parseTs(d.ts), 'warn', 'fact_check',
                'needs revision: round ' + (meta.round || '?'));
      });

      es.addEventListener('log', function (e) {
        var d = {}; try { d = JSON.parse(e.data); } catch (_) {}
        addLine(parseTs(d.ts), d.level || 'info', d.stage || '', d.message || '');
      });

      es.addEventListener('run_end', function (e) {
        var d = {}; try { d = JSON.parse(e.data); } catch (_) {}
        var meta = d.meta || {};
        var ok = !!meta.success;
        addLine(parseTs(d.ts), ok ? 'info' : 'error', null,
                'pipeline end: ' + (ok ? 'success' : 'fail') +
                (meta.error ? ' (' + meta.error + ')' : ''));
        updateHeader(null, null, null);
        setBadge(ok ? 'ok' : 'fail');
        setTimeout(function () { setBadge('idle'); }, 3000);
      });

      es.addEventListener('source_polled', function (e) {
        var d = {}; try { d = JSON.parse(e.data); } catch (_) {}
        var m = d.meta || {};
        addLine(parseTs(d.ts), 'info', 'source',
                'polled ' + (m.source || '') + ': +' + (m.new || 0) + ' new (' + (m.total || 0) + ' total)');
      });
    }

    connect();
  })();
</script>
{% endblock %}