import { useState } from "react";
import { useNavigate } from "react-router-dom";

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/shared/common/ui/dropdown-menu"; // Adjust if needed

import { Button } from "@/shared/common/ui/button";
import { MoreVertical, Edit, Trash, UserPlus } from "lucide-react"; // Adjust icons as needed
import { ItemDTO, User } from "@/shared/dto/user/usersDto";
import { t } from "i18next";
import ActivateArchivedUser from "./ActivateArchivedUser";

type ActionsCellProps = {
  row: ItemDTO;
};

const ArchivedUserActionsCell: React.FC<ActionsCellProps> = ({ row }) => {
  const navigate = useNavigate();
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const handleEdit = () => {
    navigate(`/user-management/archive/edit/${row?.userId}`);
  };

  const handleDelete = (e: Event) => {
    e.preventDefault();
    setDropdownOpen(false);
    setShowDeleteDialog(true);
  };

  const handleActivateModal = () => {
    setModalOpen(true);
  };
 

  return (
    <>
      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="h-8 w-8 p-0">
            <MoreVertical className="h-4 w-4" />
            <span className="sr-only">Open actions menu</span>
          </Button>
        </DropdownMenuTrigger>

        <DropdownMenuContent
          align="end"
          onInteractOutside={(e) => {
            const target = e.target as HTMLElement;
            if (!target.closest('[role="dialog"]')) {
              setDropdownOpen(false);
            }
          }}>
          <DropdownMenuLabel>{t("userRecord.Actions")}</DropdownMenuLabel>

          <DropdownMenuItem
            onSelect={handleEdit}
            className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200">
            <Edit className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
            <span> {t("userRecord.Edit")}</span>
          </DropdownMenuItem>
          <DropdownMenuItem
            onSelect={handleActivateModal}
            className="cursor-pointer hover:!text-primary-700 !bg-transparent !transition-colors duration-200">
            <UserPlus className="mr-2 h-4 w-4 group-hover:text-white transition-colors duration-200" />
            <span> {t("userRecord.Activate")}</span>
          </DropdownMenuItem>
          <DropdownMenuSeparator />

          <DropdownMenuItem
            onSelect={handleDelete}
            className="text-red-600 cursor-pointer hover:!text-red-800 !bg-transparent !transition-colors duration-200">
            <Trash className="mr-2 h-4 w-4 text-red-600 group-hover:text-white transition-colors duration-200" />
            <span> {t("userRecord.Delete")}</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      {modalOpen && (
        <ActivateArchivedUser
          isOpen={modalOpen}
          onClose={() => setModalOpen(false)}
          userId={row.id}
        />
      )}

      {/* {showDeleteDialog && (
        <DeletePositionTypes
          id={row.id}
          onSuccess={() => setShowDeleteDialog(false)}
          onClose={() => setShowDeleteDialog(false)}
        />
      )} */}
    </>
  );
};

export default ArchivedUserActionsCell;
