import React, { useState } from 'react';
import {
  ArrowLeft,
  Bot,
  Workflow,
  Target,
  FileText,
  Upload,
  Clock,
  User,
  CheckCircle,
  ChevronRight,
  Sparkles,
  Layers,
  Users,
  MessageSquare,
  X,
} from 'lucide-react';
import { useTheme } from '@/contexts/ThemeContext';
import { PageType } from '@/components/Sidebar';

interface TaskCreateProps {
  onNavigate: (page: PageType) => void;
}

// 可用场景列表
const availableScenes = [
  { id: 'strategy', name: '宣传策略生成', desc: '完整宣传策略方案生成', agents: 8 },
  { id: 'campaign', name: '宣传活动推演', desc: '活动方案推演与优化', agents: 6 },
  { id: 'crisis', name: '舆情应对', desc: '危机公关策略生成', agents: 5 },
  { id: 'product', name: '产品推广', desc: '产品上市推广策略', agents: 7 },
];

// 可用智能体列表
const availableAgents = [
  { id: 'goal', name: 'GoalAgent', role: '目标分析专家', category: '策略', icon: Target, desc: '专注目标设定、拆解与优先级排序' },
  { id: 'audience', name: 'AudienceAgent', role: '受众分析专家', category: '用户', icon: User, desc: '深度分析目标受众特征与需求' },
  { id: 'behavior', name: 'BehaviorAgent', role: '行为设计专家', category: '用户', icon: Sparkles, desc: '设计用户行为路径与激励机制' },
  { id: 'narrative', name: 'NarrativeAgent', role: '叙事策略专家', category: '内容', icon: FileText, desc: '构建故事框架与叙事逻辑' },
  { id: 'risk', name: 'RiskAgent', role: '风险评估专家', category: '策略', icon: CheckCircle, desc: '识别潜在风险并提供应对方案' },
  { id: 'channel', name: 'ChannelAgent', role: '渠道分析专家', category: '运营', icon: Bot, desc: '分析传播渠道特点与适用场景' },
  { id: 'creative', name: 'CreativeAgent', role: '创意生成专家', category: '内容', icon: Sparkles, desc: '提供创意方向与内容灵感' },
  { id: 'data', name: 'DataAgent', role: '数据分析专家', category: '策略', icon: CheckCircle, desc: '基于数据提供洞察与建议' },
];

