"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { ConfirmDialog } from "@/components/shared/confirm-dialog";
import {
  MoreVertical,
  CheckCircle,
  Play,
  Pencil,
  XCircle,
  Archive,
  Trash2,
} from "lucide-react";
import {
  useMarkInProgress,
  useCancelTask,
  useArchiveTask,
  useDeleteTask,
} from "@/lib/hooks/use-tasks";
import { useDataProvider } from "@/lib/demo/data-provider-context";

interface TaskActionsMenuProps {
  taskId: number;
}

export function TaskActionsMenu({ taskId }: TaskActionsMenuProps) {
  const router = useRouter();
  const { basePath } = useDataProvider();
  const [deleteOpen, setDeleteOpen] = useState(false);

  const markInProgress = useMarkInProgress();
  const cancelTask = useCancelTask();
  const archiveTask = useArchiveTask();
  const deleteTask = useDeleteTask();

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="outline" size="icon" aria-label="Task actions">
            <MoreVertical className="size-4" aria-hidden="true" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem
            onClick={() => router.push(`${basePath}/tasks/${taskId}/complete`)}
          >
            <CheckCircle className="size-4" />
            Complete
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() =>
              markInProgress.mutate(taskId, {
                onSuccess: () => toast.success("Task marked in progress"),
                onError: () => toast.error("Failed to update task"),
              })
            }
          >
            <Play className="size-4" />
            Mark In Progress
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => router.push(`${basePath}/tasks/${taskId}/edit`)}
          >
            <Pencil className="size-4" />
            Edit
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onClick={() =>
              cancelTask.mutate(taskId, {
                onSuccess: () => toast.success("Task cancelled"),
                onError: () => toast.error("Failed to cancel task"),
              })
            }
          >
            <XCircle className="size-4" />
            Cancel
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() =>
              archiveTask.mutate(taskId, {
                onSuccess: () => toast.success("Task archived"),
                onError: () => toast.error("Failed to archive task"),
              })
            }
          >
            <Archive className="size-4" />
            Archive
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            variant="destructive"
            onClick={() => setDeleteOpen(true)}
          >
            <Trash2 className="size-4" />
            Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <ConfirmDialog
        open={deleteOpen}
        onOpenChange={setDeleteOpen}
        title="Delete Task"
        description="Are you sure you want to delete this task? This action cannot be undone."
        confirmLabel="Delete"
        variant="destructive"
        loading={deleteTask.isPending}
        onConfirm={() => {
          deleteTask.mutate(taskId, {
            onSuccess: () => {
              toast.success("Task deleted");
              setDeleteOpen(false);
              router.push(`${basePath}/tasks`);
            },
            onError: () => {
              toast.error("Failed to delete task");
            },
          });
        }}
      />
    </>
  );
}
