@extends('app.template')
@section('title', 'Edit Workflow - COLI')

@section('content')

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title mb-4">Edit Workflow</h4>

                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if (session('error'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{ session('error') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif

                <form action="{{ route('workflows.update', $workflow->id ?? '') }}" method="post" id="workflow-form">
                    @csrf

                    <!-- hidden fields -->
                    <input type="hidden" name="tasks" id="tasksInput">
                    <textarea name="drawflow_data" id="drawflow_data" style="display:none;" readonly>{{ old('drawflow_data', $workflow->drawflow_data ?? '') }}</textarea>
                    <textarea name="tasks_data" id="tasks_data" style="display:none;" readonly>{{ old('tasks_data', $workflow->tasks_data ?? '') }}</textarea>

                    <!-- main form fields -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" required placeholder="Enter workflow name" value="{{ old('name', $workflow->name ?? '') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="category" class="form-label">Category <span class="text-danger">*</span></label>
                                <select class="form-select" id="category" name="category" required>
                                    <option value="" disabled {{ old('category', $workflow->category ?? '') == '' ? 'selected' : '' }}>Select category</option>
                                    <option value="single" {{ old('category', $workflow->category ?? '') == 'single' ? 'selected' : '' }}>Single</option>
                                    <option value="multiple" {{ old('category', $workflow->category ?? '') == 'multiple' ? 'selected' : '' }}>Multiple</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group mb-3">
                                <label for="tags" class="form-label">Tags</label>
                                <input type="text" class="form-control" id="tags" name="tags" placeholder="Enter tags (comma separated)" value="{{ old('tags', $workflow->tags ?? '') }}">
                            </div>
                        </div>
                    </div>

                    <div class="form-group mb-4">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="1" placeholder="Enter workflow description">{{ old('description', $workflow->description ?? '') }}</textarea>
                    </div>

                    <!-- Begin Design/Script/Tools Checker Tabs -->
                    <ul class="nav nav-tabs mb-3" id="workflowTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="design-tab" data-bs-toggle="tab" data-bs-target="#designTabPane" type="button" role="tab" aria-controls="designTabPane" aria-selected="true">
                                <i class="fas fa-project-diagram me-1"></i> Workflow Design
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="script-tab" data-bs-toggle="tab" data-bs-target="#scriptTabPane" type="button" role="tab" aria-controls="scriptTabPane" aria-selected="false">
                                <i class="fas fa-code me-1"></i> JSON Script
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="tools-checker-tab" data-bs-toggle="tab" data-bs-target="#toolsCheckerTabPane" type="button" role="tab" aria-controls="toolsCheckerTabPane" aria-selected="false">
                                <i class="fas fa-tools me-1"></i> Availability Checker
                            </button>
                        </li>
                    </ul>
                    <div class="tab-content" id="workflowTabContent">
                        <!-- Design Tab -->
                        <div class="tab-pane fade show active" id="designTabPane" role="tabpanel" aria-labelledby="design-tab">
                            <div class="d-flex gap-2 mb-4">
                                <button type="button" class="btn btn-success" id="addTaskBtn">
                                    <i class="fas fa-plus me-1"></i> Add Task
                                </button>
                            </div>
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="card mb-3">
                                        <div class="card-header">
                                            Task Library
                                        </div>
                                        <div class="card-body p-2" style="max-height: 400px; overflow-y: auto;">
                                            <div id="taskLibrary" class="d-flex flex-column gap-2">
                                                <!-- Task blocks with button -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-9">
                                    <div id="drawflow" style="height: 450px; border: 1px solid var(--bs-border-color); border-radius: 6px;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- Script Tab -->
                        <div class="tab-pane fade" id="scriptTabPane" role="tabpanel" aria-labelledby="script-tab">
                            <div class="form-group mb-4">
                                <textarea name="script" id="script" class="form-control font-monospace" style="height:200px;">{{ old('script', $workflow->script ?? '') }}</textarea>
                            </div>
                        </div>
                        <!-- Tools Checker Tab -->
                        <!-- Tools Checker Tab -->
                        <div class="tab-pane fade" id="toolsCheckerTabPane" role="tabpanel" aria-labelledby="tools-checker-tab">
                            <div class="form-group mb-4">
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control font-monospace" id="tools_checker_input" placeholder="Enter the tool name to check">
                                    <button type="button" class="btn btn-outline-primary" id="add_tools_checker_btn">Check</button>
                                </div>
                                <div id="tools_checker_result" class="mt-3" style="display: none;">
                                    <div class="alert" role="alert"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Design/Script/Tools Checker Tabs -->

                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="mdi mdi-content-save me-1"></i> Update Workflow
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Task Modal -->
<div class="modal fade" id="taskModal" tabindex="-1" aria-labelledby="taskModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="taskForm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="taskModalLabel">Edit Task</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="editTaskId">
                    <div class="form-group mb-3">
                        <label for="taskName" class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="taskName" required placeholder="Enter task name" value="">
                    </div>
                    <div class="form-group mb-3">
                        <label for="taskDescription" class="form-label">Description</label>
                        <textarea class="form-control" id="taskDescription" placeholder="Enter task description" rows="2"></textarea>
                    </div>
                    <div class="form-group mb-3">
                        <label for="taskOutput" class="form-label">Output</label>
                        <input type="text" class="form-control" id="taskOutput" placeholder="Enter task output" value="">
                    </div>
                    <div class="form-group mb-3">
                        <label for="taskCommand" class="form-label">Command <span class="text-danger">*</span></label>
                        <input type="text" class="form-control font-monospace" id="taskCommand" required placeholder="Enter task command" value="">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="taskModalSubmitBtn">Update Task</button>
                </div>
            </div>
        </form>
    </div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.css" />
<script src="https://cdn.jsdelivr.net/npm/drawflow/dist/drawflow.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<style>
#taskLibrary .task-block {
    border-radius: 8px;
    padding: 12px 10px;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: box-shadow 0.15s, background 0.15s;
}
#taskLibrary .task-block:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
#taskLibrary .task-separator {
    height: 1px;
    background: linear-gradient(to right, #b0b3b8 10%, #c4c6c8 90%);
    margin: 0.25rem 0 0.25rem 0;
    border: none;
    width: 100%;
}
.task-block .task-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.task-block .task-title {
    font-weight: 600;
    font-size: 1.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-block .task-desc {
    color: #6c757d;
    font-size: 0.93em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-block .task-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.task-block .add-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    gap: 5px;
}
.task-block .add-btn:hover {
    background: #e6f4ea;
    color: #157347;
}
.task-block .edit-btn, .task-block .delete-btn {
    background: none;
    border: none;
    padding: 4px 8px;
    font-size: 1.1em;
    cursor: pointer;
    border-radius: 3px;
    transition: background 0.15s, color 0.15s;
}
.task-block .edit-btn:hover {
    background: #e2e6ea;
    color: #007bff;
}
.task-block .delete-btn:hover {
    background: #f8d7da;
    color: #dc3545;
}

/* Custom background for workflow area: dotted pattern */
#drawflow {
    background-color: transparent !important;
    background-image: radial-gradient(circle, #bdbdbd 1px, transparent 1px), radial-gradient(circle, #bdbdbd 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}
</style>



<script>
// Escape function to prevent XSS
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('add_tools_checker_btn');
    const input = document.getElementById('tools_checker_input');
    const resultDiv = document.getElementById('tools_checker_result');
    const alertBox = resultDiv.querySelector('.alert');

    btn.addEventListener('click', function() {
        const tool = input.value.trim();
        if (!tool) {
            resultDiv.style.display = 'block';
            alertBox.className = 'alert alert-warning';
            alertBox.textContent = "Please enter a tool name.";
            return;
        }
        resultDiv.style.display = 'block';
        alertBox.className = 'alert alert-info';
        alertBox.textContent = "Checking tool availability...";

        fetch('{{ route('workflows.check-tools') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ tools: tool })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.results) {
                let messages = [];
                for (const [name, available] of Object.entries(data.results)) {
                    const safeName = escapeHtml(name);
                    if (available) {
                        messages.push('<span class="text-success fw-bold">✔️ The tool "' + safeName + '" is available.</span>');
                    } else {
                        messages.push('<span class="text-danger fw-bold">❌ The tool "' + safeName + '" is not available.</span>');
                    }
                }
                alertBox.className = 'alert alert-light';
                alertBox.innerHTML = messages.join('<br>');
            } else {
                alertBox.className = 'alert alert-danger';
                alertBox.textContent = "Error checking tool availability.";
            }
        })
        .catch(() => {
            alertBox.className = 'alert alert-danger';
            alertBox.textContent = "Error checking tool availability.";
        });
    });
});
</script>



<script>
let tasks = [];
let editIndex = null;
let editor = null;
let lastScriptJson = ''; // To remember the last generated script value

// Load initial data if available
document.addEventListener('DOMContentLoaded', function() {
    // Load tasks from old input or workflow data
    @if(old('tasks'))
        try {
            let oldTasks = JSON.parse(@json(old('tasks')));
            if (oldTasks && Array.isArray(oldTasks.tasks)) {
                tasks = oldTasks.tasks;
            }
        } catch (e) {}
    @elseif(isset($workflow) && $workflow->tasks_data)
        try {
            let workflowTasks = JSON.parse(@json($workflow->tasks_data));
            if (workflowTasks && Array.isArray(workflowTasks)) {
                tasks = workflowTasks;
            }
        } catch (e) {}
    @endif
});

function renderTaskLibrary() {
    const lib = document.getElementById('taskLibrary');
    lib.innerHTML = '';
    if (tasks.length === 0) {
        const empty = document.createElement('div');
        empty.className = 'text-muted text-center py-3';
        empty.innerText = 'No tasks available. Add a task to get started.';
        lib.appendChild(empty);
        return;
    }
    tasks.forEach((task, idx) => {
        if (idx > 0) {
            const sep = document.createElement('div');
            sep.className = 'task-separator';
            lib.appendChild(sep);
        }

        const block = document.createElement('div');
        block.className = 'task-block';
        block.setAttribute('data-task-idx', idx);

        const infoDiv = document.createElement('div');
        infoDiv.className = 'task-info';
        infoDiv.innerHTML = `
            <div class="task-title" title="${task.name}">${task.name}</div>
            <div class="task-desc" title="${task.description || ''}">${task.description || ''}</div>
        `;

        const actionsDiv = document.createElement('div');
        actionsDiv.className = 'task-actions';

        const addBtn = document.createElement('button');
        addBtn.className = 'add-btn';
        addBtn.type = 'button';
        addBtn.title = 'Add this task to the diagram';
        addBtn.innerHTML = '<i class="fa-solid fa-plus"></i>';
        addBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            if (editor) {
                const container = editor.container;
                const rect = container.getBoundingClientRect();
                const x = rect.width / 2;
                const y = rect.height / 2;
                editor.addNode(
                    'task',
                    1, 1,
                    x, y,
                    'task',
                    { idx: parseInt(idx) },
                    `<div class="task-block" style="display:flex;align-items:center;gap:6px;">
                        <div class="task-info" style="flex:1 1 auto;min-width:0;">
                            <strong>${escapeHtml(tasks[idx].name)}</strong>
                        </div>
                    </div>`
                );
                updateTasksInput();
            }
        });

        const editBtn = document.createElement('button');
        editBtn.className = 'edit-btn';
        editBtn.type = 'button';
        editBtn.title = 'Edit task';
        editBtn.innerHTML = '<i class="fa-solid fa-pen"></i>';
        editBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            openEditTaskModal(idx);
        });

        const deleteBtn = document.createElement('button');
        deleteBtn.className = 'delete-btn';
        deleteBtn.type = 'button';
        deleteBtn.title = 'Delete task';
        deleteBtn.innerHTML = '<i class="fa-solid fa-trash"></i>';
        deleteBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            if (confirm('Delete this task?')) {
                if (editor) {
                    const data = editor.export();
                    const nodesToRemove = [];
                    for (const nodeId in data.drawflow.Home.data) {
                        if (data.drawflow.Home.data[nodeId].data.idx === idx) {
                            nodesToRemove.push(nodeId);
                        }
                    }
                    nodesToRemove.forEach(nid => {
                        let nodeIdInt = parseInt(nid);
                        if (isNaN(nodeIdInt)) nodeIdInt = nid;
                        if (typeof editor.removeNode === 'function') {
                            editor.removeNode(nodeIdInt);
                        }
                    });
                }
                tasks.splice(idx, 1);

                if (editor) {
                    const data = editor.export();
                    for (const nodeId in data.drawflow.Home.data) {
                        let node = data.drawflow.Home.data[nodeId];
                        if (typeof node.data.idx === 'number' && node.data.idx > idx) {
                            if (
                                editor.drawflow &&
                                editor.drawflow.Home &&
                                editor.drawflow.Home.data &&
                                editor.drawflow.Home.data[nodeId] &&
                                editor.drawflow.Home.data[nodeId].data
                            ) {
                                editor.drawflow.Home.data[nodeId].data.idx = node.data.idx - 1;
                            }
                        }
                    }
                }

                renderTaskLibrary();
                updateTasksInput();
            }
        });

        actionsDiv.appendChild(addBtn);
        actionsDiv.appendChild(editBtn);
        actionsDiv.appendChild(deleteBtn);

        block.appendChild(infoDiv);
        block.appendChild(actionsDiv);

        block.addEventListener('dblclick', function(e) {
            if (
                e.target.closest('.edit-btn') ||
                e.target.closest('.delete-btn') ||
                e.target.closest('.add-btn')
            ) {
                return;
            }
            openEditTaskModal(idx);
        });

        lib.appendChild(block);
    });
}

