require_once('../../../../config.php');

$PAGE->set_context(context_system::instance());
$PAGE->set_url('/local/workflowdesigner/modules/designer/');
$PAGE->set_title('Bheem Academy - Workflow Designer Pro');
$PAGE->set_heading('Bheem Academy - Workflow Designer Pro');
$PAGE->set_pagelayout('embedded');

require_login();

// Output header
echo $OUTPUT->header();

// Include the entire HTML/CSS/JS content
?>
<style>
    /* Reset Moodle */
    body { margin: 0 !important; padding: 0 !important; }
    #page, #page-wrapper, #region-main { margin: 0 !important; padding: 0 !important; }
    .navbar, #page-header, #page-footer, .breadcrumb { display: none !important; }
    
    /* Professional Design System */
    :root {
        --primary: #2563eb;
        --primary-hover: #1d4ed8;
        --primary-light: #dbeafe;
        --primary-glow: rgba(37, 99, 235, 0.4);
        --secondary: #7c3aed;
        --accent: #06b6d4;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-400: #9ca3af;
        --gray-500: #6b7280;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --gray-900: #111827;
        --success: #10b981;
        --danger: #ef4444;
        --warning: #f59e0b;
        --info: #3b82f6;
        
        /* Shadows & Transitions */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        --shadow-glow: 0 0 20px rgba(37, 99, 235, 0.2);
        
        --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        background: linear-gradient(135deg, #f5f7fa 0%, #f0f4f8 100%);
        color: var(--gray-900);
        overflow: hidden;
    }
    
    /* Animated Background */
    @keyframes backgroundShift {
        0% { background-position: 0 0; }
        100% { background-position: 100px 100px; }
    }
    
    /* Glass Header */
    .header {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 0 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 64px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        transition: all 0.3s var(--ease-smooth);
    }
    
    .logo-section {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    /* Module Navigation */
    .module-nav {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-left: auto;
        margin-right: 2rem;
    }
    
    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0.75rem;
        color: var(--gray-600);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s;
    }
    
    .nav-link:hover {
        background: var(--gray-100);
        color: var(--primary);
        transform: translateY(-1px);
    }
    
    .nav-link.active {
        background: var(--primary);
        color: white;
    }
    
    .nav-link i {
        font-size: 1rem;
    }
    
    .logo-section img {
        height: 36px;
        transition: transform 0.3s var(--ease-bounce);
    }
    
    .logo-section:hover img {
        transform: scale(1.1) rotate(5deg);
    }
    
    /* Fluid Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 0.625rem;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: all 0.3s var(--ease-smooth);
        transform-style: preserve-3d;
        background: white;
        color: var(--gray-700);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }
    
    .btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }
    
    .btn::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
        transform: translateX(-100%);
        transition: transform 0.6s;
    }
    
    .btn:hover::after {
        transform: translateX(100%);
    }
    
    .btn:hover {
        transform: translateY(-2px) translateZ(20px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }
    
    .btn:active {
        transform: translateZ(-20px) scale(0.95);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
        color: white;
    }
    
    .btn-danger {
        background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
        color: white;
    }
    
    .btn-success {
        background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
        color: white;
    }
    
    .btn-play {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: white;
    }
    
    .btn-pause {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
    }
    
    .btn-stop {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        color: white;
    }
    
    .execution-controls {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .divider {
        width: 1px;
        height: 24px;
        background: var(--gray-300);
        margin: 0 0.5rem;
    }
    
    /* Layout */
    #app {
        height: 100vh;
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
    }
    
    .workflow-designer {
        display: grid;
        grid-template-columns: 300px 1fr 340px;
        height: calc(100vh - 64px);
        margin-top: 64px;
        background: var(--gray-50);
    }
    
    /* Enhanced Sidebar */
    .sidebar {
        background: white;
        border-right: 1px solid var(--gray-200);
        overflow-y: auto;
        overflow-x: hidden;
        position: relative;
    }
    
    .sidebar::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
        animation: pulse 4s ease-in-out infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 0.5; transform: scale(1); }
        50% { opacity: 0.8; transform: scale(1.1); }
    }
    
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, var(--primary), var(--secondary));
        border-radius: 3px;
    }
    
    /* Search Animation */
    .search-container {
        position: relative;
        margin-bottom: 1rem;
    }
    
    .node-search {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        border: 2px solid transparent;
        background: var(--gray-50);
        border-radius: 0.75rem;
        font-size: 0.875rem;
        transition: all 0.3s var(--ease-smooth);
    }
    
    .node-search:focus {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 4px var(--primary-glow), 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: translateY(-1px);
    }
    
    .search-icon {
        position: absolute;
        left: 0.875rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-400);
        transition: all 0.3s var(--ease-smooth);
    }
    
    .node-search:focus + .search-icon {
        color: var(--primary);
        transform: translateY(-50%) scale(1.1);
    }
    
    /* Category Headers */
    .node-category {
        margin-bottom: 0.5rem;
        border-radius: 0.75rem;
        overflow: hidden;
        transition: all 0.3s var(--ease-smooth);
    }
    
    .category-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.875rem 1rem;
        background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
        cursor: pointer;
        transition: all 0.3s var(--ease-smooth);
        position: relative;
        overflow: hidden;
    }
    
    .category-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
        transition: left 0.6s;
    }
    
    .category-header:hover::before {
        left: 100%;
    }
    
    .category-header:hover {
        background: linear-gradient(135deg, white 0%, var(--primary-light) 100%);
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .category-icon {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.5rem;
        font-size: 1rem;
        transition: all 0.3s var(--ease-bounce);
    }
    
    .category-header:hover .category-icon {
        transform: scale(1.1) rotate(10deg);
    }
    
    /* Node Items */
    .node-item {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        padding: 0.875rem 1rem;
        margin: 0.375rem 0.5rem;
        border-radius: 0.625rem;
        cursor: grab;
        transition: all 0.3s var(--ease-smooth);
        background: white;
        border: 2px solid transparent;
        position: relative;
        overflow: hidden;
    }
    
    .node-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, transparent 0%, rgba(37, 99, 235, 0.05) 100%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    
    .node-item:hover::before {
        opacity: 1;
    }
    
    .node-item:hover {
        transform: translateX(8px) scale(1.02);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
        border-color: var(--primary-light);
        background: linear-gradient(135deg, white 0%, var(--primary-light) 100%);
    }
    
    .node-item:active {
        cursor: grabbing;
        transform: scale(0.98);
    }
    
    .node-item.dragging {
        opacity: 0.5;
        transform: scale(0.9);
    }
    
    /* Node Icons */
    .node-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.125rem;
        color: white;
        position: relative;
        overflow: hidden;
        transition: all 0.3s var(--ease-bounce);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        background-image: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 60%);
    }
    
    .node-icon::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
        transform: rotate(45deg);
        transition: all 0.6s;
        opacity: 0;
    }
    
    .node-item:hover .node-icon::after {
        opacity: 1;
        transform: rotate(45deg) translate(50%, 50%);
    }
    
    .node-item:hover .node-icon {
        transform: scale(1.1) rotate(-5deg);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    }
    
    /* Canvas */
    .canvas {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        position: relative;
        overflow: hidden;
        background-image: 
            radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.05) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.05) 0%, transparent 50%),
            radial-gradient(circle, rgba(229, 231, 235, 0.3) 1px, transparent 1px);
        background-size: 100% 100%, 100% 100%, 20px 20px;
        animation: backgroundShift 20s linear infinite;
    }
    
    /* Workflow Nodes - Modern Card Design */
    .workflow-node {
        position: absolute;
        background: white;
        border: none;
        border-radius: 16px;
        width: 280px;
        min-height: 140px;
        cursor: move;
        transition: all 0.3s var(--ease-smooth);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.08);
        animation: nodeEntry 0.5s var(--ease-bounce);
        display: flex;
        flex-direction: column;
        overflow: visible;
        backdrop-filter: blur(10px);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
    }
    
    @keyframes nodeEntry {
        from {
            opacity: 0;
            transform: scale(0.5) rotate(-10deg);
        }
        to {
            opacity: 1;
            transform: scale(1) rotate(0);
        }
    }
    
    .workflow-node::before {
        content: '';
        position: absolute;
        inset: -3px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border-radius: inherit;
        opacity: 0;
        z-index: -1;
        transition: opacity 0.3s;
        filter: blur(10px);
    }
    
    .workflow-node:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 16px 48px rgba(0, 0, 0, 0.08);
    }
    
    .workflow-node:hover::before {
        opacity: 0.3;
    }
    
    .workflow-node.selected {
        box-shadow: 0 0 0 3px var(--primary), 0 8px 24px rgba(37, 99, 235, 0.2);
        transform: translateY(-2px);
    }
    
    @keyframes selectedPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.02); }
    }
    
    .workflow-node.dragging {
        opacity: 0.8;
        transform: scale(1.05);
        cursor: grabbing;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }
    
    /* Node Execution States */
    .workflow-node.node-pending {
        opacity: 0.7;
    }
    
    .workflow-node.node-running {
        box-shadow: 0 0 0 3px var(--primary), 0 8px 24px rgba(37, 99, 235, 0.3);
        animation: nodeRunning 2s ease-in-out infinite;
    }
    
    @keyframes nodeRunning {
        0%, 100% { transform: translateY(-2px) scale(1); }
        50% { transform: translateY(-2px) scale(1.02); }
    }
    
    .workflow-node.node-completed {
        box-shadow: 0 0 0 3px var(--success), 0 8px 24px rgba(16, 185, 129, 0.2);
    }
    
    .workflow-node.node-failed {
        box-shadow: 0 0 0 3px var(--danger), 0 8px 24px rgba(239, 68, 68, 0.2);
    }
    
    .workflow-node.node-cancelled {
        opacity: 0.6;
    }
    
    .node-status-indicator {
        margin-left: auto;
        font-size: 1.25rem;
    }
    
    .node-status-indicator .fa-clock {
        color: var(--gray-500);
    }
    
    .node-status-indicator .fa-spinner {
        color: var(--primary);
    }
    
    .node-status-indicator .fa-check-circle {
        color: var(--success);
    }
    
    .node-status-indicator .fa-exclamation-circle {
        color: var(--danger);
    }
    
    .node-status-indicator .fa-ban {
        color: var(--gray-500);
    }
    
    .node-header {
        padding: 1.25rem 1.5rem;
        position: relative;
        z-index: 1;
    }
    
    .node-header-content {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .node-icon-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: white;
        flex-shrink: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }
    
    .node-icon-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
        pointer-events: none;
    }
    
    .node-info {
        flex: 1;
        min-width: 0;
    }
    
    .node-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0 0 0.25rem 0;
        line-height: 1.4;
    }
    
    .node-subtitle {
        font-size: 0.8125rem;
        color: var(--gray-500);
        margin: 0;
    }
    
    .node-body {
        padding: 0 1.5rem 1.25rem;
        position: relative;
    }
    
    .node-metrics {
        display: flex;
        gap: 1rem;
        margin-top: 0.75rem;
    }
    
    .node-metric {
        flex: 1;
        text-align: center;
        padding: 0.5rem;
        background: var(--gray-50);
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .node-metric:hover {
        background: var(--primary-light);
        transform: translateY(-2px);
    }
    
    .node-metric-value {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0;
    }
    
    .node-metric-label {
        font-size: 0.75rem;
        color: var(--gray-500);
        margin: 0;
    }
    
    /* Node Controls */
    .node-controls {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--gray-200);
        justify-content: center;
    }
    
    .node-control-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        border: 1px solid var(--gray-300);
        background: white;
        color: var(--gray-600);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.875rem;
    }
    
    .node-control-btn:hover:not(:disabled) {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }
    
    .node-control-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    
    .node-status-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 500;
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
        color: #065f46;
        box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
        animation: statusPulse 2s ease-in-out infinite;
    }
    
    @keyframes statusPulse {
        0%, 100% { box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2); }
        50% { box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4); }
    }
    
    /* Node Ports - Redesigned Connection System */
    .node-connection-area {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    
    .node-connection-area.input {
        left: -30px;
    }
    
    .node-connection-area.output {
        right: -30px;
    }
    
    .node-port {
        width: 16px;
        height: 16px;
        background: white;
        border: 3px solid var(--gray-300);
        border-radius: 50%;
        cursor: crosshair;
        transition: all 0.3s var(--ease-bounce);
        position: relative;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 10;
    }
    
    /* Connection Hit Area */
    .node-port::before {
        content: '';
        position: absolute;
        width: 60px;
        height: 60px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: transparent;
        cursor: crosshair;
        z-index: -1;
    }
    
    /* Port Label */
    .port-label {
        position: absolute;
        font-size: 11px;
        font-weight: 600;
        color: var(--gray-400);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        opacity: 0;
        transition: all 0.3s ease;
        pointer-events: none;
    }
    
    .node-connection-area.input .port-label {
        right: 100%;
        margin-right: 8px;
    }
    
    .node-connection-area.output .port-label {
        left: 100%;
        margin-left: 8px;
    }
    
    /* Hover States */
    .node-connection-area:hover .node-port {
        width: 28px;
        height: 28px;
        border-color: var(--primary);
        border-width: 4px;
        background: var(--primary);
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.4), 0 0 40px rgba(37, 99, 235, 0.2);
    }
    
    .node-connection-area:hover .port-label {
        opacity: 1;
    }
    
    /* Active Connection State */
    .node-port.can-connect {
        border-color: var(--success);
        background: white;
        animation: portPulse 1s ease-in-out infinite;
    }
    
    .node-connection-area:hover .node-port.can-connect {
        background: var(--success);
        border-color: var(--success);
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
    }
    
    @keyframes portPulse {
        0%, 100% { 
            transform: scale(1);
            box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
        }
        50% { 
            transform: scale(1.2);
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.6);
        }
    }
    
    /* Connection Line Indicator */
    .node-connection-area::after {
        content: '';
        position: absolute;
        width: 30px;
        height: 2px;
        background: var(--gray-200);
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }
    
    .node-connection-area.input::after {
        right: 8px;
    }
    
    .node-connection-area.output::after {
        left: 8px;
    }
    
    .node-connection-area:hover::after {
        background: var(--primary);
        width: 40px;
    }
    
    .node-port.highlight {
        transform: scale(2.2) translateY(-50%);
        border-color: var(--success);
        background: var(--success);
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
        animation: portPulse 1s ease-in-out infinite;
    }
    
    @keyframes portPulse {
        0%, 100% { 
            transform: scale(2.2) translateY(-50%);
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.8);
        }
        50% { 
            transform: scale(2.5) translateY(-50%);
            box-shadow: 0 0 40px rgba(16, 185, 129, 1);
        }
    }
    
    /* Connection Helper Lines */
    .workflow-node.connection-source {
        box-shadow: 0 0 0 4px var(--primary-glow), 0 12px 32px rgba(0, 0, 0, 0.12);
        border-color: var(--primary);
    }
    
    .workflow-node.connection-target {
        animation: nodeGlow 1s ease-in-out infinite;
    }
    
    @keyframes nodeGlow {
        0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); }
        50% { box-shadow: 0 0 30px var(--success); }
    }
    
    /* Canvas Controls */
    .canvas-controls {
        position: absolute;
        bottom: 2rem;
        right: 2rem;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 1rem;
        padding: 0.75rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        animation: slideUp 0.5s var(--ease-bounce);
    }
    
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .canvas-control {
        width: 40px;
        height: 40px;
        border: none;
        background: white;
        border-radius: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s var(--ease-bounce);
        color: var(--gray-600);
        font-size: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .canvas-control:hover {
        background: var(--primary);
        color: white;
        transform: translateY(-2px) scale(1.1);
        box-shadow: 0 4px 16px rgba(37, 99, 235, 0.3);
    }
    
    .canvas-control:active {
        transform: scale(0.95);
    }
    
    /* Minimap */
    .minimap {
        position: absolute;
        top: 2rem;
        right: 2rem;
        width: 180px;
        height: 120px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
        transition: all 0.3s var(--ease-smooth);
        cursor: pointer;
        opacity: 0.8;
    }
    
    .minimap:hover {
        width: 240px;
        height: 160px;
        opacity: 1;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    }
    
    .minimap-viewport {
        position: absolute;
        border: 2px solid var(--primary);
        background: var(--primary-glow);
        border-radius: 0.5rem;
        transition: all 0.2s var(--ease-smooth);
        box-shadow: 0 0 20px var(--primary-glow);
    }
    
    /* Properties Panel */
    .properties {
        background: white;
        border-left: 1px solid var(--gray-200);
        overflow-y: auto;
        padding: 2rem;
        position: relative;
    }
    
    .properties::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(to bottom, white 0%, transparent 100%);
        pointer-events: none;
        z-index: 10;
    }
    
    .property-input {
        width: 100%;
        padding: 0.875rem 1rem;
        border: 2px solid var(--gray-200);
        border-radius: 0.75rem;
        font-size: 0.875rem;
        transition: all 0.3s var(--ease-smooth);
        background: var(--gray-50);
    }
    
    .property-input:focus {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 4px var(--primary-glow), 0 4px 12px rgba(0, 0, 0, 0.05);
        transform: translateY(-2px);
    }
    
    /* Toast */
    .toast {
        position: fixed;
        top: 80px;
        right: 2rem;
        background: white;
        border-radius: 1rem;
        padding: 1rem 1.5rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        z-index: 10000;
        display: flex;
        align-items: center;
        gap: 0.875rem;
        animation: toastSlide 0.5s var(--ease-bounce);
        border-left: 4px solid var(--primary);
        backdrop-filter: blur(20px);
        max-width: 400px;
    }
    
    @keyframes toastSlide {
        from {
            opacity: 0;
            transform: translateX(100%) scale(0.8);
        }
        to {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }
    
    .toast-icon {
        font-size: 1.25rem;
        animation: iconBounce 0.6s var(--ease-bounce);
    }
    
    @keyframes iconBounce {
        0%, 100% { transform: scale(1); }
        30% { transform: scale(0.8); }
        60% { transform: scale(1.2); }
    }

    /* Modal Styles */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
    }

    .modal-container {
        background: white;
        border-radius: 1.5rem;
        width: 100%;
        max-width: 700px;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-xl);
        animation: modalSlide 0.3s var(--ease-bounce);
    }

    @keyframes modalSlide {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .modal-header {
        padding: 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .modal-header h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--gray-900);
        margin: 0;
    }

    .modal-close {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--gray-400);
        cursor: pointer;
        transition: all 0.2s;
        padding: 0.5rem;
    }

    .modal-close:hover {
        color: var(--gray-600);
        transform: rotate(90deg);
    }

    .modal-body {
        padding: 1.5rem;
        overflow-y: auto;
        flex: 1;
    }

    .form-section {
        margin-bottom: 2rem;
    }

    .form-section h3 {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--gray-800);
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }

    .form-input,
    .form-textarea,
    .form-select {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid var(--gray-200);
        border-radius: 0.75rem;
        font-size: 0.875rem;
        transition: all 0.2s;
        background: white;
    }

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-light);
    }

    .form-textarea {
        resize: vertical;
        min-height: 80px;
    }

    .checkbox-label,
    .radio-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        font-size: 0.875rem;
        color: var(--gray-700);
        margin-bottom: 0.5rem;
    }

    .radio-group {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
    }

    .marketplace-options {
        margin-top: 1rem;
        padding: 1rem;
        background: var(--gray-50);
        border-radius: 0.75rem;
    }

    .preview-section {
        border: 2px dashed var(--gray-300);
        border-radius: 0.75rem;
        padding: 2rem;
        text-align: center;
    }

    .workflow-preview {
        color: var(--gray-400);
    }

    .workflow-preview i {
        font-size: 3rem;
        margin-bottom: 0.5rem;
    }

    .modal-footer {
        padding: 1.5rem;
        border-top: 1px solid var(--gray-200);
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
    }

    .btn-secondary {
        background: var(--gray-100);
        color: var(--gray-700);
    }

    .btn-secondary:hover {
        background: var(--gray-200);
    }

    .btn-outline {
        background: white;
        color: var(--primary);
        border: 2px solid var(--primary);
    }

    .btn-outline:hover {
        background: var(--primary-light);
    }

    .modal-enter-active,
    .modal-leave-active {
        transition: opacity 0.3s;
    }

    .modal-enter-from,
    .modal-leave-to {
        opacity: 0;
    }
    
    /* Execution Log Panel */
    .execution-log-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--gray-200);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
        max-height: 300px;
        display: flex;
        flex-direction: column;
        z-index: 100;
    }
    
    .log-panel-header {
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--gray-50);
    }
    
    .log-panel-header h3 {
        font-size: 0.875rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .log-panel-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .btn-sm {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .log-panel-body {
        flex: 1;
        overflow-y: auto;
        padding: 1rem;
        font-family: 'JetBrains Mono', 'Consolas', monospace;
        font-size: 0.8125rem;
        background: #fafafa;
    }
    
    .log-empty {
        text-align: center;
        color: var(--gray-500);
        padding: 2rem;
    }
    
    .log-empty i {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
    
    .log-entries {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .log-entry {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        padding: 0.25rem 0;
        border-radius: 0.25rem;
    }
    
    .log-entry.log-error {
        color: var(--danger);
        background: rgba(239, 68, 68, 0.05);
        padding: 0.25rem 0.5rem;
    }
    
    .log-entry.log-warning {
        color: var(--warning);
        background: rgba(245, 158, 11, 0.05);
        padding: 0.25rem 0.5rem;
    }
    
    .log-entry.log-success {
        color: var(--success);
        background: rgba(16, 185, 129, 0.05);
        padding: 0.25rem 0.5rem;
    }
    
    .log-time {
        color: var(--gray-500);
        font-size: 0.75rem;
        white-space: nowrap;
    }
    
    .log-node {
        color: var(--primary);
        font-weight: 500;
    }
    
    .log-message {
        flex: 1;
    }
    
    /* Slide up animation */
    .slide-up-enter-active,
    .slide-up-leave-active {
        transition: transform 0.3s ease-out;
    }
    
    .slide-up-enter-from,
    .slide-up-leave-to {
        transform: translateY(100%);
    }
    
    /* Loading */
    .loading-spinner {
        display: inline-block;
        width: 40px;
        height: 40px;
        position: relative;
    }
    
    .loading-spinner::before,
    .loading-spinner::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: var(--primary);
        animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }
    
    .loading-spinner::after {
        inset: 8px;
        border-top-color: var(--secondary);
        animation-duration: 0.75s;
        animation-direction: reverse;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    
    /* Connection Lines */
    .connection-line {
        stroke: var(--primary);
        stroke-width: 3;
        fill: none;
        filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.2));
        stroke-dasharray: 5, 5;
        animation: dashAnimation 20s linear infinite;
        transition: all 0.3s ease;
    }
    
    .connection-line:hover {
        stroke-width: 5;
        stroke: var(--danger);
        filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.3));
    }
    
    @keyframes dashAnimation {
        to {
            stroke-dashoffset: -100;
        }
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 4rem 2rem;
        animation: fadeInUp 0.6s var(--ease-smooth);
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .empty-state-icon {
        font-size: 4rem;
        color: var(--gray-300);
        margin-bottom: 1.5rem;
        animation: float 3s ease-in-out infinite;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    /* Tooltips */
    [data-tooltip] {
        position: relative;
    }
    
    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background: var(--gray-900);
        color: white;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.75rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s var(--ease-smooth);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    [data-tooltip]:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px);
    }
    
    /* Vue Transitions */
    .fade-enter-active, .fade-leave-active {
        transition: opacity 0.3s ease;
    }
    .fade-enter-from, .fade-leave-to {
        opacity: 0;
    }
    
    .expand-enter-active, .expand-leave-active {
        transition: all 0.3s ease;
        overflow: hidden;
    }
    .expand-enter-from, .expand-leave-to {
        opacity: 0;
        max-height: 0;
    }
    
    .category-list-move,
    .category-list-enter-active,
    .category-list-leave-active {
        transition: all 0.3s ease;
    }
    .category-list-enter-from,
    .category-list-leave-to {
        opacity: 0;
        transform: translateX(-20px);
    }
    
    .node-list-move,
    .node-list-enter-active,
    .node-list-leave-active {
        transition: all 0.3s ease;
    }
    .node-list-enter-from {
        opacity: 0;
        transform: translateX(-10px);
    }
    .node-list-leave-to {
        opacity: 0;
        transform: translateX(10px);
    }
    
    .node-animation-move,
    .node-animation-enter-active,
    .node-animation-leave-active {
        transition: all 0.3s ease;
    }
    .node-animation-enter-from {
        opacity: 0;
        transform: scale(0.8);
    }
    .node-animation-leave-to {
        opacity: 0;
        transform: scale(0.8);
    }
    
    .toast-enter-active {
        animation: toastSlide 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .toast-leave-active {
        animation: toastSlide 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) reverse;
    }
