{% extends "_base.html" %}

{% block title %}Setup wizard · {{ project.name | humanize }} · Urika{% endblock %}
{% block heading %}Setup wizard: {{ project.name | humanize }}{% endblock %}

{% block breadcrumb %}
<nav class="breadcrumb">
  <a class="breadcrumb-item" href="/projects">Projects</a>
  <span class="breadcrumb-separator">/</span>
  <a class="breadcrumb-item" href="/projects/{{ project.name }}">{{ project.name | humanize }}</a>
  <span class="breadcrumb-separator">/</span>
  <span class="breadcrumb-current">Setup wizard</span>
</nav>
{% endblock %}

{% block content %}
<div class="card">
  <p class="text-muted">
    The project builder agent will ask clarifying questions to scope this
    project, suggest experiments, and draft an initial plan. Closing this
    page does not abort — reopen the wizard to re-attach. Clicking Abort
    discards this project entirely (recoverable from trash).
  </p>

  <div id="builder-status" class="text-muted" style="margin-top: var(--space-3);">Connecting…</div>

  {# Chronological event log. Each event becomes a row classified by
     kind so theme CSS can colour-code phase / tool_use / error /
     agent_text differently. Matches the CLI's audit-trail rendering. #}
  <div id="builder-log" class="log-line" style="max-height: 500px; overflow: auto; padding: var(--space-4); margin-top: var(--space-3);"></div>

  {# Answer composer: hidden until a question event arrives, then
     reveals either a button row (for terminal-choice questions) or a
     free-text input. Disabled across the network round-trip to
     prevent double-submit. #}
  <div id="builder-composer" style="display: none; margin-top: var(--space-4);">
    <div id="builder-question-text" style="font-weight: 600; margin-bottom: var(--space-2);"></div>
    <div id="builder-choices" style="display: none; margin-bottom: var(--space-2);"></div>
    <div id="builder-freetext-row" style="display: none;">
      <input id="builder-answer-input" type="text" placeholder="Your answer (or 'done' to move on)" aria-label="Your answer to the builder question" style="width: 70%;" />
      <button id="builder-answer-submit" class="btn btn--primary">Send</button>
    </div>
  </div>

  <div id="builder-completion" style="display: none; margin-top: var(--space-4);">
    <p>Builder finished. The project is ready.</p>
    <a class="btn btn--primary" href="/projects/{{ project.name }}">Open project →</a>
  </div>

  <div style="margin-top: var(--space-4);">
    <button id="builder-abort" class="btn btn--secondary">Abort and discard this project</button>
  </div>
</div>

<script>
(function () {
  const projectName = {{ project.name | tojson }};
  const logEl = document.getElementById("builder-log");
  const statusEl = document.getElementById("builder-status");
  const composerEl = document.getElementById("builder-composer");
  const questionTextEl = document.getElementById("builder-question-text");
  const choicesEl = document.getElementById("builder-choices");
  const freetextRow = document.getElementById("builder-freetext-row");
  const answerInput = document.getElementById("builder-answer-input");
  const answerSubmit = document.getElementById("builder-answer-submit");
  const abortBtn = document.getElementById("builder-abort");
  const completionEl = document.getElementById("builder-completion");

  function append(kind, text) {
    const row = document.createElement("div");
    row.className = "builder-event builder-event--" + kind;
    row.textContent = text;
    logEl.appendChild(row);
    logEl.scrollTop = logEl.scrollHeight;
  }

  function removeAllChildren(el) {
    while (el.firstChild) el.removeChild(el.firstChild);
  }

  function hideComposer() {
    composerEl.style.display = "none";
    choicesEl.style.display = "none";
    freetextRow.style.display = "none";
    removeAllChildren(choicesEl);
    answerInput.value = "";
    answerSubmit.disabled = false;
  }

  function postAnswer(answer) {
    answerSubmit.disabled = true;
    fetch("/api/projects/" + encodeURIComponent(projectName) + "/builder/answer", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ answer: answer }),
    }).then(function (r) {
      if (!r.ok) {
        append("error", "Answer rejected: HTTP " + r.status);
        answerSubmit.disabled = false;
        return;
      }
      hideComposer();
    }).catch(function (e) {
      append("error", "Network error: " + e);
      answerSubmit.disabled = false;
    });
  }

  function showQuestion(payload) {
    questionTextEl.textContent = payload.text || "";
    removeAllChildren(choicesEl);
    if (payload.options && payload.options.length > 0) {
      choicesEl.style.display = "";
      payload.options.forEach(function (opt) {
        const btn = document.createElement("button");
        btn.className = "btn btn--secondary";
        btn.style.marginRight = "var(--space-2)";
        btn.style.marginBottom = "var(--space-2)";
        btn.textContent = opt;
        btn.addEventListener("click", function () { postAnswer(opt); });
        choicesEl.appendChild(btn);
      });
      // For non-terminal multi-choice, also allow free-text so the
      // user can type a custom answer or "done" to skip.
      if (!payload.is_terminal_choice) {
        freetextRow.style.display = "";
      }
    } else {
      freetextRow.style.display = "";
      answerInput.focus();
    }
    composerEl.style.display = "";
  }

  answerSubmit.addEventListener("click", function () {
    const ans = (answerInput.value || "").trim();
    if (!ans) return;
    postAnswer(ans);
  });
  answerInput.addEventListener("keydown", function (e) {
    if (e.key === "Enter") {
      e.preventDefault();
      answerSubmit.click();
    }
  });

  abortBtn.addEventListener("click", function () {
    if (!confirm("Abort the builder and discard this project? The entire project scaffold will be moved to trash (recoverable).")) return;
    abortBtn.disabled = true;
    fetch("/api/projects/" + encodeURIComponent(projectName) + "/builder/abort", { method: "POST" })
      .then(function () { window.location.href = "/projects"; })
      .catch(function () { abortBtn.disabled = false; });
  });

  // Start (or attach to) the builder session, then open the SSE
  // stream. A 409 means a session is already in flight for this
  // project — that's fine, we just attach to it. Any other error
  // surfaces in the status bar.
  let es = null;
  fetch("/api/projects/" + encodeURIComponent(projectName) + "/builder/start", { method: "POST" })
    .then(function (r) {
      if (!r.ok && r.status !== 409) {
        statusEl.textContent = "Could not start builder: HTTP " + r.status;
        return;
      }
      es = new EventSource("/api/projects/" + encodeURIComponent(projectName) + "/builder/stream");
      es.onopen = function () { statusEl.textContent = "Streaming…"; };
      es.addEventListener("builder", onBuilderEvent);
      es.onerror = function () { statusEl.textContent = "Connection lost."; };
    })
    .catch(function (err) {
      statusEl.textContent = "Could not start builder: " + err;
    });

  function onBuilderEvent(e) {
    let data;
    try { data = JSON.parse(e.data); } catch (err) { return; }
    const kind = data.kind;
    const p = data.payload || {};
    if (kind === "step") {
      append("step", "• " + (p.text || ""));
    } else if (kind === "phase") {
      append("phase", "→ " + (p.agent || "") + ": " + (p.activity || ""));
    } else if (kind === "model") {
      append("model", "model: " + (p.model || ""));
    } else if (kind === "tool_use") {
      append("tool_use", "  ↳ " + (p.tool || "") + (p.detail ? " " + p.detail : ""));
    } else if (kind === "thinking") {
      // Don't append; this is a busy indicator. Future: update a
      // sticky activity bar instead of dropping the event.
    } else if (kind === "error") {
      append("error", "⚠ " + (p.message || ""));
    } else if (kind === "agent_text") {
      append("agent_text", p.text || "");
    } else if (kind === "question") {
      showQuestion(p);
    } else if (kind === "done") {
      statusEl.textContent = "Completed.";
      hideComposer();
      completionEl.style.display = "";
      if (es) es.close();
    }
  }
})();
</script>
{% endblock %}