function escapeHtml(text) {
    if (!text) return '';
    return text.replace(/[&<>"']/g, function(m) {
        return ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        })[m];
    });
}

// New version: only replace #script textarea if the JSON has changed
function updateScriptTextarea() {
    const scriptTextarea = document.getElementById('script');
    if (!editor) {
        scriptTextarea.value = '';
        lastScriptJson = '';
        return;
    }
    const data = editor.export();
    const nodes = data.drawflow.Home.data;

    const idxToNodeId = {};
    for (const nodeId in nodes) {
        const idx = nodes[nodeId].data.idx;
        idxToNodeId[idx] = nodeId;
    }

    const childrenMap = {};
    for (const nodeId in nodes) {
        childrenMap[nodeId] = [];
    }
    for (const nodeId in nodes) {
        const node = nodes[nodeId];
        if (node.outputs && node.outputs.output_1 && node.outputs.output_1.connections) {
            node.outputs.output_1.connections.forEach(conn => {
                childrenMap[nodeId].push(conn.node);
            });
        }
    }

    const allNodeIds = Object.keys(nodes);
    const childNodeIds = new Set();
    for (const nodeId in childrenMap) {
        childrenMap[nodeId].forEach(childId => childNodeIds.add(childId));
    }
    const rootNodeIds = allNodeIds.filter(id => !childNodeIds.has(id));

    function buildTaskTree(nodeId) {
        const idx = nodes[nodeId].data.idx;
        if (typeof idx !== 'number' || !tasks[idx]) {
            return null;
        }
        const task = tasks[idx];
        const children = childrenMap[nodeId]
            .map(childId => buildTaskTree(childId))
            .filter(child => child !== null);
        const taskObj = {
            name: task.name,
            description: task.description || '',
            output: task.output || '',
            command: task.command
        };
        if (children.length > 0) {
            taskObj.tasks = children;
        }
        return taskObj;
    }

    const workflowTasks = rootNodeIds
        .map(rootId => buildTaskTree(rootId))
        .filter(task => task !== null);

    let json = '';
    if (workflowTasks.length > 0) {
        json = JSON.stringify({ tasks: workflowTasks }, null, 2);
    }

    // Only replace the textarea if the JSON has changed
    if (json !== lastScriptJson) {
        scriptTextarea.value = json;
        lastScriptJson = json;
    }
    // Otherwise, do nothing (keep the previous value)
}

