import React, { useState } from 'react';
import {
  Search,
  History,
  Bot,
  Sparkles,
  Database,
  Layers,
  FileText,
  ChevronRight,
  ChevronLeft,
  Cpu,
  Target,
  Zap,
  CheckCircle,
} from 'lucide-react';
import { useTheme } from '../../contexts/ThemeContext';
import { PageType } from '../../components/Sidebar';
import { ChatMessage, EmptyChatState, QAComposer, TypingIndicator } from './QACommon';

interface Agent {
  id: string;
  name: string;
  category: string;
  tags: string[];
  description: string;
  skills: string[];
  dataSources: string[];
  functions: string[];
  outputFields: string[];
}

interface Message {
  id: string;
  role: 'user' | 'assistant';
  content: string;
  timestamp: Date;
  agentName?: string;
  skills?: string[];
  dataSources?: string[];
  functions?: string[];
  structuredOutput?: Record<string, any>;
}

/**
 * 智能体问答组件
 * 基于特定智能体的专业能力进行问答，支持选择不同领域的智能体
 * @param onNavigate - 页面导航函数
 */
const AgentQA: React.FC<{ onNavigate: (page: PageType) => void }> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  // 模拟智能体列表
  const agents: Agent[] = [
    {
      id: 'audience-agent',
      name: 'AudienceAgent',
      category: '受众分析',
      tags: ['受众分层', '画像抽取', '行为预测'],
      description: '专业的受众分析智能体，能够识别目标受众特征并生成画像',
      skills: ['受众分层', '核心受众识别', '画像抽取', '行为预测'],
      dataSources: ['知识库', 'Y系统', 'A系统'],
      functions: ['信息抽取器', '标签聚类器', '结构化输出器'],
      outputFields: ['core_audience', 'key_traits', 'barriers', 'opportunities'],
    },
    {
      id: 'brand-agent',
      name: 'BrandAgent',
      category: '品牌分析',
      tags: ['品牌定位', '传播策略', '调性分析'],
      description: '专注品牌建设与传播策略的智能体',
      skills: ['品牌定位分析', '传播路径规划', '品牌调性设计'],
      dataSources: ['知识库', '行业数据库'],
      functions: ['品牌诊断器', '策略生成器'],
      outputFields: ['brand_position', 'communication_path', 'tone_guide'],
    },
    {
      id: 'content-agent',
      name: 'ContentAgent',
      category: '内容创作',
      tags: ['文案撰写', '创意生成', '多形式内容'],
      description: '智能内容创作助手，支持多种形式的内容生成',
      skills: ['文案撰写', '创意生成', '多形式内容', 'A/B测试文案'],
      dataSources: ['知识库', '优秀案例库'],
      functions: ['文案生成器', '风格适配器', '质量评估器'],
      outputFields: ['headlines', 'body_copy', 'call_to_action', 'variants'],
    },
    {
      id: 'channel-agent',
      name: 'ChannelAgent',
      category: '渠道规划',
      tags: ['渠道选择', '投放策略', '效果评估'],
      description: '专业的渠道分析与规划智能体',
      skills: ['渠道选择', '投放策略规划', '效果评估', '预算分配'],
      dataSources: ['Y系统', 'A系统', '行业数据'],
      functions: ['渠道分析器', '投放优化器', 'ROI预测器'],
      outputFields: ['recommended_channels', 'budget_allocation', 'expected_roi'],
    },
  ];

  // 状态管理
  // 当前选中的智能体
  const [selectedAgent, setSelectedAgent] = useState<Agent>(agents[0]);
  // 智能体搜索关键词
  const [searchQuery, setSearchQuery] = useState('');
  // 聊天消息列表
  const [messages, setMessages] = useState<Message[]>([]);
  // 输入框内容
  const [inputValue, setInputValue] = useState('');
  // 加载状态
  const [isLoading, setIsLoading] = useState(false);
  // 左侧侧边栏折叠状态
  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);

  // 过滤智能体
  const filteredAgents = agents.filter(agent =>
    agent.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    agent.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
    agent.tags.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()))
  );

  /**
   * 处理发送消息
   * 发送用户消息并模拟智能体响应
   */
  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(() => {
      const response: Message = {
        id: (Date.now() + 1).toString(),
        role: 'assistant',
        content: `基于${selectedAgent.name}的专业能力，我来为您分析：\n\n根据您的问题，我识别到核心受众特征如下：\n\n**核心受众识别**：\n- 主要年龄段：25-35岁\n- 职业特征：都市白领\n- 消费能力：中高端\n- 关注点：品质生活、个人成长\n\n**关键特质**：\n1. 追求个性化表达\n2. 注重社交认同\n3. 愿意为品质付费\n\n**可能存在的阻力**：\n- 价格敏感度较高\n- 对品牌忠诚度有限\n\n以上分析是否满足您的需求？如需调整维度，请继续补充信息。`,
        timestamp: new Date(),
        agentName: selectedAgent.name,
        skills: selectedAgent.skills,
        dataSources: selectedAgent.dataSources,
        functions: selectedAgent.functions,
        structuredOutput: {
          core_audience: '25-35岁都市白领',
          key_traits: ['追求个性化', '注重社交认同', '品质导向'],
          barriers: ['价格敏感', '品牌忠诚度有限'],
          opportunities: ['社交媒体影响大', '口碑传播效果好'],
        },
      };

      setMessages(prev => [...prev, response]);
      setIsLoading(false);
    }, 1500);
  };

  /**
   * 处理停止操作
   * 停止当前正在进行的智能体响应
   */
  const handleStop = () => {
    setIsLoading(false);
  };

  /**
   * 处理键盘事件
   * 按Enter键发送消息（不按Shift）
   */
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

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

  /**
   * 收藏当前对话
   */
  const handleCollect = () => {
    alert('已添加到收藏');
  };

  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>
          <div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
            <Bot className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
            <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
              当前智能体：
            </span>
            <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-red-600'}`}>
              {selectedAgent.name}
            </span>
          </div>
        </div>

        <div className="flex items-center gap-2">
          <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={`${isLeftSidebarCollapsed ? 'w-14 p-2' : 'w-72'} border-r flex-shrink-0 overflow-y-auto transition-all duration-300 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'}`}>
          <div className={`flex items-center ${isLeftSidebarCollapsed ? 'justify-center' : 'justify-between'} p-2 ${isLeftSidebarCollapsed ? '' : 'px-4 pt-4 pb-0'}`}>
            {!isLeftSidebarCollapsed && (
              <span className={`text-xs font-medium uppercase tracking-wider ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                智能体配置
              </span>
            )}
            <button
              type="button"
              onClick={() => setIsLeftSidebarCollapsed(!isLeftSidebarCollapsed)}
              className={`p-2 rounded-lg transition-all ${
                isDark
                  ? 'text-slate-400 hover:text-white hover:bg-slate-700/50'
                  : 'text-gray-500 hover:text-red-600 hover:bg-red-50'
              }`}
              title={isLeftSidebarCollapsed ? '展开侧边栏' : '收起侧边栏'}
            >
              {isLeftSidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
            </button>
          </div>

          {!isLeftSidebarCollapsed && (<>
          {/* 智能体搜索 */}
          <div className="p-4">
            <div className={`relative ${isDark ? 'bg-slate-700/50' : 'bg-white'} 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-full 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>

          {/* 智能体列表 */}
          <div className="px-4 pb-4">
            <h3 className={`text-xs font-medium uppercase tracking-wider mb-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
              智能体列表
            </h3>
            <div className="space-y-2">
              {filteredAgents.map((agent) => (
                <button
                  key={agent.id}
                  onClick={() => setSelectedAgent(agent)}
                  className={`w-full text-left p-3 rounded-lg transition-all ${
                    selectedAgent.id === agent.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-center gap-3">
                    <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
                      selectedAgent.id === agent.id
                        ? isDark
                          ? 'bg-blue-600 text-white'
                          : 'bg-red-500 text-white'
                        : isDark
                          ? 'bg-slate-600 text-slate-300'
                          : 'bg-gray-100 text-gray-600'
                    }`}>
                      <Bot className="w-5 h-5" />
                    </div>
                    <div className="flex-1 min-w-0">
                      <div className={`text-sm font-medium truncate ${isDark ? 'text-white' : 'text-gray-900'}`}>
                        {agent.name}
                      </div>
                      <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                        {agent.category}
                      </div>
                    </div>
                    <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-500' : 'text-gray-400'}`} />
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* 当前智能体能力摘要 */}
          <div className={`p-4 border-t ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
            <h3 className={`text-xs font-medium uppercase tracking-wider mb-3 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
              能力摘要
            </h3>

            {/* 核心职责 */}
            <div className="mb-4">
              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                <Target className="w-4 h-4" />
                <span className="text-xs">核心职责</span>
              </div>
              <p className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                {selectedAgent.description}
              </p>
            </div>

            {/* 已启用技能 */}
            <div className="mb-4">
              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                <Sparkles className="w-4 h-4" />
                <span className="text-xs">已启用技能</span>
              </div>
              <div className="flex flex-wrap gap-1">
                {selectedAgent.skills.map((skill, idx) => (
                  <span
                    key={idx}
                    className={`px-2 py-0.5 rounded text-xs ${
                      isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
                    }`}
                  >
                    {skill}
                  </span>
                ))}
              </div>
            </div>

            {/* 可访问数据源 */}
            <div className="mb-4">
              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                <Database className="w-4 h-4" />
                <span className="text-xs">可访问数据源</span>
              </div>
              <div className="flex flex-wrap gap-1">
                {selectedAgent.dataSources.map((source, idx) => (
                  <span
                    key={idx}
                    className={`px-2 py-0.5 rounded text-xs ${
                      isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'
                    }`}
                  >
                    {source}
                  </span>
                ))}
              </div>
            </div>

            {/* 可调用功能 */}
            <div>
              <div className={`flex items-center gap-2 mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                <Layers className="w-4 h-4" />
                <span className="text-xs">可调用功能</span>
              </div>
              <div className="flex flex-wrap gap-1">
                {selectedAgent.functions.map((func, idx) => (
                  <span
                    key={idx}
                    className={`px-2 py-0.5 rounded text-xs ${
                      isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
                    }`}
                  >
                    {func}
                  </span>
                ))}
              </div>
            </div>
          </div>
          </>)}
        </div>

        {/* 中间对话区 */}
        <div className="flex-1 flex flex-col overflow-hidden">
          {/* 消息列表 */}
          <div className="flex-1 overflow-y-auto p-4 space-y-4">
            {messages.length === 0 ? (
              <EmptyChatState
                icon={<Bot className="w-11 h-11 opacity-60" />}
                title={`开始与${selectedAgent.name}对话`}
                description="基于智能体专业能力获取精准回答"
              />
            ) : (
              messages.map((msg) => (
                <ChatMessage
                  key={msg.id}
                  message={msg}
                  assistantLabel={msg.agentName || selectedAgent.name}
                  renderAssistantExtra={(assistantMessage) => (
                    <div className={`ml-12 p-3 rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-gray-50'}`}>
                      <div className="mb-3">
                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>本轮启用技能</h4>
                        <div className="flex flex-wrap gap-1">
                          {assistantMessage.skills?.map((skill, idx) => (
                            <span key={idx} className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'}`}>
                              {skill}
                            </span>
                          ))}
                        </div>
                      </div>

                      <div className="mb-3">
                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>本轮访问数据源</h4>
                        <div className="flex flex-wrap gap-1">
                          {assistantMessage.dataSources?.map((source, idx) => (
                            <span key={idx} className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-green-600/30 text-green-400' : 'bg-green-100 text-green-600'}`}>
                              {source}
                            </span>
                          ))}
                        </div>
                      </div>

                      <div className="mb-3">
                        <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>本轮调用功能</h4>
                        <div className="flex flex-wrap gap-1">
                          {assistantMessage.functions?.map((func, idx) => (
                            <span key={idx} className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'}`}>
                              {func}
                            </span>
                          ))}
                        </div>
                      </div>

                      {assistantMessage.structuredOutput && (
                        <div>
                          <h4 className={`text-xs font-medium mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>结构化输出</h4>
                          <div className={`p-3 rounded-lg ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
                            {Object.entries(assistantMessage.structuredOutput).map(([key, value]) => (
                              <div key={key} className="flex items-start gap-2 mb-1 last:mb-0">
                                <span className={`text-xs font-mono ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{key}:</span>
                                <span className={`text-xs ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                                  {Array.isArray(value) ? value.join(', ') : String(value)}
                                </span>
                              </div>
                            ))}
                          </div>
                        </div>
                      )}
                    </div>
                  )}
                />
              ))
            )}

            {isLoading && <TypingIndicator label={`${selectedAgent.name} 正在调用能力生成回复`} assistantLabel={selectedAgent.name} />}
          </div>

          {/* 底部输入区 */}
          <QAComposer
            value={inputValue}
            onChange={setInputValue}
            onKeyDown={handleKeyDown}
            onSubmit={handleSend}
            onStop={handleStop}
            onSave={handleSaveRecord}
            onCollect={handleCollect}
            isLoading={isLoading}
            placeholder="输入问题或任务要求..."
            showUpload={false}
          />
        </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'
        }`}>
          <h3 className={`text-sm font-medium mb-4 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
            执行详情
          </h3>

          {/* 本轮启用技能 */}
          <div className="mb-6">
            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
              <Sparkles className="w-4 h-4" />
              <span className="text-xs font-medium">本轮启用技能</span>
            </div>
            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
              <div className="space-y-2">
                {selectedAgent.skills.map((skill, idx) => (
                  <div key={idx} className="flex items-center gap-2">
                    <CheckCircle className={`w-3 h-3 ${isDark ? 'text-blue-400' : 'text-green-500'}`} />
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{skill}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 本轮访问数据源 */}
          <div className="mb-6">
            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
              <Database className="w-4 h-4" />
              <span className="text-xs font-medium">本轮访问数据源</span>
            </div>
            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
              <div className="space-y-2">
                {selectedAgent.dataSources.map((source, idx) => (
                  <div key={idx} className="flex items-center gap-2">
                    <Database className={`w-3 h-3 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{source}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 本轮调用功能 */}
          <div className="mb-6">
            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
              <Layers className="w-4 h-4" />
              <span className="text-xs font-medium">本轮调用功能</span>
            </div>
            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
              <div className="space-y-2">
                {selectedAgent.functions.map((func, idx) => (
                  <div key={idx} className="flex items-center gap-2">
                    <Cpu className={`w-3 h-3 ${isDark ? 'text-purple-400' : 'text-purple-500'}`} />
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>{func}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* 结构化输出字段 */}
          <div>
            <div className={`flex items-center gap-2 mb-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
              <FileText className="w-4 h-4" />
              <span className="text-xs font-medium">输出字段</span>
            </div>
            <div className={`p-3 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
              <div className="space-y-2">
                {selectedAgent.outputFields.map((field, idx) => (
                  <div key={idx} className="flex items-center gap-2">
                    <Zap className={`w-3 h-3 ${isDark ? 'text-yellow-400' : 'text-yellow-500'}`} />
                    <span className={`text-xs font-mono ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>{field}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AgentQA;