/**
 * 聊天消息渲染器
 *
 * 提供通用的气泡创建、DOM 操作和滚动功能。
 */
import { escapeHtml } from '../utils.js';

/**
 * 获取聊天消息容器
 */
export function getChatMessages() {
  return document.getElementById('chat-messages');
}

/**
 * 滚动聊天容器到底部
 */
export function scrollToBottom() {
  const chatMessages = getChatMessages();
  if (chatMessages) {
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }
}

/**
 * 创建聊天消息气泡
 *
 * @param {string} text - 消息内容
 * @param {string} type - 消息类型（影响气泡样式）
 * @param {boolean} isUser - 是否为用户消息
 * @returns {HTMLElement} wrapper 元素
 */
export function createChatBubble(text, type, isUser) {
  const wrapper = document.createElement('div');
  wrapper.className = `chat-message${isUser ? ' user' : ''}`;
  wrapper.innerHTML = `
    <div class="ai-avatar"><img src="/static/icon/${isUser ? 'user' : 'agent'}.svg" alt=""></div>
    <div class="chat-bubble ${isUser ? 'user' : (type || 'processing')}">${escapeHtml(text)}</div>
  `;
  return wrapper;
}

/**
 * 创建带系统头像的气泡
 *
 * @param {string} text - 消息内容
 * @param {string} type - 消息类型
 * @returns {HTMLElement} wrapper 元素
 */
export function createSystemBubble(text, type) {
  return createChatBubble(text, type, false);
}

/**
 * 将消息追加到聊天容器
 *
 * @param {HTMLElement} wrapper - 消息 wrapper 元素
 */
export function appendMessage(wrapper) {
  const chatMessages = getChatMessages();
  if (!chatMessages) return;
  chatMessages.appendChild(wrapper);
  scrollToBottom();
}