import { useCallback } from 'react';
import { useReactFlow } from '@xyflow/react';
import { AppNodeType, AppNodeData } from '../types/node';
import { getNodeNameCN } from '../utils';

export const useCanvasDragDrop = (
    setNodes: React.Dispatch<React.SetStateAction<AppNodeType[]>>
) => {
    const { screenToFlowPosition } = useReactFlow();

    const onDragOver = useCallback((event: React.DragEvent) => {
        event.preventDefault();
        event.dataTransfer.dropEffect = 'move';
    }, []);

    const onDrop = useCallback(
        (event: React.DragEvent) => {
            event.preventDefault();

            const type = event.dataTransfer.getData('application/reactflow');
            const title = event.dataTransfer.getData('application/nodeTitle');
            const assetSrc = event.dataTransfer.getData('application/assetSrc');
            const assetType = event.dataTransfer.getData('application/assetType');

            // Handle Asset Drop (from Sidebar)
            if (assetSrc) {
                const position = screenToFlowPosition({
                    x: event.clientX,
                    y: event.clientY,
                });
                
                const isVideo = assetType === 'video' || assetType.includes('video');
                const isAudio = assetType === 'audio' || assetType.includes('audio');
                const newNodeType = isAudio ? 'AUDIO_GENERATOR' : (isVideo ? 'VIDEO_GENERATOR' : 'IMAGE_GENERATOR');
                const dataKey = isAudio ? 'audioUri' : (isVideo ? 'videoUri' : 'image');
                const nodeData: Partial<AppNodeData> = {
                    title: title || '拖入素材',
                    type: newNodeType as AppNodeData['type'],
                    status: 'SUCCESS',
                    [dataKey]: assetSrc
                };

                const newNode: AppNodeType = {
                    id: `node_${Date.now()}`,
                    type: 'appNode',
                    position,
                    data: nodeData as AppNodeData,
                };
                setNodes((nds) => nds.concat(newNode));
                return;
            }

            // Check if the dropped element is valid (Standard Node Drop)
            if (typeof type === 'undefined' || !type) {
                return;
            }

            const position = screenToFlowPosition({
                x: event.clientX,
                y: event.clientY,
            });

            const newNode: AppNodeType = {
                id: `node_${Date.now()}`,
                type: 'appNode',
                position,
                data: { 
                    title: title || getNodeNameCN(type as any) || '新节点',
                    type: type as AppNodeData['type'],
                    status: 'IDLE',
                    aspectRatio: (type === 'PROMPT_GENERATOR' || type === 'PROMPT_INPUT') ? '4:3' : undefined,
                },
            };

            setNodes((nds) => nds.concat(newNode));
        },
        [screenToFlowPosition, setNodes]
    );

    return { onDragOver, onDrop };
};
