{# The KT Assistant chat: a floating button that opens a panel on every page. #}
<style>
  .kta-btn { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
             background: var(--primary); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
  .kta-btn:hover { background: var(--primary-hover); }
  .kta-btn .ic { width: 26px; height: 26px; }
  .kta-panel { position: fixed; right: 22px; bottom: 90px; z-index: 900; width: 390px; max-width: calc(100vw - 24px); height: 590px; max-height: calc(100vh - 110px);
               display: none; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
               border-radius: 14px; box-shadow: var(--pop-shadow); overflow: hidden; }
  .kta-panel.open { display: flex; }
  .kta-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--primary); color: #fff; }
  .kta-head strong { flex: 1; font-size: 1rem; }
  .kta-head small { display: block; font-weight: 400; opacity: .85; font-size: .72rem; }
  .kta-head button { background: transparent; border: 0; color: #fff; cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center; }
  .kta-head button:hover { background: rgba(255,255,255,.2); }
  .kta-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
  .kta-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
  .kta-msg.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
  .kta-msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
  .kta-msg.bot p { margin: 0 0 6px; } .kta-msg.bot p:last-child { margin-bottom: 0; }
  .kta-msg.bot ul, .kta-msg.bot ol { margin: 4px 0 6px 1.2em; padding: 0; }
  .kta-msg.bot code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .85em; }
  .kta-msg.err { align-self: flex-start; background: var(--err-bg); color: var(--err-fg); border: 1px solid var(--err-line); }
  .kta-action { align-self: flex-start; max-width: 92%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--primary); background: var(--surface); font-size: .88rem; }
  .kta-action b { display: block; margin-bottom: 4px; color: var(--heading); }
  .kta-action .row { display: flex; gap: 8px; margin-top: 8px; }
  .kta-action .done { color: var(--ok-fg); font-weight: 600; }
  .kta-typing { align-self: flex-start; color: var(--muted); font-size: .85rem; padding: 2px 6px; }
  .kta-hints { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; background: var(--bg); }
  .kta-hints button { border: 1px solid var(--line-strong); background: var(--surface); color: var(--primary-ink); border-radius: 999px; padding: 5px 11px; font-size: .78rem; cursor: pointer; }
  .kta-hints button:hover { border-color: var(--primary); }
  .kta-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--surface); }
  .kta-form textarea { flex: 1; resize: none; height: 42px; min-height: 42px; max-height: 110px; box-sizing: border-box; overflow-y: auto; padding: 9px 10px; border: 1px solid var(--input-border); border-radius: 8px;
                       background: var(--input-bg); color: var(--text); font: inherit; font-size: .9rem; }
  .kta-form button { width: 42px; height: 42px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; cursor: pointer; display: grid; place-items: center; }
  .kta-form button:disabled { opacity: .5; cursor: default; }
  .kta-note { padding: 0 14px 8px; font-size: .7rem; color: var(--muted); background: var(--surface); text-align: center; }
  @media (max-width: 520px) { .kta-panel { right: 8px; bottom: 82px; width: calc(100vw - 16px); height: calc(100vh - 100px); } .kta-btn { right: 14px; bottom: 14px; } }
</style>

<button type="button" class="kta-btn" id="ktaOpen" aria-label="Open KT Assistant" title="KT Assistant">{{ icon('message') }}</button>
<section class="kta-panel" id="ktaPanel" role="dialog" aria-label="KT Assistant" data-csrf="{{ csrf_token }}" data-editor="{{ 1 if user.role in ('admin', 'lead') else 0 }}">
  <div class="kta-head">
    <span>{{ icon('message') }}</span>
    <strong>KT Assistant<small>Ask about KT, or how to use the portal</small></strong>
    <button type="button" id="ktaClear" title="Clear the conversation" aria-label="Clear the conversation">{{ icon('reset') }}</button>
    <button type="button" id="ktaClose" title="Close" aria-label="Close">{{ icon('x') }}</button>
  </div>
  <div class="kta-log" id="ktaLog" aria-live="polite"></div>
  <div class="kta-hints" id="ktaHints"></div>
  <form class="kta-form" id="ktaForm">
    <textarea id="ktaInput" rows="1" maxlength="2000" placeholder="Ask a question..." aria-label="Your question"></textarea>
    <button type="submit" id="ktaSend" aria-label="Send">{{ icon('send') }}</button>
  </form>
  <div class="kta-note">AI-generated from portal data you can access - please double-check important details.</div>
</section>

