{% extends "base.html" %}
{% set active = "pipeline" %}
{% block head %}
<style>
html { scroll-behavior: smooth; }

/* ── Hero ── */
.hero-glow {
  position: absolute; inset: 0;
  opacity: 0.20;
  background: radial-gradient(circle at top right, #a855f7, transparent 40%);
  pointer-events: none;
}

/* ── Stage chips ── */
.stage-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
  background: #111827;
  border: 1px solid #27272a;
  transition: .25s;
  cursor: default;
}
.stage-chip.active {
  background: linear-gradient(90deg, rgba(168,85,247,.15), rgba(139,92,246,.05));
  border-color: #a855f7;
  box-shadow: 0 0 30px rgba(168,85,247,.18);
}
.stage-chip.active .stage-label { color: #a855f7; }
.stage-chip.done {
  background: #052e16;
  border-color: #22c55e;
}
.stage-chip.done .stage-label { color: #22c55e; }
.stage-chip.fail {
  background: #450a0a;
  border-color: #ef4444;
  animation: shake .4s ease-in-out;
}
.stage-chip.fail .stage-label { color: #ef4444; }

/* ── Terminal ── */
.terminal {
  background: #050505;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid #222;
}
.terminal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px;
  background: #090909;
  border-bottom: 1px solid #222;
}
.terminal-dots { display: flex; gap: 6px; }
.terminal-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #27272a;
}
.terminal-dots span:nth-child(1) { background: #ef4444; }
.terminal-dots span:nth-child(2) { background: #eab308; }
.terminal-dots span:nth-child(3) { background: #22c55e; }
.terminal-body {
  height: 340px; overflow-y: auto;
  padding: 8px 0;
  font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12px;
}
.terminal-body::-webkit-scrollbar { width: 4px; }
.terminal-body::-webkit-scrollbar-track { background: transparent; }
.terminal-body::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
.terminal-badge {
  font-size: 10px; font-weight: 600;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(34,197,94,.15);
  color: #22c55e;
  letter-spacing: .05em;
  animation: pulse-dot 2s ease-in-out infinite;
}
.log-entry { padding: 8px 20px; border-left: 3px solid transparent; }
.log-entry.stage { border-color: #8b5cf6; }
.log-entry.prompt { border-color: #a855f7; }
.log-entry.response { border-color: #22c55e; }
.log-entry.test { border-color: #4ade80; }
.log-entry.error-log { border-color: #ef4444; }

/* ── Segmented progress ── */
.progress-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.segment {
  height: 10px;
  border-radius: 999px;
  background: #18181b;
  transition: background .4s, box-shadow .4s;
}
.segment.active {
  background: linear-gradient(90deg, #8b5cf6, #c084fc);
  box-shadow: 0 0 20px rgba(168,85,247,.4);
}

/* ── Animations ── */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; }
  50% { opacity: .5; }
}

#pipeline-result { animation: fadeUp .4s ease; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ── Spinner inline ── */
.spinner-sm {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(168,85,247,.2);
  border-top-color: #a855f7;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
</style>
{% endblock %}

{% block content %}
<!-- ── Hero ── -->
<div class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 p-8 mb-8">
  <div class="hero-glow"></div>
  <div class="relative">
    <div class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs bg-violet-500/10 text-violet-300 mb-4">
      ✨ Autonomous Pipeline
    </div>
    <h1 class="text-3xl font-bold text-white mb-2">Build with AI</h1>
    <p class="text-zinc-400 mb-8 max-w-xl">
      Describe what you want and the pipeline will analyse,
      implement, validate and review automatically.
    </p>
    <form id="pipeline-form">
      <div class="flex flex-col lg:flex-row gap-4 mb-6">
        <div class="flex-1">
          <input type="text" id="goal" name="goal" placeholder="e.g. Build a web scraper for news headlines" required
                 class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3.5 text-white text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50 transition-all">
        </div>
        <div class="w-full lg:w-48">
          <input type="text" id="path" name="path" value="."
                 class="w-full bg-white/5 border border-white/10 rounded-xl px-5 py-3.5 text-white text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-violet-500/50 focus:border-violet-500/50 transition-all">
        </div>
        <button type="submit" id="run-btn"
                class="bg-violet-600 hover:bg-violet-500 text-white rounded-xl px-7 py-3.5 text-sm font-semibold transition-all whitespace-nowrap">
          Run Pipeline
        </button>
      </div>
    </form>
  </div>
</div>

<!-- ── Result area ── -->
<div id="pipeline-result" style="display:none">

  <!-- Stages -->
  <div class="mb-8">
    <div class="progress-grid mb-6" id="progress-grid">
      <div class="segment" data-seg="1"></div>
      <div class="segment" data-seg="2"></div>
      <div class="segment" data-seg="3"></div>
      <div class="segment" data-seg="4"></div>
      <div class="segment" data-seg="5"></div>
      <div class="segment" data-seg="6"></div>
    </div>
    <div class="flex flex-wrap gap-3" id="pipeline-stages">
      <div class="stage-chip" data-stage="1"><span>🔍</span><span class="stage-label text-sm font-medium text-zinc-400">Analyse</span></div>
      <div class="stage-chip" data-stage="2"><span>📜</span><span class="stage-label text-sm font-medium text-zinc-400">Plan</span></div>
      <div class="stage-chip" data-stage="3"><span>🛠️</span><span class="stage-label text-sm font-medium text-zinc-400">Validate</span></div>
      <div class="stage-chip" data-stage="4"><span>💻</span><span class="stage-label text-sm font-medium text-zinc-400">Implement</span></div>
      <div class="stage-chip" data-stage="5"><span>🚀</span><span class="stage-label text-sm font-medium text-zinc-400">Test</span></div>
      <div class="stage-chip" data-stage="6"><span>✅</span><span class="stage-label text-sm font-medium text-zinc-400">Review</span></div>
    </div>
  </div>

  <!-- Terminal -->
  <div class="terminal mb-6">
    <div class="terminal-header">
      <div class="flex items-center gap-3">
        <div class="terminal-dots"><span></span><span></span><span></span></div>
        <span class="text-sm text-zinc-400 font-medium">Live Execution</span>
      </div>
      <div class="flex items-center gap-3">
        <span id="log-counter" class="text-xs text-zinc-500">0 events</span>
        <span class="terminal-badge">LIVE</span>
      </div>
    </div>
    <div class="terminal-body" id="pipeline-logs"></div>
  </div>

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

<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('.stage-chip');
  const segments = document.querySelectorAll('.segment');
  const outcomeDiv = document.getElementById('pipeline-outcome');

  let eventSource = null;
  let logCount = 0;

  const STAGE_NAMES = ['Analyse', 'Plan', 'Validate', 'Implement', 'Test', 'Review'];
  const STAGE_EMOJIS = ['🔍', '📜', '🛠️', '💻', '🚀', '✅'];

  function setStage(num, cls) {
    stages.forEach((s, i) => {
      const idx = i + 1;
      s.className = 'stage-chip';
      if (idx < num) s.classList.add('done');
      else if (idx === num) s.classList.add(cls);
    });
    segments.forEach((seg, i) => {
      seg.className = i < num ? 'segment active' : 'segment';
    });
  }

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

    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 style="color:#52525b;margin-right:8px">' + time + '</span>',
      '<span style="font-weight:600;margin-right:8px;padding:1px 4px;border-radius:3px;font-size:10px;' + levelStyle(entry.level) + '">' + entry.level + '</span>',
      '<span style="color:#e4e4e7">' + msg + '</span>'
    ].join('');
    logViewer.appendChild(div);
    logViewer.scrollTop = logViewer.scrollHeight;
    logCount++;
    logCounter.textContent = logCount + ' events';

    const m = entry.message.match(/STAGE (\d+)\/6/);
    if (m) setStage(parseInt(m[1]), 'active');
    if (entry.message.includes('PIPELINE COMPLETE')) setStage(6, 'done');
  }

  function levelStyle(level) {
    switch(level) {
      case 'INFO': return 'color:#a78bfa';
      case 'WARNING': return 'color:#fbbf24';
      case 'ERROR': return 'color:#f87171';
      case 'DEBUG': return 'color:#52525b';
      default: return 'color:#a78bfa';
    }
  }

  function showOutcome(result) {
    outcomeDiv.style.display = 'block';
    if (result.success) {
      outcomeDiv.innerHTML = `
        <div style="background:linear-gradient(135deg,rgba(22,163,74,.08),rgba(22,163,74,.02));border:1px solid rgba(34,197,94,.3);border-radius:24px;padding:32px;text-align:center;animation:fadeUp .4s ease">
          <div style="font-size:48px;margin-bottom:12px">🚀</div>
          <h2 style="font-size:20px;font-weight:700;color:#fff;margin-bottom:6px">Pipeline Finished</h2>
          <p style="color:#a1a1aa;margin-bottom:24px;font-size:14px">Implementation completed successfully.</p>
          <div style="display:flex;justify-content:center;gap:32px;margin-bottom:28px">
            <div><span style="display:block;font-size:12px;color:#71717a;margin-bottom:2px">Review</span><strong style="font-size:18px;color:#22c55e">${result.review ? result.review.score : 'N/A'}</strong></div>
            <div><span style="display:block;font-size:12px;color:#71717a;margin-bottom:2px">Status</span><strong style="font-size:18px;color:#22c55e">${escapeHtml(result.final_status || 'complete')}</strong></div>
            <div><span style="display:block;font-size:12px;color:#71717a;margin-bottom:2px">Tool</span><strong style="font-size:18px;color:#e4e4e7">${escapeHtml(result.tool_name || 'N/A')}</strong></div>
          </div>
          <div style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap">
            <a href="/execute" style="display:inline-flex;align-items:center;gap:8px;background:rgba(168,85,247,.15);color:#a855f7;border:1px solid rgba(168,85,247,.3);border-radius:12px;padding:10px 20px;font-size:13px;font-weight:600;text-decoration:none;transition:.2s">Open Executor →</a>
            <span style="display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#52525b;padding:10px 20px">Saved to <code style="color:#a1a1aa;background:#18181b;padding:2px 8px;border-radius:4px">${escapeHtml(result.file_path || 'N/A')}</code></span>
          </div>
        </div>
      `;
    } else {
      outcomeDiv.innerHTML = `
        <div style="background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.02));border:1px solid rgba(239,68,68,.3);border-radius:24px;padding:32px;text-align:center;animation:fadeUp .4s ease">
          <div style="font-size:48px;margin-bottom:12px">❌</div>
          <h2 style="font-size:20px;font-weight:700;color:#fff;margin-bottom:6px">Pipeline Failed</h2>
          <pre style="color:#a1a1aa;font-size:13px;margin-top:12px;text-align:left;background:#000;padding:16px;border-radius:12px;overflow-x:auto">${escapeHtml(result.error || 'Unknown error')}</pre>
        </div>
      `;
    }
  }

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

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

    resultDiv.style.display = 'block';
    logViewer.innerHTML = '';
    outcomeDiv.style.display = 'none';
    outcomeDiv.innerHTML = '';
    logCount = 0;
    logCounter.textContent = '0 events';
    stages.forEach(s => { s.className = 'stage-chip'; });
    segments.forEach(s => { s.className = 'segment'; });
    runBtn.disabled = true;
    runBtn.innerHTML = '<span class="spinner-sm"></span> Executing pipeline';

    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(_) {}
    };

    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.innerHTML = 'Run Pipeline';
      setTimeout(() => { if (eventSource) eventSource.close(); }, 3000);
    }
  });
})();
</script>
{% endblock %}