"use client"

import { useState } from "react"

export function TaskList() {
  const [searchQuery, setSearchQuery] = useState("")
  const [openSections, setOpenSections] = useState({
    taskList: true,
  })

  const toggleSection = (section) => {
    setOpenSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

  // 模拟数据
  const tasks = [
    {
      id: "1",
      name: "高价值用户标签更新",
      type: "用户价值评估",
      status: "running",
      progress: 65,
      createdAt: "2023-07-15",
      lastRun: "2023-07-20",
      frequency: "每日",
      affectedTags: ["高价值用户", "中价值用户", "低价值用户"],
    },
    {
      id: "2",
      name: "行为标签生成",
      type: "行为分析",
      status: "completed",
      progress: 100,
      createdAt: "2023-07-10",
      lastRun: "2023-07-20",
      frequency: "每日",
      affectedTags: ["消费地点", "消费时间", "消费菜品"],
    },
    {
      id: "3",
      name: "流失风险评估",
      type: "风险预警",
      status: "paused",
      progress: 0,
      createdAt: "2023-06-25",
      lastRun: "2023-07-15",
      frequency: "每周",
      affectedTags: ["流失风险高", "流失风险中", "流失风险低"],
    },
    {
      id: "4",
      name: "兴趣标签更新",
      type: "兴趣分析",
      status: "scheduled",
      progress: 0,
      createdAt: "2023-07-01",
      lastRun: "2023-07-18",
      frequency: "每周",
      affectedTags: ["美食", "旅游", "电影", "音乐"],
    },
    {
      id: "5",
      name: "消费能力评估",
      type: "用户价值评估",
      status: "completed",
      progress: 100,
      createdAt: "2023-06-20",
      lastRun: "2023-07-19",
      frequency: "每周",
      affectedTags: ["高消费", "中消费", "低消费"],
    },
  ]

  return (
    <div className="space-y-4">
      {/* 任务列表内容 */}
      <div className="bg-white rounded-lg shadow">
        <div className="p-4">
          <h3 className="text-lg font-medium">标签任务列表</h3>
          <p className="text-sm text-gray-500">管理和监控标签计算任务</p>
        </div>
        <div className="border-t">
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  任务名称
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  类型
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  状态
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  进度
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  最后运行
                </th>
                <th
                  scope="col"
                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
                >
                  操作
                </th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {tasks.map((task) => (
                <tr key={task.id}>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm font-medium text-gray-900">{task.name}</div>
                    <div className="text-sm text-gray-500">创建于 {task.createdAt}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="text-sm text-gray-900">{task.type}</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <span
                      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                      ${
                        task.status === "running"
                          ? "bg-green-100 text-green-800"
                          : task.status === "completed"
                            ? "bg-blue-100 text-blue-800"
                            : task.status === "paused"
                              ? "bg-yellow-100 text-yellow-800"
                              : "bg-gray-100 text-gray-800"
                      }`}
                    >
                      {task.status === "running"
                        ? "运行中"
                        : task.status === "completed"
                          ? "已完成"
                          : task.status === "paused"
                            ? "已暂停"
                            : "已计划"}
                    </span>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap">
                    <div className="w-full bg-gray-200 rounded-full h-2.5">
                      <div
                        className={`h-2.5 rounded-full ${
                          task.status === "completed"
                            ? "bg-blue-600"
                            : task.status === "running"
                              ? "bg-green-600"
                              : "bg-gray-400"
                        }`}
                        style={{ width: `${task.progress}%` }}
                      ></div>
                    </div>
                    <div className="text-xs text-gray-500 mt-1">{task.progress}%</div>
                  </td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{task.lastRun}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="#" className="text-indigo-600 hover:text-indigo-900 mr-3">
                      查看
                    </a>
                    {task.status === "running" ? (
                      <a href="#" className="text-yellow-600 hover:text-yellow-900">
                        暂停
                      </a>
                    ) : task.status === "paused" || task.status === "scheduled" ? (
                      <a href="#" className="text-green-600 hover:text-green-900">
                        启动
                      </a>
                    ) : null}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
