import { useCallback } from "react";
import { TaskDetailModal } from "@/components/TaskDetailModal";
import { useExecutionContext } from "./ExecutionContext";
import { trpc } from "@/lib/trpc";

export function TaskModal() {
  const { selectedEntry, setSelectedTaskId } = useExecutionContext();
  const queueTaskMutation = trpc.queueTask.useMutation();

  const handleQueueTask = useCallback(
    (taskId: string) => {
      queueTaskMutation.mutate({ taskId });
      setSelectedTaskId(null);
    },
    [queueTaskMutation, setSelectedTaskId],
  );

  const handleClose = useCallback(() => {
    setSelectedTaskId(null);
  }, [setSelectedTaskId]);

  return (
    <TaskDetailModal
      task={selectedEntry?.task ?? null}
      phaseName={selectedEntry?.phaseName ?? ""}
      agentName={selectedEntry?.agentName ?? null}
      dependencies={selectedEntry?.blockedBy ?? []}
      dependents={selectedEntry?.dependents ?? []}
      onClose={handleClose}
      onQueueTask={handleQueueTask}
      onStopTask={handleClose}
    />
  );
}