{# v2.1.0a4: "Ask this project" inline form with SSE streaming.
   Rendered inside project_detail.html. Expects template vars:
   - project_name (str)         — project to invoke against
   - host         (str)         — "local" or a configured host alias

   The form posts to /mcp/harbormaster with Accept: text/event-stream
   and consumes the chunk + result + error events the v1.0.0a14
   streaming dispatch emits. Token-based UI auth is NOT plumbed here
   (deferred to v3); on a bearer-protected install you'd need to
   include the token via fetch headers — left as a config-side note.
#}
<section x-data="askForm({
           project: {{ project_name | tojson }},
           host: {{ host | tojson }},
         })"
         class="mb-6 border border-gray-800 rounded-lg p-4 bg-gray-900/40">
  <header class="mb-3 flex items-baseline justify-between gap-2 flex-wrap">
    <h3 class="text-base font-bold text-gray-300">
      Ask <span class="text-cyan-400" x-text="project"></span>
    </h3>
    <span class="text-xs text-gray-500">
      streams via <code class="text-cyan-400">ask_project</code> SSE
    </span>
  </header>
  <form @submit.prevent="ask()">
    <textarea x-model="question" rows="3" required minlength="3"
              :disabled="loading"
              placeholder="e.g. summarize the v2 changes; what does the auth flow look like?"
              class="w-full bg-gray-950 border border-gray-800 rounded px-3 py-2 text-sm focus:border-cyan-700 focus:outline-none resize-y"></textarea>
    <div class="mt-2 flex flex-wrap items-center gap-3 text-xs text-gray-400">
      <label class="flex items-center gap-1.5">
        max_turns
        <input type="number" min="1" max="10" x-model.number="maxTurns"
               class="w-14 bg-gray-950 border border-gray-800 rounded px-2 py-1 text-center">
      </label>
      <span class="text-gray-600" x-show="loading">streaming…</span>
      <span class="text-gray-500 ml-auto" x-show="!loading && hasResult"
            x-text="`${chunks} chunks · ${(elapsedMs/1000).toFixed(1)}s`"></span>
      <button type="submit"
              :disabled="loading || question.trim().length < 3"
              class="bg-cyan-700 hover:bg-cyan-600 disabled:bg-gray-800 disabled:text-gray-500 text-white font-bold px-4 py-1.5 rounded transition">
        <span x-show="!loading">Ask</span>
        <span x-show="loading">…</span>
      </button>
      <button type="button" x-show="loading" @click="abort()"
              class="text-amber-400 hover:text-amber-300 underline">stop</button>
    </div>
  </form>
  <div x-show="error" class="mt-3 text-xs text-red-400" x-text="error"></div>
  <pre x-show="streamText"
       class="mt-3 text-sm whitespace-pre-wrap break-words border border-gray-800 rounded p-3 bg-gray-950/50 text-gray-200 leading-relaxed"
       x-text="streamText"></pre>
</section>

<script>
  function askForm(initial) {
    return {
      project: initial.project,
      host: initial.host,
      question: '', maxTurns: 5,
      streamText: '', chunks: 0, error: '',
      loading: false, hasResult: false, elapsedMs: 0,
      _abortController: null,

      async ask() {
        if (this.question.trim().length < 3) return;
        this.streamText = ''; this.chunks = 0; this.error = '';
        this.hasResult = false; this.loading = true;
        this.elapsedMs = 0;
        const t0 = performance.now();
        const controller = new AbortController();
        this._abortController = controller;
        try {
          const args = { name: this.project, question: this.question, max_turns: this.maxTurns };
          if (this.host && this.host !== 'local') args.host = this.host;
          const r = await fetch('/mcp/harbormaster', {
            method: 'POST',
            signal: controller.signal,
            headers: {
              'Content-Type': 'application/json',
              'Accept': 'text/event-stream',
            },
            body: JSON.stringify({
              method: 'tools/call',
              params: { name: 'ask_project', arguments: args },
            }),
          });
          if (!r.ok) throw new Error('HTTP ' + r.status);
          await this._consumeSseStream(r);
          this.hasResult = true;
        } catch (e) {
          if (e.name !== 'AbortError') this.error = e.message;
        } finally {
          this.loading = false;
          this.elapsedMs = performance.now() - t0;
          this._abortController = null;
        }
      },

      abort() {
        if (this._abortController) this._abortController.abort();
      },

      async _consumeSseStream(response) {
        const reader = response.body.getReader();
        const decoder = new TextDecoder();
        let buffer = '';
        for (;;) {
          const { done, value } = await reader.read();
          if (done) break;
          buffer += decoder.decode(value, { stream: true });
          const events = buffer.split('\n\n');
          buffer = events.pop() || '';
          for (const block of events) {
            const ev = this._parseEvent(block);
            if (ev.event === 'chunk') {
              try {
                const parsed = JSON.parse(ev.data);
                this.streamText += (parsed.delta ?? parsed.chunk ?? '');
                this.chunks += 1;
              } catch (_) { /* drop malformed chunk */ }
            } else if (ev.event === 'result') {
              try {
                const parsed = JSON.parse(ev.data);
                if (parsed.content && parsed.content[0] && parsed.content[0].text) {
                  // If we never received chunks, render the final result.
                  if (!this.chunks) this.streamText = parsed.content[0].text;
                }
              } catch (_) { /* drop malformed result */ }
            } else if (ev.event === 'error') {
              try {
                const parsed = JSON.parse(ev.data);
                this.error = parsed.detail || parsed.message || ev.data;
              } catch (_) { this.error = ev.data; }
            } else if (ev.event === 'heartbeat') {
              // No-op; just keeps the connection alive.
            }
          }
        }
      },

      _parseEvent(block) {
        let event = 'message';
        const dataParts = [];
        for (const line of block.split('\n')) {
          if (line.startsWith('event:')) event = line.slice(6).trim();
          else if (line.startsWith('data:')) dataParts.push(line.slice(5).trimStart());
        }
        return { event, data: dataParts.join('\n') };
      },
    };
  }
</script>