'use client';

import React from 'react';
import { Zap, GripVertical, Plus, ServerIcon } from 'lucide-react';
import type { CatalogResource, CatalogItemData } from './types';

interface DraggableCatalogItemProps {
    resource: CatalogResource;
    isHovered: boolean;
    onItemDragStart: (event: React.DragEvent<HTMLDivElement>, nodeType: string, label: string, data: CatalogItemData) => void;
    onItemMouseEnter: () => void;
    onItemMouseLeave: () => void;
    onItemAdd: (nodeType: string, label: string, data: CatalogItemData) => void;
}

const DraggableCatalogItem = React.memo<DraggableCatalogItemProps>(({ 
    resource, 
    isHovered, 
    onItemDragStart, 
    onItemMouseEnter, 
    onItemMouseLeave, 
    onItemAdd 
}) => {
    const isEvent = resource.collection === 'events';
    const isService = resource.collection === 'services';
    const isCommand = resource.collection === 'commands';
    const isQuery = resource.collection === 'queries';

    const itemData: CatalogItemData = {
        label: resource.data.name,
        resourceId: resource.data.id,
        collection: resource.collection,
        mode: 'full',
        ...((isEvent || isCommand || isQuery) && {
            message: {
                version: resource.data.version,
                name: resource.data.name,
                summary: resource.data.summary || '',
                owners: [],
                producers: [],
                consumers: []
            }
        }),
        ...(isService && {
            service: {
                version: resource.data.version,
                name: resource.data.name,
                summary: resource.data.summary || '',
                owners: [],
                sends: [],
                receives: []
            }
        })
    };

    const Icon = isEvent ? Zap : ServerIcon;
    const colorClass = isEvent ? 'text-orange-600' : isCommand ? 'text-blue-600' : isQuery ? 'text-green-600' : 'text-pink-600';
    const nodeType = isEvent ? 'event' : isCommand ? 'command' : isQuery ? 'query' : 'service';

    return (
        <div
            className={`group/item flex items-center justify-between px-2.5 py-2 rounded-md cursor-pointer relative border transition-all ${
                false 
                    ? 'bg-blue-50 border-blue-300 shadow-sm' 
                    : 'bg-gray-50 border-gray-200 hover:bg-gray-100'
            }`}
            draggable
            onDragStart={(event) => onItemDragStart(event, nodeType, resource.data.name, itemData)}
            onMouseEnter={onItemMouseEnter}
            onMouseLeave={onItemMouseLeave}
        >
            <div className="flex items-center space-x-2 flex-grow min-w-0">
                <Icon size={16} className={`${colorClass} flex-shrink-0`} />
                <span className="text-xs font-medium text-gray-700 truncate">{resource.data.name}</span>
            </div>
            <div className="flex items-center space-x-1">
                <button
                    onClick={(e) => {
                        e.stopPropagation();
                        onItemAdd(nodeType, resource.data.name, itemData);
                    }}
                    className={`p-1 hover:bg-gray-200 rounded text-gray-500 hover:text-blue-500 transition-all ${
                        isHovered ? 'opacity-100' : 'opacity-0'
                    }`}
                    title={`Add ${resource.data.name}`}
                >
                    <Plus size={12} />
                </button>
                <GripVertical size={14} className="text-gray-400 hover:text-gray-600 flex-shrink-0" />
            </div>
        </div>
    );
});
DraggableCatalogItem.displayName = 'DraggableCatalogItem';

export default DraggableCatalogItem;