import React, {useState} from 'react';
import {FileText, MoreHorizontal} from 'lucide-react';
import {SidebarMenuSubItem, SidebarMenuSubButton, SidebarMenuAction} from '@/components/ui/sidebar';
import {Tooltip, TooltipTrigger, TooltipContent} from '@/components/ui/tooltip';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';

const DraggableApiItem = ({api, collectionId, onApiAction}) => {
  const [isDragging, setIsDragging] = useState(false);

  const handleDragStart = (event) => {
    // Prepare API data for drag operation
    const apiData = {...api};

    // Create drag image for better visual feedback
    const dragImage = document.createElement('div');
    dragImage.className = 'bg-white border rounded-md shadow-lg p-2 text-sm';
    dragImage.textContent = `${apiData.method} ${apiData.name}`;
    document.body.appendChild(dragImage);

    // Set drag image and offset
    event.dataTransfer.setDragImage(dragImage, 0, 0);

    // Clean up the drag image after it's no longer needed
    requestAnimationFrame(() => {
      document.body.removeChild(dragImage);
    });

    // Set the drag data
    event.dataTransfer.setData('application/json', JSON.stringify(apiData));
    event.dataTransfer.effectAllowed = 'copy';

    setIsDragging(true);
  };

  const handleDragEnd = () => {
    setIsDragging(false);
  };

  return (
      <SidebarMenuSubItem
          draggable
          onDragStart={handleDragStart}
          onDragEnd={handleDragEnd}
          className={`cursor-move transition-colors duration-200 px-4 ${isDragging ? 'opacity-50 bg-accent' : ''}`}>
        <div className="w-full flex items-center gap-2 pr-2">
          <div onClick={() => !isDragging && onApiAction.open(collectionId, api.id)} className="flex items-center gap-2 flex-1 min-w-0 cursor-pointer">
            <FileText className="h-4 w-4 flex-shrink-0"/>
            <Tooltip>
              <TooltipTrigger asChild className="block max-w-[150px]">
                   <span className="block truncate">
                     {api.name}
                   </span>
              </TooltipTrigger>
              <TooltipContent>
                <div className="flex flex-col gap-1">
                  <p className="font-medium">{api.name}</p>
                  {api.path && <p className="text-xs text-muted-foreground">{api.method} {api.path}</p>}
                </div>
              </TooltipContent>
            </Tooltip>
          </div>

          <DropdownMenu>
            <DropdownMenuTrigger data-dropdown-trigger="true" className="p-0 h-auto">
              <div className="hover:bg-accent rounded-sm">
                <MoreHorizontal className="h-4 w-4"/>
              </div>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onApiAction.open(collectionId, api.id)}>
                Open
              </DropdownMenuItem>
              <DropdownMenuSeparator/>
              <DropdownMenuItem onClick={() => onApiAction.rename(collectionId, api.id)}>
                Rename
              </DropdownMenuItem>
              <DropdownMenuItem className="text-destructive" onClick={() => onApiAction.delete(collectionId, api.id)}>
                Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </SidebarMenuSubItem>
  );
};

export default DraggableApiItem;
