import React, { useState } from 'react';
import {
  Search,
  Bookmark,
  BookmarkCheck,
  Copy,
  Download,
  MessageSquare,
  Bot,
  History,
  Calendar,
  Filter,
  ChevronDown,
  GitCompare,
  FileText,
  ArrowRight,
  X,
  Star,
  CheckCircle,
  AlertCircle,
  Send,
} from 'lucide-react';
import { useTheme } from '../contexts/ThemeContext';
import { PageType } from '../components/Sidebar';

type RecordType = 'all' | 'general' | 'agent';
type ModeType = 'all' | 'single-round' | 'multi-round' | 'deep-search' | 'compare';
type CollectionStatus = 'all' | 'collected';

interface QARecord {
  id: string;
  type: 'general' | 'agent';
  mode: 'single-round' | 'multi-round' | 'deep-search' | 'compare';
  question: string;
  answer: string;
  agentName?: string;
  createTime: Date;
  isCollected: boolean;
  isHighValue: boolean;
  isReusable: boolean;
  isConvertible: boolean;
  notes?: string;
  evaluation?: string;
  sources?: string[];
}

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

  // 模拟问答记录数据
  const mockRecords: QARecord[] = [
    {
      id: '1',
      type: 'general',
      mode: 'compare',
      question: 'RAG技术的工作原理是什么？',
      answer: '单轮RAG回答：直接检索并生成答案，响应速度快...',
      createTime: new Date('2026-03-19 14:30'),
      isCollected: true,
      isHighValue: true,
      isReusable: true,
      isConvertible: true,
      sources: ['RAG技术白皮书', 'LLM应用实践'],
    },
    {
      id: '2',
      type: 'agent',
      mode: 'single-round',
      question: '目标受众应如何分层？',
      answer: '基于受众分析智能体的专业能力，识别出核心受众特征...',
      agentName: 'AudienceAgent',
      createTime: new Date('2026-03-19 10:20'),
      isCollected: false,
      isHighValue: true,
      isReusable: true,
      isConvertible: true,
    },
    {
      id: '3',
      type: 'general',
      mode: 'deep-search',
      question: '品牌年轻化传播策略有哪些？',
      answer: '通过深度检索分析，总结出以下品牌年轻化传播策略...',
      createTime: new Date('2026-03-18 16:45'),
      isCollected: true,
      isHighValue: false,
      isReusable: false,
      isConvertible: false,
      notes: '需要进一步补充具体案例',
    },
    {
      id: '4',
      type: 'agent',
      mode: 'multi-round',
      question: '如何制定有效的用户激活策略？',
      answer: '通过多轮对话深入分析，制定以下用户激活策略...',
      agentName: 'ChannelAgent',
      createTime: new Date('2026-03-18 11:15'),
      isCollected: false,
      isHighValue: true,
      isReusable: true,
      isConvertible: true,
      evaluation: '策略实用性强，建议转化任务执行',
    },
    {
      id: '5',
      type: 'general',
      mode: 'single-round',
      question: '内容营销的最佳实践是什么？',
      answer: '内容营销最佳实践包括：明确目标受众、创造高质量内容...',
      createTime: new Date('2026-03-17 09:00'),
      isCollected: false,
      isHighValue: false,
      isReusable: true,
      isConvertible: false,
    },
  ];

  // 状态
  const [records, setRecords] = useState<QARecord[]>(mockRecords);
  const [selectedRecord, setSelectedRecord] = useState<QARecord | null>(mockRecords[0]);
  const [searchQuery, setSearchQuery] = useState('');
  const [recordType, setRecordType] = useState<RecordType>('all');
  const [modeType, setModeType] = useState<ModeType>('all');
  const [collectionStatus, setCollectionStatus] = useState<CollectionStatus>('all');
  const [timeRange, setTimeRange] = useState('all');
  const [notesInput, setNotesInput] = useState('');

  // 筛选记录
  const filteredRecords = records.filter((record) => {
    // 搜索过滤
    if (searchQuery && !record.question.toLowerCase().includes(searchQuery.toLowerCase())) {
      return false;
    }
    // 类型过滤
    if (recordType !== 'all' && record.type !== recordType) {
      return false;
    }
    // 模式过滤
    if (modeType !== 'all' && record.mode !== modeType) {
      return false;
    }
    // 收藏状态过滤
    if (collectionStatus === 'collected' && !record.isCollected) {
      return false;
    }
    return true;
  });

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

  // 获取模式颜色
  const getModeColor = (mode: QARecord['mode']) => {
    switch (mode) {
      case 'single-round':
        return isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600';
      case 'multi-round':
        return isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600';
      case 'deep-search':
        return isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600';
      case 'compare':
        return isDark ? 'bg-orange-600/30 text-orange-400' : 'bg-orange-100 text-orange-600';
    }
  };

  // 切换收藏
  const toggleCollect = (recordId: string) => {
    setRecords(records.map(record =>
      record.id === recordId ? { ...record, isCollected: !record.isCollected } : record
    ));
    if (selectedRecord?.id === recordId) {
      setSelectedRecord({ ...selectedRecord, isCollected: !selectedRecord.isCollected });
    }
  };

  // 复制问题
  const copyQuestion = (question: string) => {
    navigator.clipboard.writeText(question);
    alert('问题已复制');
  };

  // 导出记录
  const exportRecord = (record: QARecord) => {
    alert(`导出记录: ${record.question.substring(0, 20)}...`);
  };

  // 转到任务
  const convertToTask = (record: QARecord, taskType: 'single' | 'consult' | 'scene') => {
    const messages = {
      single: '单智能体任务',
      consult: '多智能体会商',
      scene: '场景任务',
    };
    alert(`已转为${messages[taskType]}`);
  };

  // 格式化时间
  const formatTime = (date: Date) => {
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));

    if (days === 0) {
      return `今天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
    } else if (days === 1) {
      return `昨天 ${date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
    } else if (days < 7) {
      return `${days}天前`;
    } else {
      return date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
    }
  };

  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'}`}>
            查看历史问答、对比结果与高价值记录
          </span>
        </div>

        {/* 筛选控件 */}
        <div className="flex items-center gap-3">
          {/* 搜索框 */}
          <div className={`relative ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'} rounded-lg`}>
            <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder="搜索问题关键词..."
              className={`w-64 pl-10 pr-4 py-2 rounded-lg text-sm focus:outline-none ${
                isDark
                  ? 'bg-transparent text-white placeholder-slate-500'
                  : 'bg-transparent text-gray-800 placeholder-gray-400'
              }`}
            />
          </div>

          {/* 记录类型 */}
          <div className="relative">
            <select
              value={recordType}
              onChange={(e) => setRecordType(e.target.value as RecordType)}
              className={`appearance-none px-4 py-2 pr-10 rounded-lg text-sm cursor-pointer ${
                isDark
                  ? 'bg-slate-700/50 text-slate-300 border border-slate-600'
                  : 'bg-gray-100 text-gray-700 border border-gray-200'
              }`}
            >
              <option value="all">全部类型</option>
              <option value="general">通用问答</option>
              <option value="agent">智能体问答</option>
            </select>
            <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${
              isDark ? 'text-slate-400' : 'text-gray-400'
            }`} />
          </div>

          {/* 模式 */}
          <div className="relative">
            <select
              value={modeType}
              onChange={(e) => setModeType(e.target.value as ModeType)}
              className={`appearance-none px-4 py-2 pr-10 rounded-lg text-sm cursor-pointer ${
                isDark
                  ? 'bg-slate-700/50 text-slate-300 border border-slate-600'
                  : 'bg-gray-100 text-gray-700 border border-gray-200'
              }`}
            >
              <option value="all">全部模式</option>
              <option value="single-round">单轮RAG</option>
              <option value="multi-round">多轮RAG</option>
              <option value="deep-search">深度检索</option>
              <option value="compare">对比记录</option>
            </select>
            <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${
              isDark ? 'text-slate-400' : 'text-gray-400'
            }`} />
          </div>

          {/* 收藏状态 */}
          <div className="relative">
            <select
              value={collectionStatus}
              onChange={(e) => setCollectionStatus(e.target.value as CollectionStatus)}
              className={`appearance-none px-4 py-2 pr-10 rounded-lg text-sm cursor-pointer ${
                isDark
                  ? 'bg-slate-700/50 text-slate-300 border border-slate-600'
                  : 'bg-gray-100 text-gray-700 border border-gray-200'
              }`}
            >
              <option value="all">全部</option>
              <option value="collected">已收藏</option>
            </select>
            <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${
              isDark ? 'text-slate-400' : 'text-gray-400'
            }`} />
          </div>

          {/* 时间范围 */}
          <div className="relative">
            <select
              value={timeRange}
              onChange={(e) => setTimeRange(e.target.value)}
              className={`appearance-none px-4 py-2 pr-10 rounded-lg text-sm cursor-pointer ${
                isDark
                  ? 'bg-slate-700/50 text-slate-300 border border-slate-600'
                  : 'bg-gray-100 text-gray-700 border border-gray-200'
              }`}
            >
              <option value="all">全部时间</option>
              <option value="today">今天</option>
              <option value="week">本周</option>
              <option value="month">本月</option>
            </select>
            <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none ${
              isDark ? 'text-slate-400' : 'text-gray-400'
            }`} />
          </div>
        </div>
      </div>

      {/* 主体内容区 */}
      <div className="flex-1 flex overflow-hidden">
        {/* 左侧记录列表 */}
        <div className={`w-80 border-r flex-shrink-0 overflow-y-auto ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
          <div className="p-4">
            <div className="space-y-2">
              {filteredRecords.map((record) => (
                <button
                  key={record.id}
                  onClick={() => {
                    setSelectedRecord(record);
                    setNotesInput(record.notes || '');
                  }}
                  className={`w-full text-left p-3 rounded-lg transition-all ${
                    selectedRecord?.id === record.id
                      ? isDark
                        ? 'bg-blue-600/20 border border-blue-500/50'
                        : 'bg-red-50 border border-red-200'
                      : isDark
                        ? 'bg-slate-700/30 border border-transparent hover:bg-slate-700/50'
                        : 'bg-white border border-gray-200 hover:bg-gray-50'
                  }`}
                >
                  <div className="flex items-start gap-2 mb-2">
                    <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
                      record.type === 'general'
                        ? isDark
                          ? 'bg-blue-600/30 text-blue-400'
                          : 'bg-blue-100 text-blue-600'
                        : isDark
                          ? 'bg-purple-600/30 text-purple-400'
                          : 'bg-purple-100 text-purple-600'
                    }`}>
                      {record.type === 'general' ? '通用问答' : '智能体'}
                    </span>
                    <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${getModeColor(record.mode)}`}>
                      {getModeLabel(record.mode)}
                    </span>
                    {record.isCollected && (
                      <BookmarkCheck className={`w-3.5 h-3.5 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
                    )}
                  </div>

                  <p className={`text-sm line-clamp-2 ${isDark ? 'text-slate-200' : 'text-gray-800'}`}>
                    {record.question}
                  </p>

                  <div className={`flex items-center gap-2 mt-2 text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                    <Calendar className="w-3 h-3" />
                    <span>{formatTime(record.createTime)}</span>
                    {record.agentName && (
                      <>
                        <span>·</span>
                        <Bot className="w-3 h-3" />
                        <span>{record.agentName}</span>
                      </>
                    )}
                  </div>

                  {/* 标签 */}
                  <div className="flex items-center gap-1 mt-2">
                    {record.isHighValue && (
                      <span className={`px-1.5 py-0.5 rounded text-xs ${
                        isDark ? 'bg-yellow-600/30 text-yellow-400' : 'bg-yellow-100 text-yellow-600'
                      }`}>
                        高价值
                      </span>
                    )}
                    {record.isReusable && (
                      <span className={`px-1.5 py-0.5 rounded text-xs ${
                        isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
                      }`}>
                        可复用
                      </span>
                    )}
                    {record.isConvertible && (
                      <span className={`px-1.5 py-0.5 rounded text-xs ${
                        isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
                      }`}>
                        可转任务
                      </span>
                    )}
                  </div>
                </button>
              ))}
            </div>

            {filteredRecords.length === 0 && (
              <div className={`text-center py-8 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                <History className="w-12 h-12 mx-auto mb-3 opacity-50" />
                <p>暂无匹配记录</p>
              </div>
            )}
          </div>
        </div>

        {/* 中间记录详情 */}
        <div className="flex-1 overflow-y-auto p-6">
          {selectedRecord ? (
            <div className="max-w-3xl mx-auto">
              {/* 问题 */}
              <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
                <div className="flex items-center gap-2 mb-2">
                  <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
                    isDark ? 'bg-slate-600 text-slate-300' : 'bg-gray-200 text-gray-600'
                  }`}>
                    问题
                  </span>
                </div>
                <p className={`text-lg ${isDark ? 'text-white' : 'text-gray-900'}`}>
                  {selectedRecord.question}
                </p>
              </div>

              {/* 回答 */}
              <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
                <div className="flex items-center gap-2 mb-2">
                  <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
                    isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
                  }`}>
                    {selectedRecord.type === 'general' ? 'RAG回答' : '智能体回答'}
                  </span>
                  <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${getModeColor(selectedRecord.mode)}`}>
                    {getModeLabel(selectedRecord.mode)}
                  </span>
                  {selectedRecord.agentName && (
                    <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${
                      isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
                    }`}>
                      {selectedRecord.agentName}
                    </span>
                  )}
                </div>
                <p className={`whitespace-pre-wrap ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                  {selectedRecord.answer}
                </p>
              </div>

              {/* 来源摘要 */}
              {selectedRecord.sources && selectedRecord.sources.length > 0 && (
                <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-slate-700/50' : 'bg-gray-50'}`}>
                  <div className="flex items-center gap-2 mb-2">
                    <FileText className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`} />
                    <span className={`text-sm font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      来源摘要
                    </span>
                  </div>
                  <div className="flex flex-wrap gap-2">
                    {selectedRecord.sources.map((source, idx) => (
                      <span
                        key={idx}
                        className={`px-3 py-1 rounded-lg text-sm ${
                          isDark ? 'bg-slate-600/50 text-slate-300' : 'bg-white text-gray-600 border border-gray-200'
                        }`}
                      >
                        {source}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {/* 评价 */}
              {selectedRecord.evaluation && (
                <div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-yellow-600/20 border border-yellow-600/30' : 'bg-yellow-50 border border-yellow-200'}`}>
                  <div className="flex items-center gap-2 mb-2">
                    <Star className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
                    <span className={`text-sm font-medium ${isDark ? 'text-yellow-400' : 'text-yellow-700'}`}>
                      人工评价
                    </span>
                  </div>
                  <p className={`text-sm ${isDark ? 'text-yellow-300' : 'text-yellow-700'}`}>
                    {selectedRecord.evaluation}
                  </p>
                </div>
              )}
            </div>
          ) : (
            <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>
            </div>
          )}
        </div>

        {/* 右侧操作与标签区 */}
        <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'}`}>
          {selectedRecord ? (
            <>
              {/* 记录标签 */}
              <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">
                  <button
                    onClick={() => toggleCollect(selectedRecord.id)}
                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                      selectedRecord.isCollected
                        ? isDark
                          ? 'bg-yellow-600/20 border border-yellow-600/50'
                          : 'bg-yellow-50 border border-yellow-200'
                        : isDark
                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-600/50'
                          : 'bg-white border border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    {selectedRecord.isCollected ? (
                      <BookmarkCheck className={`w-5 h-5 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
                    ) : (
                      <Bookmark className={`w-5 h-5 ${isDark ? 'text-slate-400' : 'text-gray-400'}`} />
                    )}
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      {selectedRecord.isCollected ? '已收藏' : '收藏'}
                    </span>
                  </button>

                  <button
                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                      selectedRecord.isHighValue
                        ? isDark
                          ? 'bg-yellow-600/20 border border-yellow-600/50'
                          : 'bg-yellow-50 border border-yellow-200'
                        : isDark
                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-600/50'
                          : 'bg-white border border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    <Star className={`w-5 h-5 ${selectedRecord.isHighValue ? (isDark ? 'text-yellow-400' : 'text-yellow-500') : (isDark ? 'text-slate-400' : 'text-gray-400')}`} />
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      高价值
                    </span>
                  </button>

                  <button
                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                      selectedRecord.isReusable
                        ? isDark
                          ? 'bg-green-600/20 border border-green-600/50'
                          : 'bg-green-50 border border-green-200'
                        : isDark
                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-600/50'
                          : 'bg-white border border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    <Copy className={`w-5 h-5 ${selectedRecord.isReusable ? (isDark ? 'text-green-400' : 'text-green-500') : (isDark ? 'text-slate-400' : 'text-gray-400')}`} />
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      可复用
                    </span>
                  </button>

                  <button
                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                      selectedRecord.isConvertible
                        ? isDark
                          ? 'bg-blue-600/20 border border-blue-600/50'
                          : 'bg-blue-50 border border-blue-200'
                        : isDark
                          ? 'bg-slate-700/50 border border-transparent hover:bg-slate-600/50'
                          : 'bg-white border border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    <ArrowRight className={`w-5 h-5 ${selectedRecord.isConvertible ? (isDark ? 'text-blue-400' : 'text-blue-500') : (isDark ? 'text-slate-400' : 'text-gray-400')}`} />
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      可转任务
                    </span>
                  </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">
                  <button
                    onClick={() => toggleCollect(selectedRecord.id)}
                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                      isDark
                        ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300'
                        : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-200'
                    }`}
                  >
                    {selectedRecord.isCollected ? (
                      <>
                        <BookmarkCheck className="w-5 h-5 text-yellow-500" />
                        <span className="text-sm">取消收藏</span>
                      </>
                    ) : (
                      <>
                        <Bookmark className="w-5 h-5" />
                        <span className="text-sm">收藏</span>
                      </>
                    )}
                  </button>

                  <button
                    onClick={() => exportRecord(selectedRecord)}
                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                      isDark
                        ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300'
                        : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-200'
                    }`}
                  >
                    <Download className="w-5 h-5" />
                    <span className="text-sm">导出</span>
                  </button>

                  <button
                    onClick={() => copyQuestion(selectedRecord.question)}
                    className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                      isDark
                        ? 'bg-slate-700/50 hover:bg-slate-600/50 text-slate-300'
                        : 'bg-white hover:bg-gray-50 text-gray-700 border border-gray-200'
                    }`}
                  >
                    <Copy className="w-5 h-5" />
                    <span className="text-sm">复制问题</span>
                  </button>
                </div>
              </div>

              {/* 转任务 */}
              {selectedRecord.isConvertible && (
                <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">
                    <button
                      onClick={() => convertToTask(selectedRecord, 'single')}
                      className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                        isDark
                          ? 'bg-blue-600/20 hover:bg-blue-600/30 text-blue-400 border border-blue-600/50'
                          : 'bg-blue-50 hover:bg-blue-100 text-blue-600 border border-blue-200'
                      }`}
                    >
                      <Bot className="w-5 h-5" />
                      <span className="text-sm flex-1 text-left">转单智能体任务</span>
                      <ArrowRight className="w-4 h-4" />
                    </button>

                    <button
                      onClick={() => convertToTask(selectedRecord, 'consult')}
                      className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                        isDark
                          ? 'bg-purple-600/20 hover:bg-purple-600/30 text-purple-400 border border-purple-600/50'
                          : 'bg-purple-50 hover:bg-purple-100 text-purple-600 border border-purple-200'
                      }`}
                    >
                      <MessageSquare className="w-5 h-5" />
                      <span className="text-sm flex-1 text-left">转多智能体会商</span>
                      <ArrowRight className="w-4 h-4" />
                    </button>

                    <button
                      onClick={() => convertToTask(selectedRecord, 'scene')}
                      className={`w-full flex items-center gap-3 p-3 rounded-lg transition-all ${
                        isDark
                          ? 'bg-green-600/20 hover:bg-green-600/30 text-green-400 border border-green-600/50'
                          : 'bg-green-50 hover:bg-green-100 text-green-600 border border-green-200'
                      }`}
                    >
                      <GitCompare className="w-5 h-5" />
                      <span className="text-sm flex-1 text-left">转场景任务</span>
                      <ArrowRight className="w-4 h-4" />
                    </button>
                  </div>
                </div>
              )}

              {/* 备注 */}
              <div>
                <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                  备注
                </h3>
                <textarea
                  value={notesInput}
                  onChange={(e) => setNotesInput(e.target.value)}
                  placeholder="添加人工评价或后续处理建议..."
                  rows={4}
                  className={`w-full p-3 rounded-lg text-sm resize-none focus:outline-none ${
                    isDark
                      ? 'bg-slate-700/50 text-slate-300 placeholder-slate-500 border border-slate-600'
                      : 'bg-white text-gray-700 placeholder-gray-400 border border-gray-200'
                  }`}
                />
                {notesInput !== (selectedRecord.notes || '') && (
                  <button
                    onClick={() => {
                      setRecords(records.map(r =>
                        r.id === selectedRecord.id ? { ...r, notes: notesInput } : r
                      ));
                      setSelectedRecord({ ...selectedRecord, notes: notesInput });
                      alert('备注已保存');
                    }}
                    className={`w-full mt-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
                      isDark
                        ? 'bg-blue-600 hover:bg-blue-700 text-white'
                        : 'bg-red-500 hover:bg-red-600 text-white'
                    }`}
                  >
                    保存备注
                  </button>
                )}
              </div>
            </>
          ) : (
            <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
              <MessageSquare className="w-12 h-12 mb-3 opacity-50" />
              <p className="text-sm">选择记录后可操作</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default QARecords;