import { useTheme } from '@/contexts/ThemeContext';
import { TaskListItem } from '@/pages/TaskManagement';
import { Bot, ChevronRight, Download, Edit, Eye, FileText, Layers, MoreHorizontal, Play, User, Users, Workflow } from 'lucide-react';
import React, { useEffect, useState } from 'react';
import { PageType } from '../Sidebar';
import { format } from 'date-fns';
import { useNavigate } from 'react-router-dom';
import { useChatContext } from '@/contexts/ChatContext';

interface KanbanColumnProps {
  TaskType?: string;
  task: TaskListItem;
  onNavigate: (page: PageType) => void;
  handleStartAnalysis: (task: TaskListItem) => void
}

export const TaskCard: React.FC<KanbanColumnProps> = ({ task, TaskType = 'task', onNavigate, handleStartAnalysis }) => {
  const { theme } = useTheme();
  const { setStartConfig } = useChatContext();
  const isDark = theme === 'dark';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
  const textSecondary = isDark ? 'text-slate-400' : 'text-gray-600';
  const navigate = useNavigate();

  const handleStartChange = (task: TaskListItem) => {
    // if (TaskType === 'task') {
    //   handleStartAnalysis(task);
    // } else {
    //   sceneDataChange(task);
    // }
    handleStartAnalysis(task);
  }

  const sceneDataChange = (task: TaskListItem) => {
    const sceneItem = JSON.parse(task.scene);
    if (sceneItem.taskJson) {
      sceneItem.taskJson = JSON.parse(sceneItem.taskJson);
      setStartConfig({
        ...sceneItem.taskJson,
        llm_preset_id: 'BAILING',
        consistency_mode: 'soft',
        phase_config: { diverge_rounds: 3 },
        task_context: task.overview
      });
      navigate('/qa-center/mope-chat')
    }
    console.log('sceneItem', sceneItem);
  }
  // 处理卡片点击
  const handleTaskClick = (task: TaskListItem) => {
    if (TaskType === 'sentiment') {
      console.log('点击了', task)
      sceneDataChange(task);
      // window.open(`http://ch1.b.uat.4.cn/taskcop/#/situation-overview/action/sentiment?taskId=${task.id}`)
    } else {
      if (task.column === 'completed') {
        // if (task.type === 'consultation') {
        //   onNavigate('task-consult-result');
        // } else {
        //   onNavigate('strategy-result');
        // }
        navigate('/strategy-result')
      } else if (task.column === 'running') {
        // navigate('/task-management/task-consult')
        sceneDataChange(task);
        // window.open(`http://ch1.b.uat.4.cn/mopeweb/#/mope?taskOverview=${task.overview}`)
        // if (task.type === 'scene') {
        //   onNavigate('task-scene');
        // } else if (task.type === 'consultation') {
        //   onNavigate('task-consult');
        // } else {
        //   onNavigate('task-single');
        // }
      }
    }
  };

  // 获取任务类型配置
  const getTypeConfig = (type: string) => {
    if (isDark) {
      switch (type) {
        case 'single':
          return { label: '单智能体', color: 'bg-cyan-500/20 text-cyan-400', icon: Bot };
        case 'scene':
          return { label: '场景执行', color: 'bg-purple-500/20 text-purple-400', icon: Workflow };
        case 'consultation':
          return { label: '多智能体会商', color: 'bg-orange-500/20 text-orange-400', icon: Users };
        case 'multi-agent':
          return { label: '多智能体协同', color: 'bg-green-500/20 text-green-400', icon: Layers };
      }
    } else {
      switch (type) {
        case 'single':
          return { label: '单智能体', color: 'bg-blue-100 text-blue-600', icon: Bot };
        case 'scene':
          return { label: '场景执行', color: 'bg-purple-100 text-purple-600', icon: Workflow };
        case 'consultation':
          return { label: '多智能体会商', color: 'bg-orange-100 text-orange-600', icon: Users };
        case 'multi-agent':
          return { label: '多智能体协同', color: 'bg-green-100 text-green-600', icon: Layers };
      }
    }
  };
  const typeConfig = getTypeConfig('single');
  // 获取任务等级
  const getLevel = (type: number) => {
    if (isDark) {
      switch (type) {
        case 1:
          return { label: '一般', color: 'bg-cyan-500/20 text-cyan-400', icon: Bot };
        case 2:
          return { label: '紧急', color: 'bg-purple-500/20 text-purple-400', icon: Workflow };
        case 3:
          return { label: '加急', color: 'bg-orange-500/20 text-orange-400', icon: Users };
      }
    } else {
      switch (type) {
        case 1:
          return { label: '一般', color: 'bg-blue-100 text-blue-600', icon: Bot };
        case 2:
          return { label: '紧急', color: 'bg-purple-100 text-purple-600', icon: Workflow };
        case 3:
          return { label: '加急', color: 'bg-orange-100 text-orange-600', icon: Users };
      }
    }
  };

  const levelConfig = getLevel(task.taskLevel);
  const LevelIcon = levelConfig?.icon || Bot;
  // 获取状态配置
  const getStatusConfig = (column: string) => {
    if (column === 'unanalyzed') {
      return { label: '待分析', color: isDark ? 'bg-yellow-500/20 text-yellow-400' : 'bg-yellow-100 text-yellow-600' };
    } else if (column === 'running') {
      return { label: '运行中', color: isDark ? 'bg-blue-500/20 text-blue-400' : 'bg-red-100 text-red-600' };
    } else {
      return { label: '已完成', color: isDark ? 'bg-green-500/20 text-green-400' : 'bg-green-100 text-green-600' };
    }
  };
  const statusConfig = getStatusConfig(task.column);
  return (
    <div
      className={`rounded-xl p-4 hover:shadow-md transition-all duration-200 cursor-pointer group theme-card border ${isDark
        ? 'bg-slate-800/40 backdrop-blur-xl border-blue-800/30 hover:border-blue-500/50'
        : 'bg-white border-red-100 hover:shadow-md shadow-red-100'
        }`}
      onClick={() => handleTaskClick(task)}
    >
      {/* 卡片头部：模式标签 + 状态标签 */}
      <div className="flex items-center justify-between mb-2">
        <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium ${levelConfig.color}`}>
          {LevelIcon && <LevelIcon className="w-3 h-3" />}
          {levelConfig.label}
        </span>
        <span></span>
        <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium ${statusConfig.color}`}>
          {statusConfig.label}
        </span>
      </div>

      {/* 任务名称 */}
      <h3 className={`font-semibold text-sm mb-1 line-clamp-2 group-hover:text-red-500 transition-colors ${textPrimary}`}>
        {task.taskName}
      </h3>

      {/* 任务编号 */}
      <p className={`text-xs mb-2 ${textMuted}`}>TASK-{task.id}</p>

      {/* 任务摘要 */}
      <p className={`text-xs mb-3 line-clamp-2 ${textSecondary}`}>{task.overview}</p>

      {/* 补充信息区 */}
      {/* <div className="space-y-1 mb-3">
          {task.type === 'single' && task.agent && (
            <div className="flex items-center gap-2 text-xs">
              <Bot className={`w-3 h-3 ${isDark ? 'text-cyan-400' : 'text-red-500'}`} />
              <span className={textSecondary}>执行智能体：</span>
              <span className={isDark ? 'text-cyan-400' : 'text-red-600'}>{task.agent}</span>
            </div>
          )}
          {task.type === 'scene' && task.scene && (
            <div className="flex items-center gap-2 text-xs">
              <Workflow className={`w-3 h-3 ${isDark ? 'text-purple-400' : 'text-red-500'}`} />
              <span className={textSecondary}>关联场景：</span>
              <span className={isDark ? 'text-purple-400' : 'text-red-600'}>{task.scene}</span>
            </div>
          )}
          {task.type === 'consultation' && (
            <>
              <div className="flex items-center gap-2 text-xs">
                <Users className={`w-3 h-3 ${isDark ? 'text-orange-400' : 'text-red-500'}`} />
                <span className={textSecondary}>参与智能体：</span>
                <span className={isDark ? 'text-orange-400' : 'text-red-600'}>{task.participants?.length || 0}个</span>
              </div>
              {task.currentRound && (
                <div className="flex items-center gap-2 text-xs">
                  <Clock className={`w-3 h-3 ${textMuted}`} />
                  <span className={textSecondary}>当前轮次：</span>
                  <span className={textPrimary}>第{task.currentRound}轮</span>
                </div>
              )}
            </>
          )}
          {task.column === 'analyzing' && task.currentPhase && (
            <div className="flex items-center gap-2 text-xs">
              <Target className={`w-3 h-3 ${textMuted}`} />
              <span className={textSecondary}>当前阶段：</span>
              <span className={textPrimary}>{task.currentPhase}</span>
            </div>
          )}
        </div> */}

      {/* 时间信息 */}
      <div className={`flex items-center justify-between text-xs pt-3 border-t ${isDark ? 'border-blue-800/30 text-slate-500' : 'border-red-100 text-gray-400'
        }`}>
        <div className="flex items-center gap-1.5">
          <User className="w-3 h-3" />
          <span>{task.taskDirection}</span>
        </div>
        <span>{format(new Date(task.updateTime), 'yyyy-MM-dd HH:mm:ss')}</span>
      </div>

      {/* 操作按钮区 */}
      <div className={`flex items-center gap-2 mt-3 pt-3 border-t ${isDark ? 'border-blue-800/30' : 'border-red-100'
        }`}>
        {task.column === 'unanalyzed' && (
          <>
            <button
              onClick={(e) => { e.stopPropagation(); handleStartChange(task); }}
              className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${isDark
                ? 'bg-blue-600 hover:bg-blue-500'
                : 'bg-red-600 hover:bg-red-500 shadow-md'
                }`}
            >
              <Play className="w-3 h-3" />
              开始分析
            </button>
            {/* <button
              onClick={(e) => { e.stopPropagation(); onNavigate('task-create'); }}
              className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
                }`}
              title="编辑"
            >
              <Edit className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
            </button> */}
          </>
        )}
        {task.column === 'running' && (
          <>
            <button
              onClick={(e) => { e.stopPropagation(); handleStartChange(task); }}
              className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${isDark
                ? 'bg-blue-600 hover:bg-blue-500'
                : 'bg-red-600 hover:bg-red-500 shadow-md'
                }`}
            >
              <Play className="w-3 h-3" />
              开始分析
            </button>
            {/* <button
              onClick={(e) => { e.stopPropagation(); handleStartChange(task); }}
              className={`px-2 py-1.5 rounded-lg text-xs transition-colors ${isDark
                ? 'hover:bg-slate-700/50 border border-blue-800/30 text-slate-300'
                : 'hover:bg-red-50 border border-red-200 text-red-600'
                }`}
            >
              查看进展
            </button> */}
          </>
        )}
        {task.column === 'completed' && (
          <>
            <button
              onClick={(e) => { e.stopPropagation(); handleStartChange(task); }}
              className={`flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-white rounded-lg text-xs font-medium transition-colors ${isDark
                ? 'bg-green-600 hover:bg-green-500'
                : 'bg-green-600 hover:bg-green-500 shadow-md'
                }`}
            >
              <Eye className="w-3 h-3" />
              开始分析
            </button>
            {/* <button className={`px-2 py-1.5 rounded-lg text-xs transition-colors ${isDark
              ? 'hover:bg-slate-700/50 border border-blue-800/30 text-slate-300'
              : 'hover:bg-red-50 border border-red-200 text-red-600'
              }`}>
              <Download className="w-4 h-4" />
            </button> */}
          </>
        )}
        {/* <button className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
          }`} title="更多">
          <MoreHorizontal className={`w-4 h-4 ${isDark ? 'text-slate-400' : 'text-red-400'}`} />
        </button> */}
      </div>
    </div>
  );
}