{% extends "layout.html" %}
{% block title %}{{ host_bot.name }} - chat{% endblock %}
{% block content %}
<div class="chat-shell" data-chat-id="{{ chat.id }}"
     hx-ext="sse"
     sse-connect="/chats/{{ chat.id }}/events">
  <header class="chat-header">
    <h1>{{ host_bot.name }}</h1>
    <div class="chat-meta muted">{{ chat.time }}</div>
    <button class="drawer-toggle" type="button"
            aria-controls="drawer-modal" aria-expanded="false"
            aria-haspopup="dialog">Drawer</button>
  </header>

  <section class="timeline" id="timeline"
           sse-swap="turn_html"
           hx-swap="beforeend">
    {% if not turns %}
    <p class="muted">No turns yet. Start typing below.</p>
    {% else %}
      {% for turn in turns %}
        <div{% if turn.event_id is not none %} id="turn-{{ turn.event_id }}"{% endif %} class="turn turn-{{ turn.role }}">
          <strong>{{ turn.speaker }}</strong>
          {{ turn.text|render_prose|safe }}
        </div>
      {% endfor %}
    {% endif %}
  </section>

  <form class="turn-input" method="post" action="/chats/{{ chat.id }}/turns">
    <textarea name="prose" rows="3" placeholder="What do you say or do?" required></textarea>
    <button type="submit">Send</button>
  </form>

</div>

<!-- Drawer modal — director's notebook overlay.
     Sits outside .chat-shell so its position:fixed backdrop covers the
     whole viewport. The panel still pulls its inner HTML from
     /chats/<id>/drawer via HTMX; trigger is a custom 'drawer-open'
     event that the open/close script dispatches each time the modal
     opens, so the content refreshes on every open. -->
<div class="drawer-modal" id="drawer-modal" hidden
     role="dialog"
     aria-modal="true"
     aria-labelledby="drawer-modal-title">
  <div class="drawer-modal-backdrop" data-drawer-close></div>
  <article class="drawer-panel">
    <header class="drawer-panel-header">
      <h2 id="drawer-modal-title">Drawer</h2>
      <button class="drawer-panel-close" type="button"
              data-drawer-close
              aria-label="Close drawer">×</button>
    </header>
    <div class="drawer-panel-body" id="drawer"
         hx-get="/chats/{{ chat.id }}/drawer"
         hx-trigger="drawer-open from:body"
         hx-swap="innerHTML">
      <p class="muted drawer-panel-loading">Loading&hellip;</p>
    </div>
  </article>
</div>

