'use client';

import { useState } from 'react';
import WorkflowCanvas from './WorkflowCanvas';
import NodeLibrary from './NodeLibrary';
import WorkflowSettings from './WorkflowSettings';

export default function WorkflowBuilder() {
  const [workflowData, setWorkflowData] = useState({
    name: '',
    description: '',
    category: 'data-processing',
    triggers: [],
    nodes: [],
    connections: []
  });
  
  const [selectedNode, setSelectedNode] = useState(null);
  const [showSettings, setShowSettings] = useState(false);

  const handleSave = () => {
    console.log('保存工作流:', workflowData);
    alert('工作流保存成功！');
  };

  const handleDeploy = () => {
    console.log('部署工作流:', workflowData);
    alert('工作流部署成功！');
  };

  const handleTest = () => {
    console.log('测试工作流:', workflowData);
    alert('开始测试工作流...');
  };

  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-200">
      {/* 顶部工具栏 */}
      <div className="p-6 border-b border-gray-200">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-6">
            <div>
              <input
                type="text"
                placeholder="输入工作流名称"
                value={workflowData.name}
                onChange={(e) => setWorkflowData({...workflowData, name: e.target.value})}
                className="text-xl font-semibold bg-transparent border-none focus:outline-none focus:ring-0 p-0 text-gray-900 placeholder-gray-500"
              />
              <p className="text-sm text-gray-500 mt-1">设计您的自动化流程</p>
            </div>
            
            <div className="flex items-center space-x-3">
              <button
                onClick={() => setShowSettings(!showSettings)}
                className={`p-2 rounded-lg transition-colors cursor-pointer ${
                  showSettings ? 'bg-blue-100 text-blue-600' : 'text-gray-500 hover:bg-gray-100'
                }`}
              >
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-settings-line"></i>
                </div>
              </button>
              <button className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-zoom-in-line"></i>
                </div>
              </button>
              <button className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-zoom-out-line"></i>
                </div>
              </button>
              <button className="p-2 text-gray-500 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
                <div className="w-5 h-5 flex items-center justify-center">
                  <i className="ri-fullscreen-line"></i>
                </div>
              </button>
            </div>
          </div>
          
          <div className="flex items-center space-x-3">
            <button
              onClick={handleTest}
              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
            >
              <div className="w-4 h-4 flex items-center justify-center inline-block mr-2">
                <i className="ri-play-line"></i>
              </div>
              测试运行
            </button>
            <button
              onClick={handleSave}
              className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-50 transition-colors cursor-pointer whitespace-nowrap"
            >
              保存草稿
            </button>
            <button
              onClick={handleDeploy}
              className="bg-blue-600 text-white px-6 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer whitespace-nowrap"
            >
              <div className="w-4 h-4 flex items-center justify-center inline-block mr-2">
                <i className="ri-rocket-line"></i>
              </div>
              部署
            </button>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex h-screen">
        {/* 左侧节点库 */}
        <div className="w-80 border-r border-gray-200 bg-gray-50">
          <NodeLibrary />
        </div>
        
        {/* 中间画布区域 */}
        <div className="flex-1">
          <WorkflowCanvas 
            nodes={workflowData.nodes}
            connections={workflowData.connections}
            onNodeSelect={setSelectedNode}
            onUpdateWorkflow={setWorkflowData}
          />
        </div>
        
        {/* 右侧设置面板 */}
        {showSettings && (
          <div className="w-80 border-l border-gray-200 bg-gray-50">
            <WorkflowSettings
              workflowData={workflowData}
              selectedNode={selectedNode}
              onUpdateWorkflow={setWorkflowData}
            />
          </div>
        )}
      </div>
    </div>
  );
}