import { CheckCircle2, Loader2, Clock, Ban, Play, AlertTriangle } from "lucide-react";
import { cn } from "@/lib/utils";
import { trpc } from "@/lib/trpc";
import { useExecutionContext } from "@/components/execution";
import type { SerializedTask } from "@/components/TaskRow";

const statusConfig: Record<string, { icon: typeof Clock; color: string; spin?: boolean }> = {
  pending: { icon: Clock, color: "text-muted-foreground" },
  pending_approval: { icon: AlertTriangle, color: "text-yellow-500" },
  in_progress: { icon: Loader2, color: "text-blue-500", spin: true },
  completed: { icon: CheckCircle2, color: "text-green-500" },
  blocked: { icon: Ban, color: "text-red-500" },
};

interface PipelineTaskCardProps {
  task: SerializedTask;
}

export function PipelineTaskCard({ task }: PipelineTaskCardProps) {
  const { setSelectedTaskId } = useExecutionContext();
  const queueTask = trpc.queueTask.useMutation();

  const config = statusConfig[task.status] ?? statusConfig.pending;
  const Icon = config.icon;

  return (
    <div
      className="flex items-center gap-2 rounded px-2 py-1 cursor-pointer hover:bg-accent/50 group"
      onClick={() => setSelectedTaskId(task.id)}
    >
      <Icon
        className={cn("h-3.5 w-3.5 shrink-0", config.color, config.spin && "animate-spin")}
      />
      <span className="min-w-0 flex-1 truncate text-xs">{task.name}</span>
      {task.status === "pending" && (
        <button
          className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
          onClick={(e) => {
            e.stopPropagation();
            queueTask.mutate({ taskId: task.id });
          }}
          title="Queue task"
        >
          <Play className="h-3 w-3 text-muted-foreground hover:text-foreground" />
        </button>
      )}
    </div>
  );
}