<script>
// Drawer modal — open/close, focus management, and post-swap
// tab-grouping. The server's /chats/<id>/drawer response is left
// unchanged; this script post-processes the swapped HTML to:
//   1. Pull the bot name from the legacy <header><h2> and use it as
//      the modal title.
//   2. Remove the legacy header (it has its own onclick="hidden"
//      close that targets the OLD drawer semantics — broken now).
//   3. Walk .drawer-section blocks and group them into 4 tabs by
//      their <h3> title:
//        Scene  : Scene, Activity
//        Cast   : Guest, Group, Edges
//        Story  : Events, Threads, Branches
//        Turns  : Recent turns, Significance review
//      A tab nav is rendered above the sections; clicking switches
//      which group is visible. Empty tabs (no matching sections) are
//      hidden.
(function () {
  const modal = document.getElementById('drawer-modal');
  const toggle = document.querySelector('.drawer-toggle');
  if (!modal || !toggle) return;
  const titleEl = modal.querySelector('#drawer-modal-title');
  const body = modal.querySelector('.drawer-panel-body');
  const panel = modal.querySelector('.drawer-panel');

  let lastFocus = null;

  function open() {
    if (!modal.hasAttribute('hidden')) return;
    lastFocus = document.activeElement;
    modal.removeAttribute('hidden');
    // Force reflow so the .is-open class triggers the transition.
    void modal.offsetWidth;
    modal.classList.add('is-open');
    toggle.setAttribute('aria-expanded', 'true');
    document.body.classList.add('drawer-modal-open');
    // Re-fetch drawer content via the panel's hx-trigger.
    document.body.dispatchEvent(new CustomEvent('drawer-open'));
    // Focus the close button so Escape / Enter both work
    // immediately and screen readers announce the dialog.
    requestAnimationFrame(() => {
      const closeBtn = modal.querySelector('.drawer-panel-close');
      if (closeBtn) closeBtn.focus();
    });
  }

  function close() {
    if (modal.hasAttribute('hidden')) return;
    modal.classList.remove('is-open');
    toggle.setAttribute('aria-expanded', 'false');
    document.body.classList.remove('drawer-modal-open');
    // Wait for the fade-out before fully hiding so the transition
    // can play. Match the CSS duration.
    setTimeout(() => {
      modal.setAttribute('hidden', '');
      if (lastFocus && typeof lastFocus.focus === 'function') {
        lastFocus.focus();
      }
    }, 180);
  }

  toggle.addEventListener('click', open);

  // Bind close DIRECTLY to every element flagged data-drawer-close.
  // Event delegation through .stopPropagation() previously swallowed
  // the close button's click (it sits inside .drawer-panel, which
  // stops propagation to keep backdrop clicks from leaking through
  // the panel itself). Direct binding sidesteps that and keeps the
  // panel-stops-propagation rule for everything else.
  function bindCloseTargets(root) {
    root.querySelectorAll('[data-drawer-close]').forEach((el) => {
      // Idempotent: only bind once per element.
      if (el.dataset.drawerCloseBound === '1') return;
      el.dataset.drawerCloseBound = '1';
      el.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        close();
      });
    });
  }
  bindCloseTargets(modal);
  // Clicks inside the panel that AREN'T close targets must not
  // reach the backdrop click handler. (We don't have one currently
  // — backdrop close is via data-drawer-close on the backdrop div —
  // but stopPropagation here is defensive against future handlers.)
  panel.addEventListener('click', (e) => e.stopPropagation());

  // Escape closes only when the modal is open.
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !modal.hasAttribute('hidden')) {
      e.preventDefault();
      close();
    }
  });

  // ---- Tabs: group server-rendered .drawer-section blocks ----

  const TAB_GROUPS = [
    { id: 'scene', label: 'Scene', sections: ['Scene', 'Activity'] },
    { id: 'cast',  label: 'Cast',  sections: ['Guest', 'Group', 'Edges'] },
    { id: 'story', label: 'Story', sections: ['Events', 'Threads', 'Branches'] },
    { id: 'turns', label: 'Turns', sections: ['Recent turns', 'Significance review'] },
  ];

  function tabIdForSection(h3Text) {
    const t = (h3Text || '').trim();
    for (const g of TAB_GROUPS) {
      if (g.sections.includes(t)) return g.id;
    }
    return 'scene'; // unknown sections fall into the first tab
  }

  function buildTabs() {
    // Clean up the legacy server-rendered header inside the body
    // (duplicate close + duplicate title).
    const legacyHeader = body.querySelector(':scope > .drawer-content > .drawer-header');
    if (legacyHeader) {
      // Promote the bot name to the modal title before discarding.
      const h2 = legacyHeader.querySelector('h2');
      if (h2 && h2.textContent.trim()) {
        titleEl.textContent = h2.textContent.trim();
      }
      legacyHeader.remove();
    }

    // The drawer-content wrapper holds all the sections. Group them.
    const content = body.querySelector('.drawer-content');
    if (!content) return;

    const sections = Array.from(content.querySelectorAll(':scope > .drawer-section'));
    if (sections.length === 0) return;

    // Bucket sections by tab id.
    const buckets = new Map(TAB_GROUPS.map((g) => [g.id, []]));
    for (const sec of sections) {
      const h3 = sec.querySelector(':scope > h3');
      const tabId = tabIdForSection(h3 ? h3.textContent : '');
      buckets.get(tabId).push(sec);
    }

    // Build the tab nav. Skip empty buckets so the nav reflects
    // what the chat actually has (e.g. no Guest tab when 1:1).
    const nav = document.createElement('nav');
    nav.className = 'drawer-tabs';
    nav.setAttribute('role', 'tablist');

    const panes = document.createElement('div');
    panes.className = 'drawer-tab-panes';

    let firstActive = null;
    for (const group of TAB_GROUPS) {
      const items = buckets.get(group.id);
      if (!items.length) continue;

      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'drawer-tab';
      btn.setAttribute('role', 'tab');
      btn.id = `drawer-tab-${group.id}`;
      btn.dataset.tabTarget = group.id;
      btn.textContent = group.label;
      btn.setAttribute('aria-controls', `drawer-pane-${group.id}`);
      nav.appendChild(btn);

      const pane = document.createElement('section');
      pane.className = 'drawer-tab-pane';
      pane.id = `drawer-pane-${group.id}`;
      pane.setAttribute('role', 'tabpanel');
      pane.setAttribute('aria-labelledby', `drawer-tab-${group.id}`);
      // Move the section nodes into the pane (preserves any HTMX
      // event listeners and the sections' interactive forms).
      for (const sec of items) pane.appendChild(sec);
      panes.appendChild(pane);

      if (!firstActive) firstActive = group.id;
    }

    // Replace the existing content with [nav][panes].
    content.innerHTML = '';
    content.appendChild(nav);
    content.appendChild(panes);

    // Tab click handler.
    nav.addEventListener('click', (e) => {
      const target = e.target;
      if (!(target instanceof HTMLElement)) return;
      const tabId = target.dataset.tabTarget;
      if (!tabId) return;
      activateTab(content, tabId);
    });

    if (firstActive) activateTab(content, firstActive);
  }

  function activateTab(content, tabId) {
    content.querySelectorAll('.drawer-tab').forEach((btn) => {
      const isActive = btn.dataset.tabTarget === tabId;
      btn.classList.toggle('is-active', isActive);
      btn.setAttribute('aria-selected', String(isActive));
      btn.setAttribute('tabindex', isActive ? '0' : '-1');
    });
    content.querySelectorAll('.drawer-tab-pane').forEach((pane) => {
      const isActive = pane.id === `drawer-pane-${tabId}`;
      pane.toggleAttribute('hidden', !isActive);
    });
  }

  // Run after every HTMX swap into the panel body. Covers the
  // initial open AND any subsequent server-driven re-render
  // (e.g. an in-drawer form submit that returns refreshed HTML).
  body.addEventListener('htmx:afterSwap', () => {
    buildTabs();
    bindCloseTargets(modal);
  });
})();
</script>
<script>
// Streaming UX (T34): typing indicator, Stop button, send-lock,
// disconnect banner. Listens to the existing HTMX SSE channel for
// `token` (per-chunk) and `turn_html` (final swap) events. The
// mid-stream disconnect path is server-side: ``request.is_disconnected()``
// in T19 commits truncated; this script just shows the banner when
// the SSE EventSource fires `error` after the connection drops.
(function () {
  const shell = document.querySelector('.chat-shell');
  if (!shell) return;
  const chatId = shell.dataset.chatId;
  const form = shell.querySelector('.turn-input');
  if (!form) return;
  const textarea = form.querySelector('textarea[name="prose"]');
  const sendBtn = form.querySelector('button[type="submit"]');
  const timeline = document.getElementById('timeline');

  let isStreaming = false;
  let typingEl = null;

  // Sticky-bottom autoscroll: scroll the timeline to the latest
  // message when new content arrives, but ONLY if the user is
  // already pinned to the bottom. Once they scroll up to read older
  // turns, we leave their position alone until they manually scroll
  // back down.
  //
  // ``isPinnedToBottom`` flips on every scroll event based on
  // distance-from-bottom (with a small tolerance so a few pixels of
  // overshoot from a layout shift doesn't unpin). A MutationObserver
  // catches every node added to the timeline — covers the SSE-
  // injected ``turn_html`` swap, the optimistic ``appendUserTurn``
  // render, and the streaming typing-indicator updates.
  const STICK_TOLERANCE_PX = 64;
  let isPinnedToBottom = true;

  function distanceFromBottom() {
    return timeline.scrollHeight - timeline.scrollTop - timeline.clientHeight;
  }
  function scrollToBottom() {
    timeline.scrollTop = timeline.scrollHeight;
  }
  // Initial state: stick to the bottom on page load so the latest
  // turn is visible without manual scrolling.
  requestAnimationFrame(scrollToBottom);

  timeline.addEventListener('scroll', () => {
    isPinnedToBottom = distanceFromBottom() <= STICK_TOLERANCE_PX;
  }, { passive: true });

  const timelineObserver = new MutationObserver(() => {
    if (isPinnedToBottom) scrollToBottom();
  });
  timelineObserver.observe(timeline, {
    childList: true,
    subtree: true,
    characterData: true,  // streaming token-by-token edits
  });

  function ensureTypingEl() {
    if (typingEl) return typingEl;
    typingEl = document.createElement('div');
    typingEl.className = 'turn turn-bot streaming';
    typingEl.innerHTML = '<strong>...</strong><p class="streaming-text"></p>';
    timeline.appendChild(typingEl);
    return typingEl;
  }

  function unlock() {
    isStreaming = false;
    if (sendBtn) sendBtn.disabled = false;
    if (textarea) {
      textarea.readOnly = false;
      textarea.value = '';
      textarea.focus();
    }
    const stop = shell.querySelector('.stop-streaming');
    if (stop) stop.remove();
  }

  function showBanner(msg) {
    let banner = shell.querySelector('.connection-lost');
    if (banner) return;
    banner = document.createElement('div');
    banner.className = 'connection-lost error';
    banner.textContent = msg;
    form.parentElement.insertBefore(banner, form);
  }

  // HTMX SSE extension dispatches `htmx:sseMessage` with detail.type
  // (event name) and detail.data (payload string).
  shell.addEventListener('htmx:sseMessage', (e) => {
    const evt = e.detail.type;
    const data = e.detail.data;
    if (evt === 'token' && isStreaming) {
      let parsed;
      try { parsed = JSON.parse(data); } catch (_) { return; }
      const el = ensureTypingEl();
      el.querySelector('.streaming-text').textContent += (parsed.text || '');
    } else if (evt === 'turn_html') {
      // The server already pushes the final HTML via sse-swap on the
      // timeline element; we just remove the typing placeholder and
      // unlock the input. (Don't replace innerHTML here — HTMX has
      // already done the append by the time this fires.)
      if (typingEl) {
        typingEl.remove();
        typingEl = null;
      }
      unlock();
    }
  });

  // T86: live-swap regenerated turns. The backend (chat/services/
  // regenerate.py) broadcasts a ``turn_html_replace`` SSE frame after
  // appending the new assistant_turn — JSON payload of shape
  // ``{data: <html>, turn_id: <new_id>, supersedes_id: <old_id>}``.
  // We replace the prior turn's DOM node in-place when we can locate
  // it by id, otherwise fall back to appending so a tab opened mid-
  // regenerate still shows the new turn. The renderer
  // (chat/web/render.py::render_turn_html) and the Jinja loop above
  // both stamp ``id="turn-<event_id>"`` on each turn DIV, so the
  // primary in-place swap path is the live one — the append fallback
  // only kicks in when a tab opened AFTER the regenerate started (no
  // prior turn DOM node to replace).
  shell.addEventListener('htmx:sseMessage', (e) => {
    if (e.detail.type !== 'turn_html_replace') return;
    let data;
    try { data = JSON.parse(e.detail.data); } catch (_) { return; }
    const html = (data && data.data) || '';
    const trimmed = html.trim();
    if (!trimmed) return;
    const oldNode = document.getElementById('turn-' + data.supersedes_id);
    if (oldNode) {
      const tmpl = document.createElement('template');
      tmpl.innerHTML = trimmed;
      const newNode = tmpl.content.firstChild;
      if (newNode) oldNode.replaceWith(newNode);
    } else {
      // Fallback: append if the prior turn isn't in the DOM (e.g. user
      // opened the tab AFTER the regenerate started, or the renderer
      // hasn't yet stamped per-turn ids — see comment above).
      timeline.insertAdjacentHTML('beforeend', trimmed);
    }
  });

  // SSE connection lost — show a banner and unlock so the user can
  // retry. The server commits the partial as truncated when its
  // request.is_disconnected() poll trips (T19).
  shell.addEventListener('htmx:sseError', () => {
    if (isStreaming) {
      showBanner('connection lost — partial response saved');
      unlock();
    }
  });

  // Enter-to-send (Shift+Enter for newline). Submits via the form's
  // own submit event so all the optimistic-render + fetch logic
  // below applies uniformly to keyboard and click submissions.
  if (textarea) {
    textarea.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
        e.preventDefault();
        if (typeof form.requestSubmit === 'function') {
          form.requestSubmit();
        } else {
          form.dispatchEvent(new Event('submit', { cancelable: true }));
        }
      }
    });
  }

  // Render the user's prose optimistically as a turn-you DOM node.
  // Without this the user can't see what they just sent until the page
  // reloads — the server persists ``user_turn`` events but doesn't
  // publish a turn_html for them (the SSE channel is bot-output-only).
  function appendUserTurn(prose) {
    const div = document.createElement('div');
    div.className = 'turn turn-you';
    const strong = document.createElement('strong');
    strong.textContent = 'you';
    const p = document.createElement('p');
    p.textContent = prose;
    div.appendChild(strong);
    div.appendChild(p);
    // Sending a message means the user wants to see it land — force
    // sticky-bottom even if they were scrolled up reading older
    // turns. The MutationObserver handles the actual scroll.
    isPinnedToBottom = true;
    timeline.appendChild(div);
  }

  // Intercept the form submit and POST via fetch so we can:
  //   1. Render the user's prose immediately (optimistic).
  //   2. Clear the textarea immediately.
  //   3. Keep the page state intact while the bot streams its
  //      response over SSE — vanilla form POST + 204 leaves the
  //      browser in a half-loaded state with the textarea unflushed.
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    if (isStreaming) return;
    const prose = textarea ? (textarea.value || '').trim() : '';
    if (!prose) return;

    appendUserTurn(prose);
    if (textarea) {
      textarea.value = '';
      textarea.readOnly = true;
    }
    if (sendBtn) sendBtn.disabled = true;
    isStreaming = true;

    if (!shell.querySelector('.stop-streaming')) {
      const stopBtn = document.createElement('button');
      stopBtn.type = 'button';
      stopBtn.className = 'stop-streaming btn';
      stopBtn.textContent = 'Stop';
      stopBtn.addEventListener('click', async () => {
        try {
          await fetch('/chats/' + encodeURIComponent(chatId) + '/turns/cancel', {
            method: 'POST',
          });
        } catch (_) {
          // Network error on cancel is non-fatal — server will time out
          // its own stream eventually and commit truncated.
        }
      });
      form.parentElement.insertBefore(stopBtn, form);
    }

    // Fire the actual POST. The bot's response arrives via SSE
    // (``turn_html`` event swaps into the timeline; ``unlock()`` runs
    // on receipt to clear streaming state and re-enable the form).
    try {
      const body = new URLSearchParams({ prose }).toString();
      const resp = await fetch(form.action, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body,
      });
      if (!resp.ok && resp.status !== 204) {
        showBanner('send failed (HTTP ' + resp.status + ') — try again');
        unlock();
      }
    } catch (err) {
      showBanner('send failed — check your connection');
      unlock();
    }
  });
})();
</script>
{% endblock %}