</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">
    <!-- Loading Screen -->
    <transition name="fade">
        <div v-if="!loaded" style="position: fixed; inset: 0; background: white; display: flex; align-items: center; justify-content: center; z-index: 10000;">
            <div style="text-align: center;">
                <div class="loading-spinner" style="margin: 0 auto 1.5rem;"></div>
                <h2 style="font-size: 1.25rem; font-weight: 600; color: var(--gray-900); margin: 0;">Loading Workflow Designer</h2>
                <p style="font-size: 0.875rem; color: var(--gray-500); margin: 0.5rem 0 0;">Initializing components...</p>
            </div>
        </div>
    </transition>
    
    <transition name="fade">
        <div v-if="loaded" key="app-content">
            <!-- Enhanced Header -->
            <div class="header">
                <div class="logo-section">
                    <img src="https://academy.bheem.cloud/pluginfile.php/1/theme_edoo/main_logo/1753160941/logo.png" alt="Bheem Academy">
                    <div>
                        <h1 style="font-size: 1.25rem; font-weight: 600; margin: 0;">Workflow Designer Pro</h1>
                        <p style="font-size: 0.75rem; color: var(--gray-500); margin: 0;">Build powerful automations</p>
                    </div>
                </div>
                
                <!-- Navigation Links -->
                <nav class="module-nav">
                    <a href="/local/workflowdesigner/modules/dashboard/" class="nav-link">
                        <i class="fas fa-tachometer-alt"></i>
                        <span>Dashboard</span>
                    </a>
                    <a href="/local/workflowdesigner/modules/designer/" class="nav-link active">
                        <i class="fas fa-drafting-compass"></i>
                        <span>Designer</span>
                    </a>
                    <a href="/local/workflowdesigner/modules/marketplace/" class="nav-link">
                        <i class="fas fa-store"></i>
                        <span>Marketplace</span>
                    </a>
                    <a href="/local/workflowdesigner/modules/workflow-admin/" class="nav-link">
                        <i class="fas fa-cog"></i>
                        <span>Admin</span>
                    </a>
                </nav>
                <div style="display: flex; gap: 0.75rem;">
                    <!-- Execution Controls -->
                    <div class="execution-controls">
                        <button v-if="!isExecuting" class="btn btn-play" @click="startWorkflow" 
                                :disabled="canvasNodes.length === 0" data-tooltip="Start Workflow">
                            <i class="fas fa-play"></i> Start
                        </button>
                        <button v-if="isExecuting && !isPaused" class="btn btn-pause" @click="pauseWorkflow" 
                                data-tooltip="Pause Workflow">
                            <i class="fas fa-pause"></i> Pause
                        </button>
                        <button v-if="isExecuting && isPaused" class="btn btn-play" @click="resumeWorkflow" 
                                data-tooltip="Resume Workflow">
                            <i class="fas fa-play"></i> Resume
                        </button>
                        <button v-if="isExecuting" class="btn btn-stop" @click="stopWorkflow" 
                                data-tooltip="Stop Workflow">
                            <i class="fas fa-stop"></i> Stop
                        </button>
                    </div>
                    
                    <div class="divider"></div>
                    
                    <button class="btn" @click="toggleTheme" data-tooltip="Toggle Theme">
                        <i class="fas fa-moon"></i>
                    </button>
                    <button class="btn btn-danger" @click="clearCanvas" data-tooltip="Clear Canvas">
                        <i class="fas fa-trash"></i> Clear
                    </button>
                    <button class="btn" @click="exportWorkflow" data-tooltip="Export Workflow">
                        <i class="fas fa-download"></i> Export
                    </button>
                    <button class="btn btn-primary" @click="saveWorkflow" data-tooltip="Save Workflow">
                        <i class="fas fa-save"></i> Save
                    </button>
                    <button class="btn btn-success" @click="openMarketplaceShare" data-tooltip="Share to Marketplace">
                        <i class="fas fa-store"></i> Share
                    </button>
                </div>
            </div>
            
            <!-- Main Designer -->
            <div class="workflow-designer">
                <!-- Enhanced Sidebar -->
                <div class="sidebar">
                    <div style="padding: 1.5rem; position: sticky; top: 0; background: white; z-index: 10;">
                        <h2 style="font-size: 1rem; font-weight: 600; color: var(--gray-900); margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em;">
                            <i class="fas fa-cube" style="margin-right: 0.5rem;"></i>
                            Node Library
                        </h2>
                        <div class="search-container">
                            <input 
                                type="text" 
                                class="node-search" 
                                :placeholder="`Search ${availableNodes.length} nodes...`" 
                                v-model="searchTerm"
                                @input="filterNodes"
                            >
                            <i class="fas fa-search search-icon"></i>
                        </div>
                    </div>
                    
                    <div style="padding: 0 0.75rem 1rem;">
                        <transition-group name="category-list" tag="div">
                            <div v-for="(nodes, category) in filteredNodes" :key="category" 
                                 class="node-category" :class="{expanded: expandedCategories[category]}">
                                <div class="category-header" @click="toggleCategory(category)">
                                    <div style="display: flex; align-items: center; gap: 0.75rem;">
                                        <div class="category-icon" :style="{background: getCategoryGradient(category), color: 'white'}">
                                            <i :class="getCategoryIcon(category)"></i>
                                        </div>
                                        <div>
                                            <h3 style="font-size: 0.875rem; font-weight: 600; margin: 0;">{{ category }}</h3>
                                            <p style="font-size: 0.75rem; color: var(--gray-500); margin: 0;">{{ nodes.length }} nodes</p>
                                        </div>
                                    </div>
                                    <i class="fas fa-chevron-right" 
                                       :style="{transform: expandedCategories[category] ? 'rotate(90deg)' : 'rotate(0)', transition: 'transform 0.3s'}"></i>
                                </div>
                                <transition name="expand">
                                    <div v-if="expandedCategories[category]" class="category-nodes">
                                        <transition-group name="node-list" tag="div">
                                            <div v-for="node in nodes" :key="node.id" 
                                                 class="node-item"
                                                 :class="{dragging: draggedNode?.id === node.id}"
                                                 draggable="true" 
                                                 @dragstart="startDrag(node, $event)"
                                                 @dragend="endDrag">
                                                <div class="node-icon" :style="{background: node.color || getCategoryGradient(node.category)}">
                                                    <i :class="getNodeIcon(node)"></i>
                                                </div>
                                                <div style="flex: 1; min-width: 0;">
                                                    <h4 style="font-size: 0.875rem; font-weight: 600; color: var(--gray-900); margin: 0;">
                                                        {{ node.name }}
                                                    </h4>
                                                    <p style="font-size: 0.75rem; color: var(--gray-500); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                                        {{ node.description }}
                                                    </p>
                                                </div>
                                            </div>
                                        </transition-group>
                                    </div>
                                </transition>
                            </div>
                        </transition-group>
                        
                        <div v-if="loading" style="text-align: center; padding: 3rem;">
                            <div class="loading-spinner"></div>
                            <p style="margin-top: 1rem; color: var(--gray-500);">Loading awesome nodes...</p>
                        </div>
                    </div>
                </div>
                
                <!-- Enhanced Canvas -->
                <div class="canvas" 
                     @drop="onDrop" 
                     @dragover.prevent
                     @wheel="onWheel">
                    <!-- Connection Lines SVG -->
                    <svg style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;">
                        <defs>
                            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                                <polygon points="0 0, 10 3.5, 0 7" :fill="primaryColor" />
                            </marker>
                        </defs>
                        <g v-for="connection in connections" :key="connection.id">
                            <path :d="getConnectionPath(connection)" 
                                  class="connection-line" 
                                  marker-end="url(#arrowhead)"
                                  style="cursor: pointer; pointer-events: stroke;"
                                  @click="deleteConnection(connection)"
                                  @mouseenter="highlightConnection(connection, true)"
                                  @mouseleave="highlightConnection(connection, false)" />
                        </g>
                        <!-- Temporary connection line while dragging -->
                        <path v-if="tempConnectionPath" 
                              :d="tempConnectionPath" 
                              class="connection-line"
                              style="opacity: 0.6; stroke-dasharray: 10, 5;"
                              marker-end="url(#arrowhead)" />
                    </svg>
                    
                    <div class="canvas-grid" 
                         :style="{transform: `scale(${zoomLevel}) translate(${panX}px, ${panY}px)`}"
                         ref="canvasGrid">
                        <transition-group name="node-animation" tag="div">
                            <div v-for="node in canvasNodes" :key="node.id"
                                 class="workflow-node"
                                 :class="{
                                     selected: selectedNode?.id === node.id, 
                                     dragging: draggingCanvasNode?.id === node.id,
                                     'connection-source': connectionState.isConnecting && connectionState.sourceNode?.id === node.id,
                                     'connection-target': connectionState.isConnecting && connectionState.sourceNode?.id !== node.id,
                                     'node-pending': nodeExecutionStatus[node.id] === 'pending',
                                     'node-running': nodeExecutionStatus[node.id] === 'running',
                                     'node-completed': nodeExecutionStatus[node.id] === 'completed',
                                     'node-failed': nodeExecutionStatus[node.id] === 'failed',
                                     'node-cancelled': nodeExecutionStatus[node.id] === 'cancelled'
                                 }"
                                 :style="{left: node.x + 'px', top: node.y + 'px'}"
                                 @mousedown="startNodeDrag(node, $event)"
                                 @click="selectNode(node)">
                                <!-- Connection Ports -->
                                <div class="node-connection-area input">
                                    <div class="node-port" 
                                         @mousedown.stop="startConnection(node, 'input', $event)"
                                         @mouseenter="highlightPort($event, true)"
                                         @mouseleave="highlightPort($event, false)"
                                         :class="{'can-connect': connectionState.isConnecting && connectionState.sourceType === 'output' && connectionState.sourceNode?.id !== node.id}">
                                    </div>
                                    <span class="port-label">Input</span>
                                </div>
                                
                                <div class="node-connection-area output">
                                    <div class="node-port" 
                                         @mousedown.stop="startConnection(node, 'output', $event)"
                                         @mouseenter="highlightPort($event, true)"
                                         @mouseleave="highlightPort($event, false)"
                                         :class="{'can-connect': connectionState.isConnecting && connectionState.sourceType === 'input' && connectionState.sourceNode?.id !== node.id}">
                                    </div>
                                    <span class="port-label">Output</span>
                                </div>
                                
                                <div class="node-header">
                                    <div class="node-header-content">
                                        <div class="node-icon-wrapper" 
                                             :style="{background: node.color || getCategoryGradient(node.category)}">
                                            <i :class="getNodeIcon(node)"></i>
                                        </div>
                                        <div class="node-info">
                                            <h3 class="node-title">{{ node.name }}</h3>
                                            <p class="node-subtitle">{{ node.category }}</p>
                                        </div>
                                        <!-- Execution Status Indicator -->
                                        <div v-if="nodeExecutionStatus[node.id]" class="node-status-indicator">
                                            <i v-if="nodeExecutionStatus[node.id] === 'pending'" 
                                               class="fas fa-clock" title="Pending"></i>
                                            <i v-if="nodeExecutionStatus[node.id] === 'running'" 
                                               class="fas fa-spinner fa-spin" title="Running"></i>
                                            <i v-if="nodeExecutionStatus[node.id] === 'completed'" 
                                               class="fas fa-check-circle" title="Completed"></i>
                                            <i v-if="nodeExecutionStatus[node.id] === 'failed'" 
                                               class="fas fa-exclamation-circle" title="Failed"></i>
                                            <i v-if="nodeExecutionStatus[node.id] === 'cancelled'" 
                                               class="fas fa-ban" title="Cancelled"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="node-body">
                                    <div class="node-metrics">
                                        <div class="node-metric">
                                            <p class="node-metric-value">{{ node.executions || 0 }}</p>
                                            <p class="node-metric-label">Runs</p>
                                        </div>
                                        <div class="node-metric">
                                            <p class="node-metric-value">{{ node.success || '100%' }}</p>
                                            <p class="node-metric-label">Success</p>
                                        </div>
                                    </div>
                                    
                                    <!-- Node Execution Controls -->
                                    <div v-if="selectedNode?.id === node.id" class="node-controls">
                                        <button @click.stop="executeNode(node)" 
                                                class="node-control-btn"
                                                :disabled="isExecuting"
                                                title="Execute this node">
                                            <i class="fas fa-play"></i>
                                        </button>
                                        <button @click.stop="skipNode(node)" 
                                                class="node-control-btn"
                                                :disabled="!isExecuting || nodeExecutionStatus[node.id] !== 'pending'"
                                                title="Skip this node">
                                            <i class="fas fa-forward"></i>
                                        </button>
                                        <button @click.stop="debugNode(node)" 
                                                class="node-control-btn"
                                                title="Debug this node">
                                            <i class="fas fa-bug"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </transition-group>
                    </div>
                    
                    <!-- Canvas Controls -->
                    <div class="canvas-controls">
                        <button class="canvas-control" @click="zoomOut" data-tooltip="Zoom Out">
                            <i class="fas fa-minus"></i>
                        </button>
                        <div style="padding: 0 0.75rem; font-size: 0.875rem; font-weight: 500; min-width: 60px; text-align: center;">
                            {{ Math.round(zoomLevel * 100) }}%
                        </div>
                        <button class="canvas-control" @click="zoomIn" data-tooltip="Zoom In">
                            <i class="fas fa-plus"></i>
                        </button>
                        <div style="width: 1px; height: 24px; background: var(--gray-300); margin: 0 0.5rem;"></div>
                        <button class="canvas-control" @click="resetZoom" data-tooltip="Reset View">
                            <i class="fas fa-compress"></i>
                        </button>
                        <button class="canvas-control" @click="fitToScreen" data-tooltip="Fit to Screen">
                            <i class="fas fa-expand"></i>
                        </button>
                    </div>
                    
                    <!-- Minimap -->
                    <div class="minimap" v-show="showMinimap">
                        <div class="minimap-viewport" :style="minimapViewportStyle"></div>
                    </div>
                </div>
                
                <!-- Enhanced Properties Panel -->
                <div class="properties">
                    <h2 style="font-size: 1rem; font-weight: 600; color: var(--gray-900); margin-bottom: 2rem; text-transform: uppercase; letter-spacing: 0.05em;">
                        <i class="fas fa-sliders-h" style="margin-right: 0.5rem;"></i>
                        Properties
                    </h2>
                    
                    <transition name="fade" mode="out-in">
                        <div v-if="selectedNode" key="properties">
                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--gray-700); margin-bottom: 0.5rem;">
                                    Node Name
                                </label>
                                <input type="text" v-model="selectedNode.name" class="property-input">
                            </div>
                            
                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--gray-700); margin-bottom: 0.5rem;">
                                    Description
                                </label>
                                <textarea v-model="selectedNode.description" class="property-input" rows="3" style="resize: vertical;"></textarea>
                            </div>
                            
                            <div style="margin-bottom: 1.5rem;">
                                <label style="display: block; font-size: 0.875rem; font-weight: 500; color: var(--gray-700); margin-bottom: 0.5rem;">
                                    Node Settings
                                </label>
                                <div style="display: flex; gap: 0.75rem; margin-bottom: 0.75rem;">
                                    <button class="btn" style="flex: 1;" @click="duplicateNode">
                                        <i class="fas fa-copy"></i> Duplicate
                                    </button>
                                    <button class="btn btn-danger" style="flex: 1;" @click="deleteNode">
                                        <i class="fas fa-trash"></i> Delete
                                    </button>
                                </div>
                            </div>
                            
                            <div style="padding: 1rem; background: var(--gray-50); border-radius: 0.75rem;">
                                <h4 style="font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem;">Node Info</h4>
                                <div style="font-size: 0.75rem; color: var(--gray-600);">
                                    <p><strong>Type:</strong> {{ selectedNode.type }}</p>
                                    <p><strong>Category:</strong> {{ selectedNode.category }}</p>
                                    <p><strong>ID:</strong> {{ selectedNode.id }}</p>
                                    <p><strong>Position:</strong> {{ Math.round(selectedNode.x) }}, {{ Math.round(selectedNode.y) }}</p>
                                </div>
                            </div>
                        </div>
                        
                        <div v-else class="empty-state" key="empty">
                            <i class="fas fa-mouse-pointer empty-state-icon"></i>
                            <h3 style="font-size: 1.125rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.5rem;">
                                Select a Node
                            </h3>
                            <p style="color: var(--gray-500); margin-bottom: 1.5rem;">
                                Click on a node to view and edit its properties
                            </p>
                            <button class="btn btn-primary" @click="addRandomNode">
                                <i class="fas fa-plus"></i> Add Random Node
                            </button>
                        </div>
                    </transition>
                </div>
            </div>
            
            <!-- Enhanced Toast -->
            <transition name="toast">
                <div v-if="toast" class="toast" :style="{borderLeftColor: getToastColor(toast.type)}">
                    <i :class="getToastIcon(toast.type)" :style="{color: getToastColor(toast.type)}"></i>
                    <div>
                        <h4 style="font-size: 0.875rem; font-weight: 600; margin: 0;">{{ toast.title || 'Notification' }}</h4>
                        <p style="font-size: 0.8125rem; color: var(--gray-600); margin: 0;">{{ toast.message }}</p>
                    </div>
                </div>
            </transition>

            <!-- Save & Share Modal -->
            <transition name="modal">
                <div v-if="showSaveModal" class="modal-overlay" @click.self="closeSaveModal">
                    <div class="modal-container">
                        <div class="modal-header">
                            <h2>Save & Share Workflow</h2>
                            <button @click="closeSaveModal" class="modal-close">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        
                        <div class="modal-body">
                            <!-- Basic Info -->
                            <div class="form-section">
                                <h3><i class="fas fa-info-circle"></i> Basic Information</h3>
                                <div class="form-group">
                                    <label>Workflow Name *</label>
                                    <input type="text" v-model="workflowData.name" 
                                           placeholder="Enter workflow name" 
                                           class="form-input">
                                </div>
                                <div class="form-group">
                                    <label>Description</label>
                                    <textarea v-model="workflowData.description" 
                                             placeholder="Describe what this workflow does..." 
                                             class="form-textarea" rows="3"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>Category</label>
                                    <select v-model="workflowData.category" class="form-select">
                                        <option value="">Select Category</option>
                                        <option value="automation">Automation</option>
                                        <option value="data-processing">Data Processing</option>
                                        <option value="integration">Integration</option>
                                        <option value="analytics">Analytics</option>
                                        <option value="communication">Communication</option>
                                        <option value="utility">Utility</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Marketplace Options -->
                            <div class="form-section">
                                <h3><i class="fas fa-store"></i> Marketplace Options</h3>
                                <div class="form-group">
                                    <label class="checkbox-label">
                                        <input type="checkbox" v-model="workflowData.shareToMarketplace">
                                        <span>Share to Marketplace</span>
                                    </label>
                                </div>
                                
                                <transition name="expand">
                                    <div v-if="workflowData.shareToMarketplace" class="marketplace-options">
                                        <!-- Pricing Type -->
                                        <div class="form-group">
                                            <label>Monetization Type</label>
                                            <div class="radio-group">
                                                <label class="radio-label">
                                                    <input type="radio" v-model="workflowData.pricingType" value="free">
                                                    <span>Free</span>
                                                </label>
                                                <label class="radio-label">
                                                    <input type="radio" v-model="workflowData.pricingType" value="sale">
                                                    <span>For Sale</span>
                                                </label>
                                                <label class="radio-label">
                                                    <input type="radio" v-model="workflowData.pricingType" value="rent">
                                                    <span>For Rent</span>
                                                </label>
                                                <label class="radio-label">
                                                    <input type="radio" v-model="workflowData.pricingType" value="both">
                                                    <span>Sale & Rent</span>
                                                </label>
                                            </div>
                                        </div>
                                        
                                        <!-- Sale Price -->
                                        <transition name="expand">
                                            <div v-if="['sale', 'both'].includes(workflowData.pricingType)" class="form-group">
                                                <label>Sale Price ($)</label>
                                                <input type="number" v-model="workflowData.salePrice" 
                                                       min="0" step="0.01" 
                                                       placeholder="0.00" 
                                                       class="form-input">
                                            </div>
                                        </transition>
                                        
                                        <!-- Rental Price -->
                                        <transition name="expand">
                                            <div v-if="['rent', 'both'].includes(workflowData.pricingType)" class="form-group">
                                                <label>Rental Price ($/month)</label>
                                                <input type="number" v-model="workflowData.rentalPrice" 
                                                       min="0" step="0.01" 
                                                       placeholder="0.00" 
                                                       class="form-input">
                                            </div>
                                        </transition>
                                        
                                        <!-- Tags -->
                                        <div class="form-group">
                                            <label>Tags (comma separated)</label>
                                            <input type="text" v-model="workflowData.tags" 
                                                   placeholder="automation, api, integration" 
                                                   class="form-input">
                                        </div>
                                        
                                        <!-- Preview -->
                                        <div class="form-group">
                                            <label>Preview Image</label>
                                            <div class="preview-section">
                                                <div class="workflow-preview">
                                                    <i class="fas fa-image"></i>
                                                    <p>Workflow preview will be auto-generated</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </transition>
                            </div>
                        </div>
                        
                        <div class="modal-footer">
                            <button @click="closeSaveModal" class="btn btn-secondary">
                                Cancel
                            </button>
                            <button @click="saveAsDraft" class="btn btn-outline" :disabled="saving">
                                <i class="fas fa-save"></i> Save as Draft
                            </button>
                            <button @click="saveAndPublish" class="btn btn-primary" :disabled="saving || !workflowData.name">
                                <i class="fas fa-cloud-upload-alt"></i> 
                                {{ workflowData.shareToMarketplace ? 'Save & Publish' : 'Save Workflow' }}
                            </button>
                        </div>
                    </div>
                </div>
            </transition>
            
            <!-- Execution Log Panel -->
            <transition name="slide-up">
                <div v-if="isExecuting || executionLogs.length > 0" class="execution-log-panel">
                    <div class="log-panel-header">
                        <h3><i class="fas fa-terminal"></i> Execution Log</h3>
                        <div class="log-panel-actions">
                            <button @click="clearLogs" class="btn btn-sm">
                                <i class="fas fa-eraser"></i> Clear
                            </button>
                            <button @click="executionLogs = []" class="btn btn-sm">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="log-panel-body">
                        <div v-if="executionLogs.length === 0" class="log-empty">
                            <i class="fas fa-info-circle"></i>
                            <p>No execution logs yet. Start a workflow to see logs.</p>
                        </div>
                        <div v-else class="log-entries">
                            <div v-for="(log, index) in executionLogs" :key="index" 
                                 class="log-entry" :class="'log-' + log.level">
                                <span class="log-time">{{ formatTime(log.timestamp) }}</span>
                                <span class="log-node" v-if="log.node_name">[{{ log.node_name }}]</span>
                                <span class="log-message">{{ log.message }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</div>

<script>
const { createApp, ref, computed, onMounted, nextTick, watch } = Vue;

createApp({
    setup() {
        // State
        const loaded = ref(false);
        const loading = ref(false);
        const searchTerm = ref('');
        const availableNodes = ref([]);
        const canvasNodes = ref([]);
        const connections = ref([]);
        const selectedNode = ref(null);
        const draggedNode = ref(null);
        const draggingCanvasNode = ref(null);
        const expandedCategories = ref({});
        const zoomLevel = ref(1);
        const panX = ref(0);
        const panY = ref(0);
        const showMinimap = ref(true);
        const toast = ref(null);
        const nodeCounter = ref(1);
        const canvasGrid = ref(null);
        const primaryColor = ref('#2563eb');
        const loadError = ref(null);
        
        // Modal state
        const showSaveModal = ref(false);
        const saving = ref(false);
        const workflowData = ref({
            name: '',
            description: '',
            category: '',
            shareToMarketplace: false,
            pricingType: 'free',
            salePrice: 0,
            rentalPrice: 0,
            tags: '',
            workflow_id: null
        });
        
        // Execution state
        const isExecuting = ref(false);
        const isPaused = ref(false);
        const executionId = ref(null);
        const nodeExecutionStatus = ref({});
        const currentExecutingNode = ref(null);
        const executionLogs = ref([]);
        
        // Computed
        const groupedNodes = computed(() => {
            const groups = {};
            availableNodes.value.forEach(node => {
                const category = node.category || 'Other';
                if (!groups[category]) groups[category] = [];
                groups[category].push(node);
            });
            return groups;
        });
        
        const filteredNodes = computed(() => {
            if (!searchTerm.value) return groupedNodes.value;
            
            const search = searchTerm.value.toLowerCase();
            const filtered = {};
            
            Object.entries(groupedNodes.value).forEach(([category, nodes]) => {
                const filteredNodes = nodes.filter(node => 
                    node.name.toLowerCase().includes(search) ||
                    node.description.toLowerCase().includes(search) ||
                    category.toLowerCase().includes(search)
                );
                if (filteredNodes.length > 0) {
                    filtered[category] = filteredNodes;
                }
            });
            
            return filtered;
        });
        
        const minimapViewportStyle = computed(() => {
            return {
                left: '20%',
                top: '20%',
                width: '40%',
                height: '40%'
            };
        });
        
        const tempConnectionPath = computed(() => {
            if (!connectionState.value.isConnecting || !connectionState.value.tempLine) return null;
            
            const source = connectionState.value.sourceNode;
            if (!source) return null;
            
            // Calculate source position based on port type
            const sx = connectionState.value.sourceType === 'output' ? source.x + 280 : source.x;
            const sy = source.y + 70;
            
            // Get mouse position relative to canvas with zoom/pan
            const tx = (connectionState.value.tempLine.x - panX.value) / zoomLevel.value;
            const ty = (connectionState.value.tempLine.y - panY.value) / zoomLevel.value;
            
            // Create curved path with better control points
            const distance = Math.abs(tx - sx);
            const controlOffset = Math.min(distance * 0.5, 100);
            
            if (connectionState.value.sourceType === 'output') {
                return `M ${sx} ${sy} C ${sx + controlOffset} ${sy}, ${tx - controlOffset} ${ty}, ${tx} ${ty}`;
            } else {
                return `M ${sx} ${sy} C ${sx - controlOffset} ${sy}, ${tx + controlOffset} ${ty}, ${tx} ${ty}`;
            }
        });
        
        // Methods
        const loadNodes = async () => {
            loading.value = true;
            loadError.value = null;
            
            try {
                // Try to load from API with timeout
                const controller = new AbortController();
                const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout
                
                const response = await fetch('/local/workflowdesigner/api/node_types_public.php', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    cache: 'no-cache',
                    signal: controller.signal
                });
                
                clearTimeout(timeoutId);
                
                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
                
                const data = await response.json();
                
                if (data.success && (data.nodes || data.node_types)) {
                    const nodeData = data.nodes || data.node_types;
                    availableNodes.value = nodeData.map(node => ({
                        ...node,
                        id: node.id || Math.random(),
                        type: node.type || node.name,
                        name: node.display_name || node.name || 'Unnamed',
                        description: node.description || 'No description',
                        category: node.category || 'Uncategorized',
                        icon: node.icon || 'fas fa-cube',
                        color: node.color
                    }));
                    
                    // Auto-expand first few categories
                    Object.keys(groupedNodes.value).slice(0, 3).forEach(cat => {
                        expandedCategories.value[cat] = true;
                    });
                    
                    // Don't show success toast on initial load
                    if (loaded.value) {
                        showToast('Success', `Loaded ${availableNodes.value.length} nodes`, 'success');
                    }
                } else {
                    throw new Error('Invalid response format');
                }
            } catch (error) {
                if (error.name === 'AbortError') {
                    console.warn('Node loading timeout, using fallback nodes');
                } else {
                    console.warn('Failed to load nodes:', error.message);
                }
                
                // Use fallback nodes without showing error
                availableNodes.value = getFallbackNodes();
                
                // Auto-expand categories
                const categories = Object.keys(groupedNodes.value);
                categories.slice(0, 3).forEach(cat => {
                    expandedCategories.value[cat] = true;
                });
                
                // Only show warning if already loaded (not initial load)
                if (loaded.value) {
                    showToast('Info', 'Using demo nodes', 'info');
                }
            } finally {
                loading.value = false;
            }
        };
        
        const getFallbackNodes = () => [
            // Core nodes
            { id: 1, name: 'Start', description: 'Workflow entry point', category: 'Core', type: 'start' },
            { id: 2, name: 'Process', description: 'Process data', category: 'Core', type: 'process' },
            { id: 3, name: 'Decision', description: 'Make conditional choices', category: 'Core', type: 'decision' },
            { id: 4, name: 'End', description: 'Workflow exit point', category: 'Core', type: 'end' },
            { id: 5, name: 'Loop', description: 'Repeat actions', category: 'Core', type: 'loop' },
            
            // Action nodes
            { id: 6, name: 'Email', description: 'Send email notifications', category: 'Action', type: 'email' },
            { id: 7, name: 'SMS', description: 'Send text messages', category: 'Action', type: 'sms' },
            { id: 8, name: 'HTTP Request', description: 'Make web requests', category: 'Action', type: 'http' },
            { id: 9, name: 'Webhook', description: 'Call webhook URL', category: 'Action', type: 'webhook' },
            
            // Data nodes
            { id: 10, name: 'Database', description: 'Query database', category: 'Data', type: 'database' },
            { id: 11, name: 'Transform', description: 'Transform data structure', category: 'Data', type: 'transform' },
            { id: 12, name: 'Filter', description: 'Filter data records', category: 'Data', type: 'filter' },
            { id: 13, name: 'Join', description: 'Join data sources', category: 'Data', type: 'join' },
            
            // Communication nodes
            { id: 14, name: 'Slack', description: 'Send Slack messages', category: 'Communication', type: 'slack' },
            { id: 15, name: 'Teams', description: 'Microsoft Teams integration', category: 'Communication', type: 'teams' },
            { id: 16, name: 'Discord', description: 'Discord notifications', category: 'Communication', type: 'discord' },
            
            // File nodes
            { id: 17, name: 'Upload', description: 'Upload files', category: 'File Management', type: 'upload' },
            { id: 18, name: 'CSV', description: 'Read/Write CSV files', category: 'File Management', type: 'csv' },
            { id: 19, name: 'PDF', description: 'Generate PDF documents', category: 'File Management', type: 'pdf' },
            
            // AI nodes
            { id: 20, name: 'GPT', description: 'AI text generation', category: 'AI & Machine Learning', type: 'gpt' },
            { id: 21, name: 'Sentiment', description: 'Analyze sentiment', category: 'AI & Machine Learning', type: 'sentiment' },
            { id: 22, name: 'Translate', description: 'Language translation', category: 'AI & Machine Learning', type: 'translate' },
            
            // Utility nodes
            { id: 23, name: 'Timer', description: 'Delay execution', category: 'Utilities', type: 'timer' },
            { id: 24, name: 'Logger', description: 'Log messages', category: 'Utilities', type: 'logger' },
            { id: 25, name: 'Random', description: 'Generate random values', category: 'Utilities', type: 'random' },
            
            // Integration nodes
            { id: 26, name: 'Google', description: 'Google services', category: 'Integration', type: 'google' },
            { id: 27, name: 'GitHub', description: 'GitHub integration', category: 'Integration', type: 'github' },
            { id: 28, name: 'AWS', description: 'Amazon Web Services', category: 'Integration', type: 'aws' },
            
            // Security nodes
            { id: 29, name: 'Auth', description: 'Authentication check', category: 'Security', type: 'auth' },
            { id: 30, name: 'Encrypt', description: 'Encrypt data', category: 'Security', type: 'encrypt' }
        ];
        
        const toggleCategory = (category) => {
            expandedCategories.value[category] = !expandedCategories.value[category];
        };
        
        const getCategoryIcon = (category) => {
            const icons = {
                'Core': 'fas fa-cube',
                'Action': 'fas fa-bolt',
                'Data': 'fas fa-database',
                'Integration': 'fas fa-plug',
                'Communication': 'fas fa-comments',
                'Utilities': 'fas fa-tools',
                'AI & Machine Learning': 'fas fa-brain',
                'Social Media & Communication': 'fas fa-share-alt',
                'Trigger': 'fas fa-play-circle',
                'Analytics': 'fas fa-chart-line',
                'Security': 'fas fa-shield-alt',
                'File Management': 'fas fa-folder-open',
                'User Management': 'fas fa-users',
                'Workflow Control': 'fas fa-project-diagram',
                'Notification': 'fas fa-bell',
                'Development': 'fas fa-code',
                'Cloud Services': 'fas fa-cloud',
                'Payment': 'fas fa-credit-card',
                'Marketing': 'fas fa-bullhorn'
            };
            return icons[category] || 'fas fa-folder';
        };
        
        const getNodeIcon = (node) => {
            // Specific icons for individual node types
            const nodeIcons = {
                // Core nodes
                'start': 'fas fa-play-circle',
                'end': 'fas fa-stop-circle',
                'process': 'fas fa-cogs',
                'decision': 'fas fa-code-branch',
                'loop': 'fas fa-sync-alt',
                'wait': 'fas fa-hourglass-half',
                
                // Action nodes
                'email': 'fas fa-envelope',
                'sms': 'fas fa-sms',
                'http': 'fas fa-globe',
                'api': 'fas fa-plug',
                'webhook': 'fas fa-link',
                'script': 'fas fa-code',
                
                // Data nodes
                'database': 'fas fa-database',
                'transform': 'fas fa-exchange-alt',
                'filter': 'fas fa-filter',
                'aggregate': 'fas fa-layer-group',
                'join': 'fas fa-object-group',
                'split': 'fas fa-sitemap',
                
                // Communication nodes
                'slack': 'fab fa-slack',
                'teams': 'fab fa-microsoft',
                'discord': 'fab fa-discord',
                'telegram': 'fab fa-telegram',
                'whatsapp': 'fab fa-whatsapp',
                'zoom': 'fas fa-video',
                
                // File nodes
                'upload': 'fas fa-upload',
                'download': 'fas fa-download',
                'csv': 'fas fa-file-csv',
                'excel': 'fas fa-file-excel',
                'pdf': 'fas fa-file-pdf',
                'image': 'fas fa-image',
                
                // AI nodes
                'gpt': 'fas fa-robot',
                'sentiment': 'fas fa-smile',
                'translate': 'fas fa-language',
                'ocr': 'fas fa-eye',
                'speech': 'fas fa-microphone',
                
                // Utility nodes
                'logger': 'fas fa-file-alt',
                'timer': 'fas fa-clock',
                'counter': 'fas fa-sort-numeric-up',
                'random': 'fas fa-dice',
                'uuid': 'fas fa-fingerprint',
                
                // Integration nodes
                'google': 'fab fa-google',
                'aws': 'fab fa-aws',
                'azure': 'fab fa-microsoft',
                'github': 'fab fa-github',
                'jira': 'fab fa-jira',
                
                // Analytics nodes
                'analytics': 'fas fa-chart-bar',
                'report': 'fas fa-file-chart-line',
                'dashboard': 'fas fa-tachometer-alt',
                'metrics': 'fas fa-chart-pie',
                
                // Security nodes
                'auth': 'fas fa-lock',
                'encrypt': 'fas fa-key',
                'decrypt': 'fas fa-unlock',
                'hash': 'fas fa-hashtag',
                'verify': 'fas fa-check-shield',
                
                // User nodes
                'user': 'fas fa-user',
                'role': 'fas fa-user-tag',
                'permission': 'fas fa-user-lock',
                'profile': 'fas fa-id-card',
                
                // Payment nodes
                'payment': 'fas fa-credit-card',
                'invoice': 'fas fa-file-invoice-dollar',
                'subscription': 'fas fa-sync-alt',
                'refund': 'fas fa-undo-alt'
            };
            
            // Check if node has specific icon mapping
            const nodeType = node.type?.toLowerCase() || node.name?.toLowerCase();
            if (nodeType && nodeIcons[nodeType]) {
                return nodeIcons[nodeType];
            }
            
            // Return node's own icon or default
            return node.icon || 'fas fa-cube';
        };
        
        const getCategoryGradient = (category) => {
            const gradients = {
                'Core': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                'Action': 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
                'Data': 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
                'Integration': 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
                'Communication': 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
                'Utilities': 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
                'AI & Machine Learning': 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
                'Social Media & Communication': 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
                'Trigger': 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)'
            };
            return gradients[category] || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
        };
        
        const startDrag = (node, event) => {
            draggedNode.value = node;
            event.dataTransfer.effectAllowed = 'copy';
            event.dataTransfer.setData('text/plain', '');
        };
        
        const endDrag = () => {
            draggedNode.value = null;
        };
        
        const onDrop = (event) => {
            event.preventDefault();
            if (!draggedNode.value) return;
            
            const rect = event.currentTarget.getBoundingClientRect();
            const x = (event.clientX - rect.left - panX.value) / zoomLevel.value - 100;
            const y = (event.clientY - rect.top - panY.value) / zoomLevel.value - 50;
            
            const newNode = {
                ...draggedNode.value,
                id: Date.now(),
                name: `${draggedNode.value.name} ${nodeCounter.value++}`,
                x: Math.max(0, x),
                y: Math.max(0, y)
            };
            
            canvasNodes.value.push(newNode);
            selectedNode.value = newNode;
            draggedNode.value = null;
            
            showToast('Node Added', `${newNode.name} added to workflow`, 'success');
        };
        
        const selectNode = (node) => {
            selectedNode.value = node;
        };
        
        const startNodeDrag = (node, event) => {
            event.preventDefault();
            selectNode(node);
            draggingCanvasNode.value = node;
            
            const startX = event.clientX;
            const startY = event.clientY;
            const nodeX = node.x;
            const nodeY = node.y;
            
            const onMouseMove = (e) => {
                node.x = nodeX + (e.clientX - startX) / zoomLevel.value;
                node.y = nodeY + (e.clientY - startY) / zoomLevel.value;
            };
            
            const onMouseUp = () => {
                draggingCanvasNode.value = null;
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            };
            
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        };
        
        const deleteNode = () => {
            if (!selectedNode.value) return;
            const index = canvasNodes.value.indexOf(selectedNode.value);
            if (index > -1) {
                canvasNodes.value.splice(index, 1);
                // Remove connections
                connections.value = connections.value.filter(c => 
                    c.source !== selectedNode.value.id && c.target !== selectedNode.value.id
                );
                showToast('Node Deleted', `${selectedNode.value.name} removed`, 'info');
                selectedNode.value = null;
            }
        };
        
        const duplicateNode = () => {
            if (!selectedNode.value) return;
            const newNode = {
                ...selectedNode.value,
                id: Date.now(),
                name: `${selectedNode.value.name} (Copy)`,
                x: selectedNode.value.x + 50,
                y: selectedNode.value.y + 50
            };
            canvasNodes.value.push(newNode);
            selectedNode.value = newNode;
            showToast('Node Duplicated', `${newNode.name} created`, 'success');
        };
        
        const addRandomNode = () => {
            const randomNode = availableNodes.value[Math.floor(Math.random() * availableNodes.value.length)];
            if (!randomNode) return;
            
            const newNode = {
                ...randomNode,
                id: Date.now(),
                name: `${randomNode.name} ${nodeCounter.value++}`,
                x: Math.random() * 400 + 100,
                y: Math.random() * 300 + 100
            };
            
            canvasNodes.value.push(newNode);
            selectedNode.value = newNode;
            showToast('Random Node Added', `${newNode.name} added`, 'success');
        };
        
        const clearCanvas = () => {
            if (canvasNodes.value.length === 0) {
                showToast('Info', 'Canvas is already empty', 'info');
                return;
            }
            if (confirm('Are you sure you want to clear all nodes?')) {
                canvasNodes.value = [];
                connections.value = [];
                selectedNode.value = null;
                nodeCounter.value = 1;
                showToast('Canvas Cleared', 'All nodes removed', 'success');
            }
        };
        
        const saveWorkflow = () => {
            if (canvasNodes.value.length === 0) {
                showToast('Warning', 'No nodes to save', 'warning');
                return;
            }
            // Show the save modal
            showSaveModal.value = true;
        };
        
        const openMarketplaceShare = () => {
            if (canvasNodes.value.length === 0) {
                showToast('Warning', 'No nodes to share', 'warning');
                return;
            }
            // Pre-select marketplace sharing
            workflowData.value.shareToMarketplace = true;
            showSaveModal.value = true;
        };
        
        // Execution Control Methods
        const startWorkflow = async () => {
            if (canvasNodes.value.length === 0) {
                showToast('Warning', 'No nodes to execute', 'warning');
                return;
            }
            
            // Find start nodes
            const startNodes = canvasNodes.value.filter(node => 
                node.type === 'start' || !connections.value.find(c => c.target === node.id)
            );
            
            if (startNodes.length === 0) {
                showToast('Error', 'No start node found', 'error');
                return;
            }
            
            isExecuting.value = true;
            isPaused.value = false;
            executionLogs.value = [];
            nodeExecutionStatus.value = {};
            
            // Initialize all nodes as pending
            canvasNodes.value.forEach(node => {
                nodeExecutionStatus.value[node.id] = 'pending';
            });
            
            try {
                const response = await fetch('../../api/execute_workflow.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        nodes: canvasNodes.value,
                        connections: connections.value,
                        start_node_id: startNodes[0].id
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    executionId.value = result.execution_id;
                    showToast('Workflow Started', 'Execution in progress...', 'success');
                    
                    // Start polling for execution status
                    pollExecutionStatus();
                } else {
                    throw new Error(result.error || 'Failed to start workflow');
                }
            } catch (error) {
                console.error('Execution error:', error);
                showToast('Error', error.message || 'Failed to start workflow', 'error');
                isExecuting.value = false;
            }
        };
        
        const pauseWorkflow = async () => {
            if (!executionId.value) return;
            
            try {
                const response = await fetch('../../api/execution_control.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        execution_id: executionId.value,
                        action: 'pause'
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    isPaused.value = true;
                    showToast('Workflow Paused', 'Execution has been paused', 'info');
                }
            } catch (error) {
                console.error('Pause error:', error);
                showToast('Error', 'Failed to pause workflow', 'error');
            }
        };
        
        const resumeWorkflow = async () => {
            if (!executionId.value) return;
            
            try {
                const response = await fetch('../../api/execution_control.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        execution_id: executionId.value,
                        action: 'resume'
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    isPaused.value = false;
                    showToast('Workflow Resumed', 'Execution has been resumed', 'success');
                    
                    // Resume polling
                    pollExecutionStatus();
                }
            } catch (error) {
                console.error('Resume error:', error);
                showToast('Error', 'Failed to resume workflow', 'error');
            }
        };
        
        const stopWorkflow = async () => {
            if (!executionId.value) return;
            
            try {
                const response = await fetch('../../api/execution_control.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        execution_id: executionId.value,
                        action: 'stop'
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    isExecuting.value = false;
                    isPaused.value = false;
                    executionId.value = null;
                    showToast('Workflow Stopped', 'Execution has been stopped', 'info');
                    
                    // Mark all pending nodes as cancelled
                    Object.keys(nodeExecutionStatus.value).forEach(nodeId => {
                        if (nodeExecutionStatus.value[nodeId] === 'pending' || 
                            nodeExecutionStatus.value[nodeId] === 'running') {
                            nodeExecutionStatus.value[nodeId] = 'cancelled';
                        }
                    });
                }
            } catch (error) {
                console.error('Stop error:', error);
                showToast('Error', 'Failed to stop workflow', 'error');
            }
        };
        
        // Poll execution status
        const pollExecutionStatus = async () => {
            if (!isExecuting.value || isPaused.value || !executionId.value) return;
            
            try {
                const response = await fetch(`../../api/execution_status.php?execution_id=${executionId.value}`);
                const result = await response.json();
                
                if (result.success) {
                    // Update node statuses
                    if (result.node_status) {
                        Object.assign(nodeExecutionStatus.value, result.node_status);
                    }
                    
                    // Update current executing node
                    currentExecutingNode.value = result.current_node_id;
                    
                    // Add new logs
                    if (result.logs && result.logs.length > executionLogs.value.length) {
                        executionLogs.value = result.logs;
                    }
                    
                    // Check if execution is complete
                    if (result.status === 'completed') {
                        isExecuting.value = false;
                        executionId.value = null;
                        showToast('Workflow Completed', 'Execution finished successfully', 'success');
                    } else if (result.status === 'failed') {
                        isExecuting.value = false;
                        executionId.value = null;
                        showToast('Workflow Failed', result.error || 'Execution failed', 'error');
                    } else {
                        // Continue polling
                        setTimeout(pollExecutionStatus, 1000);
                    }
                }
            } catch (error) {
                console.error('Status poll error:', error);
                // Continue polling even on error
                setTimeout(pollExecutionStatus, 2000);
            }
        };
        
        const closeSaveModal = () => {
            showSaveModal.value = false;
        };
        
        const saveAsDraft = async () => {
            await performSave('draft');
        };
        
        const saveAndPublish = async () => {
            await performSave(workflowData.value.shareToMarketplace ? 'published' : 'private');
        };
        
        const performSave = async (status) => {
            if (!workflowData.value.name) {
                showToast('Error', 'Workflow name is required', 'error');
                return;
            }
            
            saving.value = true;
            
            try {
                const payload = {
                    workflow_id: workflowData.value.workflow_id,
                    name: workflowData.value.name,
                    description: workflowData.value.description,
                    category: workflowData.value.category,
                    status: status,
                    nodes: canvasNodes.value,
                    connections: connections.value,
                    canvas_settings: {
                        zoom: zoomLevel.value,
                        panX: panX.value,
                        panY: panY.value
                    }
                };
                
                // Add marketplace data if sharing
                if (workflowData.value.shareToMarketplace) {
                    payload.is_published = true;
                    payload.pricing_type = workflowData.value.pricingType;
                    
                    if (['sale', 'both'].includes(workflowData.value.pricingType)) {
                        payload.price = parseFloat(workflowData.value.salePrice) || 0;
                    }
                    
                    if (['rent', 'both'].includes(workflowData.value.pricingType)) {
                        payload.rental_price_daily = parseFloat(workflowData.value.rentalPrice) / 30; // Convert monthly to daily
                    }
                    
                    payload.tags = workflowData.value.tags.split(',').map(tag => tag.trim()).filter(tag => tag);
                }
                
                const response = await fetch('../../api/save_workflow.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(payload)
                });
                
                const result = await response.json();
                
                if (result.success) {
                    workflowData.value.workflow_id = result.workflow_id;
                    showToast('Success', result.message, 'success');
                    
                    if (workflowData.value.shareToMarketplace && status === 'published') {
                        showToast('Published!', 'Your workflow is now available in the marketplace', 'success');
                        
                        // Show marketplace link after a short delay
                        setTimeout(() => {
                            if (confirm('Your workflow has been published! Would you like to view it in the marketplace?')) {
                                window.location.href = '/local/workflowdesigner/modules/marketplace/?workflow=' + result.workflow_id;
                            }
                        }, 1500);
                    }
                    
                    // Save to localStorage as backup
                    const localWorkflow = {
                        ...payload,
                        timestamp: new Date().toISOString(),
                        version: '2.0'
                    };
                    localStorage.setItem('workflow_enhanced', JSON.stringify(localWorkflow));
                    
                    closeSaveModal();
                } else {
                    throw new Error(result.error || 'Failed to save workflow');
                }
            } catch (error) {
                console.error('Save error:', error);
                showToast('Error', error.message || 'Failed to save workflow', 'error');
            } finally {
                saving.value = false;
            }
        };
        
        const exportWorkflow = () => {
            if (canvasNodes.value.length === 0) {
                showToast('Warning', 'No nodes to export', 'warning');
                return;
            }
            const workflow = {
                nodes: canvasNodes.value,
                connections: connections.value,
                timestamp: new Date().toISOString(),
                version: '2.0'
            };
            const data = JSON.stringify(workflow, null, 2);
            const blob = new Blob([data], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `workflow-${new Date().toISOString().split('T')[0]}.json`;
            a.click();
            URL.revokeObjectURL(url);
            showToast('Workflow Exported', 'Download started', 'success');
        };
        
        const zoomIn = () => {
            zoomLevel.value = Math.min(zoomLevel.value + 0.1, 2);
        };
        
        const zoomOut = () => {
            zoomLevel.value = Math.max(zoomLevel.value - 0.1, 0.5);
        };
        
        const resetZoom = () => {
            zoomLevel.value = 1;
            panX.value = 0;
            panY.value = 0;
        };
        
        const fitToScreen = () => {
            if (canvasNodes.value.length === 0) return;
            
            const bounds = canvasNodes.value.reduce((acc, node) => {
                return {
                    minX: Math.min(acc.minX, node.x),
                    minY: Math.min(acc.minY, node.y),
                    maxX: Math.max(acc.maxX, node.x + 200),
                    maxY: Math.max(acc.maxY, node.y + 120)
                };
            }, { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity });
            
            const canvas = canvasGrid.value?.parentElement;
            if (!canvas) return;
            
            const padding = 50;
            const canvasWidth = canvas.offsetWidth - padding * 2;
            const canvasHeight = canvas.offsetHeight - padding * 2;
            const contentWidth = bounds.maxX - bounds.minX;
            const contentHeight = bounds.maxY - bounds.minY;
            
            const scaleX = canvasWidth / contentWidth;
            const scaleY = canvasHeight / contentHeight;
            zoomLevel.value = Math.min(Math.min(scaleX, scaleY), 1);
            
            panX.value = -bounds.minX + padding / zoomLevel.value;
            panY.value = -bounds.minY + padding / zoomLevel.value;
        };
        
        const onWheel = (event) => {
            if (event.ctrlKey || event.metaKey) {
                event.preventDefault();
                const delta = event.deltaY > 0 ? -0.1 : 0.1;
                zoomLevel.value = Math.max(0.5, Math.min(2, zoomLevel.value + delta));
            }
        };
        
        // Connection state
        const connectionState = ref({
            isConnecting: false,
            sourceNode: null,
            sourceType: null,
            tempLine: null
        });
        
        const startConnection = (node, type, event) => {
            event.preventDefault();
            event.stopPropagation();
            
            connectionState.value = {
                isConnecting: true,
                sourceNode: node,
                sourceType: type,
                tempLine: null
            };
            
            showToast('Connection Mode', 'Click another node to connect', 'info');
            
            // Add event listeners for connection
            document.addEventListener('mousemove', onConnectionDrag);
            document.addEventListener('mouseup', endConnection);
        };
        
        const onConnectionDrag = (event) => {
            if (!connectionState.value.isConnecting) return;
            
            // Update temporary connection line position
            // This would be used to show a temporary line while dragging
            const canvas = document.querySelector('.canvas');
            if (canvas) {
                const rect = canvas.getBoundingClientRect();
                connectionState.value.tempLine = {
                    x: event.clientX - rect.left,
                    y: event.clientY - rect.top
                };
            }
        };
        
        const endConnection = (event) => {
            if (!connectionState.value.isConnecting) return;
            
            // Check if we're over a valid target port
            const targetElement = event.target;
            if (targetElement && targetElement.classList.contains('node-port')) {
                const targetNode = findNodeFromPort(targetElement);
                if (targetNode && targetNode.id !== connectionState.value.sourceNode.id) {
                    // Create connection
                    const newConnection = {
                        id: Date.now(),
                        source: connectionState.value.sourceType === 'output' ? 
                            connectionState.value.sourceNode.id : targetNode.id,
                        target: connectionState.value.sourceType === 'output' ? 
                            targetNode.id : connectionState.value.sourceNode.id,
                        sourcePort: connectionState.value.sourceType,
                        targetPort: connectionState.value.sourceType === 'output' ? 'input' : 'output'
                    };
                    
                    // Check if connection already exists
                    const exists = connections.value.some(c => 
                        (c.source === newConnection.source && c.target === newConnection.target) ||
                        (c.source === newConnection.target && c.target === newConnection.source)
                    );
                    
                    if (!exists) {
                        connections.value.push(newConnection);
                        showToast('Connected', `Connected ${connectionState.value.sourceNode.name} to ${targetNode.name}`, 'success');
                    } else {
                        showToast('Warning', 'Connection already exists', 'warning');
                    }
                }
            }
            
            // Clean up
            connectionState.value = {
                isConnecting: false,
                sourceNode: null,
                sourceType: null,
                tempLine: null
            };
            
            document.removeEventListener('mousemove', onConnectionDrag);
            document.removeEventListener('mouseup', endConnection);
        };
        
        const findNodeFromPort = (portElement) => {
            // Find the parent node element
            let nodeElement = portElement.parentElement;
            while (nodeElement && !nodeElement.classList.contains('workflow-node')) {
                nodeElement = nodeElement.parentElement;
            }
            
            if (nodeElement) {
                // Find the node data based on position
                const nodeRect = nodeElement.getBoundingClientRect();
                const canvasRect = document.querySelector('.canvas').getBoundingClientRect();
                const x = (nodeRect.left - canvasRect.left - panX.value) / zoomLevel.value;
                const y = (nodeRect.top - canvasRect.top - panY.value) / zoomLevel.value;
                
                // Find closest node
                return canvasNodes.value.find(n => 
                    Math.abs(n.x - x) < 50 && Math.abs(n.y - y) < 50
                );
            }
            
            return null;
        };
        
        const highlightPort = (event, highlight) => {
            // Port highlighting is now handled by CSS classes
            // This function can be used for additional logic if needed
        };
        
        const deleteConnection = (connection) => {
            const index = connections.value.findIndex(c => c.id === connection.id);
            if (index > -1) {
                connections.value.splice(index, 1);
                showToast('Connection Deleted', 'Connection removed', 'info');
            }
        };
        
        const highlightConnection = (connection, highlight) => {
            // This could be implemented to visually highlight the connection
            // For now, we'll rely on CSS hover effects
        };
        
        const getConnectionPath = (connection) => {
            const source = canvasNodes.value.find(n => n.id === connection.source);
            const target = canvasNodes.value.find(n => n.id === connection.target);
            
            if (!source || !target) return '';
            
            const sx = source.x + 280; // Updated for new node width
            const sy = source.y + 70; // Center of node
            const tx = target.x;
            const ty = target.y + 70; // Center of node
            
            const distance = Math.abs(tx - sx);
            const midX = (sx + tx) / 2;
            const controlOffset = Math.min(distance * 0.5, 100);
            
            return `M ${sx} ${sy} C ${sx + controlOffset} ${sy}, ${tx - controlOffset} ${ty}, ${tx} ${ty}`;
        };
        
        const toggleTheme = () => {
            showToast('Theme', 'Dark mode coming soon!', 'info');
        };
        
        const filterNodes = () => {
            // Triggered by search input
        };
        
        const showToast = (title, message, type = 'success') => {
            toast.value = { title, message, type };
            setTimeout(() => toast.value = null, 4000);
        };
        
        const getToastIcon = (type) => {
            const icons = {
                success: 'fas fa-check-circle',
                error: 'fas fa-exclamation-circle',
                warning: 'fas fa-exclamation-triangle',
                info: 'fas fa-info-circle'
            };
            return icons[type] || 'fas fa-info-circle';
        };
        
        const getToastColor = (type) => {
            const colors = {
                success: '#10b981',
                error: '#ef4444',
                warning: '#f59e0b',
                info: '#3b82f6'
            };
            return colors[type] || '#3b82f6';
        };
        
        const clearLogs = () => {
            executionLogs.value = [];
        };
        
        const formatTime = (timestamp) => {
            if (!timestamp) return '';
            const date = new Date(timestamp);
            return date.toLocaleTimeString('en-US', { 
                hour12: false, 
                hour: '2-digit', 
                minute: '2-digit', 
                second: '2-digit' 
            });
        };
        
        // Node-level execution methods
        const executeNode = async (node) => {
            if (isExecuting.value) {
                showToast('Warning', 'A workflow is already running', 'warning');
                return;
            }
            
            // Create a mini workflow with just this node
            const miniWorkflow = {
                nodes: [node],
                connections: []
            };
            
            isExecuting.value = true;
            nodeExecutionStatus.value = { [node.id]: 'running' };
            executionLogs.value = [];
            
            try {
                const response = await fetch('../../api/execute_workflow.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        nodes: miniWorkflow.nodes,
                        connections: miniWorkflow.connections,
                        start_node_id: node.id,
                        single_node: true
                    })
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showToast('Node Executed', `${node.name} completed successfully`, 'success');
                    nodeExecutionStatus.value[node.id] = 'completed';
                } else {
                    throw new Error(result.error || 'Node execution failed');
                }
            } catch (error) {
                showToast('Error', error.message, 'error');
                nodeExecutionStatus.value[node.id] = 'failed';
            } finally {
                setTimeout(() => {
                    isExecuting.value = false;
                    nodeExecutionStatus.value = {};
                }, 2000);
            }
        };
        
        const skipNode = (node) => {
            if (nodeExecutionStatus.value[node.id] === 'pending') {
                nodeExecutionStatus.value[node.id] = 'skipped';
                executionLogs.value.push({
                    timestamp: new Date().toISOString(),
                    level: 'info',
                    node_name: node.name,
                    message: 'Node skipped by user'
                });
                showToast('Node Skipped', `${node.name} has been skipped`, 'info');
            }
        };
        
        const debugNode = (node) => {
            showToast('Debug Mode', `Opening debug console for ${node.name}`, 'info');
            // TODO: Implement debug mode with node configuration viewer
            console.log('Debug node:', node);
        };
        
        // Lifecycle
        onMounted(async () => {
            try {
                console.log('🚀 Workflow Designer v2.1.0 - Initializing...');
                
                // Initialize with minimum delay to prevent flash
                await nextTick();
                
                // Load nodes first
                await loadNodes();
                
                // Then load saved workflow
                try {
                    const saved = localStorage.getItem('workflow_enhanced');
                    if (saved) {
                        const workflow = JSON.parse(saved);
                        if (workflow.nodes && Array.isArray(workflow.nodes)) {
                            canvasNodes.value = workflow.nodes;
                            connections.value = workflow.connections || [];
                            
                            if (canvasNodes.value.length > 0) {
                                nodeCounter.value = Math.max(...canvasNodes.value.map(n => 
                                    parseInt(n.name.match(/\d+$/)?.[0] || 0)
                                )) + 1;
                            }
                        }
                    }
                } catch (e) {
                    console.warn('Could not restore saved workflow');
                }
                
                // Setup keyboard shortcuts
                const handleKeydown = (e) => {
                    if (!loaded.value) return;
                    
                    if (e.ctrlKey || e.metaKey) {
                        switch(e.key) {
                            case 's':
                                e.preventDefault();
                                saveWorkflow();
                                break;
                            case 'd':
                                e.preventDefault();
                                if (selectedNode.value) duplicateNode();
                                break;
                            case 'Delete':
                            case 'Backspace':
                                if (selectedNode.value && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
                                    e.preventDefault();
                                    deleteNode();
                                }
                                break;
                        }
                    }
                };
                
                document.addEventListener('keydown', handleKeydown);
                
                // Mark as loaded after a brief delay
                await new Promise(resolve => setTimeout(resolve, 300));
                loaded.value = true;
                
                console.log('✅ Workflow Designer initialized successfully');
                
            } catch (error) {
                console.error('Initialization error:', error);
                // Still show the app even if there's an error
                loaded.value = true;
            }
        });
        
        return {
            // State
            loaded,
            loading,
            searchTerm,
            availableNodes,
            canvasNodes,
            connections,
            selectedNode,
            draggedNode,
            draggingCanvasNode,
            expandedCategories,
            zoomLevel,
            panX,
            panY,
            showMinimap,
            toast,
            canvasGrid,
            primaryColor,
            connectionState,
            
            // Computed
            filteredNodes,
            minimapViewportStyle,
            tempConnectionPath,
            
            // Methods
            toggleCategory,
            getCategoryIcon,
            getNodeIcon,
            getCategoryGradient,
            startDrag,
            endDrag,
            onDrop,
            selectNode,
            startNodeDrag,
            deleteNode,
            duplicateNode,
            addRandomNode,
            clearCanvas,
            saveWorkflow,
            exportWorkflow,
            zoomIn,
            zoomOut,
            resetZoom,
            fitToScreen,
            onWheel,
            startConnection,
            getConnectionPath,
            toggleTheme,
            filterNodes,
            showToast,
            getToastIcon,
            getToastColor,
            highlightPort,
            deleteConnection,
            highlightConnection,
            showSaveModal,
            saving,
            workflowData,
            closeSaveModal,
            saveAsDraft,
            saveAndPublish,
            openMarketplaceShare,
            // Execution methods
            isExecuting,
            isPaused,
            executionId,
            nodeExecutionStatus,
            currentExecutingNode,
            executionLogs,
            startWorkflow,
            pauseWorkflow,
            resumeWorkflow,
            stopWorkflow,
            clearLogs,
            formatTime,
            executeNode,
            skipNode,
            debugNode
        };
    }
}).mount('#app');
</script>

<br />
<b>Warning</b>:  Undefined variable $OUTPUT in <b>/var/www/html/local/workflowdesigner/modules/designer/index.php</b> on line <b>3472</b><br />
<br />
<b>Fatal error</b>:  Uncaught Error: Call to a member function footer() on null in /var/www/html/local/workflowdesigner/modules/designer/index.php:3472
Stack trace:
#0 {main}
  thrown in <b>/var/www/html/local/workflowdesigner/modules/designer/index.php</b> on line <b>3472</b><br />