// frontend/src/components/SideBarRight/tabs/Tasks/Tasks.jsx
import React from 'react';
import './Tasks.css';
import useTasksStore from '../../../../Store/SideBarRight/TasksSlice';

const Tasks = () => {
  const { tasks, clearCompleted, cancelTask } = useTasksStore();

  if (tasks.length === 0) {
    return (
      <div className="tasks-content">
        <div className="tab-header">
          <span className="title-text">任务队列</span>
          <span className="task-count">0</span>
        </div>
        <div className="empty-state">
          <p>暂无进行中的任务</p>
        </div>
      </div>
    );
  }

  return (
    <div className="tasks-content">
      <div className="tab-header">
        <span className="title-text">任务队列</span>
        <span className="task-count">{tasks.length}</span>
        <button 
          className="btn-clear"
          onClick={clearCompleted}
          title="清理已完成任务"
        >
          🗑️
        </button>
      </div>

      <div className="tasks-list">
        {tasks.map(task => (
          <div key={task.taskId} className={`task-item ${task.status}`}>
            <div className="task-header">
              <span className="task-icon">
                {task.taskType === 'image_workflow' ? '🖼️' : '📊'}
              </span>
              <span className="task-name">
                {task.taskType === 'image_workflow' ? '生图任务' : '表格维护'}
              </span>
              <span className="task-status-badge">
                {task.status === 'pending' && <span className="status-pending">⏸️ 等待</span>}
                {task.status === 'running' && <span className="status-running">⏳ 进行中</span>}
                {task.status === 'completed' && <span className="status-completed">✓ 完成</span>}
                {task.status === 'failed' && <span className="status-failed">✗ 失败</span>}
                {task.status === 'cancelled' && <span className="status-cancelled">⊘ 取消</span>}
              </span>
            </div>

            {task.status === 'running' && (
              <div className="task-actions">
                <button 
                  className="btn-cancel-task"
                  onClick={() => cancelTask(task.taskId)}
                >
                  终止
                </button>
              </div>
            )}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Tasks;
