{# Spec 153 - /chat page.

   Renders both states from a single template, branched on
   ``key_configured``:

   * State A - no LLM key set: empty pane + "Configure LLM" CTA
     linking to /admin/settings/llm. No chat input rendered.
   * State B - key set: streaming chat surface backed by Server-Sent
     Events from /chat/turn.

   Egress disclosure banner ALWAYS rendered above whichever state
   shows (FR-010). #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header">
    <h1 class="ui-page-title">Audit AI</h1>
    <p class="text-base text-slate-500 dark:text-slate-400 mt-2 max-w-3xl">
      Ask your audit data in plain English. Backed by the same tools the
      audit dashboard uses; numbers cited here match what the rest of
      the audit shows for the same metric.
    </p>
  </div>

  {# Persistent egress disclosure - FR-010. Visible regardless of
     state so the user always knows what enabling chat means. #}
  <div class="mt-4 ui-pane border-blue-200 dark:border-blue-800 bg-blue-50/60 dark:bg-blue-950/30">
    <p class="text-sm text-blue-800 dark:text-blue-200">
      <strong>Heads up:</strong> Using Audit AI sends conversation
      content to your configured LLM provider
      {% if key_configured %}
        (<code class="font-mono">{{ provider }}</code>).
      {% else %}
        once you configure one.
      {% endif %}
      Conversation history is browser-local only &mdash; the audit never
      persists chat content to disk.
    </p>
  </div>

  {% if not key_configured %}
    {# ── State A - empty / unconfigured ────────────────────────── #}
    <div class="mt-6 ui-pane text-center py-10">
      <svg class="w-12 h-12 mx-auto text-slate-300 dark:text-slate-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8-1.477 0-2.87-.32-4.111-.875L3 21l1.875-4.889C3.32 14.87 3 13.477 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
      </svg>
      <h2 class="mt-4 text-lg font-semibold text-slate-900 dark:text-slate-100">Audit AI is disabled</h2>
      <p class="mt-2 max-w-md mx-auto text-sm text-slate-600 dark:text-slate-400">
        To enable Audit AI, configure an LLM provider + API key in
        Settings. The audit will send your conversation content to that
        provider on every turn; nothing leaves your machine until you
        configure a key.
      </p>
      <div class="mt-6">
        <a href="/admin/settings/llm" class="ui-btn-primary inline-flex items-center px-4 py-2 text-sm font-medium">
          Configure LLM
        </a>
      </div>
    </div>
  {% else %}
    {# ── State B - configured ────────────────────────────────── #}
    {% if scan_status_summary %}
      <p class="mt-4 text-sm text-slate-500 dark:text-slate-400">
        {{ scan_status_summary }}
      </p>
    {% endif %}

    <div class="mt-4 ui-pane" id="chat-card">
      {# Transcript area. Populated by the inline JS handler below.
         Sized so the scrollbar lives inside the panel; the input
         stays anchored at the bottom regardless of conversation
         length. #}
      <div id="chat-transcript"
           class="space-y-4 overflow-y-auto"
           style="min-height: 24rem; max-height: 32rem;">
        <p id="chat-empty-hint" class="text-sm text-slate-500 dark:text-slate-400 italic">
          Try: <em>What's my most expensive flagged model right now?</em>,
          <em>Did I have slot contention this week?</em>, or
          <em>What's the partition recommendation for a table?</em>
        </p>
      </div>

      {# Cost strip - server's CostEvent populates this. #}
      <div id="chat-cost-strip" class="mt-3 flex items-center justify-between text-sm text-slate-500 dark:text-slate-400 border-t border-slate-200 dark:border-slate-800 pt-3">
        <span>
          Session cost: <span class="font-mono" id="chat-session-cost">$0.0000</span>
          {% if chat_session_cap_usd > 0 %}
            / <span class="font-mono">${{ '%.2f' | format(chat_session_cap_usd) }}</span> cap
          {% else %}
            (no cap)
          {% endif %}
        </span>
        <button type="button" id="chat-reset-btn"
                class="text-brand-600 dark:text-brand-300 hover:underline">
          Reset conversation
        </button>
      </div>

      {# Cap-reached overlay - initially hidden; shown when a turn
         comes back with DoneEvent(finish_reason="cost_cap"). #}
      <div id="chat-cap-reached" class="hidden mt-3 ui-pane border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/30">
        <p class="text-sm text-amber-800 dark:text-amber-200">
          <strong>Session cap reached.</strong> Raise the cap in Settings
          or reset this session to keep chatting.
        </p>
        <div class="mt-2 flex gap-2">
          <a href="/admin/settings/llm" class="ui-btn-secondary text-sm">Raise cap in Settings</a>
          <button type="button" class="ui-btn-secondary text-sm" id="chat-cap-reset-btn">Reset session</button>
        </div>
      </div>

      <form id="chat-form" class="mt-4 flex gap-2">
        <input type="text" id="chat-input"
               class="ui-form-input flex-1"
               placeholder="Ask anything about your audit data…"
               autocomplete="off"
               required />
        <button type="submit" id="chat-submit"
                class="ui-btn-primary px-4 py-2 text-sm font-medium">
          Send
        </button>
      </form>
    </div>

    <script>
      (function () {
        const transcript = document.getElementById('chat-transcript');
        const emptyHint = document.getElementById('chat-empty-hint');
        const form = document.getElementById('chat-form');
        const input = document.getElementById('chat-input');
        const submit = document.getElementById('chat-submit');
        const sessionCostEl = document.getElementById('chat-session-cost');
        const resetBtn = document.getElementById('chat-reset-btn');
        const capPane = document.getElementById('chat-cap-reached');
        const capResetBtn = document.getElementById('chat-cap-reset-btn');

        // Browser-local-only history (FR-007). Conversation content
        // never leaves the client / server roundtrip.
        let history = [];
        // Display-only - the authoritative running total lives in the
        // server-side ledger keyed by ``sessionId``. We refresh this
        // from the CostEvent the server emits at end-of-turn.
        let sessionTotal = 0.0;
        // Per-tab session id anchors the server-side cost-cap ledger.
        // Fresh id on each page load (and on "New chat") so a tampered
        // client can't reset the cap mid-session by spoofing the id.
        function mintSessionId() {
          return (
            'sess-' +
            (crypto && crypto.randomUUID
              ? crypto.randomUUID()
              : (Date.now().toString(36) +
                 Math.random().toString(36).slice(2, 10)))
          );
        }
        let sessionId = mintSessionId();

        function escapeHtml(s) {
          return String(s == null ? '' : s)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;');
        }

        // Minimal Markdown subset - what Gemini emits in practice.
        // Order matters: extract fenced blocks first so their content
        // isn't transformed, then inline code, then bold (longer
        // marker), then italic.
        function renderMarkdown(text) {
          if (!text) return '';
          let s = escapeHtml(text);
          // Fenced code blocks ```lang?\n...\n```
          s = s.replace(
            /```([a-z0-9_+\-]*)\n([\s\S]*?)```/gi,
            function (_m, _lang, body) {
              return '<pre class="mt-2 mb-2 text-sm font-mono bg-slate-100 dark:bg-slate-800 p-3 overflow-x-auto whitespace-pre"><code>'
                + body
                + '</code></pre>';
            }
          );
          // Inline `code`
          s = s.replace(
            /`([^`\n]+)`/g,
            '<code class="font-mono text-sm bg-slate-100 dark:bg-slate-800 px-1 py-0.5">$1</code>'
          );
          // Bold **text** (handle before italic so `*` doesn't greedy-match).
          s = s.replace(/\*\*([^*\n][^*]*?)\*\*/g, '<strong>$1</strong>');
          // Italic *text* - single asterisks, no whitespace immediately
          // after the opening or before the closing.
          s = s.replace(/(^|[^*])\*([^*\s][^*\n]*?)\*(?!\*)/g, '$1<em>$2</em>');
          return s;
        }

        function appendTypingIndicator() {
          if (emptyHint) emptyHint.remove();
          const wrap = document.createElement('div');
          wrap.id = 'chat-typing-indicator';
          wrap.className =
            'ui-pane bg-white dark:bg-slate-950/40 border-l-2 border-emerald-500';
          wrap.innerHTML =
            '<p class="text-sm uppercase tracking-wider mb-2 text-emerald-700 dark:text-emerald-300">Audit AI</p>' +
            '<div class="flex items-center gap-1.5 text-slate-500 dark:text-slate-400 text-sm">' +
            '<span>Thinking</span>' +
            '<span class="inline-flex gap-1 ml-1">' +
            '<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce" style="animation-delay:0ms"></span>' +
            '<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce" style="animation-delay:150ms"></span>' +
            '<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-bounce" style="animation-delay:300ms"></span>' +
            '</span>' +
            '</div>';
          transcript.appendChild(wrap);
          transcript.scrollTop = transcript.scrollHeight;
          return wrap;
        }

        function removeTypingIndicator() {
          const el = document.getElementById('chat-typing-indicator');
          if (el) el.remove();
        }

        function appendMessage(role, contentHtml) {
          if (emptyHint) emptyHint.remove();
          const wrapper = document.createElement('div');
          wrapper.className = role === 'user'
            ? 'ui-pane bg-slate-50 dark:bg-slate-900/40 border-l-2 border-brand-500'
            : 'ui-pane bg-white dark:bg-slate-950/40 border-l-2 border-emerald-500';
          wrapper.innerHTML =
            '<p class="text-sm uppercase tracking-wider mb-2 ' +
            (role === 'user'
              ? 'text-brand-600 dark:text-brand-300'
              : 'text-emerald-700 dark:text-emerald-300') +
            '">' + (role === 'user' ? 'You' : 'Audit AI') + '</p>' +
            '<div class="text-sm text-slate-800 dark:text-slate-200 whitespace-pre-wrap"></div>';
          const body = wrapper.querySelector('div');
          body.innerHTML = contentHtml;
          transcript.appendChild(wrapper);
          transcript.scrollTop = transcript.scrollHeight;
          return body;
        }

        function appendToolCall(call) {
          if (emptyHint) emptyHint.remove();
          const row = document.createElement('details');
          row.className = 'ui-pane bg-slate-50/50 dark:bg-slate-900/30 border border-slate-200 dark:border-slate-800 py-2';
          row.innerHTML =
            '<summary class="cursor-pointer text-sm">' +
            '<span class="text-slate-500 dark:text-slate-400">Tool call:</span> ' +
            '<code class="font-mono text-slate-700 dark:text-slate-200">' + escapeHtml(call.tool_name) + '</code> ' +
            '<span class="text-slate-400">·</span> ' +
            '<span class="text-slate-500 dark:text-slate-400 chat-tc-summary">running…</span>' +
            '</summary>' +
            '<pre class="mt-2 text-sm font-mono text-slate-600 dark:text-slate-400 overflow-x-auto whitespace-pre">' +
            'args: ' + escapeHtml(JSON.stringify(call.arguments, null, 2)) +
            '</pre>' +
            '<pre class="mt-2 text-sm font-mono text-slate-700 dark:text-slate-300 overflow-x-auto whitespace-pre chat-tc-output">' +
            '(awaiting result)' +
            '</pre>';
          transcript.appendChild(row);
          transcript.scrollTop = transcript.scrollHeight;
          return row;
        }

        function recordHistoryUser(content) {
          history.push({role: 'user', content: content});
        }

        function recordHistoryAssistant(content, toolCalls, cost, inputTokens, outputTokens) {
          history.push({
            role: 'assistant',
            content: content || '',
            tool_calls: toolCalls || [],
            turn_cost_usd: cost || 0,
            cost_paid_in_input_tokens: inputTokens || 0,
            cost_paid_in_output_tokens: outputTokens || 0,
          });
        }

        function updateSessionCost(total) {
          sessionTotal = total;
          sessionCostEl.textContent = '$' + total.toFixed(4);
        }

        function showCapReached() {
          capPane.classList.remove('hidden');
          input.disabled = true;
          submit.disabled = true;
        }

        function resetSession() {
          // Tell the server to clear the cost ledger for the OLD
          // session id before we mint a new one. Fire-and-forget; if
          // the request fails the worst case is a stale entry that
          // ages out of the LRU bound.
          fetch('/chat/session/reset', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({session_id: sessionId}),
          }).catch(function () { /* best-effort */ });

          history = [];
          sessionId = mintSessionId();
          updateSessionCost(0);
          transcript.innerHTML = '';
          const hint = document.createElement('p');
          hint.id = 'chat-empty-hint';
          hint.className = 'text-sm text-slate-500 dark:text-slate-400 italic';
          hint.textContent = 'Conversation reset. Try a new question.';
          transcript.appendChild(hint);
          capPane.classList.add('hidden');
          input.disabled = false;
          submit.disabled = false;
          input.focus();
        }

        resetBtn.addEventListener('click', resetSession);
        capResetBtn.addEventListener('click', resetSession);

        form.addEventListener('submit', async function (ev) {
          ev.preventDefault();
          const userMessage = input.value.trim();
          if (!userMessage) return;
          appendMessage('user', escapeHtml(userMessage));
          recordHistoryUser(userMessage);
          input.value = '';
          input.disabled = true;
          submit.disabled = true;

          // Show the "thinking" indicator first. The assistant message
          // box is created lazily on the first ``text`` chunk OR
          // attached as a fallback at the end if no text streamed.
          appendTypingIndicator();
          let assistantBody = null;
          let assistantText = '';
          const turnToolCalls = []; // {tool_name, arguments, output_summary, output_json, is_error}
          const callIdToRow = {};

          // Lazy-create the assistant message box on first text /
          // first done(error). Removes the typing indicator when it
          // does. Idempotent - calling repeatedly is a no-op after
          // the box exists.
          function ensureAssistantBody() {
            if (assistantBody) return assistantBody;
            removeTypingIndicator();
            assistantBody = appendMessage('assistant', '');
            return assistantBody;
          }

          let finalCostUsd = 0;
          let finalInputTokens = 0;
          let finalOutputTokens = 0;

          try {
            const response = await fetch('/chat/turn', {
              method: 'POST',
              headers: {'Content-Type': 'application/json'},
              body: JSON.stringify({
                session_id: sessionId,
                history: history.slice(0, -1),  // exclude the user msg we just pushed; service adds it itself
                user_message: userMessage,
              }),
            });

            if (!response.ok) {
              const errBody = await response.json().catch(() => ({}));
              ensureAssistantBody().innerHTML =
                '<span class="text-red-600 dark:text-red-400">' +
                escapeHtml(errBody.error || 'request_failed') + ': ' +
                escapeHtml(errBody.remediation || ('HTTP ' + response.status)) +
                '</span>';
              input.disabled = false;
              submit.disabled = false;
              input.focus();
              return;
            }

            const reader = response.body.getReader();
            const decoder = new TextDecoder();
            let buffer = '';

            // SSE frames are separated by a blank line. The spec
            // accepts \r\n\r\n, \n\n, or \r\r - sse-starlette emits
            // CRLF (\r\n\r\n) which is what we'd miss if we only
            // searched for \n\n. Match all three line-ending shapes.
            const FRAME_SEP_RE = /\r\n\r\n|\n\n|\r\r/;
            const LINE_SPLIT_RE = /\r\n|\n|\r/;

            while (true) {
              const {value, done} = await reader.read();
              if (done) break;
              buffer += decoder.decode(value, {stream: true});
              while (true) {
                const m = buffer.match(FRAME_SEP_RE);
                if (!m) break;
                const sep = m.index;
                const sepLen = m[0].length;
                const frame = buffer.slice(0, sep);
                buffer = buffer.slice(sep + sepLen);
                const dataLines = frame.split(LINE_SPLIT_RE)
                  .filter(l => l.startsWith('data:'))
                  .map(l => l.slice(5).trimStart());
                if (!dataLines.length) continue;
                let event;
                try {
                  event = JSON.parse(dataLines.join('\n'));
                } catch (e) {
                  continue;
                }
                if (event.type === 'text') {
                  // First text chunk → swap typing indicator for the
                  // real assistant message box. Subsequent chunks
                  // re-render markdown over the accumulated text.
                  ensureAssistantBody();
                  assistantText += event.chunk;
                  assistantBody.innerHTML = renderMarkdown(assistantText);
                  transcript.scrollTop = transcript.scrollHeight;
                } else if (event.type === 'tool_call') {
                  // Move the typing indicator BELOW the new tool-call
                  // row so the user sees "the model is still working".
                  removeTypingIndicator();
                  const row = appendToolCall(event);
                  callIdToRow[event.call_id] = row;
                  turnToolCalls.push({
                    tool_name: event.tool_name,
                    arguments: event.arguments,
                    call_id: event.call_id,
                    output_summary: '',
                    output_json: {},
                    is_error: false,
                  });
                  // Re-attach typing indicator under the tool row,
                  // unless a real assistant body has already appeared.
                  if (!assistantBody) {
                    appendTypingIndicator();
                  }
                } else if (event.type === 'tool_result') {
                  const row = callIdToRow[event.call_id];
                  if (row) {
                    const summaryEl = row.querySelector('.chat-tc-summary');
                    const outputEl = row.querySelector('.chat-tc-output');
                    summaryEl.textContent = event.output_summary;
                    summaryEl.classList.toggle('text-red-600', !!event.is_error);
                    summaryEl.classList.toggle('dark:text-red-400', !!event.is_error);
                    outputEl.textContent = JSON.stringify(event.output_json, null, 2);
                  }
                  for (const tc of turnToolCalls) {
                    if (tc.call_id === event.call_id) {
                      tc.output_summary = event.output_summary;
                      tc.output_json = event.output_json;
                      tc.is_error = event.is_error;
                    }
                  }
                } else if (event.type === 'cost') {
                  finalCostUsd = event.turn_cost_usd;
                  finalInputTokens = event.input_tokens;
                  finalOutputTokens = event.output_tokens;
                  updateSessionCost(event.session_total_usd);
                } else if (event.type === 'done') {
                  // Done is the last event no matter what. Drop the
                  // typing indicator if it's still up (no text ever
                  // streamed in this turn).
                  removeTypingIndicator();
                  if (event.finish_reason === 'cost_cap') {
                    showCapReached();
                  } else if (event.finish_reason !== 'stop' && event.error_message) {
                    const errSpan = document.createElement('span');
                    errSpan.className = 'block mt-2 text-sm text-amber-700 dark:text-amber-300';
                    errSpan.textContent = '(' + event.finish_reason + ': ' + event.error_message + ')';
                    ensureAssistantBody().appendChild(errSpan);
                  }
                }
              }
            }
          } catch (err) {
            ensureAssistantBody().innerHTML =
              '<span class="text-red-600 dark:text-red-400">Network error: ' +
              escapeHtml(err.message || String(err)) +
              '</span>';
          } finally {
            // Safety net: drop the typing indicator if any path
            // above missed it.
            removeTypingIndicator();
            // Add an assistant cost footer to whichever assistant
            // body exists. If the turn produced neither text nor a
            // tool call (e.g. an instant cost-cap stop), we don't
            // create one - there's nothing for the footer to attach
            // to anyway.
            if (assistantBody && (assistantText || turnToolCalls.length)) {
              const costFooter = document.createElement('p');
              costFooter.className = 'mt-2 text-sm text-slate-400 dark:text-slate-500 font-mono';
              costFooter.textContent =
                '$' + finalCostUsd.toFixed(4) + ' this turn · ' +
                finalInputTokens + ' in / ' + finalOutputTokens + ' out';
              assistantBody.appendChild(costFooter);
            }
            recordHistoryAssistant(
              assistantText, turnToolCalls, finalCostUsd, finalInputTokens, finalOutputTokens
            );
            if (!input.disabled === false && !capPane.classList.contains('hidden')) {
              // input intentionally remains disabled when the cap was hit
            }
            if (!capPane || capPane.classList.contains('hidden')) {
              input.disabled = false;
              submit.disabled = false;
              input.focus();
            }
          }
        });
      })();
    </script>
  {% endif %}
</section>
{% endblock %}