import { useState } from "react";
import {
  Archive,
  MoreHorizontal,
  Move,
  Pencil,
  Plus,
  Trash,
  UserCog,
  UserPlus,
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";
import { Button } from "@/shared/common/ui/button";
import { PositionDto } from "@/user-management/dto/positions/positionDto";
import { Name } from "../types";
import { useLocalizedName } from "@/shared/common/localizedName";
import { t } from "i18next";

interface Department {
  id: string;
  name: Name;
}

interface DepartmentActionsProps {
  department: Department;
  positions: PositionDto[];
  onAddUser?: (departmentId: string, departmentName: string) => void;
  onViewUsers?: (departmentId: string) => void;
  onAddPosition?: (departmentId: string, positionType: string) => void;
  onAddSubDepartment?: (departmentId: string, departmentName: string) => void;
  onDelegate?: (departmentId: string) => void;
  onAssignUser?: (departmentId: string, departmentName: string) => void;
  onEditDepartment?: (departmentId: string, departmentName: string) => void;
  onDeleteDepartment?: (departmentId: string, departmentName: string) => void;
  onArchiveDepartment?: (departmentId: string, departmentName: string) => void;
  onMoveDepartment?: (departmentId: string, departmentName: string) => void;
  showAlways?: boolean;
}

export const DepartmentActions: React.FC<DepartmentActionsProps> = ({
  department,
  positions,
  onAddUser,
  onAddPosition,
  onAddSubDepartment,
  onAssignUser,
  onEditDepartment,
  onDeleteDepartment,
  onArchiveDepartment,
  onMoveDepartment,
  showAlways = false,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const localizedName = useLocalizedName();
  const handleAction = (
    action?: (departmentId: string, departmentName: string) => void
  ) => {
    if (action) {
      action(department.id, localizedName(department.name));
    }
    setIsOpen(false);
  };

  return (
    <div
      className={
        showAlways ? "opacity-100" : "opacity-0 group-hover:opacity-100"
      }>
      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="h-8 w-8 p-0 dark:hover:bg-gray-700">
            <MoreHorizontal className="h-4 w-4 dark:text-gray-400" />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="dark:bg-gray-700 dark:border-gray-600">
          <DropdownMenuLabel className="dark:text-gray-200">Actions</DropdownMenuLabel>

          <DropdownMenuItem onClick={() => handleAction(onAddUser)} className="dark:text-gray-200 dark:hover:bg-gray-600">
            <UserPlus className="mr-2 h-4 w-4" />
            {t("contentManagement.addUser")}
          </DropdownMenuItem>

          <DropdownMenuItem onClick={() => handleAction(onAssignUser)} className="dark:text-gray-200 dark:hover:bg-gray-600">
            <UserCog className="mr-2 h-4 w-4" />
            {t("organization.assignUser")}
          </DropdownMenuItem>

          <DropdownMenuItem onClick={() => handleAction(onAddSubDepartment)} className="dark:text-gray-200 dark:hover:bg-gray-600">
            <Plus className="mr-2 h-4 w-4" />
            {t("contentManagement.addSubdepartement")}
          </DropdownMenuItem>

          <DropdownMenuItem onClick={() => handleAction(onEditDepartment)} className="dark:text-gray-200 dark:hover:bg-gray-600">
            <Pencil className="mr-2 h-4 w-4" />
            {t("contentManagement.editDepartment")}
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => handleAction(onMoveDepartment)}
            className="text-gray-800 dark:text-gray-300 focus:text-gray-900 dark:focus:text-gray-200">
            <Move className="mr-2 h-4 w-4" />
            {t("contentManagement.moveDepartment")}
          </DropdownMenuItem>
          {onArchiveDepartment && (
            <DropdownMenuItem
              onClick={() => handleAction(onArchiveDepartment)}
              className="text-amber-700 focus:text-amber-800 dark:text-amber-400 dark:focus:text-amber-300">
              <Archive className="mr-2 h-4 w-4" />
              {t("contentManagement.archiveDepartment", "Archive Department")}
            </DropdownMenuItem>
          )}
          <DropdownMenuItem
            onClick={() => handleAction(onDeleteDepartment)}
            className="text-red-600 focus:text-red-700 dark:focus:text-red-400">
            <Trash className="mr-2 h-4 w-4" />
            {t("contentManagement.deleteDepartment")}
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};