const TaskCreate: React.FC<TaskCreateProps> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const [step, setStep] = useState<'type' | 'single' | 'multi-agent' | 'consult' | 'scene'>('type');
  const [taskType, setTaskType] = useState<'single' | 'multi-agent' | 'consult' | 'scene' | null>(null);

  // 单智能体任务表单
  const [singleTask, setSingleTask] = useState({
    name: '',
    agent: '',
    input: '',
    outputFormat: '',
  });

  // 多智能体协同分析表单
  const [multiAgentTask, setMultiAgentTask] = useState({
    name: '',
    input: '',
    selectedAgents: [] as string[],
    agentSearchQuery: '',
    agentCategory: 'all',
  });

  // 场景任务表单
  const [sceneTask, setSceneTask] = useState({
    name: '',
    scene: '',
    input: '',
    deadline: '',
    constraints: '',
  });

  const handleSelectType = (type: 'single' | 'multi-agent' | 'scene' | 'consult') => {
    setTaskType(type);
    setStep(type);
  };

  const handleCreateTask = () => {
    if (taskType === 'single') {
      onNavigate('task-single');
    } else if (taskType === 'scene') {
      onNavigate('task-scene');
    } else if (taskType === 'multi-agent') {
      onNavigate('multi-agent-qa');
    } else {
      onNavigate('task-consult-create');
    }
  };

  // 处理智能体选择
  const toggleAgent = (agentId: string) => {
    setMultiAgentTask(prev => {
      const isSelected = prev.selectedAgents.includes(agentId);
      if (isSelected) {
        return {
          ...prev,
          selectedAgents: prev.selectedAgents.filter(id => id !== agentId)
        };
      } else {
        // 最多选择8个
        if (prev.selectedAgents.length >= 8) {
          return prev;
        }
        return {
          ...prev,
          selectedAgents: [...prev.selectedAgents, agentId]
        };
      }
    });
  };

  // 获取过滤后的智能体列表
  const getFilteredAgents = () => {
    return availableAgents.filter(agent => {
      const matchesSearch = agent.name.toLowerCase().includes(multiAgentTask.agentSearchQuery.toLowerCase()) ||
        agent.role.toLowerCase().includes(multiAgentTask.agentSearchQuery.toLowerCase());
      const matchesCategory = multiAgentTask.agentCategory === 'all' || agent.category === multiAgentTask.agentCategory;
      return matchesSearch && matchesCategory;
    });
  };

  return (
    <div className="space-y-6">
      {/* 顶部操作栏 */}
      <div className={`rounded-xl p-4 ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border border-blue-800/30' : 'bg-white border border-red-100 shadow-sm'}`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button
              onClick={() => {
                if (step === 'type') {
                  onNavigate('task-list');
                } else {
                  setStep('type');
                  setTaskType(null);
                }
              }}
              className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
                isDark
                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
                  : 'bg-red-50 hover:bg-red-100 border border-red-200 text-red-600'
              }`}
            >
              <ArrowLeft className="w-4 h-4" />
              返回
            </button>
            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
            <div>
              <h1 className={`font-bold text-lg ${isDark ? 'text-white' : 'text-gray-900'}`}>新建任务</h1>
              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                {step === 'type' && '选择分析模式'}
                {step === 'single' && '创建单智能体任务'}
                {step === 'multi-agent' && '创建多智能体协同分析任务'}
                {step === 'scene' && '创建场景任务'}
                {step === 'consult' && '创建多智能体会商任务'}
              </p>
            </div>
          </div>

          {/* 步骤指示器 */}
          <div className="flex items-center gap-2">
            {['类型选择', '填写表单', '确认创建'].map((label, i) => (
              <React.Fragment key={i}>
                <div className="flex items-center gap-2">
                  <div
                    className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
                      i === 0
                        ? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
                        : i === 1 && step !== 'type'
                        ? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
                        : i === 2 && step !== 'type'
                        ? isDark ? 'bg-blue-600 text-white' : 'bg-red-600 text-white'
                        : isDark ? 'bg-slate-700 text-slate-400' : 'bg-gray-200 text-gray-500'
                    }`}
                  >
                    {i + 1}
                  </div>
                  <span className={`text-xs ${
                    i <= (step === 'type' ? 0 : 1)
                      ? isDark ? 'text-white' : 'text-gray-900'
                      : isDark ? 'text-slate-500' : 'text-gray-400'
                  }`}>
                    {label}
                  </span>
                </div>
                {i < 2 && <ChevronRight className={`w-4 h-4 ${isDark ? 'text-slate-600' : 'text-gray-400'}`} />}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>

      {/* 步骤1：选择分析模式 */}
      {step === 'type' && (
        <div className="max-w-5xl mx-auto">
          <div className="text-center mb-8">
            <h2 className={`font-semibold text-xl mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>选择分析模式</h2>
            <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
              请为本次任务选择最合适的处理方式
            </p>
          </div>

          {/* 2x2 网格布局 */}
          <div className="grid grid-cols-2 gap-6">
            {/* 单智能体分析 */}
            <button
              onClick={() => handleSelectType('single')}
              className={`p-6 rounded-2xl transition-all text-left border ${
                isDark
                  ? 'bg-slate-800/50 border-blue-800/30 hover:border-blue-500/50'
                  : 'bg-white border-red-100 hover:border-red-300 hover:shadow-md'
              }`}
            >
              <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
                isDark ? 'bg-blue-500/20' : 'bg-blue-100'
              }`}>
                <Bot className={`w-7 h-7 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
              </div>
              <h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>单智能体分析</h3>
              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                选择一个智能体进行专项分析
              </p>
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>快速专项分析</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>单体独立工作</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>局部结果输出</span>
                </div>
              </div>
              <div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-blue-800/30' : 'border-blue-100'}`}>
                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-500'}`}>适用：单点问题/快速试用</span>
                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：单体分析结果</span>
              </div>
              <div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
                isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-600'
              }`}>
                选择该模式
              </div>
            </button>

            {/* 多智能体协同分析 */}
            <button
              onClick={() => handleSelectType('multi-agent')}
              className={`p-6 rounded-2xl transition-all text-left border ${
                isDark
                  ? 'bg-slate-800/50 border-green-800/30 hover:border-green-500/50'
                  : 'bg-white border-green-100 hover:border-green-300 hover:shadow-md'
              }`}
            >
              <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
                isDark ? 'bg-green-500/20' : 'bg-green-100'
              }`}>
                <Layers className={`w-7 h-7 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
              </div>
              <h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体协同分析</h3>
              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                多个智能体并行分析并汇总报告
              </p>
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>多视角并行分析</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>人机协同判断</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>报告生成</span>
                </div>
              </div>
              <div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
                <span className={`text-xs ${isDark ? 'text-green-400' : 'text-green-500'}`}>适用：前期研判/多专业汇总</span>
                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：联合分析报告</span>
              </div>
              <div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
                isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
              }`}>
                选择该模式
              </div>
            </button>

            {/* 多智能体会商 */}
            <button
              onClick={() => handleSelectType('consult')}
              className={`p-6 rounded-2xl transition-all text-left border ${
                isDark
                  ? 'bg-slate-800/50 border-orange-800/30 hover:border-orange-500/50'
                  : 'bg-white border-orange-100 hover:border-orange-300 hover:shadow-md'
              }`}
            >
              <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
                isDark ? 'bg-orange-500/20' : 'bg-orange-100'
              }`}>
                <Users className={`w-7 h-7 ${isDark ? 'text-orange-400' : 'text-orange-500'}`} />
              </div>
              <h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体会商</h3>
              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                多智能体讨论与推演
              </p>
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>观点碰撞</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>模拟推演</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>人工研判</span>
                </div>
              </div>
              <div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-orange-800/30' : 'border-orange-100'}`}>
                <span className={`text-xs ${isDark ? 'text-orange-400' : 'text-orange-500'}`}>适用：争议/比较/推演</span>
                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：会商结论</span>
              </div>
              <div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
                isDark ? 'bg-orange-500/20 text-orange-400' : 'bg-orange-100 text-orange-600'
              }`}>
                选择该模式
              </div>
            </button>

            {/* 场景执行 */}
            <button
              onClick={() => handleSelectType('scene')}
              className={`p-6 rounded-2xl transition-all text-left border ${
                isDark
                  ? 'bg-slate-800/50 border-purple-800/30 hover:border-purple-500/50'
                  : 'bg-white border-purple-100 hover:border-purple-300 hover:shadow-md'
              }`}
            >
              <div className={`w-14 h-14 rounded-xl flex items-center justify-center mb-4 ${
                isDark ? 'bg-purple-500/20' : 'bg-purple-100'
              }`}>
                <Workflow className={`w-7 h-7 ${isDark ? 'text-purple-400' : 'text-purple-500'}`} />
              </div>
              <h3 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>场景执行</h3>
              <p className={`text-sm mb-4 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                按场景模板执行完整流程
              </p>
              <div className="space-y-2">
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>完整流程编排</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>多智能体协同</span>
                </div>
                <div className="flex items-center gap-2 text-xs">
                  <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <span className={isDark ? 'text-slate-500' : 'text-gray-500'}>完整产出</span>
                </div>
              </div>
              <div className={`mt-4 pt-4 border-t flex justify-between items-center ${isDark ? 'border-purple-800/30' : 'border-purple-100'}`}>
                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-500'}`}>适用：完整策略/推演</span>
                <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>输出：方案/报告</span>
              </div>
              <div className={`mt-3 px-4 py-2 rounded-lg text-center text-sm font-medium ${
                isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-600'
              }`}>
                选择该模式
              </div>
            </button>
          </div>

          {/* 底部按钮 */}
          <div className="flex justify-between items-center mt-8">
            <button
              onClick={() => onNavigate('task-list')}
              className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
                isDark
                  ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
                  : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
              }`}
            >
              取消
            </button>
          </div>
        </div>
      )}

      {/* 步骤2：单智能体任务表单 */}
      {step === 'single' && (
        <div className="max-w-3xl mx-auto">
          <div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
            <h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
              <Bot className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
              单智能体任务配置
            </h2>

            <div className="space-y-6">
              {/* 任务名称 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
                <input
                  type="text"
                  value={singleTask.name}
                  onChange={(e) => setSingleTask({ ...singleTask, name: e.target.value })}
                  placeholder="例如：五四青年节目标受众分析"
                  className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 选择智能体 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>选择智能体</label>
                <div className="grid grid-cols-2 gap-3">
                  {availableAgents.map((agent) => {
                    const Icon = agent.icon;
                    const isSelected = singleTask.agent === agent.id;
                    return (
                      <button
                        key={agent.id}
                        onClick={() => setSingleTask({ ...singleTask, agent: agent.id })}
                        className={`p-4 rounded-lg border text-left transition-all ${
                          isSelected
                            ? isDark
                              ? 'bg-blue-500/20 border-blue-500/50'
                              : 'bg-red-50 border-red-300'
                            : isDark
                              ? 'bg-slate-900/50 border-blue-800/30 hover:border-blue-500/30'
                              : 'bg-white border-red-100 hover:border-red-200'
                        }`}
                      >
                        <div className="flex items-center gap-3">
                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                            isDark ? 'bg-blue-500/20' : 'bg-red-100'
                          }`}>
                            <Icon className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-red-500'}`} />
                          </div>
                          <div>
                            <p className={`text-sm font-medium ${isSelected ? (isDark ? 'text-blue-400' : 'text-red-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
                              {agent.name}
                            </p>
                            <p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{agent.role}</p>
                          </div>
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* 输入内容 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务输入</label>
                <textarea
                  value={singleTask.input}
                  onChange={(e) => setSingleTask({ ...singleTask, input: e.target.value })}
                  placeholder="请详细描述您需要该智能体处理的任务..."
                  rows={6}
                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 输出格式要求 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>输出格式要求（可选）</label>
                <textarea
                  value={singleTask.outputFormat}
                  onChange={(e) => setSingleTask({ ...singleTask, outputFormat: e.target.value })}
                  placeholder="例如：输出JSON格式，包含受众画像、行为特征、需求分析等字段"
                  rows={3}
                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 提交按钮 */}
              <div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
                <button
                  onClick={() => setStep('type')}
                  className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
                    isDark
                      ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
                      : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
                  }`}
                >
                  上一步
                </button>
                <button
                  onClick={handleCreateTask}
                  disabled={!singleTask.name || !singleTask.agent || !singleTask.input}
                  className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                    isDark
                      ? 'bg-blue-600 hover:bg-blue-500 disabled:bg-slate-700 disabled:text-slate-500 text-white'
                      : 'bg-red-600 hover:bg-red-500 disabled:bg-gray-400 text-white shadow-md'
                  }`}
                >
                  创建任务
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 步骤2：多智能体协同分析任务表单 */}
      {step === 'multi-agent' && (
        <div className="max-w-4xl mx-auto">
          <div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-green-800/30' : 'bg-white border-green-100 shadow-sm'}`}>
            <h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
              <Layers className={`w-5 h-5 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
              多智能体协同分析任务配置
            </h2>

            <div className="space-y-6">
              {/* 任务名称 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
                <input
                  type="text"
                  value={multiAgentTask.name}
                  onChange={(e) => setMultiAgentTask({ ...multiAgentTask, name: e.target.value })}
                  placeholder="例如：五四青年节宣传方向多智能体分析"
                  className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 分析任务描述 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>分析任务描述</label>
                <textarea
                  value={multiAgentTask.input}
                  onChange={(e) => setMultiAgentTask({ ...multiAgentTask, input: e.target.value })}
                  placeholder="请详细描述您需要多智能体协同分析的任务内容、分析目标、业务背景等..."
                  rows={4}
                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 选择参与智能体 */}
              <div>
                <div className="flex items-center justify-between mb-3">
                  <div className="flex items-center gap-2">
                    <label className={`block text-sm font-medium ${isDark ? 'text-white' : 'text-gray-900'}`}>
                      选择参与协同的智能体
                    </label>
                    <span className={`px-2 py-0.5 rounded text-xs font-medium ${
                      multiAgentTask.selectedAgents.length < 3
                        ? isDark ? 'bg-amber-500/20 text-amber-400' : 'bg-amber-100 text-amber-600'
                        : isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600'
                    }`}>
                      已选择：{multiAgentTask.selectedAgents.length}/8
                    </span>
                  </div>
                  {multiAgentTask.selectedAgents.length < 3 && (
                    <span className={`text-xs ${isDark ? 'text-amber-400' : 'text-amber-600'}`}>
                      请至少选择3个智能体
                    </span>
                  )}
                </div>

                {/* 搜索和筛选 */}
                <div className="flex items-center gap-3 mb-4">
                  <div className={`flex-1 relative ${
                    isDark ? 'text-slate-400' : 'text-gray-500'
                  }`}>
                    <Bot className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" />
                    <input
                      type="text"
                      value={multiAgentTask.agentSearchQuery}
                      onChange={(e) => setMultiAgentTask({ ...multiAgentTask, agentSearchQuery: e.target.value })}
                      placeholder="搜索智能体..."
                      className={`w-full pl-9 pr-4 py-2 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-500/20 ${
                        isDark
                          ? 'bg-slate-900/50 border border-green-800/30 text-white placeholder-slate-500'
                          : 'bg-white border border-green-200 text-gray-900 placeholder-gray-400'
                      }`}
                    />
                  </div>
                  <div className="flex items-center gap-2">
                    {['all', '策略', '用户', '内容', '运营'].map((cat) => (
                      <button
                        key={cat}
                        onClick={() => setMultiAgentTask({ ...multiAgentTask, agentCategory: cat })}
                        className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
                          multiAgentTask.agentCategory === cat
                            ? isDark ? 'bg-green-500/30 text-green-400 border border-green-500/50' : 'bg-green-100 text-green-600 border border-green-300'
                            : isDark ? 'bg-slate-700/50 text-slate-400 border border-slate-600' : 'bg-gray-100 text-gray-500 border border-gray-200'
                        }`}
                      >
                        {cat === 'all' ? '全部' : cat}
                      </button>
                    ))}
                  </div>
                </div>

                {/* 已选择的智能体 */}
                {multiAgentTask.selectedAgents.length > 0 && (
                  <div className={`p-3 rounded-lg mb-4 ${isDark ? 'bg-green-500/10 border border-green-800/30' : 'bg-green-50 border border-green-200'}`}>
                    <div className="flex items-center gap-2 mb-2">
                      <CheckCircle className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                      <span className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>
                        已选择的智能体
                      </span>
                    </div>
                    <div className="flex flex-wrap gap-2">
                      {multiAgentTask.selectedAgents.map((agentId) => {
                        const agent = availableAgents.find(a => a.id === agentId);
                        if (!agent) return null;
                        const Icon = agent.icon;
                        return (
                          <div
                            key={agentId}
                            className={`flex items-center gap-2 px-3 py-1.5 rounded-full text-sm ${
                              isDark ? 'bg-green-500/20 text-green-400 border border-green-500/30' : 'bg-white text-green-600 border border-green-300'
                            }`}
                          >
                            <Icon className="w-3.5 h-3.5" />
                            <span>{agent.name}</span>
                            <button
                              onClick={() => toggleAgent(agentId)}
                              className={`ml-1 hover:text-red-400 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}
                            >
                              <X className="w-3.5 h-3.5" />
                            </button>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                )}

                {/* 智能体卡片列表 */}
                <div className="grid grid-cols-4 gap-3 max-h-64 overflow-y-auto custom-scrollbar pr-1">
                  {getFilteredAgents().map((agent) => {
                    const Icon = agent.icon;
                    const isSelected = multiAgentTask.selectedAgents.includes(agent.id);
                    const isDisabled = !isSelected && multiAgentTask.selectedAgents.length >= 8;
                    return (
                      <button
                        key={agent.id}
                        onClick={() => toggleAgent(agent.id)}
                        disabled={isDisabled}
                        className={`p-3 rounded-lg border text-left transition-all ${
                          isSelected
                            ? isDark
                              ? 'bg-green-500/20 border-green-500/50'
                              : 'bg-green-50 border-green-300'
                            : isDisabled
                            ? isDark
                              ? 'bg-slate-800/30 border-slate-700/50 opacity-50 cursor-not-allowed'
                              : 'bg-gray-50 border-gray-200 opacity-50 cursor-not-allowed'
                            : isDark
                              ? 'bg-slate-900/50 border-green-800/30 hover:border-green-500/50'
                              : 'bg-white border-gray-200 hover:border-green-300'
                        }`}
                      >
                        <div className="flex items-center gap-2 mb-2">
                          <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                            isSelected
                              ? isDark ? 'bg-green-500/30' : 'bg-green-200'
                              : isDark ? 'bg-slate-700/50' : 'bg-gray-100'
                          }`}>
                            <Icon className={`w-4 h-4 ${isSelected ? (isDark ? 'text-green-400' : 'text-green-600') : (isDark ? 'text-slate-400' : 'text-gray-500')}`} />
                          </div>
                          {isSelected && (
                            <div className={`w-5 h-5 rounded-full flex items-center justify-center ${
                              isDark ? 'bg-green-500' : 'bg-green-500'
                            }`}>
                              <CheckCircle className="w-3.5 h-3.5 text-white" />
                            </div>
                          )}
                        </div>
                        <p className={`text-xs font-medium mb-0.5 ${isSelected ? (isDark ? 'text-green-400' : 'text-green-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
                          {agent.name}
                        </p>
                        <p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>
                          {agent.role}
                        </p>
                        <p className={`text-xs mt-1 line-clamp-2 ${isDark ? 'text-slate-600' : 'text-gray-400'}`}>
                          {agent.desc}
                        </p>
                        <span className={`inline-block mt-2 px-1.5 py-0.5 rounded text-xs ${
                          isDark ? 'bg-slate-700/50 text-slate-500' : 'bg-gray-100 text-gray-500'
                        }`}>
                          {agent.category}
                        </span>
                      </button>
                    );
                  })}
                </div>

                {getFilteredAgents().length === 0 && (
                  <div className={`text-center py-8 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                    <Bot className="w-8 h-8 mx-auto mb-2 opacity-50" />
                    <p className="text-sm">未找到匹配的智能体</p>
                  </div>
                )}
              </div>

              {/* 流程预览 */}
              <div className={`rounded-xl p-4 ${isDark ? 'bg-green-500/10 border border-green-800/30' : 'bg-green-50 border border-green-200'}`}>
                <h4 className={`font-medium text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
                  <Sparkles className={`w-4 h-4`} />
                  多智能体协同分析流程
                </h4>
                <div className="grid grid-cols-5 gap-2">
                  {[
                    { step: 1, label: '选择参与智能体' },
                    { step: 2, label: '发送分析任务' },
                    { step: 3, label: '并行获取分析' },
                    { step: 4, label: '采纳/追问' },
                    { step: 5, label: '汇总报告' },
                  ].map((item) => (
                    <div key={item.step} className="text-center">
                      <div className={`w-8 h-8 rounded-full flex items-center justify-center mx-auto mb-1 ${
                        isDark ? 'bg-green-500/20 border border-green-500/50' : 'bg-green-100 border border-green-200'
                      }`}>
                        <span className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>{item.step}</span>
                      </div>
                      <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{item.label}</p>
                    </div>
                  ))}
                </div>
              </div>

              {/* 特点说明 */}
              <div className="grid grid-cols-3 gap-3">
                <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
                  <Layers className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>多智能体参与</p>
                  <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>3-8个智能体并行</p>
                </div>
                <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
                  <Bot className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>独立并行分析</p>
                  <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>互不干扰</p>
                </div>
                <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-green-500/10 border-green-800/30' : 'bg-green-50 border-green-100'}`}>
                  <FileText className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-green-400' : 'text-green-500'}`} />
                  <p className={`text-xs font-medium ${isDark ? 'text-green-400' : 'text-green-600'}`}>汇总报告</p>
                  <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>人工整合输出</p>
                </div>
              </div>

              {/* 提交按钮 */}
              <div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-green-800/30' : 'border-green-100'}`}>
                <button
                  onClick={() => setStep('type')}
                  className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
                    isDark
                      ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
                      : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
                  }`}
                >
                  上一步
                </button>
                <button
                  onClick={handleCreateTask}
                  disabled={!multiAgentTask.name || !multiAgentTask.input || multiAgentTask.selectedAgents.length < 3}
                  className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
                    multiAgentTask.name && multiAgentTask.input && multiAgentTask.selectedAgents.length >= 3
                      ? isDark
                        ? 'bg-green-600 hover:bg-green-500 text-white'
                        : 'bg-green-600 hover:bg-green-500 text-white shadow-md'
                      : isDark
                        ? 'bg-slate-700 text-slate-500 cursor-not-allowed'
                        : 'bg-gray-300 text-gray-500 cursor-not-allowed'
                  }`}
                >
                  <Layers className="w-4 h-4" />
                  进入协同分析
                </button>
              </div>
            </div>
          </div>

          {/* 提示 */}
          <div className={`mt-4 p-4 rounded-xl border ${isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'}`}>
            <div className="flex items-start gap-2">
              <Sparkles className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
              <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                <span className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>提示：</span>
                多智能体协同分析将同时邀请多个智能体对同一问题进行分析，您可以选择采纳某个智能体的观点、
                继续追问特定智能体，最终将多个观点汇总成联合分析报告。建议选择不同职能领域的智能体以获得更全面的分析视角。
              </p>
            </div>
          </div>
        </div>
      )}

      {/* 步骤2：场景任务表单 */}
      {step === 'scene' && (
        <div className="max-w-3xl mx-auto">
          <div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-blue-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
            <h2 className={`font-semibold text-lg mb-6 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
              <Workflow className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
              场景任务配置
            </h2>

            <div className="space-y-6">
              {/* 任务名称 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务名称</label>
                <input
                  type="text"
                  value={sceneTask.name}
                  onChange={(e) => setSceneTask({ ...sceneTask, name: e.target.value })}
                  placeholder="例如：五四青年节宣传活动策略生成"
                  className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 选择场景 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>选择场景模板</label>
                <div className="space-y-3">
                  {availableScenes.map((scene) => {
                    const isSelected = sceneTask.scene === scene.id;
                    return (
                      <button
                        key={scene.id}
                        onClick={() => setSceneTask({ ...sceneTask, scene: scene.id })}
                        className={`w-full p-4 rounded-lg border text-left transition-all ${
                          isSelected
                            ? isDark
                              ? 'bg-purple-500/20 border-purple-500/50'
                              : 'bg-red-50 border-red-300'
                            : isDark
                              ? 'bg-slate-900/50 border-blue-800/30 hover:border-purple-500/30'
                              : 'bg-white border-red-100 hover:border-red-200'
                        }`}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-3">
                            <div className={`w-10 h-10 rounded-lg flex items-center justify-center ${
                              isDark ? 'bg-purple-500/20' : 'bg-red-100'
                            }`}>
                              <Layers className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
                            </div>
                            <div>
                              <p className={`text-sm font-medium ${isSelected ? (isDark ? 'text-purple-400' : 'text-red-600') : (isDark ? 'text-white' : 'text-gray-900')}`}>
                                {scene.name}
                              </p>
                              <p className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{scene.desc}</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-4">
                            <span className={`px-2 py-1 rounded text-xs ${
                              isDark ? 'bg-slate-800 text-slate-400' : 'bg-gray-100 text-gray-500'
                            }`}>
                              {scene.agents} 个智能体
                            </span>
                            {isSelected && (
                              <CheckCircle className={`w-5 h-5 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
                            )}
                          </div>
                        </div>
                      </button>
                    );
                  })}
                </div>
              </div>

              {/* 任务输入 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>任务要求</label>
                <textarea
                  value={sceneTask.input}
                  onChange={(e) => setSceneTask({ ...sceneTask, input: e.target.value })}
                  placeholder="请详细描述您的任务要求、业务背景、核心目标等..."
                  rows={6}
                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 时间要求 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>完成时间要求（可选）</label>
                <input
                  type="text"
                  value={sceneTask.deadline}
                  onChange={(e) => setSceneTask({ ...sceneTask, deadline: e.target.value })}
                  placeholder="例如：5月1日前完成"
                  className={`w-full px-4 py-2.5 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 约束条件 */}
              <div>
                <label className={`block text-sm mb-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>特殊约束（可选）</label>
                <textarea
                  value={sceneTask.constraints}
                  onChange={(e) => setSceneTask({ ...sceneTask, constraints: e.target.value })}
                  placeholder="例如：预算有限，需注重性价比；需要可量化评估..."
                  rows={3}
                  className={`w-full px-4 py-3 rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-red-500/20 ${
                    isDark
                      ? 'bg-slate-900/50 border border-blue-800/30 text-white placeholder-slate-500'
                      : 'bg-white border border-red-200 text-gray-900 placeholder-gray-400'
                  }`}
                />
              </div>

              {/* 提交按钮 */}
              <div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'}`}>
                <button
                  onClick={() => setStep('type')}
                  className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
                    isDark
                      ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
                      : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
                  }`}
                >
                  上一步
                </button>
                <button
                  onClick={handleCreateTask}
                  disabled={!sceneTask.name || !sceneTask.scene || !sceneTask.input}
                  className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                    isDark
                      ? 'bg-purple-600 hover:bg-purple-500 disabled:bg-slate-700 disabled:text-slate-500 text-white'
                      : 'bg-red-600 hover:bg-red-500 disabled:bg-gray-400 text-white shadow-md'
                  }`}
                >
                  创建任务
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 步骤2：多智能体会商任务 - 快速入口 */}
      {step === 'consult' && (
        <div className="max-w-3xl mx-auto">
          <div className={`rounded-xl p-6 border ${isDark ? 'bg-slate-800/30 backdrop-blur-xl border-orange-800/30' : 'bg-white border-red-100 shadow-sm'}`}>
            <div className="text-center mb-6">
              <div className={`w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 ${
                isDark ? 'bg-orange-500/20' : 'bg-red-100'
              }`}>
                <Users className={`w-8 h-8 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
              </div>
              <h2 className={`font-semibold text-lg mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>多智能体会商任务</h2>
              <p className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                多智能体并行讨论，人类主导研判与决策，输出会商结论
              </p>
            </div>

            {/* 会商流程预览 */}
            <div className={`rounded-xl p-4 mb-6 ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
              <h4 className={`font-medium text-sm mb-3 flex items-center gap-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>
                <Target className={`w-4 h-4 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
                会商流程
              </h4>
              <div className="grid grid-cols-5 gap-2">
                {[
                  { step: 1, label: '选择参与智能体' },
                  { step: 2, label: '设置会商规则' },
                  { step: 3, label: '首轮独立发言' },
                  { step: 4, label: '交叉讨论' },
                  { step: 5, label: '人工整合' },
                ].map((item) => (
                  <div key={item.step} className="text-center">
                    <div className={`w-8 h-8 rounded-full flex items-center justify-center mx-auto mb-1 ${
                      isDark ? 'bg-orange-500/20 border border-orange-500/50' : 'bg-red-100 border border-red-200'
                    }`}>
                      <span className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>{item.step}</span>
                    </div>
                    <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{item.label}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* 特点说明 */}
            <div className="grid grid-cols-3 gap-3 mb-6">
              <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
                <Users className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
                <p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>多智能体参与</p>
                <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>3-6个智能体并行</p>
              </div>
              <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
                <MessageSquare className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
                <p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>多种讨论模式</p>
                <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>并行/交叉/人机共判</p>
              </div>
              <div className={`p-3 rounded-lg text-center border ${isDark ? 'bg-orange-500/10 border-orange-500/20' : 'bg-red-50 border-red-100'}`}>
                <Sparkles className={`w-5 h-5 mx-auto mb-1 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
                <p className={`text-xs font-medium ${isDark ? 'text-orange-400' : 'text-red-600'}`}>人工整合</p>
                <p className={`text-xs mt-0.5 ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>人类主导判断</p>
              </div>
            </div>

            {/* 适用场景 */}
            <div className={`rounded-xl p-4 mb-6 ${isDark ? 'bg-slate-900/50' : 'bg-gray-50'}`}>
              <h4 className={`font-medium text-sm mb-2 ${isDark ? 'text-white' : 'text-gray-900'}`}>适用场景</h4>
              <div className="flex flex-wrap gap-2">
                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>前期方案研判</span>
                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>多方案比较分析</span>
                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>争议问题讨论</span>
                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-orange-500/10 text-orange-400' : 'bg-red-100 text-red-600'}`}>策略方向选择</span>
              </div>
            </div>

            {/* 操作按钮 */}
            <div className={`flex justify-end gap-3 pt-4 border-t ${isDark ? 'border-orange-800/30' : 'border-red-100'}`}>
              <button
                onClick={() => setStep('type')}
                className={`px-6 py-2.5 rounded-lg text-sm transition-colors ${
                  isDark
                    ? 'bg-slate-700/50 hover:bg-slate-600/50 border border-blue-800/30 text-slate-300'
                    : 'bg-gray-100 hover:bg-gray-200 border border-gray-200 text-gray-700'
                }`}
              >
                上一步
              </button>
              <button
                onClick={handleCreateTask}
                className={`px-6 py-2.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${
                  isDark
                    ? 'bg-orange-600 hover:bg-orange-500 text-white'
                    : 'bg-red-600 hover:bg-red-500 text-white shadow-md'
                }`}
              >
                <MessageSquare className="w-4 h-4" />
                进入会商配置
              </button>
            </div>
          </div>

          {/* 提示 */}
          <div className={`mt-4 p-4 rounded-xl border ${isDark ? 'bg-blue-500/10 border-blue-500/30' : 'bg-blue-50 border-blue-200'}`}>
            <div className="flex items-start gap-2">
              <Sparkles className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isDark ? 'text-blue-400' : 'text-blue-500'}`} />
              <p className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                <span className={`font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>提示：</span>
                会商任务将跳转到专门的会商配置页面，您可以在那里详细选择参与智能体、设置会商规则和模式。
              </p>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default TaskCreate;