import { CheckIcon } from "lucide-react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { TABS_TASK_NAMESPACE } from "@/i18n/resources";
import type { ExecutionControlUpdateTodosTodosItem as TodoItem } from "@/api/generated/schemas";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { useAgentTaskState } from "../../hooks/use-agent-task";
import { TodoList } from "../TodoList";

function getCurrentTodo(todos: TodoItem[]): TodoItem | null {
  const inProgress = todos.find((todo) => todo.status === "in_progress");
  if (inProgress) {
    return inProgress;
  }

  return todos.find((todo) => todo.status !== "completed" && todo.status !== "cancelled") ?? null;
}

export function TaskProgress({ className }: { className?: string }) {
  const { t } = useTranslation(TABS_TASK_NAMESPACE);
  const { todos } = useAgentTaskState();
  const currentTodo = useMemo(() => {
    if (!todos) {
      return null;
    }
    return getCurrentTodo(todos);
  }, [todos]);

  if (!todos || todos.length === 0) {
    return null;
  }

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button className={cn("justify-start", className)} type="button" variant="ghost">
          {currentTodo && <span className="truncate">{currentTodo.description}</span>}
          {!currentTodo && (
            <div className="flex items-center gap-1 text-success">
              <CheckIcon />
              {t("task_progress.completed")}
            </div>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-fit max-w-108 p-2">
        <TodoList todos={todos} />
      </PopoverContent>
    </Popover>
  );
}
