/**
 * 工作流模板创建器演示组件
 * 用于测试和展示节点关联功能
 */

import React, { useState } from 'react';
import { WorkflowTemplateCreator } from './WorkflowTemplateCreator';

export const WorkflowTemplateCreatorDemo: React.FC = () => {
  const [showCreator, setShowCreator] = useState(false);

  const handleSave = async (templateData: any) => {
    console.log('保存模板数据:', templateData);
    
    // 模拟保存过程
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    alert('模板创建成功！请查看控制台输出。');
    setShowCreator(false);
  };

  return (
    <div className="p-8">
      <div className="max-w-4xl mx-auto">
        <h1 className="text-2xl font-bold text-gray-900 mb-6">
          工作流模板创建器 - 节点关联功能演示
        </h1>
        
        <div className="bg-white border border-gray-200 rounded-lg p-6 mb-6">
          <h2 className="text-lg font-semibold text-gray-800 mb-4">功能说明</h2>
          <div className="space-y-3 text-sm text-gray-600">
            <p>
              <strong>节点关联功能：</strong>
              可以将模板参数直接关联到工作流节点的输入字段，实现参数与工作流的自动化绑定。
            </p>
            <p>
              <strong>使用步骤：</strong>
            </p>
            <ol className="list-decimal list-inside space-y-1 ml-4">
              <li>在"工作流配置"中导入或粘贴ComfyUI工作流JSON</li>
              <li>在"参数配置"中添加模板参数</li>
              <li>为参数配置节点关联，选择目标节点和输入字段</li>
              <li>系统自动将工作流中的字段值替换为参数变量格式</li>
            </ol>
          </div>
        </div>

        <div className="bg-gray-50 border border-gray-200 rounded-lg p-6 mb-6">
          <h3 className="text-md font-semibold text-gray-800 mb-3">示例工作流JSON</h3>
          <p className="text-sm text-gray-600 mb-3">
            可以复制以下示例JSON到工作流配置中进行测试：
          </p>
          <pre className="bg-gray-800 text-green-400 p-4 rounded text-xs overflow-x-auto">
{`{
  "1": {
    "class_type": "LoadImage",
    "inputs": {
      "image": "input_image.jpg"
    },
    "_meta": {
      "title": "1🖼️输入图片加载器"
    }
  },
  "2": {
    "class_type": "CLIPTextEncode",
    "inputs": {
      "text": "a beautiful portrait",
      "clip": ["4", 1]
    },
    "_meta": {
      "title": "2🐕遮罩边缘滑条快速模糊"
    }
  },
  "3": {
    "class_type": "CLIPTextEncode",
    "inputs": {
      "text": "blurry, low quality",
      "clip": ["4", 1]
    },
    "_meta": {
      "title": "3❌负面提示词编码器"
    }
  }
}`}
          </pre>
        </div>

        <div className="text-center">
          <button
            onClick={() => setShowCreator(true)}
            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
          >
            打开工作流模板创建器
          </button>
        </div>

        <WorkflowTemplateCreator
          isOpen={showCreator}
          onClose={() => setShowCreator(false)}
          onSave={handleSave}
        />
      </div>
    </div>
  );
};
