{% extends "base.html" %}

{% block title %}{{ chat.title }} — Pengy{% endblock %}

{% block extra_style %}
{{ pygments_css | safe }}
{% endblock %}

{% block navbar_center %}
<span class="text-muted small d-none d-sm-inline" id="navModel">{{ config.model }}</span>
<span class="badge
  {% if config.tool_confirmation == 'all' %}text-bg-warning
  {% elif config.tool_confirmation == 'safe' %}text-bg-info
  {% else %}text-bg-secondary{% endif %} small" id="navConfirmBadge"
  title="Tool confirmation mode">
  {{ {'all':'YOLO','safe':'Safe','none':'Confirm All'}.get(config.tool_confirmation, 'Confirm All') }}
</span>
<span class="text-muted small d-none d-md-inline ms-2" id="navTokens"
      title="Cumulative token usage for this chat"
      {% if not chat.usage or not chat.usage.total_tokens %}hidden{% endif %}>
  {{ '{:,}'.format(chat.usage.total_tokens) if chat.usage else 0 }} tokens
</span>
<!-- Desktop: three separate action buttons -->
<div class="d-none d-md-flex align-items-center gap-1">
  <button class="btn btn-outline-secondary btn-sm" onclick="openTasks()" title="Run a saved prompt template">
    <i class="bi bi-list-task"></i>
  </button>
  <button class="btn btn-outline-secondary btn-sm" onclick="exportChat()" title="Export chat as Markdown">
    <i class="bi bi-download"></i>
  </button>
  <button class="btn btn-outline-secondary btn-sm" onclick="redactLast()"
          title="Redact last message — delete the last message from context (repeatable)">
    <i class="bi bi-eraser"></i>
  </button>
</div>
<!-- Mobile: collapse the same three actions into one dropdown so the navbar doesn't
     get crowded with icon buttons on narrow screens. -->
<div class="dropdown d-md-none">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button"
          data-bs-toggle="dropdown" aria-expanded="false" title="More actions">
    <i class="bi bi-three-dots-vertical"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item" href="#" onclick="openTasks(); return false;">
      <i class="bi bi-list-task me-2"></i>Tasks</a></li>
    <li><a class="dropdown-item" href="#" onclick="exportChat(); return false;">
      <i class="bi bi-download me-2"></i>Export</a></li>
    <li><a class="dropdown-item" href="#" onclick="redactLast(); return false;">
      <i class="bi bi-eraser me-2"></i>Redact Last</a></li>
  </ul>
</div>
{% endblock %}

{% block sidebar_chats %}
{% for c in chats %}
<a href="{{ url_for('chat_view', chat_id=c.id) }}"
   class="chat-list-item {% if c.id == chat.id %}active{% endif %}"
   data-chat-id="{{ c.id }}">
  <i class="bi bi-chat-left-text small text-muted flex-shrink-0"></i>
  <span class="chat-title">{{ c.title }}</span>
  <form action="{{ url_for('chat_delete', chat_id=c.id) }}" method="post"
        style="display:inline" onclick="event.stopPropagation()">
    <button type="submit" class="delete-btn" title="Delete chat"
            onclick="return confirm('Delete this chat?')">
      <i class="bi bi-x"></i>
    </button>
  </form>
</a>
{% endfor %}
{% endblock %}

{% block main %}
<!-- Messages area -->
<div class="messages-area" id="messagesArea">

  {% if not turns %}
  <div class="text-center text-muted py-5">
    <div style="font-size:2.5rem">🐧</div>
    <div class="mt-2">Start a conversation</div>
  </div>
  {% endif %}

  {% for turn in turns %}

  {% if turn.type == "user" %}
  <div class="msg-user">
    <div class="bubble-user">
      {% if turn.attachments %}<div class="attachment-grid">{% for attachment in turn.attachments %}{% if attachment.kind == 'image' and attachment.id.startswith('sha256:') %}<img class="attachment-thumb" src="/attachments/{{ attachment.id[7:] }}/thumbnail" alt="{{ attachment.name }}" loading="lazy">{% else %}<div class="attachment-unavailable">Attachment unavailable: {{ attachment.name }}</div>{% endif %}{% endfor %}</div>{% endif %}
      {{ turn.content }}
    </div>
  </div>

  {% elif turn.type == "assistant" %}
  <div class="msg-assistant">
    <div class="bubble-assistant">
      <div class="markdown-body">{{ turn.html | safe }}</div>
    </div>
  </div>

  {% elif turn.type == "tool_use" %}
  <div class="msg-tool">
    {% for ev in turn.events %}
    <div class="tool-card mb-1 {% if ev.declined %}declined{% elif ev.result is not none %}done{% endif %}"
         id="{{ ev.safe_id }}">
      <div class="tool-header"
           data-bs-toggle="collapse"
           data-bs-target="#body-{{ ev.safe_id }}">
        <i class="bi bi-gear-fill text-warning" style="font-size:0.8rem"></i>
        <code class="fw-semibold text-warning">{{ ev.name }}</code>
        {% if ev.summary %}<span class="tool-summary text-muted" title="{{ ev.summary }}">{{ ev.summary }}</span>{% endif %}
        {% if ev.declined %}
          <span class="badge bg-danger ms-1">declined</span>
        {% elif ev.result is not none %}
          <span class="badge bg-success ms-1">done</span>
        {% else %}
          <span class="badge bg-secondary ms-1">?</span>
        {% endif %}
        <i class="bi bi-chevron-down ms-auto" style="font-size:0.7rem"></i>
      </div>
      <div class="collapse" id="body-{{ ev.safe_id }}">
        <pre class="tool-args">{{ ev.args | tojson(indent=2) }}</pre>
        {% if ev.result is not none %}
          {% if ev.declined %}
          <div class="text-danger small mt-1 ps-1">Declined by user</div>
          {% else %}
          <pre class="tool-output">{{ ev.result[:3000] }}{{ "…" if ev.result | length > 3000 else "" }}</pre>
          {% endif %}
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>

  {% endif %}
  {% endfor %}

