import { useTheme } from '@/contexts/ThemeContext';
import { actionColumnItem, ActionListItem, TaskListItem, taskStatusList } from '@/pages/TaskManagement';
import { Bot, ChevronRight, Download, Edit, Eye, FileText, Layers, MoreHorizontal, Play, Search, User, Users, Workflow } from 'lucide-react';
import React, { useEffect, useRef, useState } from 'react';
import { PageType } from '../Sidebar';
import { format } from 'date-fns';
import { useNavigate } from 'react-router-dom';
import { Col, Empty, Loading, Pagination, Progress, Row } from 'tdesign-react';
import { requestCrudService } from '@/service/request-axios-service';
import { ActionColumn } from './ActionColumn';

interface ActionAnalyzesProps {
  TaskType?: string;
  title: string;
  category: string;
  subCategory: string;
  onNavigate: (page: PageType) => void;
}

const service = requestCrudService;
const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
export const ActionAnalyzes: React.FC<ActionAnalyzesProps> = ({ title, category, subCategory, onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  // 主题颜色变量
  const cardBg = isDark ? 'bg-slate-800/30' : 'bg-white';
  const cardBorder = isDark ? 'border-blue-800/30' : 'border-red-100';
  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-400';
  const inputBg = isDark ? 'bg-slate-900/50' : 'bg-white';
  const navigate = useNavigate();
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [taskList, setTaskList] = useState<TaskListItem[]>([]); // 任务列表
  const [taskId, setTaskId] = useState<number>(0); // 任务
  const [actionColumnList, setActionColumnList] = useState<actionColumnItem[]>([]);
  const [taskLoading, setTaskLoading] = useState<boolean>(false);
  const [actionLoading, setActionLoading] = useState<boolean>(false);
  // 当前页码，默认为第 1 页
  const [pageNum, setPageNum] = useState<number>(1);
  // 每页显示数量，默认为 10 条
  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
  const [total, setTotal] = useState<number>(0); // 查询任务总数
  const state = useRef({
    pageIndex: 1,
    pageSize: 10
  })
  // 回车处理
  const handleKeyDown = async (e) => {
    if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
      e.preventDefault();
    } else if (e.keyCode === 13) {
      e.preventDefault();
      await taskListSearch()
    } else if (e.key === "/") {
      e.preventDefault();
    }
  };

  /**
  * 页码变化时的回调函数
  * 当用户切换页码时触发，更新页码并重新获取数据
  * @param value - 新的页码值
  */
  const pageIndexChange = async (value: number) => {
    // 更新 ref 中存储的页码值
    // 更新页码状态，触发组件重新渲染
    setPageNum(value);
    state.current.pageIndex = value;
    await taskListSearch();
  }

  // 任务查询
  const taskListSearch = async () => {
    const param = {
      keyword: '',
      pageNum: state.current.pageIndex,
      pageSize: state.current.pageSize
    }
    setTaskLoading(true);
    const res = await service.post(`${zncmUrl}/action/cop-action-tasks`, param);
    setTaskLoading(false);
    console.log('任务搜索', res);
    const result = res.data;
    result.forEach((item: TaskListItem) => {
      item.progress = item.endCount / item.sumAll || 0; // 获取已完成和未完成的占比
      item.taskStatusData = taskStatusList[item.taskStatus] // 根据任务状态码获取相关信息
    })
    setTaskList(result || []); // 设置任务列表页
    const totalRes = await service.post(`${zncmUrl}/action/cop-action-tasks-count`, param); // 查询任务总数
    console.log('totalRes', totalRes)
    setTotal(totalRes.data || 0); // 设置总数
    if (result.length > 0) {
      setTaskId(result[0].id);
      await actionListSearch(result[0].id);
    }
  }

  // 行动查询
  const actionListSearch = async (taskId: number) => {
    const param = {
      taskId: taskId,
    }
    setActionLoading(true);
    const res = await service.get(`${zncmUrl}/action/cop-task-actions`, param);
    console.log('行动查询', res);
    setActionLoading(false);
    const result = res.data;
    setActionColumnList([
      { columnName: '待分析', icon: '待CEH.svg', actionList: result.collect || [] },
      { columnName: 'CEH中', icon: '进行中.svg', actionList: result.collect1 || [] },
      { columnName: 'CEH完成', icon: '完成.svg', actionList: result.collect2 || [] },
      { columnName: '已终止', icon: '已终止.svg', actionList: result.endDate || [] },
    ]);
  }

  const taskDataChange = async (taskId: number) => {
    setTaskId(taskId);
    await actionListSearch(taskId);
  }

  useEffect(() => {
    taskListSearch();
  }, [])
  return (
    <div className="h-full flex flex-col">
      <Row className="h-full flex flex-col">
        <Col span={2} className="h-full">
          <div className={`h-[calc(100vh-100px)] p-[10px] ${isDark ? 'bg-[rgba(3,38,80,0.6)]' : 'bg-white'} shadow-[2px_0px_6px_rgba(0,0,0,0.12)]`} >
            {/* <div className="flex justify-between">
              <span>筛选</span>
              <span className="flex items-center">
                <span>下发时间排序</span>
              </span>
            </div> */}
            <div className="relative flex-1 max-w-md">
              <Search className={`absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 ${textMuted}`} />
              <input
                type="text"
                placeholder="搜索任务名称"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                onKeyDown={(e) => handleKeyDown(e)}
                className={`w-full pl-10 pr-4 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 transition-colors ${inputBg} ${cardBorder} ${textPrimary} placeholder:${textMuted}`}
              />
            </div>
            {/* 任务列表 */}
            <Loading loading={taskLoading}>
              <div className="h-[calc(100vh-200px)] overflow-y-auto pr-[10px]">
                {
                  taskList.map((item: TaskListItem, index: number) => (
                    <div key={index} className={`${isDark ? 'bg-[#0062d91a] border-[#55a6fe1a] shadow-[0_3px_4px_#8b8b8b0f] dark-theme' : 'bg-white border-[#f5f5f5] shadow-[2px_0px_6px_rgba(0,0,0,0.08)] task-item-active'} p-[10px] mt-[10px] mb-[10px] rounded-[4px] border ${taskId === item.id && 'task-active'} cursor-pointer`} onClick={() => taskDataChange(item.id)}>
                      <div className="text-[var(--text-color)] text-[17px] mb-[5px] font-[500]">{item.taskName}</div>
                      <div className="text-[#7f7f7f] mb-[5px]">{format(new Date(item.taskStartDate), 'yyyy-MM-dd HH:mm:ss')}</div>
                      <div className="flex items-center mb-[8px]">
                        <img src={`/icon/${item?.taskStatusData?.icon}`} alt="" />
                        <span className="ml-[5px] leading-[16px]">{item?.taskStatusData?.label}</span>
                      </div>
                      <div className="pb-[10px] pt-[10px]">
                        <div className="border-b border-[#e8e8e8]"></div>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="h-[24px] item-active pl-[10px] pr-[10px] task-tab-color leading-[24px] rounded-[50px] bg-[var(--bg-color)]">
                          完成{item.endCount}/{item.sumAll}
                        </div>
                        <div className="pl-[20px] flex-1">
                          <Progress percentage={item.progress} label={false} color={item?.taskStatusData?.color} />
                        </div>
                      </div>
                    </div>
                  ))
                }
              </div>
            </Loading>
            {/* 分页 */}
            <div>
              <Pagination
                total={total}
                size="small"
                theme="simple"
                current={pageNum}
                pageSize={pageSize}
                showPageSize={false}
                onCurrentChange={(page) => pageIndexChange(Number(page))}
              />
            </div>
          </div>
        </Col>

        <Col span={10} className="h-full">
          <div className="h-full flex flex-col p-[0_10px]">
            <Loading loading={actionLoading}>
              <div className="flex grid grid-cols-4 gap-[10px] pl-[10px]">
                {
                  actionColumnList.map((item: actionColumnItem, index: number) => (
                    <ActionColumn key={index} icon={item.icon} columnIndex={index} columnName={item.columnName} actionCount={item.actionList.length} actionList={item.actionList} title={title} category={category} subCategory={subCategory} />
                  ))
                }
                {
                  actionColumnList.length === 0 && <Empty/>
                }
              </div>
            </Loading>
          </div>
        </Col>
      </Row>
    </div>
  );
}