"use client";

import { Terminal, Pencil, FileTerminal, Trash } from "lucide-react";
import { motion } from "motion/react";

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import DeleteDialog from "./delete-dialog";
import { useState } from "react";

type Props = {
  id: string;
};

export default function ActionMenu({ id }: Props) {
  const buttonClass =
    "flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-all duration-150 hover:bg-green-50 hover:text-green-600 active:scale-95";

  const [open, setOpen] = useState(false);

  return (
    <>
      <TooltipProvider delayDuration={150}>
        <motion.div
          initial={{ opacity: 0, y: 8, scale: 0.95 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          exit={{ opacity: 0, y: 8, scale: 0.95 }}
          transition={{
            type: "spring",
            stiffness: 450,
            damping: 28,
          }}
          className="flex justify-end"
        >
          <div className="flex flex-row justify-end gap-1.5">
            <Tooltip>
              <TooltipTrigger asChild>
                <button onClick={() => setOpen(true)} className={buttonClass}>
                  <Trash className="h-5 w-5" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p>Delete</p>
              </TooltipContent>
            </Tooltip>

            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  className={buttonClass}
                  onClick={() => {
                    // SSH
                  }}
                >
                  <Terminal className="h-5 w-5" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p>SSH</p>
              </TooltipContent>
            </Tooltip>

            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  className={buttonClass}
                  onClick={() => {
                    // Blog
                  }}
                >
                  <Pencil className="h-5 w-5" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p>Create Blog</p>
              </TooltipContent>
            </Tooltip>

            <Tooltip>
              <TooltipTrigger asChild>
                <button
                  className={buttonClass}
                  onClick={() => {
                    // Scripts
                  }}
                >
                  <FileTerminal className="h-5 w-5" />
                </button>
              </TooltipTrigger>
              <TooltipContent>
                <p>Run Scripts</p>
              </TooltipContent>
            </Tooltip>
          </div>
        </motion.div>
      </TooltipProvider>

      <DeleteDialog
        open={open}
        onOpenChange={(open) => {
          console.log("DeleteDialog open state changed:", open);
          setOpen(open);
        }}
        id={id}
      />
    </>
  );
}