</div>

<!-- Input area -->
<div class="input-area">
  <button type="button" id="jumpBottomBtn" class="btn btn-secondary"
          title="Jump to latest" aria-label="Jump to latest">
    <i class="bi bi-arrow-down"></i>
  </button>
  <form id="messageForm" class="d-flex gap-2" novalidate>
    <input type="file" id="fileInput" style="display:none" multiple
           onchange="handleFiles(this.files)">
    <button type="button" id="attachBtn" class="btn btn-outline-secondary align-self-end"
            title="Attach files" onclick="document.getElementById('fileInput').click()">
      <i class="bi bi-paperclip"></i>
    </button>
    <textarea id="messageInput"
              class="form-control"
              rows="1"
              placeholder="Message… (Enter to send, Shift+Enter for newline, / for commands)"
              autocomplete="off"
              autofocus></textarea>
    <button type="submit" id="sendBtn" class="btn btn-primary align-self-end">
      <i class="bi bi-send-fill"></i>
    </button>
    <button type="button" id="stopBtn" class="btn btn-danger align-self-end d-none">
      <i class="bi bi-stop-fill"></i>
    </button>
  </form>
  <div id="filePreview" class="mt-1 d-none">
    <small class="text-muted">Attached: <span id="fileNames"></span>
      <a href="#" onclick="clearFiles()" class="text-danger ms-1">clear</a></small>
  </div>
</div>

<!-- Tool Confirmation Modal -->
<div class="modal fade" id="confirmModal" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">
          <i class="bi bi-gear-fill text-warning me-2"></i>
          Tool Request: <code id="confirmToolName"></code>
        </h6>
        <button type="button" class="btn-close" onclick="confirmTool(false)" aria-label="Decline and close"></button>
      </div>
      <div class="modal-body">
        <pre id="confirmToolArgs" class="tool-args" style="max-height:300px"></pre>
      </div>
      <div class="modal-footer">
        <button class="btn btn-sm btn-outline-danger" onclick="confirmTool(false)">
          <i class="bi bi-x-circle me-1"></i>Decline
        </button>
        <button class="btn btn-sm btn-outline-warning" onclick="confirmTool(true, true)">
          <i class="bi bi-lightning-fill me-1"></i>Yes to All This Turn
        </button>
        <button class="btn btn-sm btn-success" onclick="confirmTool(true)">
          <i class="bi bi-check-circle me-1"></i>Execute
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Ask User Question Modal -->
<div class="modal fade" id="questionModal" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">
          <i class="bi bi-question-circle text-info me-2"></i>Question
        </h6>
        <button type="button" class="btn-close" onclick="submitAnswers(false)" aria-label="Cancel and close"></button>
      </div>
      <div class="modal-body" id="questionBody"></div>
      <div class="modal-footer">
        <button class="btn btn-sm btn-outline-danger" onclick="submitAnswers(false)">
          <i class="bi bi-x-circle me-1"></i>Cancel
        </button>
        <button class="btn btn-sm btn-success" onclick="submitAnswers(true)">
          <i class="bi bi-check-circle me-1"></i>Submit Answers
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Sudo Password Modal -->
<div class="modal fade" id="sudoModal" tabindex="-1" data-bs-backdrop="static">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">
          <i class="bi bi-shield-lock text-warning me-2"></i>sudo password<span id="sudoHost"></span>
        </h6>
      </div>
      <div class="modal-body">
        <input type="password" id="sudoPasswordInput"
               class="form-control" placeholder="Enter password…">
      </div>
      <div class="modal-footer">
        <button class="btn btn-sm btn-outline-secondary" onclick="submitSudo(null)">Cancel</button>
        <button class="btn btn-sm btn-warning" onclick="submitSudo()">Submit</button>
      </div>
    </div>
  </div>
</div>

<!-- Rename Modal -->
<div class="modal fade" id="renameModal" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">Rename Chat</h6>
      </div>
      <div class="modal-body">
        <input type="text" id="renameInput" class="form-control"
               value="{{ chat.title }}" placeholder="Chat title…">
      </div>
      <div class="modal-footer">
        <button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-sm btn-primary" onclick="doRename()">Rename</button>
      </div>
    </div>
  </div>
</div>

