import React, { useState } from 'react';
import {
  Send,
  Upload,
  RotateCcw,
  Bookmark,
  History,
  Sparkles,
  BookOpen,
  Brain,
  GitCompare,
  ChevronDown,
  ChevronRight,
  MessageSquare,
  FileText,
  CheckCircle,
  AlertCircle,
} from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
import { PageType } from '../components/Sidebar';

type QAMode = 'single-round' | 'multi-round' | 'deep-search';
type CompareMode = 'compare-off' | 'compare-on';
type ViewMode = 'single' | 'compare';

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  sources?: SourceItem[];
}

interface SourceItem {
  title: string;
  type: string;
  snippet: string;
}

interface CompareResult {
  leftMode: QAMode;
  rightMode: QAMode;
  leftContent: string;
  rightContent: string;
  sources: {
    left: SourceItem[];
    right: SourceItem[];
  };
  differences?: {
    consensus: string;
    differences: string;
    leftAdvantage: string;
    rightAdvantage: string;
  };
}

const GeneralQA: React.FC<{ onNavigate: (page: PageType) => void }> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  // 状态管理
  const [viewMode, setViewMode] = useState<ViewMode>('single');
  const [qaMode, setQaMode] = useState<QAMode>('single-round');
  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
  const [compareRightMode, setCompareRightMode] = useState<QAMode>('deep-search');

  // 知识范围
  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');

  // 回答偏好
  const [answerStyle, setAnswerStyle] = useState<'concise' | 'detailed'>('detailed');
  const [showSources, setShowSources] = useState(true);
  const [showProcess, setShowProcess] = useState(false);
  const [autoSummary, setAutoSummary] = useState(false);

  // 对比设置
  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
  const [recommendBetter, setRecommendBetter] = useState(true);

  // 消息和结果
  const [messages, setMessages] = useState<Message[]>([]);
  const [inputValue, setInputValue] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [compareResult, setCompareResult] = useState<CompareResult | null>(null);

  // 检索过程展示
  const [searchProcess, setSearchProcess] = useState({
    currentMode: '单轮RAG',
    rounds: 1,
    hits: 5,
    queryRewrite: '',
  });

  // 示例消息
  const sampleMessages: Message[] = [
    {
      id: '1',
      role: 'user',
      content: 'RAG技术的工作原理是什么？',
      timestamp: new Date(),
    },
    {
      id: '2',
      role: 'assistant',
      content: 'RAG（检索增强生成）技术的工作原理主要包括以下几个步骤：\n\n1. **检索阶段**：系统首先将用户问题转换为查询向量，在知识库中进行相似度搜索，返回最相关的文档片段。\n\n2. **增强阶段**：将检索到的相关文档与原始问题组合，形成增强后的提示词上下文。\n\n3. **生成阶段**：将增强后的提示词发送给大语言模型，生成最终回答。\n\n这种方式可以有效解决LLM知识过时、幻觉等问题，提升回答的准确性和可信度。',
      timestamp: new Date(),
      sources: [
        { title: 'RAG技术白皮书', type: 'PDF', snippet: 'RAG是一种结合检索和生成的技术架构...' },
        { title: 'LLM应用实践', type: '文档', snippet: '检索增强生成可以有效提升回答质量...' },
      ],
    },
  ];

  const handleSend = () => {
    if (!inputValue.trim()) return;

    setIsLoading(true);

    // 模拟发送消息
    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: inputValue,
      timestamp: new Date(),
    };

    setMessages([...messages, userMessage]);
    setInputValue('');

    // 模拟AI响应
    setTimeout(() => {
      setMessages(prev => [...prev, ...sampleMessages]);
      setIsLoading(false);
      setSearchProcess({
        currentMode: qaMode === 'single-round' ? '单轮RAG' : qaMode === 'multi-round' ? '多轮RAG' : '深度检索',
        rounds: qaMode === 'multi-round' ? 3 : 1,
        hits: 5,
        queryRewrite: qaMode === 'deep-search' ? '原问题→分解子问题→独立检索→综合回答' : '',
      });
    }, 1500);
  };

  const handleCompare = () => {
    if (!inputValue.trim()) return;

    setIsLoading(true);

    // 模拟对比结果
    setTimeout(() => {
      setCompareResult({
        leftMode: compareLeftMode,
        rightMode: compareRightMode,
        leftContent: '单轮RAG回答：直接检索并生成答案，响应速度快，但可能遗漏跨文档的关联信息。适用于简单事实查询。',
        rightContent: '深度检索回答：通过问题分解、多轮检索和综合分析，提供更全面的答案。包含详细的推理过程和更多的引用来源。',
        sources: {
          left: [
            { title: 'RAG基础教程', type: '文档', snippet: '单轮RAG是最基础的检索增强方式...' },
          ],
          right: [
            { title: '高级RAG技术', type: '论文', snippet: '深度检索通过query改写和迭代优化...' },
            { title: 'RAG最佳实践', type: '指南', snippet: '多阶段检索可以显著提升召回率...' },
          ],
        },
        differences: {
          consensus: '两种方式都使用向量检索技术，都能引用原始文档',
          differences: '深度检索采用多轮查询改写，覆盖更全面',
          leftAdvantage: '响应更快，资源消耗更低',
          rightAdvantage: '答案更完整，引用更充分',
        },
      });
      setIsLoading(false);
    }, 2000);
  };

  const handleSaveRecord = () => {
    alert('问答记录已保存');
  };

  const handleCollect = () => {
    alert('已添加到收藏');
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      if (viewMode === 'compare') {
        handleCompare();
      } else {
        handleSend();
      }
    }
  };

  // 获取模式标签
  const getModeLabel = (mode: QAMode) => {
    switch (mode) {
      case 'single-round': return '单轮RAG';
      case 'multi-round': return '多轮RAG';
      case 'deep-search': return '深度检索';
    }
  };

  return (
    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
      {/* 顶部模式栏 */}
      <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
        <div className="flex items-center gap-4">
          <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
            通用问答
          </h1>
          <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
            支持单轮RAG、多轮RAG、深度检索及结果对比
          </span>
        </div>

        <div className="flex items-center gap-2">
          {/* 模式切换按钮 */}
          <div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
            <button
              onClick={() => setViewMode('single')}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
                viewMode === 'single'
                  ? isDark
                    ? 'bg-blue-600 text-white'
                    : 'bg-red-500 text-white'
                  : isDark
                    ? 'text-slate-400 hover:text-white'
                    : 'text-gray-600 hover:text-red-600'
              }`}
            >
              单一模式
            </button>
            <button
              onClick={() => setViewMode('compare')}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
                viewMode === 'compare'
                  ? isDark
                    ? 'bg-blue-600 text-white'
                    : 'bg-red-500 text-white'
                  : isDark
                    ? 'text-slate-400 hover:text-white'
                    : 'text-gray-600 hover:text-red-600'
              }`}
            >
              对比模式
            </button>
          </div>

          <button
            onClick={() => onNavigate('qa-records')}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
              isDark
                ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
            }`}
          >
            <History className="w-4 h-4" />
            历史记录
          </button>
        </div>
      </div>

      {/* 主体内容区 */}
      <div className="flex-1 flex overflow-hidden">
        {/* 左侧参数区 */}
        <div className={`w-72 border-r flex-shrink-0 overflow-y-auto p-4 ${
          isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
        }`}>
          {viewMode === 'single' ? (
            <>
              {/* 问答模式选择 */}
              <div className="mb-6">
                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                  问答模式
                </h3>
                <div className="space-y-2">
                  {[
                    { value: 'single-round', label: '单轮RAG', icon: Sparkles, desc: '快速直接' },
                    { value: 'multi-round', label: '多轮RAG', icon: Brain, desc: '深入理解' },
                    { value: 'deep-search', label: '深度检索', icon: BookOpen, desc: '全面分析' },
                  ].map((mode) => (
                    <button
                      key={mode.value}
                      onClick={() => setQaMode(mode.value as QAMode)}
                      className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all text-left ${
                        qaMode === mode.value
                          ? isDark
                            ? 'bg-blue-600/20 border border-blue-500/50 text-blue-400'
                            : 'bg-red-50 border border-red-200 text-red-600'
                          : isDark
                            ? 'bg-slate-700/30 border border-transparent text-slate-400 hover:bg-slate-700/50'
                            : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'
                      }`}
                    >
                      <mode.icon className="w-5 h-5" />
                      <div className="flex-1">
                        <div className="text-sm font-medium">{mode.label}</div>
                        <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{mode.desc}</div>
                      </div>
                    </button>
                  ))}
                </div>
              </div>
            </>
          ) : (
            <>
              {/* 对比模式设置 */}
              <div className="mb-6">
                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                  对比模式设置
                </h3>

                {/* 左侧模式 */}
                <div className="mb-4">
                  <label className={`text-xs mb-2 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                    模式A
                  </label>
                  <select
                    value={compareLeftMode}
                    onChange={(e) => setCompareLeftMode(e.target.value as QAMode)}
                    className={`w-full px-3 py-2 rounded-lg text-sm ${
                      isDark
                        ? 'bg-slate-700/50 border border-slate-600 text-white'
                        : 'bg-white border border-gray-200 text-gray-700'
                    }`}
                  >
                    <option value="single-round">单轮RAG</option>
                    <option value="multi-round">多轮RAG</option>
                    <option value="deep-search">深度检索</option>
                  </select>
                </div>

                <div className={`text-center my-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                  <span className="text-lg">VS</span>
                </div>

                {/* 右侧模式 */}
                <div className="mb-4">
                  <label className={`text-xs mb-2 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                    模式B
                  </label>
                  <select
                    value={compareRightMode}
                    onChange={(e) => setCompareRightMode(e.target.value as QAMode)}
                    className={`w-full px-3 py-2 rounded-lg text-sm ${
                      isDark
                        ? 'bg-slate-700/50 border border-slate-600 text-white'
                        : 'bg-white border border-gray-200 text-gray-700'
                    }`}
                  >
                    <option value="single-round">单轮RAG</option>
                    <option value="multi-round">多轮RAG</option>
                    <option value="deep-search">深度检索</option>
                  </select>
                </div>
              </div>

              {/* 对比布局 */}
              <div className="mb-6">
                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                  对比布局
                </h3>
                <div className="flex gap-2">
                  <button
                    onClick={() => setCompareLayout('horizontal')}
                    className={`flex-1 px-3 py-2 rounded-lg text-sm transition-all ${
                      compareLayout === 'horizontal'
                        ? isDark
                          ? 'bg-blue-600 text-white'
                          : 'bg-red-500 text-white'
                        : isDark
                          ? 'bg-slate-700/50 text-slate-300'
                          : 'bg-gray-100 text-gray-600'
                    }`}
                  >
                    左右对比
                  </button>
                  <button
                    onClick={() => setCompareLayout('vertical')}
                    className={`flex-1 px-3 py-2 rounded-lg text-sm transition-all ${
                      compareLayout === 'vertical'
                        ? isDark
                          ? 'bg-blue-600 text-white'
                          : 'bg-red-500 text-white'
                        : isDark
                          ? 'bg-slate-700/50 text-slate-300'
                          : 'bg-gray-100 text-gray-600'
                    }`}
                  >
                    上下对比
                  </button>
                </div>
              </div>
            </>
          )}

          {/* 知识范围 */}
          <div className="mb-6">
            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
              知识范围
            </h3>
            <div className="space-y-2">
              {[
                { value: 'all', label: '全部知识源' },
                { value: 'specific-kb', label: '指定知识库' },
                { value: 'specific-domain', label: '指定资源域' },
              ].map((option) => (
                <label
                  key={option.value}
                  className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
                    knowledgeScope === option.value
                      ? isDark
                        ? 'bg-blue-600/20 text-blue-400'
                        : 'bg-red-50 text-red-600'
                      : isDark
                        ? 'text-slate-400 hover:bg-slate-700/30'
                        : 'text-gray-600 hover:bg-gray-50'
                  }`}
                >
                  <input
                    type="radio"
                    name="knowledge-scope"
                    checked={knowledgeScope === option.value}
                    onChange={() => setKnowledgeScope(option.value as any)}
                    className="sr-only"
                  />
                  <div className={`w-4 h-4 rounded-full border-2 flex items-center justify-center ${
                    knowledgeScope === option.value
                      ? isDark
                        ? 'border-blue-500 bg-blue-500'
                        : 'border-red-500 bg-red-500'
                      : isDark
                        ? 'border-slate-500'
                        : 'border-gray-300'
                  }`}>
                    {knowledgeScope === option.value && (
                      <div className="w-1.5 h-1.5 rounded-full bg-white" />
                    )}
                  </div>
                  <span className="text-sm">{option.label}</span>
                </label>
              ))}
            </div>
          </div>

          {/* 回答偏好 */}
          <div className="mb-6">
            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
              回答偏好
            </h3>
            <div className="space-y-3">
              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
                isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
              }`}>
                <input
                  type="checkbox"
                  checked={answerStyle === 'detailed'}
                  onChange={() => setAnswerStyle(answerStyle === 'detailed' ? 'concise' : 'detailed')}
                  className="sr-only"
                />
                <div className={`w-4 h-4 rounded border flex items-center justify-center ${
                  answerStyle === 'detailed'
                    ? isDark
                      ? 'bg-blue-500 border-blue-500'
                      : 'bg-red-500 border-red-500'
                    : isDark
                      ? 'border-slate-500'
                      : 'border-gray-300'
                }`}>
                  {answerStyle === 'detailed' && (
                    <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                    </svg>
                  )}
                </div>
                <span className="text-sm">详细回答</span>
              </label>

              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
                isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
              }`}>
                <input
                  type="checkbox"
                  checked={showSources}
                  onChange={() => setShowSources(!showSources)}
                  className="sr-only"
                />
                <div className={`w-4 h-4 rounded border flex items-center justify-center ${
                  showSources
                    ? isDark
                      ? 'bg-blue-500 border-blue-500'
                      : 'bg-red-500 border-red-500'
                    : isDark
                      ? 'border-slate-500'
                      : 'border-gray-300'
                }`}>
                  {showSources && (
                    <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                    </svg>
                  )}
                </div>
                <span className="text-sm">展示引用来源</span>
              </label>

              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
                isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
              }`}>
                <input
                  type="checkbox"
                  checked={showProcess}
                  onChange={() => setShowProcess(!showProcess)}
                  className="sr-only"
                />
                <div className={`w-4 h-4 rounded border flex items-center justify-center ${
                  showProcess
                    ? isDark
                      ? 'bg-blue-500 border-blue-500'
                      : 'bg-red-500 border-red-500'
                    : isDark
                      ? 'border-slate-500'
                      : 'border-gray-300'
                }`}>
                  {showProcess && (
                    <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                    </svg>
                  )}
                </div>
                <span className="text-sm">展示检索过程</span>
              </label>
            </div>
          </div>

          {/* 对比设置 - 仅对比模式 */}
          {viewMode === 'compare' && (
            <div className="mb-6">
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                对比设置
              </h3>
              <div className="space-y-3">
                <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
                  isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
                }`}>
                  <input
                    type="checkbox"
                    checked={autoSummarizeDiff}
                    onChange={() => setAutoSummarizeDiff(!autoSummarizeDiff)}
                    className="sr-only"
                  />
                  <div className={`w-4 h-4 rounded border flex items-center justify-center ${
                    autoSummarizeDiff
                      ? isDark
                        ? 'bg-blue-500 border-blue-500'
                        : 'bg-red-500 border-red-500'
                      : isDark
                        ? 'border-slate-500'
                        : 'border-gray-300'
                  }`}>
                    {autoSummarizeDiff && (
                      <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                  </div>
                  <span className="text-sm">自动总结差异</span>
                </label>

                <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${
                  isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'
                }`}>
                  <input
                    type="checkbox"
                    checked={recommendBetter}
                    onChange={() => setRecommendBetter(!recommendBetter)}
                    className="sr-only"
                  />
                  <div className={`w-4 h-4 rounded border flex items-center justify-center ${
                    recommendBetter
                      ? isDark
                        ? 'bg-blue-500 border-blue-500'
                        : 'bg-red-500 border-red-500'
                      : isDark
                        ? 'border-slate-500'
                        : 'border-gray-300'
                  }`}>
                    {recommendBetter && (
                      <svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
                      </svg>
                    )}
                  </div>
                  <span className="text-sm">推荐更优答案</span>
                </label>
              </div>
            </div>
          )}
        </div>

        {/* 中间结果区 */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {viewMode === 'single' ? (
            <>
              {/* 聊天消息区 */}
              <div className="flex-1 overflow-y-auto p-4 space-y-4">
                {messages.length === 0 ? (
                  <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                    <MessageSquare className="w-16 h-16 mb-4 opacity-50" />
                    <p className="text-lg">开始你的问答</p>
                    <p className="text-sm mt-2">输入问题，获取基于知识库的智能回答</p>
                  </div>
                ) : (
                  messages.map((msg) => (
                    <div key={msg.id} className="space-y-3">
                      {/* 用户消息 */}
                      <div className={`flex gap-3 ${msg.role === 'user' ? 'justify-end' : ''}`}>
                        {msg.role === 'assistant' && (
                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
                            isDark ? 'bg-blue-600/20 text-blue-400' : 'bg-red-100 text-red-500'
                          }`}>
                            <Brain className="w-4 h-4" />
                          </div>
                        )}
                        <div className={`max-w-[70%] rounded-xl px-4 py-3 ${
                          msg.role === 'user'
                            ? isDark
                              ? 'bg-blue-600/30 text-white'
                              : 'bg-red-500 text-white'
                            : isDark
                              ? 'bg-slate-700/50 text-slate-200'
                              : 'bg-gray-100 text-gray-800'
                        }`}>
                          <p className="whitespace-pre-wrap">{msg.content}</p>
                        </div>
                        {msg.role === 'user' && (
                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
                            isDark ? 'bg-slate-700 text-slate-300' : 'bg-gray-200 text-gray-600'
                          }`}>
                            <div className="w-4 h-4 rounded-full bg-current" />
                          </div>
                        )}
                      </div>

                      {/* 来源信息 */}
                      {msg.role === 'assistant' && msg.sources && showSources && (
                        <div className={`ml-11 p-3 rounded-lg ${isDark ? 'bg-slate-800/50' : 'bg-gray-50'}`}>
                          <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                            引用来源
                          </h4>
                          <div className="space-y-2">
                            {msg.sources.map((source, idx) => (
                              <div key={idx} className={`text-xs p-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
                                <div className="flex items-center gap-2 mb-1">
                                  <FileText className={`w-3 h-3 ${isDark ? 'text-blue-400' : 'text-red-400'}`} />
                                  <span className={`font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                                    {source.title}
                                  </span>
                                  <span className={`px-1.5 py-0.5 rounded text-xs ${
                                    isDark ? 'bg-slate-600 text-slate-400' : 'bg-gray-200 text-gray-500'
                                  }`}>
                                    {source.type}
                                  </span>
                                </div>
                                <p className={isDark ? 'text-slate-400' : 'text-gray-500'}>{source.snippet}</p>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  ))
                )}

                {isLoading && (
                  <div className="flex gap-3">
                    <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                      isDark ? 'bg-blue-600/20 text-blue-400' : 'bg-red-100 text-red-500'
                    }`}>
                      <Brain className="w-4 h-4" />
                    </div>
                    <div className={`max-w-[70%] rounded-xl px-4 py-3 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
                      <div className="flex gap-1">
                        <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '0ms' }} />
                        <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '150ms' }} />
                        <div className={`w-2 h-2 rounded-full animate-bounce ${isDark ? 'bg-slate-500' : 'bg-gray-400'}`} style={{ animationDelay: '300ms' }} />
                      </div>
                    </div>
                  </div>
                )}
              </div>
            </>
          ) : (
            <>
              {/* 对比结果区 */}
              <div className="flex-1 overflow-y-auto p-4">
                {compareResult ? (
                  compareLayout === 'horizontal' ? (
                    <div className="grid grid-cols-2 gap-4 h-full">
                      {/* 左侧结果 */}
                      <div className={`rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
                          <div className="flex items-center gap-2">
                            <span className={`px-2 py-1 rounded text-xs font-medium ${
                              isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
                            }`}>
                              {getModeLabel(compareResult.leftMode)}
                            </span>
                          </div>
                        </div>
                        <div className="p-4">
                          <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                            {compareResult.leftContent}
                          </p>

                          {/* 左侧来源 */}
                          <div className={`mt-4 pt-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
                            <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                              引用来源
                            </h4>
                            <div className="space-y-2">
                              {compareResult.sources.left.map((source, idx) => (
                                <div key={idx} className={`text-xs p-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
                                  <span className={`font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                                    {source.title}
                                  </span>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </div>

                      {/* 右侧结果 */}
                      <div className={`rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
                          <div className="flex items-center gap-2">
                            <span className={`px-2 py-1 rounded text-xs font-medium ${
                              isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
                            }`}>
                              {getModeLabel(compareResult.rightMode)}
                            </span>
                          </div>
                        </div>
                        <div className="p-4">
                          <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                            {compareResult.rightContent}
                          </p>

                          {/* 右侧来源 */}
                          <div className={`mt-4 pt-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
                            <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                              引用来源
                            </h4>
                            <div className="space-y-2">
                              {compareResult.sources.right.map((source, idx) => (
                                <div key={idx} className={`text-xs p-2 rounded ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
                                  <span className={`font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                                    {source.title}
                                  </span>
                                </div>
                              ))}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {/* 上方结果 */}
                      <div className={`rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
                          <span className={`px-2 py-1 rounded text-xs font-medium ${
                            isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
                          }`}>
                            {getModeLabel(compareResult.leftMode)}
                          </span>
                        </div>
                        <div className="p-4">
                          <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                            {compareResult.leftContent}
                          </p>
                        </div>
                      </div>

                      {/* 下方结果 */}
                      <div className={`rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
                        <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
                          <span className={`px-2 py-1 rounded text-xs font-medium ${
                            isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
                          }`}>
                            {getModeLabel(compareResult.rightMode)}
                          </span>
                        </div>
                        <div className="p-4">
                          <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                            {compareResult.rightContent}
                          </p>
                        </div>
                      </div>
                    </div>
                  )
                ) : (
                  <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                    <GitCompare className="w-16 h-16 mb-4 opacity-50" />
                    <p className="text-lg">对比模式</p>
                    <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
                  </div>
                )}
              </div>
            </>
          )}

          {/* 底部输入区 */}
          <div className={`border-t p-4 ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
            <div className={`flex items-end gap-3 rounded-xl p-3 ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
              <textarea
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
                onKeyDown={handleKeyDown}
                placeholder={viewMode === 'compare' ? '输入问题进行对比分析...' : '输入你的问题...'}
                rows={1}
                className={`flex-1 bg-transparent resize-none focus:outline-none ${
                  isDark ? 'text-white placeholder-slate-500' : 'text-gray-800 placeholder-gray-400'
                }`}
              />

              <div className="flex items-center gap-2">
                <button className={`p-2 rounded-lg transition-colors ${
                  isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
                }`}>
                  <Upload className="w-5 h-5" />
                </button>

                <button
                  onClick={() => {
                    setMessages([]);
                    setCompareResult(null);
                  }}
                  className={`p-2 rounded-lg transition-colors ${
                    isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
                  }`}
                  title="重新提问"
                >
                  <RotateCcw className="w-5 h-5" />
                </button>

                <button
                  onClick={handleSaveRecord}
                  className={`p-2 rounded-lg transition-colors ${
                    isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
                  }`}
                  title="保存记录"
                >
                  <Bookmark className="w-5 h-5" />
                </button>

                <button
                  onClick={handleCollect}
                  className={`p-2 rounded-lg transition-colors ${
                    isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'
                  }`}
                  title="加入收藏"
                >
                  <Bookmark className="w-5 h-5" />
                </button>

                <button
                  onClick={viewMode === 'compare' ? handleCompare : handleSend}
                  disabled={!inputValue.trim() || isLoading}
                  className={`px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 ${
                    inputValue.trim() && !isLoading
                      ? isDark
                        ? 'bg-blue-600 hover:bg-blue-700 text-white'
                        : 'bg-red-500 hover:bg-red-600 text-white'
                      : isDark
                        ? 'bg-slate-600 text-slate-400'
                        : 'bg-gray-300 text-gray-500'
                  }`}
                >
                  <Send className="w-4 h-4" />
                  发送
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* 右侧辅助区 */}
        {viewMode === 'single' && showProcess && (
          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${
            isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
          }`}>
            {/* 检索过程 */}
            <div className="mb-6">
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                检索过程
              </h3>
              <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
                    <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
                      {searchProcess.currentMode}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      {searchProcess.rounds}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      {searchProcess.hits}
                    </span>
                  </div>
                  {searchProcess.queryRewrite && (
                    <div>
                      <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>Query改写</span>
                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                        {searchProcess.queryRewrite}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* 对比模式的差异总结 */}
        {viewMode === 'compare' && compareResult?.differences && (
          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${
            isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
          }`}>
            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
              差异总结
            </h3>
            <div className={`p-4 rounded-xl space-y-4 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
              <div>
                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
                  <CheckCircle className="w-3 h-3" />
                  一致观点
                </span>
                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                  {compareResult.differences.consensus}
                </p>
              </div>
              <div>
                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
                  <AlertCircle className="w-3 h-3" />
                  差异观点
                </span>
                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                  {compareResult.differences.differences}
                </p>
              </div>
              <div>
                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
                  {getModeLabel(compareResult.leftMode)}优势
                </span>
                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                  {compareResult.differences.leftAdvantage}
                </p>
              </div>
              <div>
                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
                  {getModeLabel(compareResult.rightMode)}优势
                </span>
                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                  {compareResult.differences.rightAdvantage}
                </p>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default GeneralQA;