"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WorkflowBuilder = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const Card_1 = require("../common/Card");
const Button_1 = require("../forms/Button");
const WorkflowBuilder = ({ initialNodes = [], availableNodeTypes = [
    { type: 'trigger', name: 'API Webhook', icon: '🔗', description: 'Trigger on HTTP request' },
    { type: 'trigger', name: 'Schedule', icon: '⏰', description: 'Run on schedule' },
    { type: 'action', name: 'AI Completion', icon: '🤖', description: 'Generate AI response' },
    { type: 'action', name: 'Send Email', icon: '📧', description: 'Send email notification' },
    { type: 'condition', name: 'If/Else', icon: '🔀', description: 'Conditional logic' },
    { type: 'output', name: 'API Response', icon: '📤', description: 'Return API response' },
], onSave, onDeploy, showGrid = true, enableZoom = true, }) => {
    const [nodes, setNodes] = (0, react_1.useState)(initialNodes);
    const [selectedNode, setSelectedNode] = (0, react_1.useState)(null);
    const [connecting, setConnecting] = (0, react_1.useState)(null);
    const [zoom, setZoom] = (0, react_1.useState)(1);
    const [offset, setOffset] = (0, react_1.useState)({ x: 0, y: 0 });
    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
    const addNode = (type, name) => {
        const newNode = {
            id: `node-${Date.now()}`,
            type: type,
            name,
            config: {},
            position: {
                x: 100 + nodes.length * 50,
                y: 100 + nodes.length * 30,
            },
            connections: [],
        };
        setNodes([...nodes, newNode]);
    };
    const updateNodePosition = (nodeId, position) => {
        setNodes(nodes.map(node => node.id === nodeId ? { ...node, position } : node));
    };
    const connectNodes = (fromId, toId) => {
        setNodes(nodes.map(node => node.id === fromId
            ? { ...node, connections: [...node.connections, toId] }
            : node));
    };
    const handleNodeClick = (nodeId) => {
        if (connecting) {
            if (connecting !== nodeId) {
                connectNodes(connecting, nodeId);
            }
            setConnecting(null);
        }
        else {
            setSelectedNode(nodeId === selectedNode ? null : nodeId);
        }
    };
    const handleSave = async () => {
        if (onSave) {
            await onSave(nodes);
        }
    };
    const handleDeploy = async () => {
        if (onDeploy) {
            await onDeploy(nodes);
        }
    };
    const getNodeColor = (type) => {
        switch (type) {
            case 'trigger': return 'bg-green-100 border-green-400';
            case 'action': return 'bg-blue-100 border-blue-400';
            case 'condition': return 'bg-yellow-100 border-yellow-400';
            case 'output': return 'bg-purple-100 border-purple-400';
            default: return 'bg-gray-100 border-gray-400';
        }
    };
    return ((0, jsx_runtime_1.jsx)(Card_1.Card, { className: "workflow-builder", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mb-6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-lg font-semibold", children: "AI Workflow Builder" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleSave, variant: "secondary", size: "sm", children: "Save Workflow" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: handleDeploy, variant: "primary", size: "sm", children: "Deploy" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-1 lg:grid-cols-4 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "lg:col-span-1", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-gray-700 mb-3", children: "Add Nodes" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: availableNodeTypes.map((nodeType) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => addNode(nodeType.type, nodeType.name), className: "w-full text-left p-3 border rounded-lg hover:bg-gray-50 transition-colors", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-2xl", children: nodeType.icon }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium text-sm", children: nodeType.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-500", children: nodeType.description })] })] }) }, nodeType.type + nodeType.name))) }), selectedNode && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-6", children: [(0, jsx_runtime_1.jsx)("h4", { className: "font-medium text-gray-700 mb-3", children: "Node Properties" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setConnecting(selectedNode), variant: "secondary", size: "sm", className: "w-full", children: "Connect to Another Node" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => {
                                                        setNodes(nodes.filter(n => n.id !== selectedNode));
                                                        setSelectedNode(null);
                                                    }, variant: "secondary", size: "sm", className: "w-full text-red-600", children: "Delete Node" })] })] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "lg:col-span-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative border-2 border-gray-200 rounded-lg bg-gray-50 overflow-hidden", style: { height: '600px' }, children: [showGrid && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 pointer-events-none", style: {
                                            backgroundImage: 'radial-gradient(circle, #e5e5e5 1px, transparent 1px)',
                                            backgroundSize: `${20 * zoom}px ${20 * zoom}px`,
                                            backgroundPosition: `${offset.x}px ${offset.y}px`,
                                        } })), (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", style: {
                                            transform: `scale(${zoom}) translate(${offset.x}px, ${offset.y}px)`,
                                            transformOrigin: 'top left',
                                        }, children: [(0, jsx_runtime_1.jsxs)("svg", { className: "absolute inset-0 pointer-events-none", children: [nodes.map(node => node.connections.map(targetId => {
                                                        const targetNode = nodes.find(n => n.id === targetId);
                                                        if (!targetNode)
                                                            return null;
                                                        return ((0, jsx_runtime_1.jsx)("line", { x1: node.position.x + 100, y1: node.position.y + 40, x2: targetNode.position.x, y2: targetNode.position.y + 40, stroke: "#9ca3af", strokeWidth: "2", markerEnd: "url(#arrowhead)" }, `${node.id}-${targetId}`));
                                                    })), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "10", refX: "9", refY: "3", orient: "auto", children: (0, jsx_runtime_1.jsx)("polygon", { points: "0 0, 10 3, 0 6", fill: "#9ca3af" }) }) })] }), nodes.map(node => ((0, jsx_runtime_1.jsxs)("div", { className: `absolute p-3 border-2 rounded-lg cursor-move ${getNodeColor(node.type)} ${selectedNode === node.id ? 'ring-2 ring-blue-500' : ''} ${connecting === node.id ? 'animate-pulse' : ''}`, style: {
                                                    left: node.position.x,
                                                    top: node.position.y,
                                                    width: '200px',
                                                }, onClick: () => handleNodeClick(node.id), children: [(0, jsx_runtime_1.jsx)("div", { className: "font-medium text-sm", children: node.name }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs text-gray-600 mt-1", children: node.type.charAt(0).toUpperCase() + node.type.slice(1) })] }, node.id)))] }), enableZoom && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-4 right-4 flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setZoom(Math.min(zoom + 0.1, 2)), variant: "secondary", size: "sm", children: "+" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setZoom(Math.max(zoom - 0.1, 0.5)), variant: "secondary", size: "sm", children: "-" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => {
                                                    setZoom(1);
                                                    setOffset({ x: 0, y: 0 });
                                                }, variant: "secondary", size: "sm", children: "\u27F2" })] })), (0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-4 left-4 bg-white px-3 py-1 rounded text-xs text-gray-600", children: [nodes.length, " nodes \u2022 ", connecting ? 'Connecting...' : 'Ready'] })] }) })] })] }) }));
};
exports.WorkflowBuilder = WorkflowBuilder;
exports.default = exports.WorkflowBuilder;
//# sourceMappingURL=WorkflowBuilder.js.map