{% extends "base.html" %}
{% block body %}
<div class="app">

  <header class="app-header">
    <div class="header-left">
      <span class="brand">
        <img class="brand-logo" src="/static/logo.png" alt="Kluris"
             width="28" height="28">
        <span class="brand-name gradient-text">kluris</span>
      </span>
      <span class="brand-sep" aria-hidden="true"></span>
      <h1 class="brain-title">{{ brain_name }}</h1>
      <span class="header-kicker">CHAT</span>
    </div>
    <div class="header-right">
      <button id="past-conversations" type="button"
              class="ghost-btn">Past conversations</button>
      <button id="new-conversation" type="button"
              class="ghost-btn">New conversation</button>
    </div>
  </header>

  <div class="body">

    <aside class="panel panel-left" id="panel-left">
      <div class="panel-header">
        <h3>Files</h3>
        <button type="button" class="panel-collapse-btn" id="collapse-left"
                title="Collapse left panel"
                aria-label="Collapse left panel">&lsaquo;</button>
      </div>
      <div class="panel-body">
        <ul class="tree" id="tree-lobes">
          <li class="tree-empty">Loading…</li>
        </ul>
      </div>
      <footer class="panel-footer">
        <span class="panel-stats" id="sidebar-stats"></span>
      </footer>
    </aside>

    <main class="stage" id="stage">
      <div id="messages" class="messages">
        {% if not llm_ready %}
          <div class="chat-banner chat-banner-warning" role="status">
            <strong>LLM not configured</strong>
            <p>
              Set <code>KLURIS_API_KEY</code> (or the OAuth vars) in
              <code>.env</code> and restart the container to enable chat.
              The brain explorer in the sidebars remains fully available.
            </p>
            {% if llm_error %}
              <pre class="chat-banner-detail">{{ llm_error }}</pre>
            {% endif %}
          </div>
        {% endif %}
        {% for msg in history %}
          <article class="msg msg-{{ msg.role }}"
                   {% if msg.role == 'assistant' %}data-markdown="1"{% endif %}>
            <div class="msg-role">{{ msg.role }}</div>
            <div class="msg-body">{{ msg.content }}</div>
          </article>
        {% endfor %}
      </div>

      <form id="chat-form" class="chat-form" autocomplete="off">
        <textarea id="chat-input" rows="2" required
                  placeholder="{% if llm_ready %}Ask the brain anything…{% else %}Configure LLM first to enable chat…{% endif %}"
                  {% if not llm_ready %}disabled aria-disabled="true"{% endif %}></textarea>
        <button type="submit" class="primary-btn"
                {% if not llm_ready %}disabled aria-disabled="true"{% endif %}>Send</button>
      </form>

      <footer class="stage-footer">
        <span id="usage-totals" data-input="0" data-output="0">
          Tokens this session:
          <strong id="usage-input">0</strong> in /
          <strong id="usage-output">0</strong> out
        </span>
      </footer>
    </main>

    <aside class="panel panel-right" id="panel-right">
      <div class="panel-header">
        <h3>Find</h3>
        <button type="button" class="panel-collapse-btn" id="collapse-right"
                title="Collapse right panel"
                aria-label="Collapse right panel">&rsaquo;</button>
      </div>
      <label class="search">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
             stroke-linejoin="round">
          <circle cx="11" cy="11" r="7"/>
          <path d="M21 21l-4.3-4.3"/>
        </svg>
        <input id="search-input" type="search"
               placeholder="Search neurons, paths, tags, glossary…"
               aria-label="Search the brain" autocomplete="off">
      </label>

      <div class="panel-body">
        <div class="panel-section-header" style="padding-top:18px">
          <h3>Recently updated</h3>
        </div>
        <ul class="tree" id="tree-recent"></ul>

        <div class="panel-section-header" style="padding-top:18px">
          <h3>Results</h3>
        </div>
        <div id="result-count" class="result-count"></div>
        <div class="results" id="search-results"></div>
      </div>
    </aside>

    <div class="col-resize-handle" id="resize-left"
         role="separator" aria-orientation="vertical"
         aria-label="Resize the Files panel" title="Drag to resize"></div>

  </div>

  <button type="button" class="panel-expand-btn panel-expand-left"
          id="expand-left" title="Show left panel"
          aria-label="Show left panel" hidden>&rsaquo;</button>
  <button type="button" class="panel-expand-btn panel-expand-right"
          id="expand-right" title="Show right panel"
          aria-label="Show right panel" hidden>&lsaquo;</button>

  <div id="modal-backdrop" class="modal-backdrop" hidden></div>
  <dialog id="modal" class="modal" aria-labelledby="modal-title">
    <header class="modal-header">
      <button id="modal-back" class="ghost-btn modal-back-btn"
              type="button" aria-label="Back" hidden>&lsaquo;</button>
      <div class="modal-header-text">
        <div class="modal-eyebrow" id="modal-eyebrow"></div>
        <h2 class="modal-title" id="modal-title"></h2>
        <div class="modal-meta" id="modal-meta"></div>
      </div>
      <button id="modal-close" class="ghost-btn"
              type="button" aria-label="Close">&times;</button>
    </header>
    <div class="modal-tags" id="modal-tags"></div>
    <div class="modal-body" id="modal-body"></div>
  </dialog>

