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

  <aside class="sidebar" id="sidebar">
    <header class="sidebar-header">
      <h1 class="sidebar-title">{{ brain_name }}</h1>
      <button class="sidebar-collapse" id="sidebar-collapse"
              type="button" aria-label="Collapse sidebar">&lsaquo;</button>
    </header>

    <div class="sidebar-search">
      <input id="tree-filter" type="search"
             placeholder="Filter lobes & neurons…"
             aria-label="Filter the brain tree">
    </div>

    <nav class="sidebar-nav" id="sidebar-nav">
      <section class="tree-section" data-section="lobes">
        <h2 class="tree-section-title">Lobes</h2>
        <ul class="tree" id="tree-lobes">
          <li class="tree-empty">Loading…</li>
        </ul>
      </section>

      <section class="tree-section" data-section="recent">
        <h2 class="tree-section-title">Recently updated</h2>
        <ul class="tree" id="tree-recent"></ul>
      </section>

      <section class="tree-section" data-section="glossary">
        <h2 class="tree-section-title">
          Glossary <span class="tree-count" id="glossary-count"></span>
        </h2>
        <ul class="tree" id="tree-glossary"></ul>
      </section>
    </nav>

    <footer class="sidebar-footer">
      <span class="sidebar-stats" id="sidebar-stats"></span>
    </footer>
  </aside>

  <button class="sidebar-expand" id="sidebar-expand" type="button"
          aria-label="Show sidebar" hidden>&rsaquo;</button>

  <main class="main">
    <header class="main-header">
      <span class="main-title">Chat</span>
      <button id="new-conversation" type="button"
              class="ghost-btn">New conversation</button>
    </header>

    <div id="messages" class="messages">
      {% for msg in history %}
        <article class="msg msg-{{ msg.role }}">
          <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="Ask the brain anything…"></textarea>
      <button type="submit" class="primary-btn">Send</button>
    </form>

    <footer class="main-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>

  <div id="modal-backdrop" class="modal-backdrop" hidden></div>
  <dialog id="modal" class="modal" aria-labelledby="modal-title">
    <header class="modal-header">
      <div>
        <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;

    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(name, args) {
      const div = document.createElement("div");
      div.className = "msg msg-tool";
      const summary = JSON.stringify(args || {});
      div.innerHTML =
        '<details><summary><span class="tool-name">' + name +
        '</span> <span class="tool-args">— ' + summary +
        '</span></summary>' +
        '<div class="tool-result"></div></details>';
      messages.appendChild(div);
      return div;
    }

    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const message = input.value.trim();
      if (!message) return;
      appendMessage("user", message);
      input.value = "";
      const assistantBody = appendMessage("assistant", "");
      let lastToolCard = null;
      kluris.streamChat({
        url: "/chat",
        body: {message: message},
        onEvent: (frame) => {
          if (frame.type === "token") {
            assistantBody.textContent += frame.text;
          } else if (frame.type === "tool") {
            lastToolCard = appendToolCard(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") {
            assistantBody.textContent +=
              "\n\n[error: " + frame.message + "]";
          }
        },
      });
    });

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

    // --- Sidebar collapse / expand --------------------------------
    const shell = document.querySelector(".app-shell");
    const collapseBtn = document.getElementById("sidebar-collapse");
    const expandBtn = document.getElementById("sidebar-expand");
    collapseBtn.addEventListener("click", () => {
      shell.classList.add("sidebar-collapsed");
      expandBtn.hidden = false;
    });
    expandBtn.addEventListener("click", () => {
      shell.classList.remove("sidebar-collapsed");
      expandBtn.hidden = true;
    });

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