import { memo } from 'react';
import { MoreVertical, Trash2, Settings, Database, Copy } from 'lucide-react';
import { Button } from './ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from './ui/dropdown-menu';

interface NodeActionsMenuProps {
  nodeId: string;
  nodeName: string;
  nodeType: 'trigger' | 'action' | 'operator';
  onEdit: () => void;
  onDuplicate?: () => void;
  onDelete: () => void;
  onViewDataFields?: () => void;
}

/**
 * Zapier-style dropdown menu with quick actions for workflow nodes
 * Always visible three-dot menu in the node header
 */
const NodeActionsMenu = memo(
  ({
    nodeId: _nodeId,
    nodeName,
    nodeType,
    onEdit,
    onDuplicate,
    onDelete,
    onViewDataFields,
  }: NodeActionsMenuProps) => {
    const handleClick = (e: React.MouseEvent) => {
      e.stopPropagation(); // Prevent node selection when clicking menu
    };

    return (
      <DropdownMenu>
        <DropdownMenuTrigger asChild onClick={handleClick}>
          <Button
            variant="ghost"
            size="icon"
            className="h-8 w-8 rounded hover:bg-gray-100 text-gray-400 hover:text-gray-600"
          >
            <MoreVertical className="h-5 w-5" />
            <span className="sr-only">Toggle step menu for {nodeName}</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-48 shadow-lg border border-gray-200">
          <DropdownMenuItem onClick={onEdit} className="cursor-pointer py-2.5">
            <Settings className="mr-3 h-4 w-4 text-gray-500" />
            <span>Configure</span>
          </DropdownMenuItem>
          {onDuplicate && (
            <DropdownMenuItem onClick={onDuplicate} className="cursor-pointer py-2.5">
              <Copy className="mr-3 h-4 w-4 text-gray-500" />
              <span>Duplicate</span>
            </DropdownMenuItem>
          )}
          {/* Show View Data Fields for triggers and actions */}
          {(nodeType === 'trigger' || nodeType === 'action') && onViewDataFields && (
            <DropdownMenuItem onClick={onViewDataFields} className="cursor-pointer py-2.5">
              <Database className="mr-3 h-4 w-4 text-gray-500" />
              <span>View Data Fields</span>
            </DropdownMenuItem>
          )}
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onClick={onDelete}
            className="cursor-pointer py-2.5 text-red-600 focus:text-red-600 focus:bg-red-50"
          >
            <Trash2 className="mr-3 h-4 w-4" />
            <span>Delete</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    );
  },
);

NodeActionsMenu.displayName = 'NodeActionsMenu';

export default NodeActionsMenu;