{% extends "base.html" %}
{% block title %}Job {{ job_id }} — ContentBot{% endblock %}
{% block page_title %}Job: <span class="mono" style="font-size:13px;color:var(--accent2)">{{ job_id }}</span>{% endblock %}

{% block extra_head %}
<style>
  .status-bar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
  }
  .pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--yellow);
    animation: pulse 1.2s ease-in-out infinite;
  }
  .pulse.done  { background: var(--green); animation: none; }
  .pulse.error { background: var(--red);   animation: none; }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(1.4); }
  }
  #log-count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
</style>
{% endblock %}

{% block content %}
<div class="status-bar">
  <div class="pulse" id="pulse"></div>
  <span class="badge badge-{{ status }}" id="statusBadge">{{ status }}</span>
  <span id="log-count">0 lines</span>
  <a href="{{ url_for('dashboard') }}" class="btn btn-ghost btn-sm" style="margin-left:auto">← Dashboard</a>
  {% if status in ['running', 'queued'] %}
  <a href="{{ url_for('stop_job', job_id=job_id) }}" class="btn btn-ghost btn-sm" style="color:var(--yellow);" onclick="return confirm('Stop this job? Note: Cannot stop a generation mid-flight but will prevent further keywords.');">⏸ Stop</a>
  {% endif %}
  <button onclick="clearLogs()" class="btn btn-ghost btn-sm">Clear</button>
</div>

<div class="terminal-header">
  <span style="font-family:var(--mono);font-size:11px;color:var(--muted)">
    ● STDOUT &nbsp;/&nbsp; JOB {{ job_id }}
  </span>
  <span id="cursor" class="blink" style="color:var(--accent2);font-family:var(--mono)">▌</span>
</div>

<div class="terminal" id="terminal">
<span style="color:var(--muted)"># ContentBot — waiting for output…
</span></div>

<script>
const terminal   = document.getElementById('terminal');
const pulse      = document.getElementById('pulse');
const statusBadge = document.getElementById('statusBadge');
const logCount   = document.getElementById('log-count');
const cursor     = document.getElementById('cursor');
let   lineCount  = 0;
let   autoScroll = true;

terminal.addEventListener('scroll', () => {
  autoScroll = terminal.scrollHeight - terminal.scrollTop - terminal.clientHeight < 40;
});

function appendLine(text, level) {
  const span = document.createElement('span');
  span.textContent = text + '\n';
  if (level === 'ERROR') span.className = 'log-error';
  else if (level === 'WARNING') span.className = 'log-warn';
  else span.className = 'log-info';
  terminal.appendChild(span);
  lineCount++;
  logCount.textContent = lineCount + ' lines';
  if (autoScroll) terminal.scrollTop = terminal.scrollHeight;
}

function setStatus(st) {
  statusBadge.textContent = st;
  statusBadge.className = 'badge badge-' + st;
  pulse.className = 'pulse ' + (st === 'done' || st === 'error' ? st : '');
  if (st === 'done' || st === 'error') cursor.style.display = 'none';
}

function clearLogs() { terminal.innerHTML = ''; lineCount = 0; logCount.textContent = '0 lines'; }

// SSE connection
const evtSource = new EventSource('/api/logs/{{ job_id }}');

evtSource.onmessage = (e) => {
  const data = JSON.parse(e.data);
  if (data.status) setStatus(data.status);
  if (data.log) {
    const level = data.log.includes('[ERROR]') ? 'ERROR'
                : data.log.includes('[WARNING]') ? 'WARNING' : 'INFO';
    appendLine(data.log, level);
  }
  if (data.done) {
    evtSource.close();
    appendLine('', 'INFO');
    appendLine('# ─── Job finished ───────────────────────────────', 'INFO');
  }
};

evtSource.onerror = () => {
  // Fallback to polling if SSE fails
  evtSource.close();
  poll();
};

// Fallback polling
async function poll() {
  while (true) {
    try {
      const r = await fetch('/api/job_status/{{ job_id }}');
      const d = await r.json();
      setStatus(d.status);
      terminal.innerHTML = '';
      lineCount = 0;
      d.logs.forEach(l => {
        const level = l.includes('[ERROR]') ? 'ERROR' : l.includes('[WARNING]') ? 'WARNING' : 'INFO';
        appendLine(l, level);
      });
      if (d.status === 'done' || d.status === 'error') break;
    } catch {}
    await new Promise(r => setTimeout(r, 1500));
  }
}
</script>
{% endblock %}