// js/chatbot/chatbot-message-renderer.js

/**
 * Phase 3: 事件委托特性开关
 * 设置为 true 启用事件委托（减少内存占用 40-60%）
 * 设置为 false 回滚到内联事件（用于紧急回滚）
 */
const USE_EVENT_DELEGATION = true;  // 已修复流式更新配置加载问题

/**
 * ChatbotMessageRenderer 聊天消息渲染工具
 *
 * 主要功能：
 * 1. 渲染用户和助手的消息内容（支持文本、图片、思维导图等）。
 * 2. 生成消息操作按钮（删除、重发、复制、导出等）。
 * 3. 支持消息的富文本、Markdown、LaTeX 渲染。
 * 4. 渲染特殊消息（最终汇总、输入中指示器等）。
 * 5. 提供 Markdown 内容的样式。
 */
window.ChatbotMessageRenderer = {
  /**
   * 生成消息操作按钮的 HTML（如删除、重发等）。
   *
   * 主要逻辑：
   * 1. 用户消息包含"重发"和"删除"按钮，助手消息仅有"删除"按钮。
   * 2. 按钮位置根据消息类型自动调整。
   *
   * @param {string} messageType - 'user' 或 'assistant'。
   * @param {number} index - 消息在 chatHistory 中的索引。
   * @returns {string} HTML字符串。
   * @private
   */
  _createActionButtonsHTML: function(messageType, index) {
    let buttons = '';

    // Phase 3: 使用事件委托
    if (USE_EVENT_DELEGATION) {
      // 通用删除按钮（事件委托版本）
      buttons += `
        <button class="msg-action-btn delete-msg-btn"
                data-action="delete"
                data-index="${index}"
                title="删除消息">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="3 6 5 6 21 6"></polyline>
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
            <line x1="10" y1="11" x2="10" y2="17"></line>
            <line x1="14" y1="11" x2="14" y2="17"></line>
          </svg>
        </button>
      `;

      if (messageType === 'user') {
        // 用户消息增加重发按钮，且重发按钮在前
        buttons = `
          <button class="msg-action-btn resend-msg-btn"
                  data-action="resend"
                  data-index="${index}"
                  title="重新发送">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="23 4 23 10 17 10"></polyline>
              <polyline points="1 20 1 14 7 14"></polyline>
              <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
            </svg>
          </button>
        ` + buttons;
      }
    } else {
      // 旧版本：内联事件（用于回滚）
      // 为了代码简洁，这里仅保留核心功能，样式由 CSS 控制
      buttons += `
        <button class="msg-action-btn delete-msg-btn"
                onclick="window.ChatbotActions.deleteMessage(${index})"
                title="删除消息">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="3 6 5 6 21 6"></polyline>
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
            <line x1="10" y1="11" x2="10" y2="17"></line>
            <line x1="14" y1="11" x2="14" y2="17"></line>
          </svg>
        </button>
      `;

      if (messageType === 'user') {
        buttons = `
          <button class="msg-action-btn resend-msg-btn"
                  onclick="window.ChatbotActions.resendUserMessage(${index})"
                  title="重新发送">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="23 4 23 10 17 10"></polyline>
              <polyline points="1 20 1 14 7 14"></polyline>
              <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
            </svg>
          </button>
        ` + buttons;
      }
    }

    // 按消息类型调整按钮位置
    const positionClass = messageType === 'user' ? 'user-actions' : 'assistant-actions';
    const positionStyle = messageType === 'user'
      ? 'position:absolute;top:-28px;right:8px;display:none;gap:5px;z-index:3;padding:4px;'
      : 'position:absolute;top:-28px;left:8px;display:none;gap:5px;z-index:3;padding:4px;';

    // Phase 3: 移除内联 hover 事件，改用 CSS :hover
    if (USE_EVENT_DELEGATION) {
      // 使用 CSS 类控制位置 (需要在 message-actions.css 中添加相应类，或暂时保留内联样式以确保兼容)
      // 暂时保留内联样式以确保位置正确，后续可迁移到 CSS
      return `
        <div class="message-actions action-buttons-container ${positionClass}"
             style="${positionStyle}">
          ${buttons}
        </div>
      `;
    } else {
      return `
        <div class="message-actions action-buttons-container ${positionClass}"
             style="${positionStyle}"
             onmouseenter="this.style.display='flex'"
             onmouseleave="this.style.display='none'">
          ${buttons}
        </div>
      `;
    }
  },

  /**
   * 渲染用户消息内容。
   *
   * 主要逻辑：
   * 1. 支持富文本（多段文本、图片）和纯文本两种格式。
   * 2. 图片支持点击放大。
   * 3. 鼠标悬停时显示操作按钮。
   *
   * @param {object} m - 消息对象。
   * @param {number} index - 消息索引。
   * @returns {string} HTML字符串。
   */
  renderUserMessage: function(m, index) {
    let userMessageHtml = '';
    // 判断是否为富文本结构
    if (Array.isArray(m.displayContent) ? Array.isArray(m.displayContent) : Array.isArray(m.content)) {
      const contentToDisplay = Array.isArray(m.displayContent) ? m.displayContent : m.content;
      contentToDisplay.forEach(part => {
        if (part.type === 'text') {
          userMessageHtml += `<div style="margin-bottom:5px;">${window.ChatbotUtils.escapeHtml(part.text)}</div>`;
        } else if (part.type === 'image_url' && part.image_url && part.image_url.url) {
          const imageUrlForModal = part.image_url.fullUrl || part.image_url.url;

          // Phase 3: 图片点击事件委托
          if (USE_EVENT_DELEGATION) {
            userMessageHtml += `
              <div class="message-image-container">
                <img src="${part.image_url.url}"
                     alt="用户图片"
                     class="user-message-image"
                     data-action="show-image"
                     data-image-url="${imageUrlForModal}">
              </div>`;
          } else {
            // 旧版本：内联事件
            userMessageHtml += `
              <div class="message-image-container">
                <img src="${part.image_url.url}" alt="用户图片" class="user-message-image" onclick="window.ChatbotImageUtils.showImageModal('${imageUrlForModal}')">
              </div>`;
          }
        }
      });
    } else {
      // 纯文本消息
      userMessageHtml = window.ChatbotUtils.escapeHtml(m.displayContent !== undefined ? m.displayContent : m.content);
    }

    const actionButtons = this._createActionButtonsHTML('user', index);

    // CSS Refactor: 使用类名替代内联样式
    return `
      <div class="message-container user-message-container">
        ${actionButtons}
        <div class="chat-bubble user">
          ${userMessageHtml}
        </div>
      </div>
    `;
  },

  /**
   * 渲染助手消息内容。
   *
   * 主要逻辑：
   * 1. 支持思维导图、富文本、Markdown、LaTeX 等多种格式。
   * 2. 支持"思考过程"折叠块。
   * 3. 鼠标悬停时显示操作按钮。
   * 4. 提供复制、导出等快捷操作。
   *
   * @param {object} m - 消息对象。
   * @param {number} index - 消息索引。
   * @param {string} docName - 文档名（用于思维导图）。
   * @param {object} dataForMindmap - 思维导图相关数据。
   * @param {string} docId - 完整的文档 ID。
   * @returns {string} HTML字符串。
   */
  renderAssistantMessage: function(m, index, docName, dataForMindmap, docId) {
    let renderedContent = '';
    // 思维导图消息特殊处理
    if (m.hasMindMap && m.mindMapData) {
      let safeMindMapData = m.mindMapData;
      if (!safeMindMapData.trim() || !/^#/.test(safeMindMapData.trim()) || !/\n##?\s+/.test(safeMindMapData)) {
        safeMindMapData = '# 思维导图\n\n暂无结构化内容';
      }
      const mindmapUrlParams = `docId=${encodeURIComponent(docName || 'unknown')}_${(dataForMindmap.images||[]).length}_${(dataForMindmap.ocr|| '').length}_${(dataForMindmap.translation|| '').length}`;
      const mindmapUrl = (window.location.pathname.endsWith('/history_detail.html') ? '../mindmap/mindmap.html' : 'views/mindmap/mindmap.html') + '?' + mindmapUrlParams;

      // Phase 3: 思维导图按钮事件委托
      if (USE_EVENT_DELEGATION) {
        renderedContent = `
          <div class="mindmap-preview-container">
            <div class="mindmap-preview-content">
              ${window.ChatbotRenderingUtils.renderMindmapShadow(safeMindMapData)}
            </div>
            <div class="mindmap-preview-overlay">
              <button class="mindmap-open-btn"
                      data-action="open-mindmap"
                      data-mindmap-url="${mindmapUrl}">放大查看/编辑思维导图</button>
            </div>
          </div>
        `;
      } else {
        renderedContent = `
          <div class="mindmap-preview-container">
            <div class="mindmap-preview-content">
              ${window.ChatbotRenderingUtils.renderMindmapShadow(safeMindMapData)}
            </div>
            <div class="mindmap-preview-overlay">
              <button class="mindmap-open-btn" onclick="window.open('${mindmapUrl}','_blank')">放大查看/编辑思维导图</button>
            </div>
          </div>
        `;
      }
    } else if (m.isDrawioPictures) {
      // draw.io 配图消息特殊处理
      const docIdSafe = docId || 'unknown';
      const drawioUrl = (window.location.pathname.endsWith('/history_detail.html')
        ? '../drawio/drawio.html'
        : 'views/drawio/drawio.html') + `?docId=${encodeURIComponent(docIdSafe)}`;

      if (USE_EVENT_DELEGATION) {
        renderedContent = `
          <div class="drawio-preview-container">
            <div class="drawio-preview-text">
              已生成 draw.io 兼容的配图 XML，可点击下方按钮在新窗口中查看和编辑。
            </div>
            <div class="drawio-preview-overlay">
              <button class="mindmap-open-btn"
                      data-action="open-drawio"
                      data-drawio-url="${drawioUrl}">放大查看/编辑配图</button>
            </div>
          </div>
        `;
      } else {
        renderedContent = `
          <div class="drawio-preview-container">
            <div class="drawio-preview-text">
              已生成 draw.io 兼容的配图 XML，可点击下方按钮在新窗口中查看和编辑。
            </div>
            <div class="drawio-preview-overlay">
              <button class="mindmap-open-btn" onclick="window.open('${drawioUrl}','_blank')">放大查看/编辑配图</button>
            </div>
          </div>
        `;
      }
    } else {
      // 普通文本/Markdown/LaTeX
      // Only show the logo if there is NO content, NO reasoning, and NO tool calls.
      // If there is reasoning or tool calls, they serve as the "activity indicator".
      const isPurelyEmpty = (!m.content || String(m.content).trim() === '') && !m.reasoningContent && !m.toolCallHtml;

      if (m.role === 'assistant' && isPurelyEmpty) {
        // Determine the correct path for the logo based on the current page
        const isHistoryDetail = window.location.pathname.includes('/history_detail.html');
        const logoPath = isHistoryDetail ? '../../public/pure.svg' : 'public/pure.svg';
        renderedContent = `
          <div class="typing-indicator">
            <img src="${logoPath}" class="typing-logo" alt="Thinking..." />
          </div>
        `;
      } else {
        try {
          if (typeof marked !== 'undefined' && typeof katex !== 'undefined') {
            if (typeof renderWithKatexStreaming === 'function') {
              renderedContent = renderWithKatexStreaming(m.content);
            } else if (typeof renderWithKatexFailback === 'function') {
              renderedContent = renderWithKatexFailback(m.content);
            } else {
              // XSS 防护
              if (typeof window.safeRenderMarkdown === 'function') {
                renderedContent = window.safeRenderMarkdown(m.content);
              } else {
                renderedContent = marked.parse(m.content);
              }
            }
          } else {
            renderedContent = window.ChatbotUtils.escapeHtml(m.content).replace(/\n/g, '<br>');
          }
        } catch (e) {
          renderedContent = window.ChatbotUtils.escapeHtml(m.content).replace(/\n/g, '<br>');
        }
      }
    }

    // 思考过程折叠块
    let reasoningBlock = '';
    if (m.reasoningContent) {
      const reasoningId = `reasoning-block-${index}`;
      const collapsed = window[`reasoningCollapsed_${index}`] === true;
      let renderedReasoningContent = '';
      try {
        if (typeof renderWithKatexStreaming === 'function') {
          renderedReasoningContent = renderWithKatexStreaming(m.reasoningContent);
        } else {
          renderedReasoningContent = window.ChatbotUtils.escapeHtml(m.reasoningContent).replace(/\n/g, '<br>');
        }
      } catch (e) {
        renderedReasoningContent = window.ChatbotUtils.escapeHtml(m.reasoningContent).replace(/\n/g, '<br>');
      }

      // Phase 3: 思考过程折叠按钮事件委托
      if (USE_EVENT_DELEGATION) {
        reasoningBlock = `
          <div id="${reasoningId}" class="reasoning-block">
            <div class="reasoning-header">
              <span class="reasoning-title">思考过程</span>
              <button class="reasoning-toggle-btn"
                      data-action="toggle-reasoning"
                      data-index="${index}">
                ${collapsed ? '▼' : '▲'}
              </button>
            </div>
            <div class="reasoning-content" style="${collapsed ? 'display:none;' : ''}">
              ${renderedReasoningContent}
            </div>
          </div>
        `;
      } else {
        // 旧版本：内联事件
        reasoningBlock = `
          <div id="${reasoningId}" class="reasoning-block">
            <div class="reasoning-header">
              <span class="reasoning-title">思考过程</span>
              <button class="reasoning-toggle-btn" onclick="(function(){window['reasoningCollapsed_${index}']=!window['reasoningCollapsed_${index}'];window.ChatbotUI.updateChatbotUI();})()">
                ${collapsed ? '▼' : '▲'}
              </button>
            </div>
            <div class="reasoning-content" style="${collapsed ? 'display:none;' : ''}">
              ${renderedReasoningContent}
            </div>
          </div>
        `;
      }
    }

    // ReAct Visualization Block
    let reactVizBlock = '';
    if (m.reactLog && m.reactLog.length > 0) {
        const vizId = `react-viz-${index}`;
        // Create a container for the visualization
        // Note: The actual visualization will be rendered by the ReActVisualization class
        // We just provide the container here.
        // To make it work with the static HTML string return, we might need to trigger the render after insertion.
        // However, since we are returning HTML string, we can't easily bind the instance here.
        // A better approach for this specific architecture might be to render the static HTML structure
        // that matches what ReActVisualization produces, or use a placeholder and hydrate it later.
        
        // Let's try to render a static snapshot of the ReAct log if available
        let stepsHtml = '';
        m.reactLog.forEach((step, i) => {
            let icon = '';
            let title = '';
            let typeClass = '';
            let content = '';

            if (step.type === 'thought') {
                icon = 'carbon:idea';
                title = `Thought ${step.iteration || i+1}`;
                typeClass = 'step-thought';
                content = step.content;
            } else if (step.type === 'action') {
                icon = 'carbon:tools';
                title = `Action ${step.iteration || i+1}`;
                typeClass = 'step-action';
                content = `Tool: ${step.tool}\nInput: ${JSON.stringify(step.params, null, 2)}`;
            } else if (step.type === 'observation') {
                icon = 'carbon:view';
                title = `Observation ${step.iteration || i+1}`;
                typeClass = 'step-observation';
                content = typeof step.result === 'string' ? step.result : JSON.stringify(step.result, null, 2);
                if (content.length > 500) content = content.slice(0, 500) + '... (truncated)';
            }

            if (content) {
                // Escape HTML and preserve newlines
                content = window.ChatbotUtils.escapeHtml(content);
                content = content.replace(/\n/g, '<br>');

                stepsHtml += `
                    <div class="react-step-item ${typeClass}">
                        <div class="react-step-header">
                            <iconify-icon icon="${icon}"></iconify-icon>
                            <span>${title}</span>
                        </div>
                        <div class="react-step-content">${content}</div>
                    </div>
                `;
            }
        });

        if (stepsHtml) {
            reactVizBlock = `
                <div id="${vizId}" class="react-viz-container">
                    <div class="react-viz-header">
                        <div class="react-viz-title">
                            <iconify-icon icon="carbon:ibm-watson-discovery" width="18"></iconify-icon>
                            <span>ReAct Reasoning Engine</span>
                        </div>
                        <div class="react-status-badge react-status-completed">Completed</div>
                    </div>
                    <div class="react-steps-container">
                        ${stepsHtml}
                    </div>
                </div>
            `;
        }
    }

    // 工具调用块 (Legacy or Fallback)
    let toolCallBlock = '';
    if (m.toolCallHtml && !reactVizBlock) {
      toolCallBlock = m.toolCallHtml;
    }

    const actionButtons = this._createActionButtonsHTML('assistant', index);

    // Phase 3: 复制、导出等快捷操作按钮
    let existingActions = '';
    if (USE_EVENT_DELEGATION) {
      existingActions = `
        <div class="message-actions original-actions">
          <button class="copy-btn"
                  data-action="copy"
                  data-index="${index}"
                  title="复制内容">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
            </svg>
          </button>
          <button class="export-png-btn"
                  data-action="export-png"
                  data-index="${index}"
                  title="导出为PNG">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7 10 12 15 17 10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
            </svg>
          </button>
        </div>
      `;
    } else {
      // 旧版本：内联事件
      existingActions = `
        <div class="message-actions original-actions" style="position:absolute;top:8px;left:12px;display:flex;gap:6px;opacity:0.6;transition:opacity 0.2s;z-index:2;"
             onmouseover="this.style.opacity='1'" onmouseout="this.style.opacity='0.6'">
          <button class="copy-btn" onclick="window.ChatbotUtils.copyAssistantMessage(${index})"
                  title="复制内容">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
          </button>
          <button class="export-png-btn" onclick="window.ChatbotUtils.exportMessageAsPng(${index})"
                  title="导出为PNG">
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
          </button>
        </div>
      `;
    }

    // CSS Refactor: 使用类名替代内联样式
    const isThinkingOnly = m.role === 'assistant' && (!m.content || String(m.content).trim() === '') && !m.reasoningContent && !m.toolCallHtml;

    return `
      <div class="message-container assistant-message-container">
        ${actionButtons}
        <div class="chat-bubble assistant ${isThinkingOnly ? 'typing-bubble' : ''}">
          ${existingActions}
          <div class="assistant-message" data-message-index="${index}">
            ${reactVizBlock}
            ${toolCallBlock}
            ${reasoningBlock}
            <div class="markdown-content">${renderedContent}</div>
          </div>
        </div>
      </div>
    `;
  },

  /**
   * 渲染最终汇总消息。
   *
   * @param {object} m - 消息对象。
   * @returns {string} HTML字符串。
   */
  renderFinalSummaryMessage: function(m) {
    return `
      <div class="message-container assistant-message-container">
        <div class="chat-bubble summary">
          <div class="summary-title">最终汇总</div>
          <div class="markdown-content">${window.ChatbotUtils.escapeHtml(m.content).replace(/\n/g, '<br>')}</div>
        </div>
      </div>
    `;
  },

  /**
   * 渲染"输入中..."指示器。
   *
   * @returns {string} HTML字符串。
   */
  renderTypingIndicator: function() {
    // Determine the correct path for the logo based on the current page
    const isHistoryDetail = window.location.pathname.includes('/history_detail.html');
    const logoPath = isHistoryDetail ? '../../public/pure.svg' : 'public/pure.svg';

    return `
      <div class="message-container assistant-message-container">
        <div class="chat-bubble assistant typing-bubble">
          <div class="typing-indicator">
            <img src="${logoPath}" class="typing-logo" alt="Thinking..." />
          </div>
        </div>
      </div>
    `;
  },

  /**
   * 获取 Markdown 内容的样式。
   *
   * @returns {string} style 标签字符串。
   */
  getMarkdownStyles: function() {
    // CSS 现已移至外部文件 (css/history_detail/03-components/chatbot/index.css)
    // 此处返回空字符串以保持 API 兼容性，或仅返回必要的动态样式
    return '';
  }
};