<!-- Tasks Modal -->
<div class="modal fade" id="tasksModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">Tasks</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="tasksListView">
          <p class="text-muted small" id="tasksEmptyHint" hidden>
            No tasks saved yet — create one in the desktop app's Tasks dialog
            (they're shared across all three frontends).
          </p>
          <div id="tasksList" class="list-group"></div>
        </div>
        <div id="tasksFormView" hidden>
          <button type="button" class="btn btn-sm btn-link ps-0 mb-2" onclick="showTasksList()">&larr; Back to Tasks</button>
          <h6 id="tasksFormTitle" class="mb-3"></h6>
          <div id="tasksFormFields"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button id="tasksRunBtn" class="btn btn-sm btn-primary" onclick="runSelectedTask()" hidden>Run</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
const CHAT_ID = {{ chat.id | tojson }};
const HAS_ACTIVE_WORKER = {{ has_active_worker | tojson }};
let isProcessing = false;
let eventSource = null;
let sseCursor = sessionStorage.getItem('pengy_sse_cursor_' + CHAT_ID) || '';
let pendingToolCallId = null;
let pendingQuestionId = null;
let pendingQuestions = [];
let thinkingEl = null;
let confirmModal, questionModal, sudoModal, renameModal, tasksModal;
let tasksCache = [];
let selectedTask = null;
let pendingFiles = [];
let wakeLock = null;

document.addEventListener('DOMContentLoaded', () => {
  scrollToBottom();
  confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
  questionModal = new bootstrap.Modal(document.getElementById('questionModal'));
  sudoModal    = new bootstrap.Modal(document.getElementById('sudoModal'));
  renameModal  = new bootstrap.Modal(document.getElementById('renameModal'));
  tasksModal   = new bootstrap.Modal(document.getElementById('tasksModal'));

  document.getElementById('sudoPasswordInput').addEventListener('keydown', e => {
    if (e.key === 'Enter') submitSudo();
  });
  document.getElementById('renameInput').addEventListener('keydown', e => {
    if (e.key === 'Enter') doRename();
  });
  document.getElementById('stopBtn').addEventListener('click', stopGeneration);

  // Jump-to-latest button + keep its visibility in sync with manual scrolling
  document.getElementById('jumpBottomBtn').addEventListener('click', scrollToBottom);
  document.getElementById('messagesArea').addEventListener('scroll', updateJumpBtn,
                                                           { passive: true });

  // ── Mobile resilience: visibility & bfcache ───────────────────
  // When the page becomes visible again (user returns from another app or
  // the phone wakes up), re-acquire the wake lock and re-open SSE if the
  // connection was killed while backgrounded.
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible' && isProcessing) {
      acquireWakeLock();
      // CONNECTING is EventSource's normal automatic-reconnect state; do
      // not replace it and lose its built-in Last-Event-ID cursor.
      if (!eventSource || eventSource.readyState === EventSource.CLOSED) {
        openSSE();
      }
    }
  });

  // Handle back-forward cache restoration (some browsers freeze the page
  // instead of unloading it when navigating away).
  window.addEventListener('pageshow', (event) => {
    if (event.persisted && isProcessing) {
      acquireWakeLock();
      // CONNECTING is EventSource's normal automatic-reconnect state; do
      // not replace it and lose its built-in Last-Event-ID cursor.
      if (!eventSource || eventSource.readyState === EventSource.CLOSED) {
        openSSE();
      }
    }
  });

  // Restore any draft text that was preserved across a sync reload.
  const draft = sessionStorage.getItem('pengy_draft_' + CHAT_ID);
  if (draft) {
    document.getElementById('messageInput').value = draft;
    sessionStorage.removeItem('pengy_draft_' + CHAT_ID);
  }

  // If the page loaded with an active worker (e.g. reloaded mid-task),
  // auto-resume SSE so the user sees live updates without manual action.
  if (HAS_ACTIVE_WORKER) {
    setProcessing(true);
    showThinking();
    openSSE();
  }
});

// ── Scrolling ─────────────────────────────────────────────────
// Auto-scroll is "sticky": we only follow new content if the user was already
// parked at the bottom. Otherwise they've scrolled up to read something and
// yanking them back down mid-read is infuriating — instead we surface the
// jump-to-latest button. Mirrors the desktop ChatView behaviour.

const NEAR_BOTTOM_PX = 60;

function isNearBottom() {
  const area = document.getElementById('messagesArea');
  return area.scrollHeight - area.scrollTop - area.clientHeight <= NEAR_BOTTOM_PX;
}

function updateJumpBtn() {
  const btn = document.getElementById('jumpBottomBtn');
  if (btn) btn.classList.toggle('show', !isNearBottom());
}

function scrollToBottom() {
  const area = document.getElementById('messagesArea');
  area.scrollTop = area.scrollHeight;
  updateJumpBtn();
}

// Append and follow only if the user was pinned to the bottom *before* the
// append — checking afterwards is useless, since the new content has already
// pushed scrollHeight past them.
function appendToArea(el) {
  const pinned = isNearBottom();
  document.getElementById('messagesArea').appendChild(el);
  if (pinned) scrollToBottom(); else updateJumpBtn();
}

function escHtml(text) {
  const d = document.createElement('div');
  d.textContent = text;
  return d.innerHTML;
}

