/** Chat area DOM helpers. */

import { marked }        from 'https://esm.sh/marked@12';
import hljs              from 'https://esm.sh/highlight.js@11';
import { esc, timeLabel } from './utils.js';

// ── Markdown setup ────────────────────────────────────────────────────────────

marked.use({
  gfm: true,
  breaks: true,
});

function renderMarkdown(text) {
  const div = document.createElement('div');
  div.className = 'prose';
  div.innerHTML = marked.parse(text);
  div.querySelectorAll('pre code').forEach(el => hljs.highlightElement(el));
  return div;
}

// ── Tool icons ────────────────────────────────────────────────────────────────

const TOOL_ICONS = {
  web_search:    '🔍',
  web_view:      '🌍',
  filesystem:    '📁',
  http_request:  '🌐',
  code_exec:     '⚙️',
  terminal:      '💻',
  ssh_exec:      '🖧',
  image_view:    '🖼️',
  spawn_agent:   '🤖',
  memory_search: '🧠',
  memory_forget: '🗑️',
  write_tool:    '✏️',
  reload_tools:  '🔄',
  list_tools:    '📋',
  tool_manual:   '📖',
};

// ── Public API ────────────────────────────────────────────────────────────────

/**
 * Append a complete message bubble (used for history and user messages).
 * Assistant messages are rendered as markdown; user messages as plain text.
 * Pass images (array of base64 strings) to render them in the bubble.
 * Returns the bubble element.
 */
export function appendMessage(el, role, content, images = null, timestamp = null) {
  const wrap = document.createElement('div');
  wrap.className = `msg ${role}`;

  const bubble = document.createElement('div');
  bubble.className = 'bubble';

  if (images?.length) {
    const imgStrip = document.createElement('div');
    imgStrip.className = 'bubble-images';
    for (const b64 of images) {
      const img = document.createElement('img');
      img.src = b64.startsWith('data:') ? b64 : `data:image/jpeg;base64,${b64}`;
      img.className = 'bubble-img';
      img.alt = 'attached image';
      imgStrip.appendChild(img);
    }
    bubble.appendChild(imgStrip);
  }

  if (role === 'assistant') {
    bubble.appendChild(renderMarkdown(content));
  } else if (content) {
    const text = document.createElement('span');
    text.textContent = content;
    bubble.appendChild(text);
  }

  const time = document.createElement('div');
  time.className = 'msg-time';
  time.textContent = timeLabel(timestamp ?? new Date().toISOString());

  wrap.append(bubble, time);
  el.appendChild(wrap);
  return bubble;
}

/**
 * Called during streaming: bubble shows raw text with a cursor.
 * Returns the bubble element — caller appends deltas via textContent.
 */
export function appendStreamBubble(el) {
  const wrap = document.createElement('div');
  wrap.className = 'msg assistant';

  const bubble = document.createElement('div');
  bubble.className = 'bubble cursor';

  const time = document.createElement('div');
  time.className = 'msg-time';
  time.textContent = 'just now';

  wrap.append(bubble, time);
  el.appendChild(wrap);
  return bubble;
}

/**
 * Called on stream_end: replaces raw text with rendered markdown.
 */
export function finalizeStreamBubble(bubble, content) {
  bubble.classList.remove('cursor');
  bubble.textContent = '';
  bubble.appendChild(renderMarkdown(content));
}

/** Build an args grid element from a {key:val} object. Returns null if empty. */
function buildArgsEl(args) {
  const entries = Object.entries(args ?? {});
  if (!entries.length) return null;
  const div = document.createElement('div');
  div.className = 'tool-args';
  div.innerHTML = entries
    .map(([k, v]) => `<span class="arg-key">${esc(k)}</span><span class="arg-val">${esc(JSON.stringify(v))}</span>`)
    .join('');
  return div;
}

/**
 * Create a pending tool card (spinner, no result yet).
 * Returns the card element — pass to finalizeToolCard() when done.
 */
export function appendPendingToolCard(el, event) {
  const icon = TOOL_ICONS[event.tool] ?? '🔧';
  const card = document.createElement('div');
  card.className = 'tool-card pending';

  const header = document.createElement('div');
  header.className = 'tool-header';
  header.innerHTML = `
    <span class="tool-icon">${icon}</span>
    <span class="tool-name">${esc(event.tool)}</span>
    <span class="tool-status"><span class="spinner-inline"></span></span>`;

  // For spawn_agent: open body immediately to show sub-agent log as it streams
  const body = document.createElement('div');
  body.className = event.tool === 'spawn_agent' ? 'tool-body tool-body-open' : 'tool-body';

  const argsEl = buildArgsEl(event.args);
  if (argsEl) body.appendChild(argsEl);

  if (event.tool === 'spawn_agent') {
    const log = document.createElement('div');
    log.className = 'subagent-log';
    body.appendChild(log);
    card._subagentLog = log;
  }

  card.append(header, body);
  el.appendChild(card);
  return card;
}

/**
 * Fill in a pending card with the completed result.
 */