function updateDrawflowDataTextarea() {
    const drawflowDataTextarea = document.getElementById('drawflow_data');
    if (!editor) {
        drawflowDataTextarea.value = '';
        return;
    }
    const data = editor.export();
    drawflowDataTextarea.value = JSON.stringify(data, null, 2);
}

function updateTasksInput() {
    const connections = [];
    if (editor) {
        const data = editor.export();
        for (const nodeId in data.drawflow.Home.data) {
            const node = data.drawflow.Home.data[nodeId];
            if (node.outputs && node.outputs.output_1 && node.outputs.output_1.connections) {
                node.outputs.output_1.connections.forEach(conn => {
                    if (
                        typeof node.data.idx === 'number' &&
                        data.drawflow.Home.data[conn.node] &&
                        typeof data.drawflow.Home.data[conn.node].data.idx === 'number'
                    ) {
                        connections.push({
                            from: node.data.idx,
                            to: data.drawflow.Home.data[conn.node].data.idx
                        });
                    }
                });
            }
        }
    }
    const tasksForInput = tasks.map(task => ({
        name: task.name,
        description: task.description || '',
        output: task.output || '',
        command: task.command
    }));
    document.getElementById('tasksInput').value = JSON.stringify({
        tasks: tasksForInput,
        connections: connections
    });
    updateScriptTextarea();
    const tasksDataTextarea = document.getElementById('tasks_data');
    if (tasksDataTextarea) {
        tasksDataTextarea.value = JSON.stringify(tasksForInput, null, 2);
    }
    updateDrawflowDataTextarea();
}

