"use client";

import { FolderKanban, MoreVertical, Trash2 } from "lucide-react";
import Link from "next/link";
import { useState } from "react";

import { deleteProjectAction } from "@/app/root/portfolio/actions";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const copy = {
  editProject: "Bearbeiten",
  deleteProject: "Loeschen",
};

export function PortfolioProjectActions({ projectId }: { projectId: string }) {
  const [confirmOpen, setConfirmOpen] = useState(false);

  return (
    <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button type="button" variant="outline" size="icon">
            <MoreVertical className="h-4 w-4" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem asChild>
            <Link href={`/root/portfolio/projects/${projectId}`}>
              <FolderKanban className="mr-2 h-4 w-4" />
              {copy.editProject}
            </Link>
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            className="text-destructive focus:text-destructive"
            onSelect={(event) => {
              event.preventDefault();
              setConfirmOpen(true);
            }}
          >
            <Trash2 className="mr-2 h-4 w-4" />
            {copy.deleteProject}
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <DialogContent>
        <DialogHeader>
          <DialogTitle>{copy.deleteProject}</DialogTitle>
          <DialogDescription>
            This action permanently removes the project from the portfolio.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <form action={deleteProjectAction}>
            <input type="hidden" name="id" value={projectId} />
            <Button type="submit" variant="destructive">
              Confirm Delete
            </Button>
          </form>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}