{% extends "base.html" %}
{% block title %}goal #{{ goal.id }} · Maverick{% endblock %}
{% block content %}
  <h2>goal #{{ goal.id }}</h2>

  <div class="panel" style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
    <span id="status" class="badge {{ goal.status }}">{{ goal.status }}</span>
    <span class="muted">{{ goal.title }}</span>
    <span style="margin-left: auto; display: flex; gap: 0.5rem;">
      <button id="cancel-btn" type="button"
              style="padding: 0.4rem 0.8rem; background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 4px; cursor: pointer; font-size: 0.8rem;"
              {% if goal.status in ('done', 'cancelled', 'failed') %}disabled{% endif %}>
        Cancel goal
      </button>
    </span>
  </div>

  <p id="goal-action-msg" role="status" aria-live="polite" class="muted"
     style="min-height: 1em; margin: 0 0 1.5rem;"></p>

  <div id="question-panel" class="panel" style="display: none; border-color: var(--warn);">
    <h3 style="margin-top: 0;">The agent is waiting on an answer</h3>
    <p id="question-text" class="muted"></p>
    <form id="answer-form" style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
      <input type="text" id="answer-input" required
             placeholder="Your answer" aria-label="Your answer to the agent's question"
             style="flex: 1 1 280px; padding: 0.5rem 0.75rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 4px;" />
      <button type="submit"
              style="padding: 0.5rem 1.25rem; background: var(--accent); color: #fff; border: 0; border-radius: 4px; cursor: pointer; font-weight: 500;">
        Submit
      </button>
    </form>
  </div>

  <h2>progress</h2>
  <div class="panel" id="progress" data-goal="{{ goal.id }}">
    <pre id="events" role="log" aria-live="polite" aria-label="Goal progress" tabindex="0"
         style="white-space: pre-wrap; margin: 0; max-height: 480px; overflow-y: auto;"></pre>
    <p id="loading-placeholder" class="muted" style="margin: 0;">Connecting.</p>
  </div>

  <div id="result-section" class="panel" style="display: {% if goal.result %}block{% else %}none{% endif %};">
    <h3 style="margin-top: 0;">result</h3>
    <pre id="result" tabindex="0" aria-label="Goal result"
         style="white-space: pre-wrap; margin: 0; max-height: 480px; overflow-y: auto;">{{ goal.result or '' }}</pre>
  </div>

  <p style="margin-top: 2rem;">
    <a href="/chat" class="muted" style="text-decoration: underline;">Back to chat</a>
  </p>

  <script>
    (function() {
      const goalId = {{ goal.id }};
      const eventsEl = document.getElementById('events');
      const placeholderEl = document.getElementById('loading-placeholder');
      const statusEl = document.getElementById('status');
      const resultEl = document.getElementById('result');
      const resultSection = document.getElementById('result-section');
      const cancelBtn = document.getElementById('cancel-btn');
      const questionPanel = document.getElementById('question-panel');
      const questionText = document.getElementById('question-text');
      const answerForm = document.getElementById('answer-form');
      const answerInput = document.getElementById('answer-input');
      const actionMsg = document.getElementById('goal-action-msg');
      let sinceId = 0;
      let lastSeenId = 0;  // highest event id rendered; dedups SSE replays
      let done = false;
      let pollDelay = 2000;
      let currentQuestionId = null;

      const KIND_LABELS = {
        plan: 'thinking', finding: 'answer', observation: 'result',
        error: 'error', verify: 'checking', artifact: 'produced',
      };
      const KIND_COLORS = {
        plan: 'var(--accent)', finding: 'var(--accent)',
        observation: 'var(--text)', error: 'var(--danger)',
        verify: 'var(--warn)', artifact: 'var(--accent)',
      };

      function fmtKind(k) {
        const span = document.createElement('span');
        span.style.color = KIND_COLORS[k] || 'var(--muted)';
        span.textContent = KIND_LABELS[k] || k;
        return span;
      }

      function fmtAgent(a) {
        if (!a) return '';
        const dashIdx = a.indexOf('-');
        return dashIdx > 0 ? a.slice(0, dashIdx) : a;
      }

      function appendEvent(e) {
        if (placeholderEl) placeholderEl.style.display = 'none';
        const line = document.createElement('div');
        const agent = document.createElement('span');
        agent.className = 'muted';
        agent.textContent = '[' + fmtAgent(e.agent) + '] ';
        line.appendChild(agent);
        line.appendChild(fmtKind(e.kind));
        line.appendChild(document.createTextNode(' ' + (e.content || '')));
        eventsEl.appendChild(line);
      }

      async function pollQuestions() {
        try {
          const r = await fetch('/api/v1/goals/' + goalId + '/open_questions');
          if (!r.ok) return;
          const j = await r.json();
          const qs = j.open_questions || [];
          if (qs.length) {
            currentQuestionId = qs[0].id;
            questionText.textContent = qs[0].question;
            questionPanel.style.display = 'block';
            answerInput.focus();
          } else {
            currentQuestionId = null;
            questionPanel.style.display = 'none';
          }
        } catch (e) { /* swallow */ }
      }

      answerForm.addEventListener('submit', async function(ev) {
        ev.preventDefault();
        if (currentQuestionId == null || !answerInput.value.trim()) return;
        const qid = currentQuestionId;
        const ans = answerInput.value.trim();
        answerInput.disabled = true;
        actionMsg.textContent = '';
        try {
          const r = await fetch('/api/v1/goals/' + goalId + '/answer', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({question_id: qid, answer: ans}),
          });
          if (r.ok) {
            answerInput.value = '';
            currentQuestionId = null;
            questionPanel.style.display = 'none';
          } else {
            const j = await r.json().catch(function() { return {}; });
            actionMsg.style.color = 'var(--danger)';
            actionMsg.textContent = j.detail || ('Submit failed: ' + r.status);
          }
        } finally {
          answerInput.disabled = false;
        }
      });

      cancelBtn.addEventListener('click', async function() {
        if (!confirm('Cancel this goal? The agent stops at its next tool-call boundary.')) return;
        cancelBtn.disabled = true;
        actionMsg.textContent = '';
        const r = await fetch('/api/v1/goals/' + goalId + '/cancel', { method: 'POST' });
        if (!r.ok && r.status !== 204) {
          const j = await r.json().catch(function() { return {}; });
          actionMsg.style.color = 'var(--danger)';
          actionMsg.textContent = j.detail || ('Cancel failed: ' + r.status);
          cancelBtn.disabled = false;
        }
      });

      // SSE replaces the 2s/5s polling loop. The server holds one TCP
      // connection open and pushes only when there's something new;
      // EventSource handles reconnect automatically. Falls back to
      // polling if SSE isn't available (very old browsers, blocked
      // by a corporate proxy).
      function applyPayload(d) {
        if (!d || typeof d !== 'object') return;
        const evs = Array.isArray(d.events) ? d.events : [];
        for (const e of evs) {
          // Skip ids we've already rendered, so an SSE reconnect that
          // resends a batch can't double up the log.
          if (e && e.id != null) {
            if (e.id <= lastSeenId) continue;
            lastSeenId = e.id;
          }
          appendEvent(e);
        }
        if (evs.length > 0 && d.next_id != null) sinceId = d.next_id;
        eventsEl.parentElement.scrollTop = eventsEl.parentElement.scrollHeight;
        if (d.status) {
          statusEl.className = 'badge ' + d.status;
          statusEl.textContent = d.status;
        }
        if (d.result) {
          resultEl.textContent = d.result;
          resultSection.style.display = 'block';
        }
        if (d.status === 'blocked') {
          pollQuestions();
        }
        if (d.status === 'done' || d.status === 'cancelled' || d.status === 'failed') {
          done = true;
          cancelBtn.disabled = true;
        }
      }

      function openStream() {
        if (typeof EventSource === 'undefined') return openPollingFallback();
        const es = new EventSource('/api/goal/' + goalId + '/events/stream?since=' + sinceId);
        es.onmessage = function(ev) {
          try { applyPayload(JSON.parse(ev.data)); } catch (_) {}
        };
        es.addEventListener('terminal', function(ev) {
          try { applyPayload(JSON.parse(ev.data)); } catch (_) {}
          es.close();
        });
        es.onerror = function() {
          // EventSource auto-reconnects; if it permanently fails (network
          // gone, server down), fall back to polling so the UI still works.
          if (es.readyState === EventSource.CLOSED) openPollingFallback();
        };
      }

      function openPollingFallback() {
        async function poll() {
          if (done) return;
          if (document.visibilityState === 'hidden') {
            setTimeout(poll, 5000);
            return;
          }
          try {
            const url = '/api/goal/' + goalId + '/events?since=' + sinceId;
            const resp = await fetch(url);
            if (resp.status === 404) { done = true; return; }  // goal gone; stop polling
            if (!resp.ok) { setTimeout(poll, 5000); return; }
            applyPayload(await resp.json());
            if (done) return;
          } catch (e) { /* swallow */ }
          setTimeout(poll, pollDelay);
        }
        poll();
      }

      openStream();
      // Poll questions on a longer cadence so the form picks up on
      // ask_user that happens between event ticks.
      setInterval(function() { if (!done) pollQuestions(); }, 5000);
    })();
  </script>
{% endblock %}