// frontend-react/src/components/ChatBox/ChatBox.jsx
import React, { useEffect, useRef } from 'react';
import useChatBoxStore from '../../../Store/Mid/ChatBoxSlice';
import useChatBoxUIStore from '../../../Store/Mid/ChatBoxUISlice'; // ✅ 新增
import { processTextForDisplay } from '../../../hooks/useRegexProcessor'; // ✅ 修改：导入普通函数
import MarkdownRenderer from '../../shared/MarkdownRenderer';
import './ChatBox.css';

const ChatBox = () => {
  const messagesEndRef = useRef(null);
  const optionsRef = useRef(null);
  const chatSelectorRef = useRef(null);
  const messagesContainerRef = useRef(null);  // ✅ 新增：消息容器引用
  const isUserAtBottomRef = useRef(true);  // ✅ 新增：跟踪用户是否在底部
  const contextMenuRef = useRef(null);  // ✅ 新增：右键菜单引用
  
  // ✅ 新增：右键菜单状态
  const [contextMenu, setContextMenu] = React.useState({
    visible: false,
    x: 0,
    y: 0,
    message: null
  });

  // ✅ 从 ChatBoxUIStore 获取 UI 状态
  const {
    editingId,
    editContent,
    inputValue,
    showOptions,
    showChatSelector,
    characterChats,
    currentSwipeId,
    inputHeight,
    startEditing,
    cancelEditing,
    updateEditContent,
    setInputValue,
    clearInput,
    toggleOptions,
    setShowOptions,
    toggleChatSelector,
    setShowChatSelector,
    setCharacterChats,
    setCurrentSwipeId,
    setInputHeight
  } = useChatBoxUIStore();

  // 从 ChatBoxStore 获取状态和方法
  const {
    messages,
    isLoading,
    error,
    userName,
    characterName,
    updateMessage,
    isGenerating,
    sendMessage,
    stopGeneration,
    options,
    toggleOption,
    cycleRenderMode  // ✅ 新增：切换渲染模式
  } = useChatBoxStore();

  // ✅ 新增：存储处理后的消息内容
  const [processedMessages, setProcessedMessages] = React.useState({});
  
  // ✅ 当消息变化时，预处理正则规则
  React.useEffect(() => {
    const processMessages = async () => {
      const processed = {};
      
      for (const message of messages) {
        if (!message.is_user && message.mes) {
          // 计算消息深度
          const messageDepth = messages.length > 0 
            ? messages[messages.length - 1].floor - message.floor 
            : 0;
          
          try {
            // 异步处理正则规则
            const displayText = await processTextForDisplay(
              message.mes, 
              messageDepth, 
              message.is_user
            );
            processed[message.floor] = displayText;
          } catch (error) {
            console.error('[ChatBox] 正则处理失败:', error);
            processed[message.floor] = message.mes;
          }
        } else {
          // 用户消息或空消息直接使用原文
          processed[message.floor] = message.mes;
        }
      }
      
      setProcessedMessages(processed);
    };
    
    if (messages.length > 0) {
      processMessages();
    }
  }, [messages]);

  // 点击外部关闭选项面板
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (optionsRef.current && !optionsRef.current.contains(event.target) &&
          !event.target.closest('.options-button')) {
        setShowOptions(false);
      }
    };

    if (showOptions) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [showOptions]);
  
  // 点击外部关闭聊天选择器
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (chatSelectorRef.current && !chatSelectorRef.current.contains(event.target) &&
          !event.target.closest('.chat-selector-button')) {
        setShowChatSelector(false);
      }
    };

    if (showChatSelector) {
      document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [showChatSelector]);

  // ✅ 点击外部关闭右键菜单
  useEffect(() => {
    const handleClickOutside = (event) => {
      if (contextMenuRef.current && !contextMenuRef.current.contains(event.target)) {
        closeContextMenu();
      }
    };

    if (contextMenu.visible) {
      document.addEventListener('mousedown', handleClickOutside);
      // ✅ 添加滚动监听，防止滚动时菜单不关闭
      document.addEventListener('scroll', closeContextMenu, true);
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
      document.removeEventListener('scroll', closeContextMenu, true);
    };
  }, [contextMenu.visible]);

  const handleInputHeight = (e) => {
    const textarea = e.target;
    
    // ✅ 业界标准方案：先重置为 auto，再设置为 scrollHeight
    // 这是 SillyTavern、Discord、Slack 等成熟产品使用的方案
    // 确保删除内容时高度也能正确收缩
    textarea.style.height = 'auto';
    textarea.style.height = Math.min(textarea.scrollHeight, 300) + 'px';
  };

  // 处理发送或终止
  const handleSendOrStop = () => {
    if (isGenerating) {
      stopGeneration();
    } else {
      sendMessage(inputValue);
      clearInput(); // ✅ 使用 store 方法
      // ✅ 重置输入框高度：直接操作 DOM 元素重置为 auto
      const textarea = document.querySelector('.message-input');
      if (textarea) {
        textarea.style.height = 'auto';
      }
    }
  };

  // 处理键盘事件
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendOrStop();
    }
  };

  // 自动滚动到底部（智能滚动）
  const scrollToBottom = (force = false) => {
    // 只有在用户在底部或强制滚动时才执行
    if (isUserAtBottomRef.current || force) {
      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    }
  };

  // 检测用户是否在底部
  const checkIfUserAtBottom = () => {
    if (!messagesContainerRef.current) return true;
    
    const { scrollTop, scrollHeight, clientHeight } = messagesContainerRef.current;
    // 允许 20px 的误差范围
    const isAtBottom = scrollHeight - scrollTop - clientHeight < 20;
    isUserAtBottomRef.current = isAtBottom;
    return isAtBottom;
  };

  // 监听消息容器的滚动事件
  useEffect(() => {
    const container = messagesContainerRef.current;
    if (!container) return;
    
    const handleScroll = () => {
      checkIfUserAtBottom();
    };
    
    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, []);

  // 当消息变化时，智能滚动
  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  // ✅ 监听全局键盘事件 - 左右键切换 swipe 或触发重roll
  useEffect(() => {
    const handleGlobalKeyDown = (e) => {
      // 如果正在输入框中输入，不处理
      if (e.target.tagName === 'TEXTAREA' || e.target.tagName === 'INPUT') {
        return;
      }
      
      // 只处理左右方向键
      if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') {
        return;
      }
      
      e.preventDefault();
      
      // 找到最后一条 AI 消息
      const lastAiMessage = [...messages].reverse().find(m => !m.is_user);
      
      if (!lastAiMessage) {
        return;
      }
      
      const hasSwipes = lastAiMessage.swipes && lastAiMessage.swipes.length > 0;
      
      if (e.key === 'ArrowLeft') {
        // 左键：如果有 swipe，切换到上一个版本；否则不做任何操作
        if (hasSwipes) {
          const currentIndex = currentSwipeId[lastAiMessage.floor] !== undefined
            ? currentSwipeId[lastAiMessage.floor]
            : lastAiMessage.swipe_id;
          
          if (currentIndex > 0) {
            handleSwipeChange(lastAiMessage.floor, -1);
          }
        }
        // 如果没有 swipe，左键不做任何操作
      } else if (e.key === 'ArrowRight') {
        // 右键：如果有 swipe 且不是最后一个版本，切换到下一个版本；否则触发重roll
        if (hasSwipes) {
          const currentIndex = currentSwipeId[lastAiMessage.floor] !== undefined
            ? currentSwipeId[lastAiMessage.floor]
            : lastAiMessage.swipe_id;
          
          if (currentIndex < lastAiMessage.swipes.length - 1) {
            handleSwipeChange(lastAiMessage.floor, 1);
          } else {
            // 已在最后一个版本，触发重roll（在目标消息的swipe数组中添加新版本）
            console.log('[ChatBox] 已在最后一个版本，触发重roll（添加swipe）');
            handleRerollMessage(lastAiMessage);
          }
        } else {
          // 没有 swipe，直接触发重roll（在目标消息的swipe数组中添加新版本）
          console.log('[ChatBox] 没有 swipe，触发重roll（添加swipe）');
          handleRerollMessage(lastAiMessage);
        }
      }
    };
    
    window.addEventListener('keydown', handleGlobalKeyDown);
    return () => window.removeEventListener('keydown', handleGlobalKeyDown);
  }, [messages, currentSwipeId]);

  // 处理编辑消息
  const handleEdit = (message) => {
    startEditing(message.floor, message.mes); // ✅ 使用 store 方法
  };

  // 保存编辑
  const handleSaveEdit = (messageId) => {
    // 调用 store 中的 updateMessage 方法
    updateMessage(messageId, editContent);
    cancelEditing(); // ✅ 使用 store 方法
  };

  // 取消编辑
  const handleCancelEdit = () => {
    cancelEditing(); // ✅ 使用 store 方法
  };

  // 新增：处理swipe切换
  const handleSwipeChange = (messageId, direction) => {
    const message = messages.find(m => m.floor === messageId);
    if (message && message.swipes && message.swipes.length > 0) {
      const currentIndex = currentSwipeId[messageId] !== undefined
        ? currentSwipeId[messageId]
        : message.swipe_id;
      const newIndex = currentIndex + direction;

      if (newIndex >= 0 && newIndex < message.swipes.length) {
        // ✅ 合并更新，保留其他楼层的 swipe 状态
        setCurrentSwipeId({ ...currentSwipeId, [messageId]: newIndex });
      } else if (direction === 1 && newIndex >= message.swipes.length) {
        // ✅ 当尝试切换到超出最后一个版本时，触发重roll（添加新swipe）
        console.log('[ChatBox] 右键点击最后一个版本，触发重roll');
        handleRerollMessage(message);
      }
    }
  };

  // ✅ 新增：右键菜单处理
  const handleContextMenu = (e, message) => {
    e.preventDefault();
    setContextMenu({
      visible: true,
      x: e.clientX,
      y: e.clientY,
      message: message
    });
  };

  // ✅ 关闭右键菜单
  const closeContextMenu = () => {
    setContextMenu({ visible: false, x: 0, y: 0, message: null });
  };

  // ✅ 复制消息内容
  const handleCopyMessage = async (message) => {
    try {
      await navigator.clipboard.writeText(message.mes);
      console.log('[ChatBox] 消息已复制到剪贴板');
      closeContextMenu();
    } catch (err) {
      console.error('[ChatBox] 复制失败:', err);
      alert('复制失败');
    }
  };

  // ✅ 删除消息
  const handleDeleteMessage = async (message) => {
    if (!confirm(`确定要删除这条消息吗？`)) {
      closeContextMenu();
      return;
    }
    
    try {
      const { deleteMessage } = useChatBoxStore.getState();
      await deleteMessage(message.floor);
      console.log('[ChatBox] 消息已删除');
      closeContextMenu();
    } catch (err) {
      console.error('[ChatBox] 删除失败:', err);
      alert('删除失败');
    }
  };

  // ✅ 从右键菜单编辑
  const handleEditFromContext = (message) => {
    startEditing(message.floor, message.mes);
    closeContextMenu();
  };

  // ✅ 重roll消息（重新生成）- 在目标消息的swipe数组中添加新版本
  const handleRerollMessage = async (message) => {
    // 只有 AI 消息才能重roll
    if (message.is_user) {
      closeContextMenu();
      return;
    }
    
    try {
      const { currentRole, currentChat, wsConnection } = useChatBoxStore.getState();
      
      if (!currentRole || !currentChat) {
        alert('请先选择角色和聊天');
        closeContextMenu();
        return;
      }
      
      // 获取上一条用户消息
      const messageIndex = messages.findIndex(m => m.floor === message.floor);
      let userMessage = null;
      
      // 向前查找最近的用户消息
      for (let i = messageIndex - 1; i >= 0; i--) {
        if (messages[i].is_user) {
          userMessage = messages[i];
          break;
        }
      }
      
      if (!userMessage) {
        alert('找不到上一条用户消息');
        closeContextMenu();
        return;
      }
      
      console.log('[ChatBox] 重roll消息，使用用户输入:', userMessage.mes);
      console.log('[ChatBox] 目标消息 floor:', message.floor);
      
      // 关闭菜单
      closeContextMenu();
      
      // ✅ 调用 sendMessage，传入 targetFloor 参数，在目标消息的swipe数组中添加新版本
      const { sendMessage } = useChatBoxStore.getState();
      await sendMessage(userMessage.mes, message.floor);  // ✅ 传入 targetFloor
      
    } catch (err) {
      console.error('[ChatBox] 重roll失败:', err);
      alert('重roll失败: ' + err.message);
    }
  };

  // ✅ 分支功能：创建新的聊天记录
  const handleBranchChat = async (message) => {
    try {
      const { currentRole, currentChat, setChatBoxRoleAndChat } = useChatBoxStore.getState();
      
      if (!currentRole || !currentChat) {
        alert('请先选择角色和聊天');
        closeContextMenu();
        return;
      }
      
      if (!confirm(`确定要从楼层 #${message.floor} 创建分支吗？\n这将复制该楼层及之前的所有内容到一个新的聊天记录。`)) {
        closeContextMenu();
        return;
      }
      
      console.log('[ChatBox] 创建分支，目标楼层:', message.floor);
      
      // 调用后端 API 创建分支
      const response = await fetch(
        `/api/chat/${encodeURIComponent(currentRole)}/${encodeURIComponent(currentChat)}/branch`,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            target_floor: message.floor
          })
        }
      );
      
      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.detail || '创建分支失败');
      }
      
      const result = await response.json();
      console.log('[ChatBox] 分支创建成功:', result);
      
      // 关闭菜单
      closeContextMenu();
      
      // 切换到新的聊天记录
      setChatBoxRoleAndChat(currentRole, result.new_chat_name);
      
      alert(`分支创建成功！\n新聊天: ${result.new_chat_name}\n消息数: ${result.message_count}`);
      
    } catch (err) {
      console.error('[ChatBox] 创建分支失败:', err);
      alert('创建分支失败: ' + err.message);
    }
  };

  // 切换选项显示
  const toggleOptionsPanel = () => {
    toggleOptions(); // ✅ 使用 store 方法
  };
  
  // 打开聊天选择器
  const handleOpenChatSelector = async () => {
    const { currentRole } = useChatBoxStore.getState();
    
    // 如果没有当前角色，提示用户
    if (!currentRole) {
      alert('请先在左侧选择一个角色');
      return;
    }
    
    try {
      // 获取当前角色的聊天列表
      const response = await fetch(`/api/chat/${encodeURIComponent(currentRole)}`);
      if (!response.ok) throw new Error('获取聊天列表失败');
      
      const chats = await response.json();
      setCharacterChats(chats); // ✅ 使用 store 方法
      
      // 显示聊天选择器弹窗，让用户手动选择
      toggleChatSelector(); // ✅ 使用 store 方法
    } catch (error) {
      console.error('获取聊天列表失败:', error);
      alert('获取聊天列表失败: ' + error.message);
    }
  };
  
  // 选择聊天并加载
  const handleSelectChat = async (chatName) => {
    try {
      const { setChatBoxRoleAndChat, currentRole } = useChatBoxStore.getState();
      
      // 设置当前角色和聊天，这会触发 ChatBoxStore 的监听器自动加载聊天历史
      setChatBoxRoleAndChat(currentRole, chatName);
      
      // 关闭选择器
      setShowChatSelector(false); // ✅ 使用 store 方法
      
      console.log(`已切换到聊天: ${chatName}`);
    } catch (error) {
      console.error('切换聊天失败:', error);
      alert('切换聊天失败: ' + error.message);
    }
  };
  
  // ✅ 新增：删除聊天
  const handleDeleteChat = async (chatName, e) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发选择聊天
    
    if (!confirm(`确定要删除聊天 "${chatName}" 吗？此操作不可恢复！`)) {
      return;
    }
    
    try {
      const { currentRole } = useChatBoxStore.getState();
      
      const response = await fetch(`/api/chat/${encodeURIComponent(currentRole)}/${encodeURIComponent(chatName)}`, {
        method: 'DELETE'
      });
      
      if (!response.ok) {
        throw new Error('删除聊天失败');
      }
      
      console.log(`[ChatBox] 已删除聊天: ${chatName}`);
      
      // 重新获取聊天列表
      const chatsResponse = await fetch(`/api/chat/${encodeURIComponent(currentRole)}`);
      if (chatsResponse.ok) {
        const chats = await chatsResponse.json();
        setCharacterChats(chats);
      }
      
      // 如果删除的是当前聊天，清空当前聊天
      const { currentChat, setChatBoxRoleAndChat } = useChatBoxStore.getState();
      if (currentChat === chatName) {
        setChatBoxRoleAndChat(currentRole, null);
      }
      
      alert('聊天已删除');
    } catch (error) {
      console.error('[ChatBox] 删除聊天失败:', error);
      alert('删除聊天失败: ' + error.message);
    }
  };
  
  // 新建聊天
  const handleCreateNewChat = async () => {
    try {
      const { currentRole, createChat, setChatBoxRoleAndChat } = useChatBoxStore.getState();
      
      if (!currentRole) {
        alert('请先选择一个角色');
        return;
      }
      
      // 使用当前时间戳作为聊天名称
      const chatName = `chat_${Date.now()}`;
      
      // 创建新聊天
      await createChat(currentRole, chatName);
      
      // 切换到新创建的聊天
      setChatBoxRoleAndChat(currentRole, chatName);
      
      // 关闭选择器
      setShowChatSelector(false);
      
      console.log(`已创建并切换到新聊天: ${chatName}`);
    } catch (error) {
      console.error('创建聊天失败:', error);
      alert('创建聊天失败: ' + error.message);
    }
  };

  // 渲染单条消息
  const renderMessage = (message, index) => {
    const isUser = message.is_user;
    const isEditing = editingId === message.floor;
  
    // 判断是否为最新消息
    const isLatestMessage = messages.length > 0 && message.floor === messages[messages.length - 1].floor;
  
    // 根据消息类型设置显示名称
    const displayName = isUser ? userName : characterName;
  
    // 确定当前显示的消息内容
    let currentMes = message.mes;
    let hasSwipes = message.swipes && message.swipes.length > 0;
    let currentSwipeIndex = message.swipe_id;
  
    if (hasSwipes) {
      // 如果有swipes数组
      if (currentSwipeId[message.floor] !== undefined) {
        // 如果用户已经切换过版本，使用用户选择的版本
        currentSwipeIndex = currentSwipeId[message.floor];
      } else {
        // 否则使用默认的swipe_id
        currentSwipeIndex = message.swipe_id;
      }
  
      if (currentSwipeIndex >= 0 && currentSwipeIndex < message.swipes.length) {
        currentMes = message.swipes[currentSwipeIndex];
      }
    }
  
    // ✅ 使用 id 或组合 key 确保唯一性
    const uniqueKey = message.id || `${message.floor}-${index}`;
  
    // ✅ 判断是否为最后一条消息（最后一楼）
    const isLastMessage = messages.length > 0 && message.floor === messages[messages.length - 1].floor;
  
    // 计算消息深度（从最新消息开始计数）
    const messageDepth = messages.length > 0 ? messages[messages.length - 1].floor - message.floor : 0;
      
    // ✅ 使用预处理后的消息内容（已应用 markdownOnly 正则）
    const displayMes = processedMessages[message.floor] || currentMes;
      
    return (
      <div 
        key={uniqueKey} 
        className={`message ${isUser ? 'user' : 'ai'}`}
        onContextMenu={(e) => handleContextMenu(e, message)}  // ✅ 添加右键菜单
      >
        {/* ✅ Swipe 控制按钮 - 仅在最后一楼显示 */}
        {hasSwipes && !isUser && isLastMessage && (
          <div className="swipe-controls-absolute">
            <button
              className="swipe-button-side"
              onClick={() => handleSwipeChange(message.floor, -1)}
              disabled={currentSwipeIndex === 0}
              title="上一个版本"
            >
              ◀
            </button>
            <span className="swipe-counter-side" title={`共 ${message.swipes.length} 个版本`}>
              {currentSwipeIndex + 1}/{message.swipes.length}
            </span>
            <button
              className="swipe-button-side"
              onClick={() => handleSwipeChange(message.floor, 1)}
              disabled={false}  // ✅ 始终启用，最后一个版本时点击会触发重roll
              title={currentSwipeIndex === message.swipes.length - 1 ? "生成新版本（重roll）" : "下一个版本"}
            >
              ▶
            </button>
          </div>
        )}
          
        <div className="message-container">
          <div className="message-header">
            <span className="message-name">{displayName}</span>
            <span className="message-id">#{message.floor}</span>
            {/* ✅ 移除工具栏按钮，改用右键菜单 */}
          </div>
          <div className="message-content">
            {isEditing ? (
              <div className="edit-container">
                <textarea
                  className="edit-textarea"
                  value={editContent}
                  onChange={(e) => updateEditContent(e.target.value)}
                />
                <div className="edit-buttons">
                  <button
                    className="cancel-button"
                    onClick={handleCancelEdit}
                  >
                    取消
                  </button>
                  <button
                    className="save-button"
                    onClick={() => handleSaveEdit(message.floor)}
                  >
                    保存
                  </button>
                </div>
              </div>
            ) : (
              <div className="bubble">
                {options.renderMode === 'html' && !isUser ? (
                  // ✅ HTML 渲染：只在检测到 HTML 标签时使用 dangerouslySetInnerHTML
                  // ✅ 如果是纯文本，使用 plain-text 模式显示（保留原始格式）
                  (() => {
                    const hasHtmlTags = /<[a-z][\s\S]*>/i.test(displayMes);
                    if (hasHtmlTags) {
                      // 如果包含 HTML 标签，直接渲染
                      return <div dangerouslySetInnerHTML={{ __html: displayMes }} />;
                    } else {
                      // 如果是纯文本，使用 pre-wrap 保留换行和空格
                      return <div className="plain-text">{displayMes}</div>;
                    }
                  })()
                ) : options.renderMode === 'markdown' ? (
                  // ✅ 使用 displayMes（已应用 markdownOnly 正则）
                  <MarkdownRenderer content={displayMes} />
                ) : (
                  // ✅ 纯文本模式
                  <div className="plain-text">{displayMes}</div>
                )}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="chat-box">
      <div className="chat-messages" ref={messagesContainerRef}>
        {isLoading ? (
          <div className="loading">加载中...</div>
        ) : error ? (
          <div className="error">{error}</div>
        ) : messages.length === 0 ? (
          <div className="loading">暂无消息</div>
        ) : (
          messages.map(renderMessage)
        )}
        <div ref={messagesEndRef} />
      </div>
      <div className="chat-input-wrapper">
        <div className="input-container">
          <div className="options-wrapper" ref={optionsRef}>
            <button
              className={`options-toggle ${showOptions ? 'active' : ''}`}
              title="Toggle Options"
              onClick={toggleOptions} // ✅ 使用 store 方法
            >
              {showOptions ? '×' : '≡'}
            </button>
            {showOptions && (
              <div className="chat-options">
                {/* 渲染模式切换按钮 */}
                <div className="option-group-title">显示</div>
                <button
                  className="render-mode-btn"
                  onClick={() => cycleRenderMode()}
                  title={`当前: ${options.renderMode === 'none' ? '纯文本' : options.renderMode === 'html' ? 'HTML' : 'Markdown'}，点击切换`}
                >
                  {options.renderMode === 'none' ? '📄 纯文本' : 
                   options.renderMode === 'html' ? '🌐 HTML' : 
                   '📝 Markdown'}
                </button>
                
                <div className="option-group-title">功能</div>
                <label className="option-checkbox">
                  <input
                    type="checkbox"
                    checked={options.streamOutput}
                    onChange={() => toggleOption('streamOutput')}
                  />
                  <span className="checkmark"></span>
                  <span className="option-label">流式输出</span>
                </label>
                <label className="option-checkbox">
                  <input
                    type="checkbox"
                    checked={options.dynamicTable}
                    onChange={() => toggleOption('dynamicTable')}
                  />
                  <span className="checkmark"></span>
                  <span className="option-label">动态表格</span>
                </label>
                
                {/* 自动掷骰子替换 */}
                <label className="option-checkbox">
                  <input
                    type="checkbox"
                    checked={options.autoDiceRoll}
                    onChange={() => toggleOption('autoDiceRoll')}
                  />
                  <span className="checkmark"></span>
                  <span className="option-label">🎲 自动掷骰子</span>
                </label>
                
                {/* 生图工作流选项 */}
                <label className="option-checkbox">
                  <input
                    type="checkbox"
                    checked={options.imageWorkflow}
                    onChange={() => toggleOption('imageWorkflow')}
                  />
                  <span className="checkmark"></span>
                  <span className="option-label">🎨 生图工作流</span>
                </label>
                
                {/* 分隔线 - 区分多选框和按钮区域 */}
                <div className="option-divider"></div>
                
                {/* 切换聊天按钮 */}
                <button 
                  className="switch-chat-btn"
                  onClick={handleOpenChatSelector}
                  title="切换到当前角色的最后聊天记录"
                >
                  💬 切换聊天
                </button>
              </div>
            )}
          </div>
          <div className="chat-input-area">
            <textarea
              className="message-input"
              value={inputValue}
              onChange={(e) => {
                setInputValue(e.target.value);
                handleInputHeight(e);
              }}
              onKeyDown={handleKeyDown}
              placeholder="Type your message..."
            />
          </div>
          <button
            className={`send-button ${isGenerating ? 'stopping' : ''}`}
            onClick={handleSendOrStop}
            disabled={!inputValue.trim() && !isGenerating}
            title="Send Message"
          >
            {isGenerating ? '■' : '>'}
          </button>
        </div>
      </div>
      
      {/* 聊天选择器弹窗 */}
      {showChatSelector && (
        <div className="chat-selector-overlay" onClick={() => setShowChatSelector(false)}>
          <div 
            className="chat-selector-modal" 
            ref={chatSelectorRef}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="chat-selector-header">
              <h3>{characterName || '未选择角色'} - 选择聊天</h3>
              <button 
                className="close-btn"
                onClick={() => setShowChatSelector(false)}
              >
                ×
              </button>
            </div>
            
            <div className="chat-selector-body">
              {/* 新建聊天按钮 */}
              <div className="chat-selector-actions">
                <button 
                  className="new-chat-btn"
                  onClick={handleCreateNewChat}
                >
                  + 新建聊天
                </button>
              </div>
              
              {characterChats.length > 0 ? (
                <div className="chat-list">
                  {characterChats.map((chat) => (
                    <div 
                      key={chat.chat_name} 
                      className="chat-option"
                    >
                      <div 
                        className="chat-option-content"
                        onClick={() => handleSelectChat(chat.chat_name)}
                      >
                        <div className="chat-option-name">{chat.chat_name}</div>
                        {chat.last_message && (
                          <div className="chat-option-preview">
                            {chat.last_message.substring(0, 100)}{chat.last_message.length > 100 ? '...' : ''}
                          </div>
                        )}
                      </div>
                      {/* ✅ 删除按钮 */}
                      <button
                        className="chat-delete-btn"
                        onClick={(e) => handleDeleteChat(chat.chat_name, e)}
                        title="删除此聊天"
                      >
                        🗑️
                      </button>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="empty-chats">
                  <p>暂无聊天记录</p>
                </div>
              )}
            </div>
          </div>
        </div>
      )}
      
      {/* ✅ 右键菜单 */}
      {contextMenu.visible && contextMenu.message && (
        <div 
          className="context-menu-overlay"
          onClick={closeContextMenu}
        >
          <div 
            className="context-menu"
            ref={contextMenuRef}
            style={{ 
              left: `${contextMenu.x}px`, 
              top: `${contextMenu.y}px` 
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <div className="context-menu-item" onClick={() => handleEditFromContext(contextMenu.message)}>
              <span className="menu-icon">✎</span>
              <span className="menu-label">编辑</span>
            </div>
            <div className="context-menu-item" onClick={() => handleCopyMessage(contextMenu.message)}>
              <span className="menu-icon">📋</span>
              <span className="menu-label">复制</span>
            </div>
            {/* ✅ 只有 AI 消息才显示重roll选项 */}
            {!contextMenu.message.is_user && (
              <div className="context-menu-item" onClick={() => handleRerollMessage(contextMenu.message)}>
                <span className="menu-icon">🔄</span>
                <span className="menu-label">重roll</span>
              </div>
            )}
            {/* ✅ 分支功能 - 所有消息都可以分支 */}
            <div className="context-menu-item" onClick={() => handleBranchChat(contextMenu.message)}>
              <span className="menu-icon">🌿</span>
              <span className="menu-label">分支</span>
            </div>
            <div className="context-menu-divider"></div>
            <div className="context-menu-item danger" onClick={() => handleDeleteMessage(contextMenu.message)}>
              <span className="menu-icon">🗑️</span>
              <span className="menu-label">删除</span>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default ChatBox;