// escHtml is safe for element content but leaves quotes intact, which would
// let model-supplied text break out of an attribute. Use this inside "…".
function escAttr(text) {
  return escHtml(text).replace(/"/g, '&quot;');
}

function safeId(toolCallId) {
  return 'tc_' + toolCallId.replace(/[^a-zA-Z0-9]/g, '');
}

const SUMMARY_SECRET_KEYS = new Set(['password', 'passwd', 'api_key', 'apikey',
  'token', 'access_token', 'refresh_token', 'authorization', 'secret', 'private_key']);

function toolSummary(name, args) {
  if (!args || typeof args !== 'object' || Array.isArray(args)) return '';
  const val = key => SUMMARY_SECRET_KEYS.has(key.toLowerCase()) ? '[redacted]' :
    (typeof args[key] === 'string' ? args[key].replace(/\n/g, ' ').trim() :
     args[key] == null ? '' : String(args[key]));
  let summary = '';
  if (['read_file', 'write_file', 'replace_in_file', 'directory_tree'].includes(name)) summary = val('path');
  else if (name === 'read_multiple_files') summary = Array.isArray(args.paths) ? `${args.paths.length} files` : '';
  else if (name === 'web_search') summary = val('query');
  else if (name === 'fetch_url') summary = val('url');
  else if (name === 'download_file') summary = val('filename') || val('url');
  else if (name === 'run_bash') summary = (val('host') ? `${val('host')}: ` : '') + val('command');
  else if (name === 'run_python') summary = val('code');
  else if (['search_content', 'glob'].includes(name)) summary = val('pattern') + (val('path') ? ` in ${val('path')}` : '');
  else if (name === 'apply_changes') summary = Array.isArray(args.changes) ? `${args.changes.length} files` : '';
  else if (name === 'ask_user_question') summary = Array.isArray(args.questions) ? `${args.questions.length} questions` : '';
  return summary.length <= 100 ? summary : summary.slice(0, 97).trimEnd() + '…';
}

// ── Wake Lock (prevents screen sleep during tasks) ───────────

async function acquireWakeLock() {
  if (!('wakeLock' in navigator)) return;
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => { wakeLock = null; });
  } catch (err) {
    // Silently ignore — wake lock is best-effort, not critical
  }
}

function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release();
    wakeLock = null;
  }
}

// ── Sync reload (preserves typed input across page reload) ───

function reloadToSync() {
  const input = document.getElementById('messageInput');
  if (input && input.value.trim()) {
    sessionStorage.setItem('pengy_draft_' + CHAT_ID, input.value);
  }
  window.location.reload();
}

function setProcessing(val) {
  isProcessing = val;
  document.getElementById('messageInput').disabled = val;
  document.getElementById('sendBtn').disabled = val;
  document.getElementById('stopBtn').classList.toggle('d-none', !val);
  if (val) {
    acquireWakeLock();
  } else {
    releaseWakeLock();
  }
  if (!val) document.getElementById('messageInput').focus();
}

// ── File Attachments ──────────────────────────────────────────

function handleFiles(files) {
  for (const f of files) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const base64 = e.target.result.split(',')[1];  // strip data:...;base64, prefix
      // Extract MIME type from the data URL prefix: "data:image/png;base64,..."
      const mimeMatch = e.target.result.match(/^data:([^;]+);/);
      const mime = mimeMatch ? mimeMatch[1] : f.type || '';
      pendingFiles.push({name: f.name, data: base64, mime: mime});
      showFilePreview();
    };
    reader.readAsDataURL(f);
  }
  document.getElementById('fileInput').value = '';
}

function showFilePreview() {
  const names = pendingFiles.map(f => f.name).join(', ');
  document.getElementById('fileNames').textContent = names;
  document.getElementById('filePreview').classList.remove('d-none');
  document.getElementById('attachBtn').classList.add('active');
}

function clearFiles() {
  pendingFiles = [];
  document.getElementById('filePreview').classList.add('d-none');
  document.getElementById('attachBtn').classList.remove('active');
}

// ── Stop (works during confirm modal too) ────────────────────

function stopGeneration() {
  // Close confirm modal if open
  if (confirmModal._isShown) {
    confirmModal.hide();
    // Send decline for pending tool
    if (pendingToolCallId) {
      fetch(`/chat/${CHAT_ID}/confirm`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({confirmed: false, tool_call_id: pendingToolCallId, yolo_turn: false}),
      });
      pendingToolCallId = null;
    }
  }
  // Close question modal if open — the worker is blocked waiting on it
  if (questionModal._isShown) {
    submitAnswers(false);
  }
  // Close sudo modal if open
  if (sudoModal._isShown) {
    sudoModal.hide();
    fetch(`/chat/${CHAT_ID}/sudo`, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({password: null}),
    });
  }
  fetch(`/chat/${CHAT_ID}/stop`, { method: 'POST' })
    .catch(err => console.error('Stop error:', err));
  if (eventSource) { eventSource.close(); eventSource = null; }
  hideThinking();
  setProcessing(false);
}

// ── Thinking indicator ────────────────────────────────────────

function showThinking() {
  hideThinking();
  thinkingEl = document.createElement('div');
  thinkingEl.className = 'msg-thinking';
  thinkingEl.innerHTML =
    '<div class="spinner-border spinner-border-sm" role="status"></div>' +
    '<span>Thinking…</span>';
  appendToArea(thinkingEl);
}

function hideThinking() {
  if (thinkingEl) { thinkingEl.remove(); thinkingEl = null; }
}

function showRetrying(data) {
  hideThinking();
  thinkingEl = document.createElement('div');
  thinkingEl.className = 'msg-thinking';
  const delay = (data.delay_secs != null ? data.delay_secs : 0);
  thinkingEl.innerHTML =
    '<div class="spinner-border spinner-border-sm" role="status"></div>' +
    `<span>Overloaded — retrying in ${delay.toFixed(1)}s (${data.attempt}/${data.max_attempts})</span>`;
  appendToArea(thinkingEl);
}

// ── Export ────────────────────────────────────────────────────

function exportChat() {
  window.open(`/chat/${CHAT_ID}/export`, '_blank');
}

