{% extends "base.html" %}
{% block content %}
<div class="app-shell">
  <header class="chat-header">
    <div class="chat-title">
      <span class="chat-dot" aria-hidden="true"></span>
      <div class="stack">
        <span class="chat-name">{{ chat_id }}</span>
        <span class="chat-sub">Agent connected</span>
      </div>
    </div>
    {% if projects and projects|length > 1 %}
    <div class="project-switcher">
      <label for="project-select" class="sr-only">Switch project</label>
      <select id="project-select" aria-label="Switch project"
              onchange="if(this.value){window.location.href=this.value}">
        {% for p in projects %}
        <option value="/chat/{{ p|urlencode }}"{% if p == chat_id %} selected{% endif %}>{{ p }}</option>
        {% endfor %}
      </select>
    </div>
    {% endif %}
  </header>

  <!-- SSE lives on the scroll container so #messages (its child) is inside the
       hx-ext="sse" subtree — required for hx-trigger="sse:update" to fire. -->
  <div class="messages-scroll" id="sse-source" tabindex="0"
       role="log" aria-label="Conversation" aria-live="polite"
       hx-ext="sse" sse-connect="/chat/{{ chat_id|urlencode }}/sse">
    <div id="sse-oob" sse-swap="update" hx-swap="none" hidden></div>
    <div id="messages"
         hx-get="/chat/{{ chat_id|urlencode }}/messages"
         hx-swap="innerHTML"
         hx-on::after-swap="this.parentElement.scrollTop = this.parentElement.scrollHeight">
      {% include "messages.html" %}
    </div>
  </div>

  <div class="composer-wrap">
    <div class="composer-inner">
      <div id="composer-error" role="alert" aria-live="assertive" hidden>
        <span class="err-icon" aria-hidden="true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z"/></svg>
        </span>
        <span id="composer-error-text"></span>
        <button class="composer-error-dismiss" type="button" aria-label="Dismiss error"
                onclick="document.getElementById('composer-error').hidden = true">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
        </button>
      </div>

      <form class="composer"
            hx-post="/chat/{{ chat_id|urlencode }}/message"
            hx-encoding="multipart/form-data"
            hx-on::after-request="if(event.detail.successful){this.text.value='';this.file.value=''}"
            hx-swap="none">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <label class="composer-attach" title="Attach a file">
          <input type="file" name="file" accept="audio/*,application/pdf,text/*,image/*" aria-label="Attach a file">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05 12.25 20.24a5 5 0 0 1-7.07-7.07l8.49-8.49a3 3 0 0 1 4.24 4.24l-8.49 8.49a1 1 0 0 1-1.41-1.41l7.78-7.78"/></svg>
        </label>
        <input type="text" name="text" placeholder="Message the agent…" autocomplete="off" autofocus aria-label="Message">
        <button class="composer-send" type="submit" aria-label="Send message">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m22 2-7 20-4-9-9-4 20-7Z"/></svg>
        </button>
      </form>

      <div class="composer-hint">
        <span>Agent has access to <strong style="color:var(--text-2);font-weight:600;">{{ chat_id }}</strong></span>
        <span><kbd>↵</kbd> to send</span>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const scroll = document.getElementById("sse-source");
      const composer = document.querySelector(".composer");
      const textInput = composer.querySelector('input[name="text"]');
      const fileInput = composer.querySelector('input[name="file"]');
      const sendBtn = composer.querySelector(".composer-send");

      // Start pinned to the latest message.
      if (scroll) scroll.scrollTop = scroll.scrollHeight;

      // Enable Send only when there's something to send.
      function syncSend() {
        const hasFile = fileInput && fileInput.files && fileInput.files.length > 0;
        sendBtn.disabled = !textInput.value.trim() && !hasFile;
      }
      textInput.addEventListener("input", syncSend);
      fileInput.addEventListener("change", syncSend);
      syncSend();

      // W-F1: a failed send keeps the typed message (clear is gated on success);
      // surface the failure so it isn't silent.
      const composerError = document.getElementById("composer-error");
      const composerErrorText = document.getElementById("composer-error-text");
      function showComposerError(message) {
        composerErrorText.textContent = message;
        composerError.hidden = false;
      }
      document.body.addEventListener("htmx:responseError", (e) => {
        const status = e.detail.xhr ? e.detail.xhr.status : 0;
        showComposerError(status === 401
          ? "Couldn't send — your session expired. Please sign in again."
          : "Couldn't send — please try again.");
      });
      document.body.addEventListener("htmx:sendError", () =>
        showComposerError("Couldn't send — network error. Please try again."));
      document.body.addEventListener("htmx:afterRequest", (e) => {
        if (e.detail.successful) { composerError.hidden = true; syncSend(); }
      });
    })();
  </script>
</div>
{% endblock %}