import { useTheme } from '@/contexts/ThemeContext';
import { TaskListItem } from '@/pages/TaskManagement';
import { ChevronRight, FileText } from 'lucide-react';
import React, { useEffect, useState } from 'react';
import { PageType } from '../Sidebar';
import { TaskCard } from './TaskCard';
import { Pagination } from 'tdesign-react';

interface KanbanColumnProps {
  title: string;
  count: number;
  color: string;
  tasks: TaskListItem[];
  taskType: string;
  TaskDataType?: string; // 区分来源类型
  onNavigate: (page: PageType) => void;
  pageIndexSearch: (taskType: string, pageIndex: number) => void;
  handleStartAnalysis: (task: TaskListItem) => void
}

export const KanbanColumn: React.FC<KanbanColumnProps> = ({ title, count, color, tasks,taskType, TaskDataType = 'task' , onNavigate, pageIndexSearch, handleStartAnalysis }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';
  const textPrimary = isDark ? 'text-white' : 'text-gray-900';
  const textMuted = isDark ? 'text-slate-500' : 'text-gray-400';
  // 当前页码，默认为第 1 页
  const [pageNum, setPageNum] = useState<number>(1);
  // 每页显示数量，默认为 10 条
  const [pageSize, setPageSize] = useState<number>(10); // 每页显示 10 条
  /**
  * 页码变化时的回调函数
  * 当用户切换页码时触发，更新页码并重新获取数据
  * @param value - 新的页码值
  */
  const pageIndexChange = async (value: number) => {
    // 更新 ref 中存储的页码值
    // 更新页码状态，触发组件重新渲染
    console.log('taskType', taskType)
    setPageNum(value);
    await pageIndexSearch(taskType, value);
  }

  /**
   * 每页显示数量变化时的回调函数
   * 当用户切换每页显示条数时触发，更新每页数量并重新获取数据
   * @param value - 新的每页显示数量
   */
  const pageSizeChange = async (value: number) => {
    // 更新 ref 中存储的每页显示数量
    // 更新每页显示数量状态，触发组件重新渲染
    setPageSize(value);
  }
  return (
    <div className="flex flex-col min-h-0 flex-1">
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-2">
          <div className={`w-2 h-2 rounded-full ${color}`} />
          <h2 className={`font-semibold text-sm ${textPrimary}`}>{title}</h2>
          <span className={`px-2 py-0.5 rounded-full text-xs ${isDark ? 'bg-slate-700/50 text-slate-400' : 'bg-red-50 text-red-500'
            }`}>{count}</span>
        </div>
        {/* <button className={`p-1 rounded transition-colors ${isDark ? 'hover:bg-slate-700/50' : 'hover:bg-red-50'
          }`}>
          <ChevronRight className={`w-4 h-4 ${textMuted}`} />
        </button> */}
        <div>
          <Pagination
            total={count}
            size="small"
            theme="simple"
            current={pageNum}
            pageSize={pageSize}
            maxPageBtn={3}
            showPageSize={false}
            totalContent={false}
            onCurrentChange={(page) => pageIndexChange(Number(page))}
          />
        </div>
      </div>
      <div className="flex-1 overflow-y-auto space-y-3 pr-1 scrollbar-thin">
        {tasks.length === 0 ? (
          <div className={`flex flex-col items-center justify-center py-8 ${textMuted}`}>
            <FileText className="w-8 h-8 mb-2 opacity-50" />
            <p className="text-sm">暂无任务</p>
          </div>
        ) : (
          tasks.map(task => <TaskCard key={task.id} task={task} TaskType={TaskDataType} onNavigate={onNavigate} handleStartAnalysis={handleStartAnalysis}/>)
        )}
      </div>
    </div>
  );
}