import { useState } from "react";
import { MoreHorizontal, Plus } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/shared/common/ui/dropdown-menu";
import { Button } from "@/shared/common/ui/button";
import { t } from "i18next";

interface Organization {
  id: string;
  name: { am: string; en: string };
  units?: any[];
  isExpanded?: boolean;
}

interface OrganizationActionsProps {
  organization: Organization;
  onAddUnit?: (organizationId: string) => void;
  showAlways?: boolean;
}

export const OrganizationActions: React.FC<OrganizationActionsProps> = ({
  organization,
  onAddUnit,
  showAlways = false,
}) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [isHovered, setIsHovered] = useState(false);

  const handleAction = (callback?: (organizationId: string) => void) => {
    setDropdownOpen(false);
    if (callback) {
      callback(organization.id);
    }
  };

  return (
    <div
      className="action-button"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
    >
      <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
        <DropdownMenuTrigger asChild>
          <Button
            variant="ghost"
            className={`h-8 w-8 p-0 data-[state=open]:bg-muted ${
              !showAlways && !isHovered && !dropdownOpen
                ? "opacity-0"
                : "opacity-100"
            } transition-opacity`}
            aria-haspopup="menu"
            aria-expanded={dropdownOpen}
          >
            <MoreHorizontal className="h-4 w-4" />
            <span className="sr-only">Open menu</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-[160px]">
          <DropdownMenuLabel>Actions</DropdownMenuLabel>
          <DropdownMenuItem onClick={() => handleAction(onAddUnit)}>
            <Plus className="mr-2 h-4 w-4" />
            {t("contentManagement.addUnit")}
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};