// ── Redact last ──────────────────────────────────────────────
// Context-pruning "undo": deletes the last raw message from the chat.
// Repeatable straight up to an empty chat — each click just reloads the
// page against the freshly-trimmed history, same as a normal chat load.

function redactLast() {
  if (isProcessing) {
    alert('Cannot redact while a response is in progress.');
    return;
  }
  fetch(`/chat/${CHAT_ID}/redact`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({count: 1}),
  })
  .then(r => r.json().then(data => ({ok: r.ok, data})))
  .then(({ok, data}) => {
    if (!ok) {
      alert(data.error || 'Redact failed.');
      return;
    }
    location.reload();
  })
  .catch(err => console.error('Redact error:', err));
}

// ── Rename ────────────────────────────────────────────────────

function showRename() {
  document.getElementById('renameInput').value = document.title.replace(' — Pengy', '');
  renameModal.show();
  setTimeout(() => document.getElementById('renameInput').focus(), 300);
}

function doRename() {
  const newTitle = document.getElementById('renameInput').value.trim();
  if (!newTitle) return;
  renameModal.hide();
  fetch(`/chat/${CHAT_ID}/rename`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({title: newTitle}),
  })
  .then(r => r.json())
  .then(data => {
    if (data.title) {
      const el = document.querySelector(`[data-chat-id="${CHAT_ID}"] .chat-title`);
      if (el) el.textContent = data.title;
      document.title = data.title + ' — Pengy';
    }
  });
}

// ── Tasks ─────────────────────────────────────────────────────
// Prompt templates shared with the GUI's Tasks dialog (tasks.json). Selecting
// one fills in its %placeholders%, renders it server-side, then routes the
// result through the normal send path — same shape as messageInput -> doSend().

function openTasks() {
  fetch('/tasks')
    .then(r => r.json())
    .then(data => {
      tasksCache = data.tasks || [];
      renderTasksList();
      showTasksList();
      tasksModal.show();
    })
    .catch(err => console.error('Failed to load tasks:', err));
}

function renderTasksList() {
  const list = document.getElementById('tasksList');
  const empty = document.getElementById('tasksEmptyHint');
  list.innerHTML = '';
  empty.hidden = tasksCache.length > 0;

  for (const task of tasksCache) {
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'list-group-item list-group-item-action';
    const title = document.createElement('div');
    title.className = 'fw-semibold';
    title.textContent = task.title;
    const preview = document.createElement('div');
    preview.className = 'text-muted small text-truncate';
    preview.textContent = task.template;
    btn.appendChild(title);
    btn.appendChild(preview);
    btn.addEventListener('click', () => selectTask(task.id));
    list.appendChild(btn);
  }
}

function showTasksList() {
  document.getElementById('tasksListView').hidden = false;
  document.getElementById('tasksFormView').hidden = true;
  document.getElementById('tasksRunBtn').hidden = true;
  selectedTask = null;
}

function selectTask(id) {
  selectedTask = tasksCache.find(t => t.id === id);
  if (!selectedTask) return;

  document.getElementById('tasksFormTitle').textContent = selectedTask.title;
  const fields = document.getElementById('tasksFormFields');
  fields.innerHTML = '';
  for (const name of selectedTask.placeholders) {
    const wrap = document.createElement('div');
    wrap.className = 'mb-2';
    const label = document.createElement('label');
    label.className = 'form-label small mb-1';
    label.textContent = name;
    const input = document.createElement('input');
    input.type = 'text';
    input.className = 'form-control form-control-sm task-field-input';
    input.dataset.name = name;
    wrap.appendChild(label);
    wrap.appendChild(input);
    fields.appendChild(wrap);
  }

  document.getElementById('tasksListView').hidden = true;
  document.getElementById('tasksFormView').hidden = false;
  document.getElementById('tasksRunBtn').hidden = false;
  if (selectedTask.placeholders.length > 0) {
    fields.querySelector('.task-field-input').focus();
  }
}

function runSelectedTask() {
  if (!selectedTask) return;
  const values = {};
  document.querySelectorAll('#tasksFormFields .task-field-input').forEach(input => {
    values[input.dataset.name] = input.value;
  });

  fetch('/tasks/render', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({id: selectedTask.id, values}),
  })
  .then(r => r.json().then(data => ({ok: r.ok, data})))
  .then(({ok, data}) => {
    if (!ok) {
      alert(data.error || 'Failed to run task.');
      return;
    }
    if (!data.prompt) {
      alert('This task produced an empty prompt.');
      return;
    }
    tasksModal.hide();
    document.getElementById('messageInput').value = data.prompt;
    doSend();
  })
  .catch(err => console.error('Task render error:', err));
}

// ── Send ──────────────────────────────────────────────────────

function doSend() {
  if (isProcessing) return;
  const input = document.getElementById('messageInput');
  const content = input.value.trim();
  if (!content && pendingFiles.length === 0) return;

  // Check for slash commands
  if (content.startsWith('/') && pendingFiles.length === 0) {
    handleSlashCommand(content);
    input.value = '';
    input.style.height = 'auto';
    return;
  }

  input.value = '';
  input.style.height = 'auto';
  // A new task has a new server-side event log and ID sequence.
  sseCursor = '';
  sessionStorage.removeItem('pengy_sse_cursor_' + CHAT_ID);

  const placeholder = document.querySelector('#messagesArea .text-center.text-muted');
  if (placeholder) placeholder.remove();

  const displayContent = content + (pendingFiles.length > 0 ? ' [attached: ' + pendingFiles.map(f => f.name).join(', ') + ']' : '');
  appendUserMessage(displayContent);
  setProcessing(true);
  showThinking();

  const body = {content};
  if (pendingFiles.length > 0) {
    body.files = pendingFiles;
    pendingFiles = [];
    clearFiles();
  }

  fetch(`/chat/${CHAT_ID}/send`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(body),
  })
  .then(r => r.json())
  .then(data => {
    if (data.title) {
      const el = document.querySelector(`[data-chat-id="${CHAT_ID}"] .chat-title`);
      if (el) el.textContent = data.title;
      document.title = data.title + ' — Pengy';
    }
    openSSE();
  })
  .catch(err => {
    console.error('Send error:', err);
    hideThinking();
    appendError('Failed to send: ' + err);
    setProcessing(false);
  });
}