function openEditTaskModal(idx) {
    editIndex = idx;
    const task = tasks[idx];
    document.getElementById('taskModalLabel').innerText = 'Edit Task';
    document.getElementById('taskModalSubmitBtn').innerText = 'Update Task';
    document.getElementById('taskName').value = task.name;
    document.getElementById('taskDescription').value = task.description || '';
    document.getElementById('taskOutput').value = task.output || '';
    document.getElementById('taskCommand').value = task.command;
    document.getElementById('editTaskId').value = idx;
    var modal = new bootstrap.Modal(document.getElementById('taskModal'));
    modal.show();
}

function openAddTaskModal() {
    editIndex = null;
    document.getElementById('taskModalLabel').innerText = 'Add Task';
    document.getElementById('taskModalSubmitBtn').innerText = 'Add Task';
    document.getElementById('taskName').value = '';
    document.getElementById('taskDescription').value = '';
    document.getElementById('taskOutput').value = '';
    document.getElementById('taskCommand').value = '';
    document.getElementById('editTaskId').value = '';
    var modal = new bootstrap.Modal(document.getElementById('taskModal'));
    modal.show();
}

document.getElementById('addTaskBtn').addEventListener('click', openAddTaskModal);

document.getElementById('taskForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const name = document.getElementById('taskName').value.trim();
    const description = document.getElementById('taskDescription').value.trim();
    const output = document.getElementById('taskOutput').value.trim();
    const command = document.getElementById('taskCommand').value.trim();

    if (!name || !command) {
        alert('Name and Command are required.');
        return;
    }

    if (editIndex !== null) {
        tasks[editIndex] = { name, description, output, command };
    } else {
        tasks.push({ name, description, output, command });
    }
    renderTaskLibrary();
    updateTasksInput();
    var modal = bootstrap.Modal.getInstance(document.getElementById('taskModal'));
    modal.hide();
});