</div>

<script src="/static/sse.js"></script>
<script src="/static/brain-explorer.js"></script>
<script>
  (function () {
    const form = document.getElementById("chat-form");
    const input = document.getElementById("chat-input");
    const messages = document.getElementById("messages");
    const newBtn = document.getElementById("new-conversation");
    const usageIn = document.getElementById("usage-input");
    const usageOut = document.getElementById("usage-output");
    let totalIn = 0, totalOut = 0;

    // Render markdown if the brain-explorer module loaded; fall back
    // to escaped plaintext otherwise so we never inject raw HTML.
    function renderMd(text) {
      if (window.kluris && window.kluris.renderMarkdown) {
        return window.kluris.renderMarkdown(text);
      }
      const esc = (window.kluris && window.kluris.escapeHtml)
        ? window.kluris.escapeHtml
        : (s) => s
            .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
      return "<pre>" + esc(text) + "</pre>";
    }

    // Re-render every historical assistant body as markdown — server
    // ships raw markdown text, but Jinja escaped it into the DOM as
    // textContent; we now swap in the rendered HTML.
    document
      .querySelectorAll('article.msg[data-markdown="1"] .msg-body')
      .forEach((body) => {
        const raw = body.textContent;
        body.innerHTML = renderMd(raw);
        body.classList.add("md");
      });

    function appendMessage(role, body) {
      const div = document.createElement("article");
      div.className = "msg msg-" + role;
      div.innerHTML =
        '<div class="msg-role">' + role + "</div>" +
        '<div class="msg-body"></div>';
      div.querySelector(".msg-body").textContent = body;
      messages.appendChild(div);
      div.scrollIntoView({behavior: "smooth"});
      return div.querySelector(".msg-body");
    }

    function appendToolCard(host, name, args) {
      // Build with textContent (not innerHTML) — tool args are model-
      // supplied and could contain HTML; this keeps them inert.
      const div = document.createElement("div");
      div.className = "msg msg-tool";
      const details = document.createElement("details");
      const summary = document.createElement("summary");
      const nameEl = document.createElement("span");
      nameEl.className = "tool-name";
      nameEl.textContent = name;
      const argsEl = document.createElement("span");
      argsEl.className = "tool-args";
      argsEl.textContent = "— " + JSON.stringify(args || {});
      summary.append(nameEl, " ", argsEl);
      const result = document.createElement("div");
      result.className = "tool-result";
      details.append(summary, result);
      div.appendChild(details);
      host.appendChild(div);
      div.scrollIntoView({behavior: "smooth", block: "nearest"});
      return div;
    }

    // Auto-grow the textarea up to its CSS max-height (200px) as the
    // user types, then let it scroll internally past that.
    function autoSize() {
      input.style.height = "auto";
      input.style.height = Math.min(input.scrollHeight, 200) + "px";
    }
    input.addEventListener("input", autoSize);

    // Enter submits; Shift+Enter inserts a newline. ``isComposing``
    // guards IME composition so committing a character mid-compose
    // doesn't fire a send.
    input.addEventListener("keydown", (event) => {
      if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
        event.preventDefault();
        form.requestSubmit();
      }
    });

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const message = input.value.trim();
      if (!message) return;
      appendMessage("user", message);
      input.value = "";
      autoSize();
      // Tool cards render inside this host, which sits ABOVE the
      // assistant reply — so the tools the model called appear before
      // the answer they produced, not after it.
      const toolsHost = document.createElement("div");
      toolsHost.className = "tool-stack";
      messages.appendChild(toolsHost);
      // The assistant bubble is created lazily on the first token so an
      // empty bubble never sits above the tool cards during the tool-
      // calling phase.
      let assistantBody = null;
      // Accumulate the raw markdown stream and re-render on each
      // token. Re-rendering a few-KB string per chunk is cheap; it
      // gives the user live formatted output as the model streams.
      let assistantBuf = "";
      let lastToolCard = null;
      function paintAssistant() {
        if (!assistantBody) {
          assistantBody = appendMessage("assistant", "");
          assistantBody.classList.add("md");
        }
        assistantBody.innerHTML = renderMd(assistantBuf);
      }
      kluris.streamChat({
        url: "/chat",
        body: {message: message},
        onEvent: (frame) => {
          if (frame.type === "token") {
            assistantBuf += frame.text || "";
            paintAssistant();
          } else if (frame.type === "tool") {
            lastToolCard = appendToolCard(toolsHost, frame.name, frame.args);
          } else if (frame.type === "tool_result") {
            if (lastToolCard) {
              lastToolCard.querySelector(".tool-result").textContent =
                frame.summary;
            }
          } else if (frame.type === "usage") {
            totalIn += frame.input || 0;
            totalOut += frame.output || 0;
            usageIn.textContent = totalIn;
            usageOut.textContent = totalOut;
          } else if (frame.type === "error") {
            // Append an italicized error so it survives the markdown
            // re-render as visible inline emphasis instead of getting
            // wrapped in an unrendered code block.
            assistantBuf +=
              "\n\n*[error: " + frame.message + "]*";
            paintAssistant();
          }
        },
      });
    });

    newBtn.addEventListener("click", async () => {
      await fetch("/chat/new", {method: "POST"});
      messages.innerHTML = "";
      totalIn = 0; totalOut = 0;
      usageIn.textContent = "0"; usageOut.textContent = "0";
    });

    // Past-conversations picker — opens a read-only browser of all
    // saved sessions in the SQLite store, with .md / .json export.
    const pastBtn = document.getElementById("past-conversations");
    pastBtn.addEventListener("click", () => {
      if (window.kluris && window.kluris.openConversationsModal) {
        window.kluris.openConversationsModal();
      }
    });

    // --- Panel collapse / expand (mirrors the MRI behavior) -------
    const body = document.querySelector(".body");
    const collapseLeft = document.getElementById("collapse-left");
    const collapseRight = document.getElementById("collapse-right");
    const expandLeft = document.getElementById("expand-left");
    const expandRight = document.getElementById("expand-right");
    collapseLeft.addEventListener("click", () => {
      body.classList.add("left-collapsed");
      expandLeft.hidden = false;
    });
    expandLeft.addEventListener("click", () => {
      body.classList.remove("left-collapsed");
      expandLeft.hidden = true;
    });
    collapseRight.addEventListener("click", () => {
      body.classList.add("right-collapsed");
      expandRight.hidden = false;
    });
    expandRight.addEventListener("click", () => {
      body.classList.remove("right-collapsed");
      expandRight.hidden = true;
    });

    // --- Drag-resize the left (Files) panel ----------------------
    // Updates the --left-w grid variable on .body and remembers the
    // width in localStorage so it survives reloads.
    const resizeHandle = document.getElementById("resize-left");
    const LEFT_MIN = 180, LEFT_MAX = 520;
    try {
      const saved = parseInt(localStorage.getItem("kluris_left_w") || "", 10);
      if (saved >= LEFT_MIN && saved <= LEFT_MAX) {
        body.style.setProperty("--left-w", saved + "px");
      }
    } catch (e) { /* localStorage unavailable */ }
    if (resizeHandle) {
      resizeHandle.addEventListener("pointerdown", (event) => {
        event.preventDefault();
        try { resizeHandle.setPointerCapture(event.pointerId); } catch (e) {}
        document.body.classList.add("col-resizing");
        let width = LEFT_MIN;
        const onMove = (ev) => {
          const rect = body.getBoundingClientRect();
          width = Math.max(
            LEFT_MIN, Math.min(LEFT_MAX, Math.round(ev.clientX - rect.left)),
          );
          body.style.setProperty("--left-w", width + "px");
        };
        const onUp = () => {
          document.body.classList.remove("col-resizing");
          resizeHandle.removeEventListener("pointermove", onMove);
          resizeHandle.removeEventListener("pointerup", onUp);
          try { resizeHandle.releasePointerCapture(event.pointerId); } catch (e) {}
          try { localStorage.setItem("kluris_left_w", String(width)); } catch (e) {}
        };
        resizeHandle.addEventListener("pointermove", onMove);
        resizeHandle.addEventListener("pointerup", onUp);
      });
    }

    // Hand control of the brain tree + modal off to brain-explorer.js.
    if (window.kluris && window.kluris.bootBrainExplorer) {
      window.kluris.bootBrainExplorer();
    }
  })();
</script>
{% endblock %}