// ── Slash Commands ────────────────────────────────────────────

function handleSlashCommand(text) {
  fetch(`/chat/${CHAT_ID}/command`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({command: text}),
  })
  .then(r => r.json())
  .then(data => {
    switch (data.type) {
      case 'config':
        appendSystemMessage(data.message);
        // Update navbar badges
        if (data.config) {
          if (data.config.model) {
            document.getElementById('navModel').textContent = data.config.model;
          }
          const badge = document.getElementById('navConfirmBadge');
          const tc = data.config.tool_confirmation;
          if (tc === 'all') { badge.className = 'badge text-bg-warning small'; badge.textContent = 'YOLO'; }
          else if (tc === 'safe') { badge.className = 'badge text-bg-info small'; badge.textContent = 'Safe'; }
          else { badge.className = 'badge text-bg-secondary small'; badge.textContent = 'Confirm All'; }
        }
        break;
      case 'redirect':
        window.location.href = data.url;
        break;
      case 'rename':
        if (data.title) {
          const el = document.querySelector(`[data-chat-id="${CHAT_ID}"] .chat-title`);
          if (el) el.textContent = data.title;
          document.title = data.title + ' — Pengy';
        }
        appendSystemMessage('Chat renamed to: ' + data.title);
        break;
      case 'message':
        appendSystemMessage(data.message);
        break;
    }
  });
}

function appendSystemMessage(msg) {
  const el = document.createElement('div');
  el.className = 'mb-2';
  el.innerHTML = `<div class="alert alert-info py-1 px-2 mb-0 small"><i class="bi bi-info-circle me-1"></i>${escHtml(msg)}</div>`;
  appendToArea(el);
}

// ── Form handling ─────────────────────────────────────────────

document.getElementById('messageForm').addEventListener('submit', e => {
  e.preventDefault();
  doSend();
});

document.getElementById('messageInput').addEventListener('keydown', e => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    doSend();
  }
});

document.getElementById('messageInput').addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = Math.min(this.scrollHeight, 180) + 'px';
});

// Mobile Firefox (and some other browsers) can leave the input hidden behind
// the on-screen keyboard when it first gains focus. Force it into view.
document.getElementById('messageInput').addEventListener('focus', () => {
  setTimeout(() => {
    const input = document.getElementById('messageInput');
    if (window.visualViewport) {
      const bottom = input.getBoundingClientRect().bottom;
      const viewportBottom = window.visualViewport.height + window.visualViewport.offsetTop;
      if (bottom > viewportBottom) {
        window.scrollBy({ top: bottom - viewportBottom + 16, behavior: 'auto' });
      }
    } else {
      input.scrollIntoView({ block: 'nearest', behavior: 'auto' });
    }
  }, 50);
});

// ── SSE ───────────────────────────────────────────────────────

function openSSE() {
  // Preserve a CONNECTING instance so its native Last-Event-ID reconnect
  // continues uninterrupted. A replacement instance explicitly supplies our
  // session cursor because EventSource cannot set custom request headers.
  if (eventSource && eventSource.readyState !== EventSource.CLOSED) return;
  if (eventSource) { eventSource.close(); eventSource = null; }
  const url = `/chat/${CHAT_ID}/stream` + (sseCursor ? `?after=${encodeURIComponent(sseCursor)}` : '');
  eventSource = new EventSource(url);
  eventSource.onmessage = e => {
    if (e.lastEventId) {
      sseCursor = e.lastEventId;
      sessionStorage.setItem('pengy_sse_cursor_' + CHAT_ID, sseCursor);
    }
    handleEvent(JSON.parse(e.data));
  };
  eventSource.onerror = () => {
    // Don't close immediately — EventSource auto-reconnects when the
    // connection drops (e.g. phone slept, user switched apps). When the
    // phone wakes up, the connection is re-established automatically and
    // the browser fires onopen + onmessage for any queued events.
    //
    // Only act if the EventSource has given up entirely (CLOSED), which
    // happens when the server returns a non-retryable HTTP status. In that
    // case the task may have completed while we were disconnected — reload
    // the page to sync state from the server.
    if (eventSource && eventSource.readyState === EventSource.CLOSED) {
      eventSource.close();
      eventSource = null;
      if (isProcessing) {
        reloadToSync();
      } else {
        hideThinking();
        setProcessing(false);
      }
    }
    // If readyState is CONNECTING, let the browser auto-reconnect.
  };
}

