{% 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' %}bg-warning text-dark
  {% elif config.tool_confirmation == 'safe' %}bg-info text-dark
  {% else %}bg-secondary{% endif %} small" id="navConfirmBadge">
  {{ {'all':'YOLO','safe':'Safe','none':'None'}.get(config.tool_confirmation, 'None') }}
</span>
<button class="btn btn-outline-secondary btn-sm ms-1" onclick="exportChat()" title="Export chat as Markdown">
  <i class="bi bi-download"></i>
</button>
{% 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">{{ 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.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">
  <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>

<!-- 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
        </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>

{% endblock %}

{% block scripts %}
<script>
const CHAT_ID = {{ chat.id | tojson }};
let isProcessing = false;
let eventSource = null;
let pendingToolCallId = null;
let thinkingEl = null;
let confirmModal, sudoModal, renameModal;
let pendingFiles = [];

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

  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);
});

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

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

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

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) 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
      pendingFiles.push({name: f.name, data: base64});
      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 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>';
  document.getElementById('messagesArea').appendChild(thinkingEl);
  scrollToBottom();
}

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

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

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

// ── 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';
    }
  });
}

// ── 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';

  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 bg-warning text-dark small'; badge.textContent = 'YOLO'; }
          else if (tc === 'safe') { badge.className = 'badge bg-info text-dark small'; badge.textContent = 'Safe'; }
          else { badge.className = 'badge bg-secondary small'; badge.textContent = 'None'; }
        }
        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>`;
  document.getElementById('messagesArea').appendChild(el);
  scrollToBottom();
}

// ── 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';
});

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

function openSSE() {
  if (eventSource) { eventSource.close(); eventSource = null; }
  eventSource = new EventSource(`/chat/${CHAT_ID}/stream`);
  eventSource.onmessage = e => handleEvent(JSON.parse(e.data));
  eventSource.onerror = () => {
    eventSource.close(); eventSource = null;
    hideThinking();
    setProcessing(false);
  };
}

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 'tool_result':
      hideThinking();
      updateToolResult(data);
      showThinking();
      break;

    case 'final_response':
      hideThinking();
      appendAssistantMessage(data.html, data.usage);
      eventSource.close(); eventSource = null;
      setProcessing(false);
      break;

    case 'sudo_request':
      hideThinking();
      document.getElementById('sudoPasswordInput').value = '';
      sudoModal.show();
      setTimeout(() => document.getElementById('sudoPasswordInput').focus(), 300);
      break;

    case 'error':
      hideThinking();
      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>`;
  document.getElementById('messagesArea').appendChild(el);
  scrollToBottom();
}

function appendToolRequest(data) {
  const sid = safeId(data.tool_call_id);
  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>
        <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>`;
  document.getElementById('messagesArea').appendChild(el);
  scrollToBottom();
}

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 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>`;
    }
  }
  scrollToBottom();
}

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>`;
  document.getElementById('messagesArea').appendChild(el);
  scrollToBottom();
}

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>`;
  document.getElementById('messagesArea').appendChild(el);
  scrollToBottom();
}

// ── 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 ? 'bg-warning text-dark' : '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;
}

// ── 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 %}