/**
 * 流程节点面板 - 拖拽节点到画布
 */

'use client';

import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import {
  Play,
  Square,
  UserCheck,
  Send,
  GitBranch,
  GitMerge,
} from 'lucide-react';
import { PROCESS_NODE_TYPES, ProcessNodeType, ProcessNodeTypeConfig } from './types';

// 图标映射
const iconMap: Record<string, React.ElementType> = {
  Play,
  Square,
  UserCheck,
  Send,
  GitBranch,
  GitMerge,
};

interface DraggableNodeItemProps {
  config: ProcessNodeTypeConfig;
}

function DraggableNodeItem({ config }: DraggableNodeItemProps) {
  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
    id: `palette-${config.type}`,
    data: {
      type: 'palette-node',
      nodeType: config.type,
      config,
    },
  });

  const Icon = iconMap[config.icon] || UserCheck;

  return (
    <div
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      className={`
        flex items-center gap-2 px-3 py-2 rounded-lg border cursor-grab
        transition-all hover:shadow-md hover:border-blue-300
        ${isDragging ? 'opacity-50 cursor-grabbing' : ''}
      `}
      style={{
        backgroundColor: `${config.color}10`,
        borderColor: `${config.color}40`,
      }}
    >
      <div
        className="w-7 h-7 rounded-md flex items-center justify-center"
        style={{ backgroundColor: config.color }}
      >
        <Icon className="w-4 h-4 text-white" />
      </div>
      <div className="flex-1 min-w-0">
        <div className="text-sm font-medium text-gray-800">{config.label}</div>
        <div className="text-xs text-gray-500 truncate">{config.description}</div>
      </div>
    </div>
  );
}

export function ProcessNodePalette() {
  const controlNodes = PROCESS_NODE_TYPES.filter((n) => n.category === 'control');
  const taskNodes = PROCESS_NODE_TYPES.filter((n) => n.category === 'task');
  const gatewayNodes = PROCESS_NODE_TYPES.filter((n) => n.category === 'gateway');

  return (
    <div className="w-60 bg-white border-r border-gray-200 flex flex-col h-full">
      {/* 标题 */}
      <div className="px-4 py-3 border-b border-gray-200">
        <h3 className="text-sm font-semibold text-gray-700">流程节点</h3>
        <p className="text-xs text-gray-500 mt-0.5">拖拽节点到画布</p>
      </div>

      {/* 节点列表 */}
      <div className="flex-1 overflow-y-auto p-3 space-y-4">
        {/* 控制节点 */}
        <div>
          <div className="text-xs font-medium text-gray-500 uppercase mb-2 px-1">
            控制节点
          </div>
          <div className="space-y-2">
            {controlNodes.map((config) => (
              <DraggableNodeItem key={config.type} config={config} />
            ))}
          </div>
        </div>

        {/* 任务节点 */}
        <div>
          <div className="text-xs font-medium text-gray-500 uppercase mb-2 px-1">
            任务节点
          </div>
          <div className="space-y-2">
            {taskNodes.map((config) => (
              <DraggableNodeItem key={config.type} config={config} />
            ))}
          </div>
        </div>

        {/* 网关节点 */}
        <div>
          <div className="text-xs font-medium text-gray-500 uppercase mb-2 px-1">
            逻辑网关
          </div>
          <div className="space-y-2">
            {gatewayNodes.map((config) => (
              <DraggableNodeItem key={config.type} config={config} />
            ))}
          </div>
        </div>
      </div>

      {/* 提示 */}
      <div className="px-4 py-3 border-t border-gray-200 bg-gray-50">
        <div className="text-xs text-gray-500">
          <div className="flex items-center gap-1 mb-1">
            <span className="font-medium">💡 提示</span>
          </div>
          <ul className="space-y-1 text-gray-400">
            <li>• 拖拽节点到画布添加</li>
            <li>• 点击节点编辑属性</li>
            <li>• 拖拽连线连接节点</li>
          </ul>
        </div>
      </div>
    </div>
  );
}