<script>
  (function () {
    var panel = document.getElementById('ktaPanel'), log = document.getElementById('ktaLog'), input = document.getElementById('ktaInput');
    var sendBtn = document.getElementById('ktaSend'), hints = document.getElementById('ktaHints');
    var csrf = panel.dataset.csrf, editor = panel.dataset.editor === '1', KEY = 'ktAssistant';
    var state = { open: false, msgs: [] };
    try { var saved = JSON.parse(sessionStorage.getItem(KEY) || 'null'); if (saved && Array.isArray(saved.msgs)) state = saved; } catch (e) {}
    function save() { try { sessionStorage.setItem(KEY, JSON.stringify(state)); } catch (e) {} }

    function esc(s) { return s.replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; }); }
    function inline(s) { return esc(s).replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/(^|[^*\w])\*([^*\n]+)\*(?![*\w])/g, '$1<em>$2</em>').replace(/`([^`]+)`/g, '<code>$1</code>'); }
    function fmt(text) {
      var out = [], list = null, para = [];
      function flushPara() { if (para.length) { out.push('<p>' + para.join('<br>') + '</p>'); para = []; } }
      function flushList() { if (list) { out.push('</' + list + '>'); list = null; } }
      text.split('\n').forEach(function (line) {
        var b = line.match(/^\s*[-*]\s+(.*)/), n = line.match(/^\s*\d+[.)]\s+(.*)/);
        if (b || n) { flushPara(); var kind = b ? 'ul' : 'ol'; if (list !== kind) { flushList(); out.push('<' + kind + '>'); list = kind; } out.push('<li>' + inline((b || n)[1]) + '</li>'); }
        else if (!line.trim()) { flushPara(); flushList(); }
        else { flushList(); para.push(inline(line)); }
      });
      flushPara(); flushList();
      return out.join('');
    }
    function scroll() { log.scrollTop = log.scrollHeight; }
    function addUser(t) { var d = document.createElement('div'); d.className = 'kta-msg user'; d.textContent = t; log.appendChild(d); scroll(); }
    function addBot(t, err) { var d = document.createElement('div'); d.className = 'kta-msg ' + (err ? 'err' : 'bot'); d.innerHTML = fmt(t); log.appendChild(d); scroll(); return d; }
    function post(url, data) {
      var fd = new FormData(); fd.append('csrf', csrf); Object.keys(data || {}).forEach(function (k) { fd.append(k, data[k]); });
      return fetch(url, { method: 'POST', body: fd, credentials: 'same-origin' }).then(function (r) { return r.json().catch(function () { return { reply: 'Something went wrong - please refresh the page and try again.' }; }).then(function (j) { j._status = r.status; return j; }); });
    }

    function addAction(a) {
      var d = document.createElement('div'); d.className = 'kta-action';
      d.innerHTML = '<b>Please confirm</b><span></span><div class="row"><button type="button" class="btn small" data-ok>Confirm</button><button type="button" class="btn small ghost" data-no>Cancel</button></div>';
      d.querySelector('span').textContent = a.summary;
      var row = d.querySelector('.row');
      d.querySelector('[data-ok]').addEventListener('click', function () {
        row.querySelectorAll('button').forEach(function (b) { b.disabled = true; });
        post('/assistant/confirm', { token: a.token }).then(function (j) {
          row.remove();
          var res = document.createElement('div'); res.className = j.ok ? 'done' : ''; res.style.marginTop = '6px';
          res.textContent = (j.ok ? 'Done - ' : '') + j.message;
          d.appendChild(res);
          if (j.ok && j.link) { var l = document.createElement('a'); l.href = j.link; l.textContent = ' Open it'; l.style.marginLeft = '6px'; res.appendChild(l); }
          state.msgs.push({ role: 'assistant', text: (j.ok ? 'The change was confirmed and saved: ' : 'The change was not saved: ') + j.message }); save(); scroll();
        });
      });
      d.querySelector('[data-no]').addEventListener('click', function () {
        post('/assistant/cancel', { token: a.token }); row.remove();
        var res = document.createElement('div'); res.textContent = 'Cancelled.'; res.style.cssText = 'margin-top:6px;color:var(--muted)'; d.appendChild(res);
        state.msgs.push({ role: 'assistant', text: 'The person cancelled that change.' }); save();
      });
      log.appendChild(d); scroll();
    }

    function render() {
      log.innerHTML = '';
      if (!state.msgs.length) addBot('Hi! I can answer questions about the KT stored in the portal, explain how to use it' + (editor ? ', and prepare things like Reminders or Issue Concerns for you to confirm.' : '.'));
      state.msgs.forEach(function (m) { if (m.role === 'user') addUser(m.text); else addBot(m.text); });
      hints.innerHTML = '';
      if (!state.msgs.length) {
        (editor ? ['Which reminders are overdue?', 'How do I add a KT?', 'List the colleges', 'Add a reminder'] : ['Which reminders are overdue?', 'How do I find a college?', 'List the colleges']).forEach(function (h) {
          var b = document.createElement('button'); b.type = 'button'; b.textContent = h; b.addEventListener('click', function () { input.value = h; send(); }); hints.appendChild(b);
        });
      }
    }

    function send() {
      var text = input.value.trim(); if (!text || sendBtn.disabled) return;
      var history = state.msgs.slice(-12);
      input.value = ''; input.style.height = ''; hints.innerHTML = '';
      if (!state.msgs.length) log.innerHTML = '';
      state.msgs.push({ role: 'user', text: text }); save(); addUser(text);
      sendBtn.disabled = true;
      var typing = document.createElement('div'); typing.className = 'kta-typing'; typing.textContent = 'Thinking...'; log.appendChild(typing); scroll();
      post('/assistant/chat', { message: text, history: JSON.stringify(history) }).then(function (j) {
        typing.remove();
        var reply = j.reply || 'Something went wrong - please try again.';
        if (j._status >= 400) { addBot(reply, true); state.msgs.pop(); save(); }
        else { addBot(reply); state.msgs.push({ role: 'assistant', text: reply }); save(); (j.actions || []).forEach(addAction); }
      }).catch(function () { typing.remove(); addBot("I couldn't reach the server. Please try again.", true); state.msgs.pop(); save(); })
        .then(function () { sendBtn.disabled = false; input.focus(); });
    }

    function setOpen(v) { state.open = v; panel.classList.toggle('open', v); save(); if (v) { scroll(); input.focus(); } }
    document.getElementById('ktaOpen').addEventListener('click', function () { setOpen(!state.open); });
    document.getElementById('ktaClose').addEventListener('click', function () { setOpen(false); });
    document.getElementById('ktaClear').addEventListener('click', function () { state.msgs = []; save(); render(); });
    document.getElementById('ktaForm').addEventListener('submit', function (e) { e.preventDefault(); send(); });
    input.addEventListener('keydown', function (e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } });
    input.addEventListener('input', function () { input.style.height = 'auto'; input.style.height = Math.min(input.scrollHeight, 110) + 'px'; });
    render(); if (state.open) setOpen(true);
  })();
</script>