{% extends "base.html" %}
{% set active = "pipeline" %}
{% block content %}
<h2>Pipeline</h2>

<div class="card">
  <p>Run the full DB-persisted pipeline: analyse &rarr; plan &rarr; validate &rarr; implement &rarr; test &rarr; review &rarr; finalize.</p>
  <form id="pipeline-form">
    <div class="form-group">
      <label for="goal">Goal</label>
      <input type="text" id="goal" name="goal"
             placeholder="e.g. Build a web scraper for news headlines"
             required>
    </div>
    <div class="form-group">
      <label for="path">Project Path</label>
      <input type="text" id="path" name="path" value=".">
      <p class="help-text">Path to the project to analyse (default: current dir).</p>
    </div>
    <button type="submit" id="run-btn">Run Pipeline</button>
  </form>
</div>

<div id="pipeline-result" style="display:none">

  <!-- Stage progress bar -->
  <div class="card">
    <h3>Progress</h3>
    <div class="progress-bar-track">
      <div class="progress-bar-fill" id="progress-fill" style="width:0%"></div>
    </div>
    <div class="pipeline-stages" id="pipeline-stages">
      <div class="pipeline-stage pending" data-stage="1">
        <div class="stage-icon">&#128269;</div>
        <div class="stage-label">Analyse</div>
        <div class="stage-spinner"></div>
        <div class="stage-check">&#10003;</div>
      </div>
      <div class="pipeline-stage pending" data-stage="2">
        <div class="stage-icon">&#128220;</div>
        <div class="stage-label">Plan</div>
        <div class="stage-spinner"></div>
        <div class="stage-check">&#10003;</div>
      </div>
      <div class="pipeline-stage pending" data-stage="3">
        <div class="stage-icon">&#128736;</div>
        <div class="stage-label">Validate</div>
        <div class="stage-spinner"></div>
        <div class="stage-check">&#10003;</div>
      </div>
      <div class="pipeline-stage pending" data-stage="4">
        <div class="stage-icon">&#128187;</div>
        <div class="stage-label">Implement</div>
        <div class="stage-spinner"></div>
        <div class="stage-check">&#10003;</div>
      </div>
      <div class="pipeline-stage pending" data-stage="5">
        <div class="stage-icon">&#128640;</div>
        <div class="stage-label">Test</div>
        <div class="stage-spinner"></div>
        <div class="stage-check">&#10003;</div>
      </div>
      <div class="pipeline-stage pending" data-stage="6">
        <div class="stage-icon">&#9989;</div>
        <div class="stage-label">Review</div>
        <div class="stage-spinner"></div>
        <div class="stage-check">&#10003;</div>
      </div>
    </div>
  </div>

  <!-- Live logs -->
  <div class="card">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px">
      <h3 style="margin:0">Live Logs</h3>
      <span id="log-counter" style="font-size:12px;color:var(--text-dim)">0 events</span>
    </div>
    <div class="log-viewer" id="pipeline-logs"></div>
  </div>

  <!-- Outcome -->
  <div id="pipeline-outcome" style="display:none"></div>
</div>