function handleEvent(data) {
  switch (data.type) {

    case 'tool_request':
      hideThinking();
      appendToolRequest(data);
      if (!data.auto_approved) {
        pendingToolCallId = data.tool_call_id;
        document.getElementById('confirmToolName').textContent = data.name;
        document.getElementById('confirmToolArgs').textContent =
          JSON.stringify(data.args, null, 2);
        confirmModal.show();
      } else {
        showThinking();
      }
      break;

    case 'question_request':
      hideThinking();
      appendToolRequest({...data, auto_approved: false});
      showQuestionModal(data);
      break;

    case 'assistant_message':
      // Mid-turn narration that arrives before the tool calls it precedes.
      hideThinking();
      appendAssistantMessage(data.html, null);
      showThinking();
      break;

    case 'tool_result':
      hideThinking();
      updateToolResult(data);
      showThinking();
      break;

    case 'retrying':
      showRetrying(data);
      break;

    case 'final_response':
      hideThinking();
      appendAssistantMessage(data.html, data.usage);
      updateCumulativeTokens(data.cumulative_usage);
      eventSource.close(); eventSource = null;
      sessionStorage.removeItem('pengy_sse_cursor_' + CHAT_ID);
      setProcessing(false);
      break;

    case 'sudo_request':
      hideThinking();
      document.getElementById('sudoPasswordInput').value = '';
      // textContent, never innerHTML: the host string comes from the model.
      document.getElementById('sudoHost').textContent = data.host ? ` for ${data.host}` : '';
      sudoModal.show();
      setTimeout(() => document.getElementById('sudoPasswordInput').focus(), 300);
      break;

    case 'error':
      hideThinking();
      if (data.message === 'No active task') {
        // The task is no longer running on the server — either it completed
        // while we were disconnected (phone slept), or it was stopped /
        // cancelled.  If we still think a task is running, reload to sync
        // the final state from the server.  Otherwise just clean up silently.
        if (eventSource) { eventSource.close(); eventSource = null; }
        if (isProcessing) {
          reloadToSync();
        } else {
          setProcessing(false);
        }
        return;
      }
      appendError(data.message || 'Unknown error');
      if (eventSource) { eventSource.close(); eventSource = null; }
      setProcessing(false);
      break;
  }
}

// ── DOM builders ─────────────────────────────────────────────

function appendUserMessage(content) {
  const el = document.createElement('div');
  el.className = 'msg-user';
  el.innerHTML = `<div class="bubble-user">${escHtml(content)}</div>`;
  // The user just hit send — always take them to their own message.
  document.getElementById('messagesArea').appendChild(el);
  scrollToBottom();
}

function appendToolRequest(data) {
  const sid = safeId(data.tool_call_id);
  // A replayed event (reconnect) must not duplicate a card already on screen.
  if (document.getElementById(sid)) return;
  data.summary = data.summary || toolSummary(data.name, data.args);
  const el = document.createElement('div');
  el.className = 'msg-tool';
  el.innerHTML = `
    <div class="tool-card mb-1" id="${sid}">
      <div class="tool-header"
           data-bs-toggle="collapse" data-bs-target="#body-${sid}">
        <i class="bi bi-gear-fill text-warning" style="font-size:.8rem"></i>
        <code class="fw-semibold text-warning">${escHtml(data.name)}</code>
        ${data.summary ? `<span class="tool-summary text-muted" title="${escAttr(data.summary)}">${escHtml(data.summary)}</span>` : ''}
        <span class="badge bg-secondary ms-1" id="badge-${sid}">
          ${data.auto_approved ? 'running…' : 'pending'}
        </span>
        <i class="bi bi-chevron-down ms-auto" style="font-size:.7rem"></i>
      </div>
      <div class="collapse" id="body-${sid}">
        <pre class="tool-args">${escHtml(JSON.stringify(data.args, null, 2))}</pre>
        <div id="result-${sid}">
          <span class="text-muted small">${data.auto_approved ? 'Running…' : 'Awaiting confirmation…'}</span>
        </div>
      </div>
    </div>`;
  appendToArea(el);
}

function updateToolResult(data) {
  const sid = safeId(data.tool_call_id);

  const card = document.getElementById(sid);
  if (card) {
    card.classList.remove('declined', 'done');
    card.classList.add(data.declined ? 'declined' : 'done');
    const badge = document.getElementById(`badge-${sid}`);
    if (badge) {
      badge.className = `badge ms-1 ${data.declined ? 'bg-danger' : 'bg-success'}`;
      badge.textContent = data.declined ? 'declined' : 'done';
    }
  }

  const pinned = isNearBottom();
  const resultArea = document.getElementById(`result-${sid}`);
  if (resultArea) {
    if (data.declined) {
      resultArea.innerHTML = '<div class="text-danger small mt-1 ps-1">Declined by user</div>';
    } else {
      resultArea.innerHTML = `<pre class="tool-output">${escHtml(data.content)}</pre>`;
    }
  }
  if (pinned) scrollToBottom(); else updateJumpBtn();
}

function appendAssistantMessage(html, usage) {
  const el = document.createElement('div');
  el.className = 'msg-assistant';
  let usageHtml = '';
  if (usage && (usage.prompt_tokens || usage.completion_tokens)) {
    const tot = (usage.prompt_tokens || 0) + (usage.completion_tokens || 0);
    usageHtml = `<div class="usage-line">
      ${(usage.prompt_tokens||0).toLocaleString()} in /
      ${(usage.completion_tokens||0).toLocaleString()} out
      (${tot.toLocaleString()} total)
    </div>`;
  }
  el.innerHTML = `
    <div class="bubble-assistant">
      <div class="markdown-body">${html || '<em class="text-muted">(empty response)</em>'}</div>
      ${usageHtml}
    </div>`;
  appendToArea(el);
}