['name', 'category', 'tags', 'description'].forEach(function(id) {
    const el = document.getElementById(id);
    if (el) {
        el.addEventListener('input', function() {
            // No-op
        });
    }
});

document.addEventListener('DOMContentLoaded', function() {
    editor = new Drawflow(document.getElementById('drawflow'));
    editor.reroute = true;
    editor.start();

    // Load drawflow data if available
    @if(old('drawflow_data'))
        try {
            let drawflowData = JSON.parse(@json(old('drawflow_data')));
            if (drawflowData && drawflowData.drawflow) {
                editor.import(drawflowData);
            }
        } catch (e) {}
    @elseif(isset($workflow) && $workflow->drawflow_data)
        try {
            let drawflowData = JSON.parse(@json($workflow->drawflow_data));
            if (drawflowData && drawflowData.drawflow) {
                editor.import(drawflowData);
            }
        } catch (e) {}
    @endif

    // Update drawflow_data on any drawflow change (node, connection, position, etc)
    function updateDrawflowOnAnyChange() {
        updateTasksInput();
        // updateTasksInput already calls updateDrawflowDataTextarea and updateScriptTextarea
    }

    editor.on('nodeCreated', updateDrawflowOnAnyChange);
    editor.on('nodeRemoved', updateDrawflowOnAnyChange);
    editor.on('connectionCreated', updateDrawflowOnAnyChange);
    editor.on('connectionRemoved', updateDrawflowOnAnyChange);

    // Listen for node position changes
    editor.on('nodeMoved', updateDrawflowOnAnyChange);

    // Listen for zoom events (optional, if you want to save zoom/position)
    editor.on('zoom', updateDrawflowOnAnyChange);
    editor.on('translate', updateDrawflowOnAnyChange);

    renderTaskLibrary();
    updateTasksInput();
});
</script>

@endsection