import { useState } from "react";
import {
  Building2,
  MoreHorizontal,
  Plus,
  ShieldCheck,
  Trash,
  Trash2,
} from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";
import { Button } from "@/shared/common/ui/button";
import { Name } from "../types";
import { useLocalizedName } from "@/shared/common/localizedName";
import { t } from "i18next";
import { useAuth } from "@/shared/context/AuthContext";

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

interface UnitActionsProps {
  unit: Unit;
  onAddDepartment?: (unitId: string) => void;
  onManageUnitAdmin?: (unitId: string) => void;
  onEditUnit?: (unitId: string) => void;
  onArchiveUnit?: (unitId: string, unitName: string) => void;
  onDeleteUnit?: (unitId: string, unitName: string) => void;
  onAddFromSubCity?: (unitId: string) => void;
  showAlways?: boolean;
}

export const UnitActions: React.FC<UnitActionsProps> = ({
  unit,
  onAddDepartment,
  onManageUnitAdmin,
  onEditUnit,
  onArchiveUnit,
  onDeleteUnit,
  onAddFromSubCity,
  showAlways = false,
}) => {
  const { user } = useAuth();
  const isUnitAdmin = user?.roles?.some((role) => role.key === "unit_admin");
  const isOrganizationAdmin = user?.roles?.some(
    (role) => role.key === "organization_admin",
  );
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const localizedName = useLocalizedName();
  const handleAction = (callback?: (unitId: string) => void) => {
    setDropdownOpen(false);
    if (callback) {
      callback(unit.id);
    }
  };
  const handleDeleteAction = (
    callback?: (unitId: string, unit: string) => void
  ) => {
    setDropdownOpen(false);
    if (callback) {
      const name = localizedName(unit.name);
      callback(unit.id, name);
    }
  };

  return (
    <div
      className={
        showAlways ? "opacity-100" : "opacity-0 group-hover:opacity-100"
      }
    >
      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
        <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="w-[160px] dark:bg-gray-700 dark:border-gray-600">
          <DropdownMenuLabel className="dark:text-gray-200">Actions</DropdownMenuLabel>
          <DropdownMenuItem onClick={() => handleAction(onAddDepartment)} className="dark:text-gray-200 dark:hover:bg-gray-600">
            <Plus className="mr-2 h-4 w-4" />
            {t("contentManagement.addDepartment")}
          </DropdownMenuItem>
          {isOrganizationAdmin && onManageUnitAdmin && (
            <DropdownMenuItem
              onClick={() => handleAction(onManageUnitAdmin)}
              className="dark:text-gray-200 dark:hover:bg-gray-600"
            >
              <ShieldCheck className="mr-2 h-4 w-4" />
              {t("contentManagement.manageUnitAdmin", "Manage Unit Admin")}
            </DropdownMenuItem>
          )}
          <DropdownMenuItem onClick={() => handleAction(onEditUnit)} className="dark:text-gray-200 dark:hover:bg-gray-600">
            <Plus className="mr-2 h-4 w-4" />
            {t("contentManagement.editUnit")}
          </DropdownMenuItem>
          {isUnitAdmin && onAddFromSubCity && (
            <DropdownMenuItem onClick={() => handleAction(onAddFromSubCity)} className="dark:text-gray-200 dark:hover:bg-gray-600">
              <Building2 className="mr-2 h-4 w-4" />
              {t("contentManagement.addFromSubCity", "Add From Sub City")}
            </DropdownMenuItem>
          )}
          {onDeleteUnit && (
            <DropdownMenuItem
              onClick={() => handleDeleteAction(onArchiveUnit)}
              className="text-amber-700 focus:text-amber-800 dark:text-amber-400 dark:focus:text-amber-300"
            >
              <Trash className="mr-2 h-4 w-4" />
              {t("contentManagement.archiveUnit", "Archive Unit")}
            </DropdownMenuItem>
          )}
          {onDeleteUnit && (
            <DropdownMenuItem
              onClick={() => handleDeleteAction(onDeleteUnit)}
              className="text-red-700 focus:text-red-800 dark:text-red-400 dark:focus:text-red-300"
            >
              <Trash2 className="mr-2 h-4 w-4" />
              {t("contentManagement.deleteUnit", "Delete Unit")}
            </DropdownMenuItem>
          )}
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};