function updateCumulativeTokens(cumulativeUsage) {
  const el = document.getElementById('navTokens');
  const total = cumulativeUsage && cumulativeUsage.total_tokens;
  if (!total) return;
  el.textContent = `${total.toLocaleString()} tokens`;
  el.hidden = false;
}

function appendError(message) {
  const el = document.createElement('div');
  el.className = 'mb-3';
  el.innerHTML = `<div class="alert alert-danger py-2 mb-0"><i class="bi bi-exclamation-triangle me-2"></i>${escHtml(message)}</div>`;
  appendToArea(el);
}

// ── Tool confirmation ────────────────────────────────────────

function confirmTool(confirmed, yoloTurn = false) {
  confirmModal.hide();
  if (!pendingToolCallId) return;

  const sid = safeId(pendingToolCallId);
  const badge = document.getElementById(`badge-${sid}`);
  if (badge) {
    if (confirmed) {
      badge.className = 'badge ms-1 ' + (yoloTurn ? 'text-bg-warning' : 'text-bg-secondary');
      badge.textContent = yoloTurn ? 'yolo' : 'running…';
    } else {
      badge.className = 'badge ms-1 bg-danger';
      badge.textContent = 'declined';
    }
  }

  fetch(`/chat/${CHAT_ID}/confirm`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({confirmed, tool_call_id: pendingToolCallId, yolo_turn: yoloTurn}),
  });

  if (confirmed) showThinking();

  pendingToolCallId = null;
}

// ── Ask user question ────────────────────────────────────────

function showQuestionModal(data) {
  pendingQuestionId = data.tool_call_id;
  pendingQuestions = Array.isArray(data.questions) ? data.questions : [];

  const body = document.getElementById('questionBody');
  body.innerHTML = pendingQuestions.map((q, qi) => {
    const options = Array.isArray(q.options) ? q.options : [];
    // Radio values are option indices — labels stay out of attributes and are
    // looked up from pendingQuestions on submit.
    const opts = options.map((opt, oi) => `
      <div class="form-check mb-2">
        <input class="form-check-input" type="radio" name="q${qi}" id="q${qi}o${oi}"
               value="${oi}" ${oi === 0 ? 'checked' : ''}>
        <label class="form-check-label" for="q${qi}o${oi}">
          <span class="fw-semibold">${escHtml(opt.label || '')}</span>
          ${opt.description ? `<div class="text-muted small">${escHtml(opt.description)}</div>` : ''}
        </label>
      </div>`).join('');
    return `
      <div class="mb-4" data-question-index="${qi}">
        <div class="fw-semibold text-info small text-uppercase mb-1">${escHtml(q.header || ('Question ' + (qi + 1)))}</div>
        <div class="mb-2">${escHtml(q.question || '')}</div>
        ${opts}
        <div class="form-check">
          <input class="form-check-input" type="radio" name="q${qi}" id="q${qi}other" value="__other__"
                 ${options.length ? '' : 'checked'}>
          <label class="form-check-label" for="q${qi}other">Other</label>
          <input type="text" class="form-control form-control-sm mt-1" id="q${qi}otherText"
                 placeholder="Your own answer…"
                 oninput="document.getElementById('q${qi}other').checked = true">
        </div>
      </div>`;
  }).join('');

  questionModal.show();
}

function submitAnswers(answered) {
  questionModal.hide();
  if (!pendingQuestionId) return;

  const tool_call_id = pendingQuestionId;
  const sid = safeId(tool_call_id);
  let answers = [];

  if (answered) {
    answers = pendingQuestions.map((q, qi) => {
      const picked = document.querySelector(`input[name="q${qi}"]:checked`);
      if (!picked) return '';
      if (picked.value === '__other__') {
        return (document.getElementById(`q${qi}otherText`).value || '').trim();
      }
      const opt = (q.options || [])[Number(picked.value)];
      return opt ? (opt.label || '') : '';
    });
    // An empty "Other" with nothing typed is not an answer.
    if (answers.every(a => !a)) answered = false;
  }

  const badge = document.getElementById(`badge-${sid}`);
  if (badge) {
    badge.className = 'badge ms-1 ' + (answered ? 'text-bg-secondary' : 'bg-danger');
    badge.textContent = answered ? 'answering…' : 'cancelled';
  }

  fetch(`/chat/${CHAT_ID}/answer`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({answered, tool_call_id, answers}),
  });

  pendingQuestionId = null;
  pendingQuestions = [];
  showThinking();
}

// ── Sudo ─────────────────────────────────────────────────────

function submitSudo(override) {
  sudoModal.hide();
  const password = override !== undefined ? override
    : document.getElementById('sudoPasswordInput').value || null;
  document.getElementById('sudoPasswordInput').value = '';

  fetch(`/chat/${CHAT_ID}/sudo`, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({password}),
  });

  showThinking();
}

// Make the chat title in navbar clickable to rename
document.addEventListener('DOMContentLoaded', () => {
  document.title = {{ chat.title | tojson }} + ' — Pengy';
  // Double-click on page title to rename
  document.querySelector('.navbar .fw-bold').style.cursor = 'pointer';
  document.querySelector('.navbar .fw-bold').title = 'Double-click to rename';
  document.querySelector('.navbar .fw-bold').addEventListener('dblclick', showRename);
});
</script>
{% endblock %}