import React from 'react';
import { useCanvasStore } from '../../store/canvasStore';
import { Node } from 'reactflow';

interface Template {
  id: string;
  name: string;
  description: string;
  icon: string;
  nodes: Partial<Node>[];
  edges: any[];
}

const templates: Template[] = [
  {
    id: 'text-to-image',
    name: '文本生成图片',
    description: '输入文本 → 优化提示词 → 生成图片',
    icon: '🎨',
    nodes: [
      {
        id: 'text-1',
        type: 'textInput',
        position: { x: 100, y: 100 },
        data: { text: '一只可爱的小猫' }
      },
      {
        id: 'prompt-1',
        type: 'promptOptimize',
        position: { x: 350, y: 100 },
        data: {}
      },
      {
        id: 'image-1',
        type: 'imageGenerate',
        position: { x: 600, y: 100 },
        data: {}
      },
      {
        id: 'display-1',
        type: 'imageDisplay',
        position: { x: 850, y: 100 },
        data: {}
      }
    ],
    edges: [
      { id: 'e1', source: 'text-1', target: 'prompt-1', sourceHandle: 'text-output', targetHandle: 'text-input' },
      { id: 'e2', source: 'prompt-1', target: 'image-1', sourceHandle: 'text-output', targetHandle: 'prompt-input' },
      { id: 'e3', source: 'image-1', target: 'display-1', sourceHandle: 'image-output', targetHandle: 'image-input' }
    ]
  },
  {
    id: 'batch-processing',
    name: '批量图片处理',
    description: '文件夹上传 → 批量处理 → 结果展示',
    icon: '📁',
    nodes: [
      {
        id: 'folder-1',
        type: 'folderUpload',
        position: { x: 100, y: 150 },
        data: {}
      },
      {
        id: 'batch-1',
        type: 'batchGrid',
        position: { x: 400, y: 150 },
        data: {}
      }
    ],
    edges: [
      { id: 'e1', source: 'folder-1', target: 'batch-1', sourceHandle: 'batch-output', targetHandle: 'batch-input' }
    ]
  },
  {
    id: 'image-workflow',
    name: '完整图片工作流',
    description: '图片上传 → 多路径处理 → 结果对比',
    icon: '🔄',
    nodes: [
      {
        id: 'upload-1',
        type: 'imageUpload',
        position: { x: 100, y: 200 },
        data: {}
      },
      {
        id: 'display-1',
        type: 'imageDisplay',
        position: { x: 400, y: 150 },
        data: {}
      },
      {
        id: 'display-2',
        type: 'imageDisplay',
        position: { x: 400, y: 250 },
        data: {}
      }
    ],
    edges: [
      { id: 'e1', source: 'upload-1', target: 'display-1', sourceHandle: 'image-output', targetHandle: 'image-input' },
      { id: 'e2', source: 'upload-1', target: 'display-2', sourceHandle: 'image-output', targetHandle: 'image-input' }
    ]
  }
];

interface QuickStartTemplatesProps {
  onClose: () => void;
}

export const QuickStartTemplates: React.FC<QuickStartTemplatesProps> = ({ onClose }) => {
  const { setNodes, setEdges, clearCanvas } = useCanvasStore();

  const handleTemplateSelect = (template: Template) => {
    // 清空当前画布
    clearCanvas();
    
    // 应用模板
    setNodes(template.nodes as Node[]);
    setEdges(template.edges);
    
    // 关闭模板选择器
    onClose();
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-hidden">
        <div className="p-6 border-b border-gray-200">
          <div className="flex items-center justify-between">
            <h2 className="text-xl font-semibold text-gray-800">快速开始</h2>
            <button 
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 transition-colors"
            >
              ✕
            </button>
          </div>
          <p className="text-gray-600 mt-2">选择一个模板快速开始你的AI创作流程</p>
        </div>

        <div className="p-6 overflow-y-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {templates.map(template => (
              <div
                key={template.id}
                onClick={() => handleTemplateSelect(template)}
                className="border border-gray-200 rounded-lg p-4 hover:border-blue-300 hover:bg-blue-50 cursor-pointer transition-all duration-200"
              >
                <div className="flex items-start space-x-3">
                  <div className="text-3xl">{template.icon}</div>
                  <div className="flex-1">
                    <h3 className="font-semibold text-gray-800 mb-1">{template.name}</h3>
                    <p className="text-sm text-gray-600 mb-3">{template.description}</p>
                    <div className="text-xs text-gray-500">
                      {template.nodes.length} 个节点 • {template.edges.length} 个连接
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-6 p-4 bg-gray-50 rounded-lg">
            <h3 className="font-medium text-gray-800 mb-2">💡 使用提示</h3>
            <ul className="text-sm text-gray-600 space-y-1">
              <li>• 双击空白处可以创建新节点</li>
              <li>• 拖拽节点端口可以建立连线</li>
              <li>• 连线完成后会自动触发处理</li>
              <li>• 文件夹上传支持批量处理模式</li>
            </ul>
          </div>
        </div>

        <div className="p-6 border-t border-gray-200 bg-gray-50">
          <div className="flex justify-between items-center">
            <button
              onClick={onClose}
              className="text-gray-600 hover:text-gray-800 transition-colors"
            >
              跳过，从空白画布开始
            </button>
            <div className="text-sm text-gray-500">
              你也可以稍后通过工具栏加载模板
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