<style>
/* ── progress bar ──────────────────────────── */
.progress-bar-track {
  width: 100%;
  height: 4px;
  background: rgba(168,85,247,0.1);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #c084fc, var(--accent));
  background-size: 200% 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
  animation: shimmer 2s ease-in-out infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── pipeline stages ──────────────────────── */
.pipeline-stages {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.pipeline-stage {
  flex: 1;
  min-width: 90px;
  text-align: center;
  padding: 14px 8px;
  background: rgba(13, 11, 26, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.stage-icon  { font-size: 20px; margin-bottom: 4px; }
.stage-label { font-size: 11px; font-weight: 600; color: var(--text-dim); }
.stage-spinner,
.stage-check  { display: none; font-size: 14px; margin-top: 4px; }

/* pending state */
.pipeline-stage.pending .stage-label { color: var(--text-dim); }

/* active state — purple glow + spinner */
.pipeline-stage.active {
  border-color: var(--accent);
  background: rgba(168,85,247,0.1);
  box-shadow: 0 0 24px var(--accent-glow), inset 0 0 24px rgba(168,85,247,0.04);
  transform: scale(1.04);
}
.pipeline-stage.active .stage-label { color: var(--accent); }
.pipeline-stage.active .stage-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(168,85,247,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* done state — green border + checkmark */
.pipeline-stage.done {
  border-color: var(--green);
  background: rgba(74,222,128,0.06);
  box-shadow: 0 0 12px rgba(74,222,128,0.08);
}
.pipeline-stage.done .stage-label { color: var(--green); }
.pipeline-stage.done .stage-check {
  display: inline-block;
  color: var(--green);
  animation: pop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pop {
  0% { transform: scale(0); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* fail state — red border */
.pipeline-stage.fail {
  border-color: var(--red);
  background: rgba(248,113,113,0.06);
  box-shadow: 0 0 12px rgba(248,113,113,0.08);
  animation: shake 0.4s ease-in-out;
}
.pipeline-stage.fail .stage-label { color: var(--red); }
.pipeline-stage.fail .stage-icon { filter: grayscale(0.5); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── log viewer enhancements ──────────────── */
.log-viewer .log-entry:first-child { margin-top: 0; }
.log-entry.prompt { border-left: 2px solid var(--accent); padding-left: 6px; margin: 4px 0; background: rgba(168,85,247,0.03); }
.log-entry.response { border-left: 2px solid var(--cyan); padding-left: 6px; margin: 4px 0; background: rgba(34,211,238,0.03); }
.log-entry.stage { border-left: 2px solid var(--yellow); padding-left: 6px; margin: 6px 0; background: rgba(251,191,36,0.03); font-weight: 600; }
.log-entry.test { border-left: 2px solid var(--green); padding-left: 6px; margin: 4px 0; }
.log-entry.error-log { border-left: 2px solid var(--red); padding-left: 6px; margin: 4px 0; background: rgba(248,113,113,0.04); }

/* ── outcome card ─────────────────────────── */
#pipeline-outcome {
  margin-top: 0;
}
.outcome-card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  animation: fadeSlideUp 0.5s ease;
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── log counter pulse ────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.log-active-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 1s ease-in-out infinite;
  margin-right: 6px;
  vertical-align: middle;
}
</style>

<script>
(function() {
  const form = document.getElementById('pipeline-form');
  const runBtn = document.getElementById('run-btn');
  const resultDiv = document.getElementById('pipeline-result');
  const logViewer = document.getElementById('pipeline-logs');
  const logCounter = document.getElementById('log-counter');
  const stages = document.querySelectorAll('.pipeline-stage');
  const outcomeDiv = document.getElementById('pipeline-outcome');
  const progressFill = document.getElementById('progress-fill');

  let eventSource = null;
  let logCount = 0;

  // ── helpers ──

  function setStage(num, cls) {
    stages.forEach(s => {
      const sn = parseInt(s.dataset.stage);
      if (sn < num) {
        s.className = 'pipeline-stage done';
      } else if (sn === num) {
        s.className = 'pipeline-stage ' + cls;
      } else {
        s.className = 'pipeline-stage pending';
      }
    });
    // update progress bar (16.6% per stage)
    const pct = Math.min(100, ((num - 1) / 6) * 100 + (cls === 'active' ? 8 : cls === 'done' ? 16.6 : 0));
    progressFill.style.width = pct + '%';
  }

  function addLog(entry) {
    const div = document.createElement('div');
    const time = entry.time ? entry.time.slice(11, 19) : '';
    const msg = escapeHtml(entry.message);

    // Detect log type for styling
    let extraCls = '';
    if (entry.message.includes('STAGE')) extraCls = 'stage';
    else if (entry.message.includes('LLM REQUEST')) extraCls = 'prompt';
    else if (entry.message.includes('LLM RESPONSE')) extraCls = 'response';
    else if (entry.message.includes('TEST') && (entry.message.includes('OUTPUT') || entry.message.includes('EXCEPTION'))) extraCls = 'test';
    else if (entry.level === 'ERROR') extraCls = 'error-log';
    else if (entry.level === 'WARNING') extraCls = 'stage';

    div.className = 'log-entry ' + extraCls;
    div.innerHTML = [
      '<span class="log-time">' + time + '</span>',
      '<span class="log-level ' + entry.level + '">' + entry.level + '</span>',
      '<span class="log-msg">' + msg + '</span>'
    ].join('');
    logViewer.appendChild(div);
    logViewer.scrollTop = logViewer.scrollHeight;
    logCount++;
    logCounter.innerHTML = '<span class="log-active-dot"></span>' + logCount + ' events';

    // Detect stage transitions from log messages
    const m = entry.message.match(/STAGE (\d+)\/6/);
    if (m) setStage(parseInt(m[1]), 'active');
    if (entry.message.includes('PIPELINE COMPLETE')) setStage(6, 'done');
    if (entry.message.includes('PIPELINE')) {
      const finish = entry.message.match(/Status:\s*(\S+)/);
      if (finish) progressFill.style.width = '100%';
    }
  }

  function showOutcome(result) {
    outcomeDiv.style.display = 'block';
    if (result.success) {
      outcomeDiv.innerHTML = `
        <div class="outcome-card">
          <h3 style="color:var(--green);margin-bottom:12px">&#10003; Pipeline Complete</h3>
          <dl class="result-detail">
            <dt>Tool Name</dt><dd>${escapeHtml(result.tool_name || 'N/A')}</dd>
            <dt>Tool ID</dt><dd>${result.tool_id || 'N/A'}</dd>
            <dt>Plan ID</dt><dd>${result.plan_id || 'N/A'}</dd>
            <dt>Status</dt><dd><span class="badge success">${escapeHtml(result.final_status || 'complete')}</span></dd>
            <dt>Saved To</dt><dd><code>${escapeHtml(result.file_path || 'N/A')}</code></dd>
            <dt>Review</dt><dd>passed=${result.review ? result.review.passed : 'N/A'}, score=${result.review ? result.review.score : 'N/A'}</dd>
          </dl>
          <a href="/execute" class="btn" style="margin-top:12px">View in Executor &rarr;</a>
        </div>
      `;
    } else {
      outcomeDiv.innerHTML = `
        <div class="outcome-card">
          <h3 style="color:var(--red);margin-bottom:12px">&#10007; Pipeline Failed</h3>
          <pre>${escapeHtml(result.error || 'Unknown error')}</pre>
        </div>
      `;
    }
  }

  function escapeHtml(s) {
    const d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
  }

  // ── form submit ──

  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    const goal = document.getElementById('goal').value;
    const path = document.getElementById('path').value;
    if (!goal) return;

    // Reset
    resultDiv.style.display = 'block';
    logViewer.innerHTML = '';
    outcomeDiv.style.display = 'none';
    outcomeDiv.innerHTML = '';
    logCount = 0;
    logCounter.textContent = '0 events';
    stages.forEach(s => { s.className = 'pipeline-stage pending'; });
    progressFill.style.width = '0%';
    runBtn.disabled = true;
    runBtn.textContent = 'Running...';

    // Start SSE log stream
    if (eventSource) eventSource.close();
    eventSource = new EventSource('/api/logs/stream');
    eventSource.onmessage = function(e) {
      if (e.data === 'heartbeat') return;
      try { addLog(JSON.parse(e.data)); } catch(_) {}
    };

    // POST pipeline run
    try {
      const resp = await fetch('/api/pipeline/run', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ goal, path }),
      });
      const result = await resp.json();
      showOutcome(result);
    } catch(err) {
      showOutcome({ success: false, error: err.message });
    } finally {
      runBtn.disabled = false;
      runBtn.textContent = 'Run Pipeline';
      setTimeout(() => { if (eventSource) eventSource.close(); }, 3000);
    }
  });
})();
</script>
{% endblock %}