export function finalizeToolCard(card, event) {
  const success = event.success;
  card.classList.remove('pending');
  if (!success) card.classList.add('error');

  const statusEl = card.querySelector('.tool-status');
  if (statusEl) statusEl.innerHTML = success ? '✓' : '✗';

  const body = card.querySelector('.tool-body');
  if (body) {
    body.classList.remove('tool-body-open');
    // Strip the "[Sub-agent result — ...]" reminder prefix before showing to user
    const result = event.result.replace(/^\[Sub-agent result[^\]]*\]\n\n/, '');
    const pre = document.createElement('pre');
    pre.className = 'tool-result-pre';
    pre.textContent = result;
    body.appendChild(pre);
  }

  const header = card.querySelector('.tool-header');
  if (header) header.addEventListener('click', () => card.classList.toggle('open'));
}

/**
 * Append a pending sub-agent step inside a spawn_agent card.
 * Returns the step element — pass to finalizeSubagentStep() when done.
 */
export function appendSubagentStep(card, event) {
  const log = card._subagentLog;
  if (!log) return null;
  const icon = TOOL_ICONS[event.tool] ?? '🔧';
  const step = document.createElement('div');
  step.className = 'subagent-step pending';
  step.innerHTML = `
    <span class="step-arrow">↳</span>
    <span class="step-icon">${icon}</span>
    <span class="step-name">${esc(event.tool)}</span>
    <span class="step-status"><span class="spinner-inline"></span></span>`;
  log.appendChild(step);
  return step;
}

/**
 * Mark a sub-agent step as complete.
 */
export function finalizeSubagentStep(step, event) {
  if (!step) return;
  step.classList.remove('pending');
  if (!event.success) step.classList.add('error');
  const statusEl = step.querySelector('.step-status');
  if (statusEl) statusEl.innerHTML = event.success ? '✓' : '✗';
}

/**
 * Tool call card from history — complete, collapsed by default.
 */
export function appendToolCall(el, event) {
  const icon    = TOOL_ICONS[event.tool] ?? '🔧';
  const success = event.success;

  const card = document.createElement('div');
  card.className = `tool-card${success ? '' : ' error'}`;

  const header = document.createElement('div');
  header.className = 'tool-header';
  header.innerHTML = `
    <span class="tool-icon">${icon}</span>
    <span class="tool-name">${esc(event.tool)}</span>
    <span class="tool-status">${success ? '✓' : '✗'}</span>`;

  const body = document.createElement('div');
  body.className = 'tool-body';
  const argsEl = buildArgsEl(event.args);
  if (argsEl) body.appendChild(argsEl);
  const pre = document.createElement('pre');
  pre.className = 'tool-result-pre';
  pre.textContent = event.result;
  body.appendChild(pre);

  header.addEventListener('click', () => card.classList.toggle('open'));
  card.append(header, body);
  el.appendChild(card);
}

/**
 * Create a thinking block (open by default, collapses on finalizeThinkingCard).
 * Returns {card, pre} — caller appends thinking text to pre.textContent.
 */
export function appendThinkingCard(el) {
  const card = document.createElement('div');
  card.className = 'thinking-card open';

  const header = document.createElement('div');
  header.className = 'thinking-header';
  header.innerHTML = '<span class="thinking-icon">💭</span><span class="thinking-label">Thinking…</span>';

  const body = document.createElement('div');
  body.className = 'thinking-body';

  const pre = document.createElement('pre');
  pre.className = 'thinking-pre';
  body.appendChild(pre);

  header.addEventListener('click', () => card.classList.toggle('open'));
  card.append(header, body);
  el.appendChild(card);
  return { card, pre };
}

/**
 * Called on thinking_end: update label and collapse the card.
 */
export function finalizeThinkingCard(card) {
  const label = card.querySelector('.thinking-label');
  if (label) label.textContent = 'Thought';
  card.classList.remove('open');
}

export function appendTypingIndicator(el) {
  removeTypingIndicator(el);
  const div = document.createElement('div');
  div.className = 'typing';
  div.id = 'typing-indicator';
  div.innerHTML = '<span></span><span></span><span></span>';
  el.appendChild(div);
}

export function removeTypingIndicator(el) {
  el.querySelector('#typing-indicator')?.remove();
}

export function appendError(el, message) {
  const div = document.createElement('div');
  div.className = 'msg-error';
  div.textContent = `Error: ${message}`;
  el.appendChild(div);
}

export function showEmptyState(el) {
  el.innerHTML = `
    <div class="empty-chat">
      <div class="icon">💬</div>
      <p>Start a new conversation</p>
    </div>`;
}

/**
 * Summary card — rendered for is_summary messages loaded from history.
 * Collapsed by default, click to expand.
 */
export function appendSummaryCard(el, content) {
  const text = content.replace(/^\[Context Summary\]\n?/, '');
  const card = document.createElement('div');
  card.className = 'summary-card';

  const header = document.createElement('div');
  header.className = 'summary-header';
  header.innerHTML = '<span class="summary-icon">📋</span><span>Context Summary</span>';

  const body = document.createElement('div');
  body.className = 'summary-body';
  body.appendChild(renderMarkdown(text));

  header.addEventListener('click', () => card.classList.toggle('open'));
  card.append(header, body);
  el.appendChild(card);
}

/**
 * Inline notice that compression ran — appended to the message list.
 */
export function appendCompressionNotice(el) {
  const div = document.createElement('div');
  div.className = 'compression-notice';
  div.textContent = '↑ Older messages summarized to free context space';
  el.appendChild(div);
}

export function scrollToBottom(el) {
  el.scrollTop = el.scrollHeight;
}