import React, { useState } from 'react';
import {
  ArrowLeft,
  Bot,
  Users,
  Play,
  Pause,
  Download,
  CheckCircle,
  ChevronRight,
  MessageSquare,
  Send,
  Star,
  AlertCircle,
  FileText,
  Settings,
  Lightbulb,
  Zap,
  Check,
  X,
  Minus,
} from 'lucide-react';
import { useTheme } from '@/contexts/ThemeContext';
import { PageType } from '@/components/Sidebar';

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

// 模拟参与智能体
const participants = [
  {
    id: 'goal',
    name: 'GoalAgent',
    role: '目标分析专家',
    color: 'blue',
    status: 'idle' as const,
    lastOpinion: '建议聚焦提升品牌认知度这一核心目标',
  },
  {
    id: 'audience',
    name: 'AudienceAgent',
    role: '受众分析专家',
    color: 'cyan',
    status: 'speaking' as const,
    lastOpinion: '核心受众应为18-25岁基层青年群体',
  },
  {
    id: 'narrative',
    name: 'NarrativeAgent',
    role: '叙事策略专家',
    color: 'purple',
    status: 'idle' as const,
    lastOpinion: '应采用真实、有态度的青年故事叙事',
  },
  {
    id: 'risk',
    name: 'RiskAgent',
    role: '风险评估专家',
    color: 'red',
    status: 'idle' as const,
    lastOpinion: '需注意UGC质量不稳定和话题热度维持的风险',
  },
];

// 模拟讨论记录
const discussionRecords = [
  {
    id: 1,
    agentId: 'goal',
    agentName: 'GoalAgent',
    agentRole: '目标分析专家',
    color: 'blue',
    content: `从目标分析角度看，这次五四青年节宣传活动应聚焦以下核心目标：

**主目标**：提升品牌在Z世代用户中的认知度

**量化指标建议**：
- 曝光量：500万+
- 互动率：5%+
- UGC数量：1000+

**优先级判断**：
建议优先聚焦品牌认知度提升，短期内不追求直接转化。这样可以更好地与目标受众建立情感连接。`,
    time: '14:30',
    tags: ['核心目标', '品牌认知'],
    markedAs: null as string | null,
  },
  {
    id: 2,
    agentId: 'audience',
    agentName: 'AudienceAgent',
    agentRole: '受众分析专家',
    color: 'cyan',
    content: `基于受众分析，我建议：

**核心受众画像**：
- 年龄：18-25岁
- 身份：学生、基层青年工作者
- 地域：一二线城市为主

**关键洞察**：
这部分群体是社交媒体重度用户，注重"真实感"和"态度感"，反感过度营销。需要用平等对话的方式，而非说教式传播。

**内容偏好**：
真实故事 > 精致包装
态度表达 > 信息堆砌
参与互动 > 被动观看`,
    time: '14:32',
    tags: ['受众画像', '内容偏好'],
    markedAs: 'valuable' as string | null,
  },
  {
    id: 3,
    agentId: 'narrative',
    agentName: 'NarrativeAgent',
    agentRole: '叙事策略专家',
    color: 'purple',
    content: `从叙事策略角度，我建议采用以下框架：

**叙事主题**：真实、有态度的青年故事

**叙事结构**：
1. 讲述真实的人物故事
2. 引发情感共鸣
3. 传递品牌价值观
4. 激发用户参与

**关键要素**：
- 真实感 > 精致感
- 态度感 > 说教感
- 参与感 > 观看感

**内容类型建议**：
- 人物专访型：真实青年故事
- 事件记录型：青年节活动现场
- 观点表达型：青年态度宣言`,
    time: '14:35',
    tags: ['叙事框架', '内容类型'],
    markedAs: null as string | null,
  },
  {
    id: 4,
    agentId: 'risk',
    agentName: 'RiskAgent',
    agentRole: '风险评估专家',
    color: 'red',
    content: `我需要提醒以下风险：

**高风险项**：
1. 内容质量不稳定
   - 风险：UGC质量参差不齐
   - 对策：建立内容审核机制

**中风险项**：
2. 预算控制难度大
   - 风险：投放效果不可控
   - 对策：分阶段预算分配

3. 青年群体注意力分散
   - 风险：话题热度难维持
   - 对策：多波次内容规划

**建议**：重点关注内容质量风险，建立审核机制。`,
    time: '14:38',
    tags: ['风险识别', '应对建议'],
    markedAs: 'pending' as string | null,
  },
];

