'use client';

import React from 'react';
import * as ContextMenu from '@radix-ui/react-context-menu';
import { Node } from '@xyflow/react';
import { useFlowStoreActions } from '@/stores/flow-store';
import { getNodeId } from '@/utils/react-flow';
import { 
  ChevronRight
} from 'lucide-react';

interface CanvasContextMenuProps {
  children: React.ReactNode;
  position: { x: number; y: number } | null;
}

export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = ({ 
  children, 
  position 
}) => {
  const { addNode } = useFlowStoreActions();

  const handleAddNode = (nodeType: string, label: string, data?: any) => {
    if (!position) return;

    const newNode: Node = {
      id: getNodeId(nodeType),
      type: nodeType,
      position,
      data: data ?? { 
        name: label,
        summary: `A new ${label.toLowerCase()}`
      },
    };

    addNode(newNode);
  };

  return (
    <ContextMenu.Root>
      <ContextMenu.Trigger asChild>
        {children}
      </ContextMenu.Trigger>
      
      <ContextMenu.Portal>
        <ContextMenu.Content 
          className="bg-white border border-gray-200 rounded-lg shadow-lg p-1 min-w-[180px] z-50"
        >
          {/* New Service */}
          <ContextMenu.Item
            className="text-sm px-3 py-2 outline-none cursor-pointer hover:bg-blue-50 rounded-md flex items-center"
            onSelect={() => handleAddNode('service', 'Service')}
          >
            <span>New Service</span>
          </ContextMenu.Item>

          <ContextMenu.Separator className="h-[1px] bg-gray-200 my-1" />

          {/* Messages Submenu */}
          <ContextMenu.Sub>
            <ContextMenu.SubTrigger className="text-sm px-3 py-2 outline-none cursor-pointer hover:bg-blue-50 rounded-md flex items-center justify-between">
              <span>Messages</span>
              <ChevronRight className="w-4 h-4 text-gray-400" />
            </ContextMenu.SubTrigger>
            
            <ContextMenu.Portal>
              <ContextMenu.SubContent 
                className="bg-white border border-gray-200 rounded-lg shadow-lg p-1 min-w-[140px] z-50"
                sideOffset={8}
                alignOffset={-5}
              >
                <ContextMenu.Item
                  className="text-sm px-3 py-2 outline-none cursor-pointer hover:bg-orange-50 rounded-md flex items-center"
                  onSelect={() => handleAddNode('event', 'Event')}
                >
                  <span>New Event</span>
                </ContextMenu.Item>
                
                <ContextMenu.Item
                  className="text-sm px-3 py-2 outline-none cursor-pointer hover:bg-blue-50 rounded-md flex items-center"
                  onSelect={() => handleAddNode('command', 'Command')}
                >
                  <span>New Command</span>
                </ContextMenu.Item>
                
                <ContextMenu.Item
                  className="text-sm px-3 py-2 outline-none cursor-pointer hover:bg-green-50 rounded-md flex items-center"
                  onSelect={() => handleAddNode('query', 'Query')}
                >
                  <span>New Query</span>
                </ContextMenu.Item>
              </ContextMenu.SubContent>
            </ContextMenu.Portal>
          </ContextMenu.Sub>

          <ContextMenu.Separator className="h-[1px] bg-gray-200 my-1" />

          {/* New Comment Thread */}
          <ContextMenu.Item
            className="text-sm px-3 py-2 outline-none cursor-pointer hover:bg-orange-50 rounded-md flex items-center"
            onSelect={() => handleAddNode('commentThread', 'Comment Thread', {
              name: 'New Comment',
              summary: 'Add your thoughts here...'
            })}
          >
            <span>New Comment</span>
          </ContextMenu.Item>
        </ContextMenu.Content>
      </ContextMenu.Portal>
    </ContextMenu.Root>
  );
};

export default CanvasContextMenu;