/** 任务进度列表卡片 */
import { ClipboardList, ChevronRight } from "lucide-react";
import type { TaskSummary } from "../../types/api";

const STATUS_LABELS: Record<string, string> = {
  pending: "待处理",
  in_progress: "进行中",
  completed: "已完成",
  cancelled: "已取消",
};

function statusColor(status: string): string {
  switch (status) {
    case "pending":   return "bg-yellow-100 text-yellow-700";
    case "in_progress": return "bg-blue-100 text-blue-700";
    case "completed":  return "bg-green-100 text-green-700";
    default:           return "bg-gray-100 text-gray-600";
  }
}

interface TaskListCardProps {
  tasks: TaskSummary[];
}

export default function TaskListCard({ tasks }: TaskListCardProps) {
  return (
    <div className="rounded-xl bg-white shadow-sm">
      <div className="flex items-center gap-2 border-b border-gray-100 px-4 py-3">
        <ClipboardList className="h-5 w-5 text-blue-600" />
        <h3 className="font-semibold text-gray-800">当前进度</h3>
        <span className="ml-auto text-xs text-gray-400">{tasks.length} 个任务</span>
      </div>

      {tasks.length === 0 ? (
        <div className="px-4 py-8 text-center text-sm text-gray-400">暂无关联任务</div>
      ) : (
        <div className="divide-y divide-gray-50">
          {tasks.map((task) => (
            <div key={task.id} className="flex items-center gap-3 px-4 py-3">
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-medium text-gray-800">{task.task_name}</p>
                <p className="text-xs text-gray-400">
                  负责人: {task.assignee_id ?? "未分配"}
                </p>
              </div>
              <span className={`shrink-0 rounded-full px-2 py-0.5 text-xs font-medium ${statusColor(task.status)}`}>
                {STATUS_LABELS[task.status] ?? task.status}
              </span>
              <ChevronRight className="h-4 w-4 shrink-0 text-gray-300" />
            </div>
          ))}
        </div>
      )}
    </div>
  );
}