import React from 'react';
import { NODE_DEFINITIONS } from '../nodes';
import { NodeCategory } from '../nodes/types';
import type { WorkflowNodeDefinition } from '../nodes/types';
import styles from './NodePanel.module.css';

interface NodePanelProps {
    className?: string;
}

const NodePanel: React.FC<NodePanelProps> = ({ className = '' }) => {
    // 按分类分组节点
    const nodesByCategory = NODE_DEFINITIONS.reduce((acc, node) => {
        if (!acc[node.category]) {
            acc[node.category] = [];
        }
        acc[node.category].push(node);
        return acc;
    }, {} as Record<NodeCategory, WorkflowNodeDefinition[]>);

    // 拖拽开始处理
    const handleDragStart = (event: React.DragEvent, nodeDefinition: WorkflowNodeDefinition) => {
        event.dataTransfer.setData('application/reactflow', JSON.stringify({
            nodeType: nodeDefinition.nodeType,
            nodeDefinition
        }));
        event.dataTransfer.effectAllowed = 'move';
    };

    // 渲染节点项
    const renderNodeItem = (nodeDefinition: WorkflowNodeDefinition) => (
        <div
            key={nodeDefinition.nodeCode}
            draggable
            className={styles.nodeItem}
            onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = nodeDefinition.renderConfig.theme.primary;
            }}
            onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = '#e5e7eb';
            }}
            onDragStart={(e) => handleDragStart(e, nodeDefinition)}
        >
            <div
                className={styles.nodeIcon}
                style={{ color: nodeDefinition.renderConfig.theme.primary }}
            >
                {nodeDefinition.renderConfig.icon.content}
            </div>
            <div className={styles.nodeInfo}>
                <div className={styles.nodeName}>
                    {nodeDefinition.nodeName}
                </div>
                <div className={styles.nodeDesc}>
                    {nodeDefinition.description}
                </div>
            </div>
        </div>
    );

    // 分类标题映射
    const categoryTitles = {
        [NodeCategory.EVENT]: '🎯 事件节点',
        [NodeCategory.TASK]: '📋 任务节点',
        [NodeCategory.GATEWAY]: '🔀 网关节点',
        [NodeCategory.CONTAINER]: '📦 容器节点'
    };

    return (
        <div className={`${styles.nodePanel} ${className}`}>
            <div className={styles.header}>
                <h3 className={styles.title}>节点面板</h3>
                <p className={styles.subtitle}>拖拽节点到画布创建工作流</p>
            </div>

            <div className={styles.content}>
                {Object.entries(nodesByCategory).map(([category, nodes]) => (
                    <div key={category} className={styles.category}>
                        <div className={styles.categoryTitle}>
                            {categoryTitles[category as NodeCategory]}
                        </div>
                        {nodes.map(renderNodeItem)}
                    </div>
                ))}
            </div>

            {/* 使用提示 */}
            <div className={styles.tips}>
                💡 提示：
                <br />• 拖拽节点到画布创建
                <br />• 双击节点进行配置
                <br />• 连接节点创建流程
                <br />• 按 ? 查看快捷键
            </div>
        </div>
    );
};

export default NodePanel;