const TaskConsult: React.FC<TaskConsultProps> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const [isPaused, setIsPaused] = useState(false);
  const [currentRound, setCurrentRound] = useState(2);
  const [currentTopic, setCurrentTopic] = useState('宣传策略方向选择');
  const [humanInput, setHumanInput] = useState('');
  const [consensusPoints] = useState([
    '核心受众应聚焦18-25岁基层青年',
    '内容应以真实、有态度为核心',
  ]);
  const [disputedPoints] = useState([
    '叙事角度：事件叙事 vs 人物叙事',
    '传播渠道：短视频平台 vs 社交媒体',
  ]);
  const [humanNotes, setHumanNotes] = useState('');

  const getColorClasses = (color: string) => {
    const colors: Record<string, { bg: string; border: string; text: string }> = {
      blue: { bg: isDark ? 'bg-blue-500/20' : 'bg-blue-50', border: isDark ? 'border-blue-500/50' : 'border-blue-200', text: isDark ? 'text-blue-400' : 'text-blue-600' },
      cyan: { bg: isDark ? 'bg-cyan-500/20' : 'bg-cyan-50', border: isDark ? 'border-cyan-500/50' : 'border-cyan-200', text: isDark ? 'text-cyan-400' : 'text-cyan-600' },
      green: { bg: isDark ? 'bg-green-500/20' : 'bg-green-50', border: isDark ? 'border-green-500/50' : 'border-green-200', text: isDark ? 'text-green-400' : 'text-green-600' },
      yellow: { bg: isDark ? 'bg-yellow-500/20' : 'bg-yellow-50', border: isDark ? 'border-yellow-500/50' : 'border-yellow-200', text: isDark ? 'text-yellow-400' : 'text-yellow-600' },
      purple: { bg: isDark ? 'bg-purple-500/20' : 'bg-purple-50', border: isDark ? 'border-purple-500/50' : 'border-purple-200', text: isDark ? 'text-purple-400' : 'text-purple-600' },
      red: { bg: isDark ? 'bg-red-500/20' : 'bg-red-50', border: isDark ? 'border-red-500/50' : 'border-red-200', text: isDark ? 'text-red-400' : 'text-red-600' },
    };
    return colors[color] || colors.blue;
  };

  const getStatusConfig = (status: string) => {
    switch (status) {
      case 'speaking':
        return { label: '发言中', color: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700', dot: isDark ? 'bg-green-400' : 'bg-green-500' };
      case 'completed':
        return { label: '已完成', color: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-600', dot: isDark ? 'bg-slate-400' : 'bg-gray-400' };
      default:
        return { label: '待发言', color: isDark ? 'bg-slate-500/20 text-slate-400' : 'bg-gray-100 text-gray-600', dot: isDark ? 'bg-slate-400' : 'bg-gray-400' };
    }
  };

  const handleNextRound = () => {
    setCurrentRound(currentRound + 1);
  };

  const handleFinishConsult = () => {
    onNavigate('task-consult-result');
  };

  // 主题颜色类
  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-200';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
  const textMuted = isDark ? 'text-slate-500' : 'text-gray-500';
  const btnSecondary = isDark ? 'bg-slate-700/50 hover:bg-slate-600/50 border-blue-800/30 text-slate-300' : 'bg-gray-100 hover:bg-gray-200 border-gray-300 text-gray-700';
  const btnPrimary = isDark ? 'bg-blue-600 hover:bg-blue-500' : 'bg-red-600 hover:bg-red-500';
  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-gray-50';
  const inputBorder = isDark ? 'border-blue-800/30' : 'border-gray-300';

  return (
    <div className="h-[calc(100vh-140px)] flex flex-col space-y-4">
      {/* 顶部信息栏 */}
      <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-shrink-0`}>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button
              onClick={() => onNavigate('task-list')}
              className={`flex items-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-sm transition-colors`}
            >
              <ArrowLeft className="w-4 h-4" />
              返回
            </button>
            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
            <div>
              <h1 className={`${textPrimary} font-bold text-lg`}>五四青年节宣传策略会商</h1>
              <p className={`${textSecondary} text-sm`}>多智能体会商任务 · 第 {currentRound} 轮</p>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex items-center gap-4 text-sm">
              <span className={textSecondary}>
                模式：<span className={isDark ? 'text-purple-400' : 'text-purple-600'}>受控交叉讨论</span>
              </span>
              <span className={textSecondary}>
                参与：<span className={isDark ? 'text-cyan-400' : 'text-cyan-600'}>{participants.length} 个智能体</span>
              </span>
              <span className={textSecondary}>
                创建：<span className={textPrimary}>2026-03-19 14:30</span>
              </span>
            </div>
            <div className={`h-8 w-px ${isDark ? 'bg-blue-800/30' : 'bg-red-200'}`} />
            <div className="flex items-center gap-2">
              <button
                onClick={() => setIsPaused(!isPaused)}
                className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors ${
                  isPaused
                    ? (isDark ? 'bg-green-500/20 hover:bg-green-500/30 border-green-500/50 text-green-400' : 'bg-green-100 hover:bg-green-200 border-green-300 text-green-700')
                    : (isDark ? 'bg-yellow-500/20 hover:bg-yellow-500/30 border-yellow-500/50 text-yellow-400' : 'bg-yellow-100 hover:bg-yellow-200 border-yellow-300 text-yellow-700')
                }`}
              >
                {isPaused ? <Play className="w-4 h-4" /> : <Pause className="w-4 h-4" />}
                {isPaused ? '继续会商' : '暂停会商'}
              </button>
              <button className={`flex items-center gap-2 px-3 py-1.5 ${btnSecondary} rounded-lg text-sm transition-colors`}>
                <Download className="w-4 h-4" />
                导出纪要
              </button>
              <button
                onClick={handleFinishConsult}
                className="flex items-center gap-2 px-3 py-1.5 bg-orange-600 hover:bg-orange-500 text-white rounded-lg text-sm transition-colors"
              >
                <CheckCircle className="w-4 h-4" />
                结束并整合
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* 三栏主体区域 */}
      <div className="flex-1 grid grid-cols-12 gap-4 min-h-0">
        {/* 左栏：参与智能体与议题导航 */}
        <div className="col-span-3 flex flex-col gap-4 min-h-0">
          {/* 参与智能体 */}
          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-1 overflow-hidden flex flex-col`}>
            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
              <Users className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
              参与智能体
            </h3>
            <div className="space-y-2 flex-1 overflow-y-auto">
              {participants.map((agent) => {
                const colors = getColorClasses(agent.color);
                const statusConfig = getStatusConfig(agent.status);
                return (
                  <div
                    key={agent.id}
                    className={`p-3 rounded-lg border transition-all ${
                      agent.status === 'speaking'
                        ? `${colors.bg} ${colors.border}`
                        : isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'
                    }`}
                  >
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center gap-2">
                        <div className={`w-8 h-8 rounded-lg ${colors.bg} flex items-center justify-center`}>
                          <Bot className={`w-4 h-4 ${colors.text}`} />
                        </div>
                        <div>
                          <p className={`text-sm font-medium ${agent.status === 'speaking' ? colors.text : textPrimary}`}>
                            {agent.name}
                          </p>
                          <p className={`${textMuted} text-xs`}>{agent.role}</p>
                        </div>
                      </div>
                      <span className={`px-1.5 py-0.5 rounded text-xs ${statusConfig.color}`}>
                        {statusConfig.label}
                      </span>
                    </div>
                    {agent.lastOpinion && (
                      <p className={`${textSecondary} text-xs line-clamp-2 pl-10`}>{agent.lastOpinion}</p>
                    )}
                    <button
                      className={`mt-2 w-full px-2 py-1.5 rounded text-xs transition-colors ${
                        agent.status === 'speaking'
                          ? (isDark ? 'bg-slate-700/50 text-slate-400 cursor-not-allowed' : 'bg-gray-200 text-gray-500 cursor-not-allowed')
                          : (isDark ? 'bg-purple-500/20 hover:bg-purple-500/30 text-purple-400' : 'bg-purple-100 hover:bg-purple-200 text-purple-700')
                      }`}
                      disabled={agent.status === 'speaking'}
                    >
                      点名发言
                    </button>
                  </div>
                );
              })}
            </div>
          </div>

          {/* 会商议题导航 */}
          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4`}>
            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
              <MessageSquare className={`w-4 h-4 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
              会商议题
            </h3>
            <div className="space-y-2">
              <div className={`p-3 rounded-lg border ${isDark ? 'bg-green-500/20 border-green-500/50' : 'bg-green-50 border-green-300'}`}>
                <p className={`text-sm font-medium ${isDark ? 'text-green-400' : 'text-green-700'}`}>当前议题</p>
                <p className={`${textPrimary} text-sm mt-1`}>{currentTopic}</p>
              </div>
              <div className={`p-3 rounded-lg border ${isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'}`}>
                <p className={`${textMuted} text-xs mb-1`}>待讨论</p>
                <p className={isDark ? 'text-slate-300 text-sm' : 'text-gray-700 text-sm'}>渠道策略选择</p>
                <p className={isDark ? 'text-slate-300 text-sm' : 'text-gray-700 text-sm'}>预算分配方案</p>
              </div>
              <div className={`p-3 rounded-lg border ${isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'}`}>
                <p className={`${textMuted} text-xs mb-1`}>已讨论</p>
                <p className={`${textMuted} text-sm line-through`}>受众定位</p>
                <p className={`${textMuted} text-sm line-through`}>目标设定</p>
              </div>
            </div>
            <div className="mt-3 flex gap-2">
              <button className={`flex-1 px-2 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
                切换议题
              </button>
              <button className={`flex-1 px-2 py-1.5 ${btnSecondary} rounded-lg text-xs transition-colors`}>
                结束议题
              </button>
            </div>
          </div>
        </div>

        {/* 中栏：会商讨论区 */}
        <div className="col-span-6 flex flex-col gap-4 min-h-0">
          {/* 当前议题卡 */}
          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-shrink-0`}>
            <div className="flex items-center justify-between">
              <div>
                <p className={`${textSecondary} text-xs`}>当前议题</p>
                <p className={`${textPrimary} font-medium mt-0.5`}>{currentTopic}</p>
              </div>
              <div className="flex items-center gap-3">
                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-purple-500/20 text-purple-400' : 'bg-purple-100 text-purple-700'}`}>
                  受控交叉讨论模式
                </span>
                <span className={`px-2 py-1 rounded text-xs ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-700'}`}>
                  第 {currentRound} 轮
                </span>
              </div>
            </div>
          </div>

          {/* 讨论流 */}
          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl overflow-hidden flex flex-col`}>
            <div className={`p-4 border-b ${isDark ? 'border-blue-800/30' : 'border-gray-200'} flex items-center justify-between`}>
              <h3 className={`${textPrimary} font-semibold text-sm`}>讨论记录</h3>
              <button
                onClick={handleNextRound}
                className={`flex items-center gap-2 px-3 py-1.5 ${btnPrimary} bg-opacity-20 hover:bg-opacity-30 ${isDark ? 'border border-blue-500/30 text-blue-400' : 'border border-red-400 text-red-600'} rounded-lg text-xs transition-colors`}
              >
                <ChevronRight className="w-4 h-4" />
                下一轮
              </button>
            </div>
            <div className="flex-1 overflow-y-auto p-4 space-y-4">
              {discussionRecords.map((record) => {
                const colors = getColorClasses(record.color);
                return (
                  <div
                    key={record.id}
                    className={`p-4 rounded-xl border ${
                      record.markedAs === 'valuable'
                        ? (isDark ? 'bg-green-500/10 border-green-500/30' : 'bg-green-50 border-green-300')
                        : record.markedAs === 'pending'
                        ? (isDark ? 'bg-yellow-500/10 border-yellow-500/30' : 'bg-yellow-50 border-yellow-300')
                        : (isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200')
                    }`}
                  >
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center gap-3">
                        <div className={`w-10 h-10 rounded-lg ${colors.bg} flex items-center justify-center`}>
                          <Bot className={`w-5 h-5 ${colors.text}`} />
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <p className={`text-sm font-medium ${colors.text}`}>{record.agentName}</p>
                            {record.markedAs === 'valuable' && (
                              <span className={`px-1.5 py-0.5 rounded text-xs flex items-center gap-0.5 ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'}`}>
                                <Star className="w-3 h-3" /> 有价值
                              </span>
                            )}
                            {record.markedAs === 'pending' && (
                              <span className={`px-1.5 py-0.5 rounded text-xs flex items-center gap-0.5 ${isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700'}`}>
                                <AlertCircle className="w-3 h-3" /> 待验证
                              </span>
                            )}
                          </div>
                          <p className={`${textMuted} text-xs`}>{record.agentRole} · {record.time}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-1">
                        <button
                          className={`p-1.5 rounded transition-colors ${isDark ? 'hover:bg-green-500/20' : 'hover:bg-green-100'}`}
                          title="标记为有价值"
                        >
                          <Star className={`w-4 h-4 ${isDark ? 'text-slate-400 hover:text-green-400' : 'text-gray-500 hover:text-green-600'}`} />
                        </button>
                        <button
                          className={`p-1.5 rounded transition-colors ${isDark ? 'hover:bg-yellow-500/20' : 'hover:bg-yellow-100'}`}
                          title="标记为待验证"
                        >
                          <AlertCircle className={`w-4 h-4 ${isDark ? 'text-slate-400 hover:text-yellow-400' : 'text-gray-500 hover:text-yellow-600'}`} />
                        </button>
                        <button
                          className={`p-1.5 rounded transition-colors ${isDark ? 'hover:bg-red-500/20' : 'hover:bg-red-100'}`}
                          title="暂不采纳"
                        >
                          <X className={`w-4 h-4 ${isDark ? 'text-slate-400 hover:text-red-400' : 'text-gray-500 hover:text-red-600'}`} />
                        </button>
                      </div>
                    </div>
                    <div className="pl-13">
                      <div className={`${isDark ? 'text-slate-300' : 'text-gray-700'} text-sm whitespace-pre-wrap leading-relaxed`}>
                        {record.content}
                      </div>
                      <div className="flex items-center gap-2 mt-3">
                        {record.tags.map((tag) => (
                          <span key={tag} className={`px-2 py-0.5 rounded text-xs ${isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-blue-100 text-blue-700'}`}>
                            {tag}
                          </span>
                        ))}
                      </div>
                      <div className="flex items-center gap-2 mt-3">
                        <button className={`flex items-center gap-1 px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
                          <FileText className="w-3 h-3" />
                          引用到整合区
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* 人工发言区 */}
          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-shrink-0`}>
            <div className="flex items-start gap-3">
              <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${isDark ? 'bg-blue-500/20' : 'bg-blue-100'}`}>
                <Users className={`w-5 h-5 ${isDark ? 'text-blue-400' : 'text-blue-600'}`} />
              </div>
              <div className="flex-1">
                <textarea
                  value={humanInput}
                  onChange={(e) => setHumanInput(e.target.value)}
                  placeholder="输入您的评论、问题或指令... (可点名某个智能体：@GoalAgent)"
                  rows={2}
                  className={`w-full px-4 py-2.5 ${inputBg} border ${inputBorder} rounded-lg ${textPrimary} text-sm ${isDark ? 'placeholder-slate-500' : 'placeholder-gray-400'} focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} transition-colors resize-none`}
                />
                <div className="flex items-center justify-between mt-2">
                  <div className="flex items-center gap-2">
                    <button className={`px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
                      点名提问
                    </button>
                    <button className={`px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
                      发起对比问题
                    </button>
                    <button className={`px-2 py-1 ${btnSecondary} rounded text-xs transition-colors`}>
                      要求补充说明
                    </button>
                  </div>
                  <button
                    disabled={!humanInput.trim()}
                    className={`flex items-center gap-2 px-4 py-2 ${btnPrimary} disabled:${isDark ? 'bg-slate-700 text-slate-500' : 'bg-gray-300 text-gray-500'} text-white rounded-lg text-sm transition-colors`}
                  >
                    <Send className="w-4 h-4" />
                    发送
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 右栏：观点整合区 */}
        <div className="col-span-3 flex flex-col gap-4 min-h-0">
          {/* 各智能体核心观点 */}
          <div className={`${cardBg} backdrop-blur-xl border ${cardBorder} rounded-xl p-4 flex-1 overflow-hidden flex flex-col`}>
            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
              <Bot className={`w-4 h-4 ${isDark ? 'text-cyan-400' : 'text-cyan-600'}`} />
              各方观点
            </h3>
            <div className="space-y-3 flex-1 overflow-y-auto">
              {participants.map((agent) => {
                const colors = getColorClasses(agent.color);
                return (
                  <div key={agent.id} className={`p-3 rounded-lg ${isDark ? 'bg-slate-900/50 border-blue-800/30' : 'bg-gray-50 border-gray-200'}`}>
                    <div className="flex items-center gap-2 mb-2">
                      <Bot className={`w-4 h-4 ${colors.text}`} />
                      <span className={`text-sm font-medium ${colors.text}`}>{agent.name}</span>
                    </div>
                    <p className={`${textSecondary} text-xs line-clamp-3`}>{agent.lastOpinion}</p>
                  </div>
                );
              })}
            </div>
          </div>

          {/* 共识观点 */}
          <div className={`${cardBg} backdrop-blur-xl border ${isDark ? 'border-green-800/30' : 'border-green-300'} rounded-xl p-4`}>
            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
              <Check className={`w-4 h-4 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
              共识观点
              <span className={`px-1.5 py-0.5 rounded text-xs ml-auto ${isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-700'}`}>
                {consensusPoints.length} 条
              </span>
            </h3>
            <div className="space-y-2">
              {consensusPoints.map((point, index) => (
                <div key={index} className={`p-2 rounded-lg ${isDark ? 'bg-green-500/10 border border-green-500/30' : 'bg-green-50 border border-green-200'}`}>
                  <p className={isDark ? 'text-green-300 text-sm' : 'text-green-800 text-sm'}>{point}</p>
                </div>
              ))}
            </div>
          </div>

          {/* 分歧观点 */}
          <div className={`${cardBg} backdrop-blur-xl border ${isDark ? 'border-yellow-800/30' : 'border-yellow-300'} rounded-xl p-4`}>
            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
              <Minus className={`w-4 h-4 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`} />
              分歧观点
              <span className={`px-1.5 py-0.5 rounded text-xs ml-auto ${isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-700'}`}>
                {disputedPoints.length} 条
              </span>
            </h3>
            <div className="space-y-2">
              {disputedPoints.map((point, index) => (
                <div key={index} className={`p-2 rounded-lg ${isDark ? 'bg-yellow-500/10 border border-yellow-500/30' : 'bg-yellow-50 border border-yellow-200'}`}>
                  <p className={isDark ? 'text-yellow-300 text-sm' : 'text-yellow-800 text-sm'}>{point}</p>
                </div>
              ))}
            </div>
          </div>

          {/* 人工整合区 */}
          <div className={`${cardBg} backdrop-blur-xl border ${isDark ? 'border-purple-800/30' : 'border-purple-300'} rounded-xl p-4 flex-1 overflow-hidden flex flex-col`}>
            <h3 className={`${textPrimary} font-semibold text-sm mb-3 flex items-center gap-2`}>
              <Zap className={`w-4 h-4 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
              人工整合
            </h3>
            <textarea
              value={humanNotes}
              onChange={(e) => setHumanNotes(e.target.value)}
              placeholder="记录您的判断、暂定方向、待确认事项..."
              className={`flex-1 min-h-[120px] px-3 py-2 ${inputBg} border ${inputBorder} rounded-lg ${textPrimary} text-sm ${isDark ? 'placeholder-slate-500' : 'placeholder-gray-400'} focus:outline-none ${isDark ? 'focus:border-blue-500/50' : 'focus:border-red-400'} transition-colors resize-none`}
            />
            <div className="flex flex-col gap-2 mt-3">
              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 ${isDark ? 'bg-purple-600 hover:bg-purple-500' : 'bg-purple-600 hover:bg-purple-500'} text-white rounded-lg text-xs font-medium transition-colors`}>
                <Lightbulb className="w-4 h-4" />
                生成会商结论
              </button>
              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-xs transition-colors`}>
                <FileText className="w-4 h-4" />
                转为任务摘要
              </button>
              <button className={`w-full flex items-center justify-center gap-2 px-3 py-2 ${btnSecondary} rounded-lg text-xs transition-colors`}>
                <Settings className="w-4 h-4" />
                转为场景任务输入
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TaskConsult;