import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "../../services/module-manager.service";
import * as i2 from "@angular/common";
function CustomNodeViewComponent_div_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 13);
    i0.ɵɵtext(1, " Drag modules here ");
    i0.ɵɵelementEnd();
} }
function CustomNodeViewComponent_div_11_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 14);
    i0.ɵɵlistener("dragstart", function CustomNodeViewComponent_div_11_Template_div_dragstart_0_listener($event) { const module_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModuleDragStart($event, module_r2)); })("dragend", function CustomNodeViewComponent_div_11_Template_div_dragend_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onModuleDragEnd($event)); });
    i0.ɵɵelementStart(1, "div", 15);
    i0.ɵɵelement(2, "i", 16);
    i0.ɵɵelementStart(3, "span");
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(5, "div", 17)(6, "button", 18);
    i0.ɵɵlistener("click", function CustomNodeViewComponent_div_11_Template_button_click_6_listener($event) { const module_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onConfigureModule($event, module_r2)); });
    i0.ɵɵelement(7, "i", 19);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "button", 20);
    i0.ɵɵlistener("click", function CustomNodeViewComponent_div_11_Template_button_click_8_listener($event) { const module_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onDeleteModule($event, module_r2)); });
    i0.ɵɵelement(9, "i", 21);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const module_r2 = ctx.$implicit;
    i0.ɵɵattribute("data-module-id", module_r2.id);
    i0.ɵɵadvance(2);
    i0.ɵɵstyleProp("color", module_r2.color);
    i0.ɵɵproperty("ngClass", module_r2.icon);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(module_r2.name);
} }
export class CustomNodeViewComponent {
    constructor(moduleManager) {
        this.moduleManager = moduleManager;
        this.selected = false;
        this.nodeSelected = new EventEmitter();
        this.nodeDeleted = new EventEmitter();
        this.nodeUpdated = new EventEmitter();
        this.socketMouseDown = new EventEmitter();
        this.socketMouseEnter = new EventEmitter();
        this.socketMouseLeave = new EventEmitter();
        this.isDragOver = false;
        this.draggedModule = null;
    }
    ngOnInit() {
        if (!this.node.data.modules) {
            this.node.data.modules = [];
        }
    }
    onNodeClick() {
        this.nodeSelected.emit(this.node);
    }
    onEditName(event) {
        event.stopPropagation();
        const newName = prompt('Enter node name:', this.node.data.name);
        if (newName && newName !== this.node.data.name) {
            this.node.data.name = newName;
            this.nodeUpdated.emit(this.node);
        }
    }
    onDelete(event) {
        event.stopPropagation();
        if (confirm('Are you sure you want to delete this node?')) {
            this.nodeDeleted.emit(this.node);
        }
    }
    onDragOver(event) {
        event.preventDefault();
        event.stopPropagation();
        // Can't read dataTransfer during dragover, so just accept all drags
        this.isDragOver = true;
    }
    onDragLeave(event) {
        event.preventDefault();
        event.stopPropagation();
        this.isDragOver = false;
    }
    onDrop(event) {
        event.preventDefault();
        event.stopPropagation();
        this.isDragOver = false;
        const plainData = event.dataTransfer?.getData('text/plain') || '';
        const moduleType = event.dataTransfer?.getData('moduleType');
        console.log('Module drop - plainData:', plainData, 'moduleType:', moduleType);
        // Check if this is a module drop
        if (moduleType || plainData.startsWith('module:')) {
            const type = moduleType || plainData.replace('module:', '');
            // Adding new module from toolbar
            const module = this.moduleManager.createModule(type);
            if (module) {
                this.node.data.modules.push(module);
                this.nodeUpdated.emit(this.node);
            }
        }
        else if (this.draggedModule) {
            // Reordering modules
            this.reorderModule(event);
        }
    }
    onModuleDragStart(event, module) {
        this.draggedModule = module;
        event.dataTransfer.effectAllowed = 'move';
        event.dataTransfer.setData('moduleReorder', module.id);
        event.target.classList.add('dragging');
    }
    onModuleDragEnd(event) {
        this.draggedModule = null;
        event.target.classList.remove('dragging');
    }
    reorderModule(dropEvent) {
        if (!this.draggedModule)
            return;
        const modules = this.node.data.modules;
        const draggedIndex = modules.findIndex((m) => m.id === this.draggedModule.id);
        if (draggedIndex === -1)
            return;
        const [draggedItem] = modules.splice(draggedIndex, 1);
        // Find drop position
        const dropY = dropEvent.clientY;
        const moduleElements = Array.from(dropEvent.currentTarget.querySelectorAll('.node-module'));
        let insertIndex = modules.length;
        for (let i = 0; i < moduleElements.length; i++) {
            const rect = moduleElements[i].getBoundingClientRect();
            if (dropY < rect.top + rect.height / 2) {
                insertIndex = i;
                break;
            }
        }
        modules.splice(insertIndex, 0, draggedItem);
        this.nodeUpdated.emit(this.node);
    }
    onConfigureModule(event, module) {
        event.stopPropagation();
        this.moduleManager.selectModule(module);
    }
    onDeleteModule(event, module) {
        event.stopPropagation();
        this.node.data.modules = this.moduleManager.deleteModule(this.node.data.modules, module.id);
        this.nodeUpdated.emit(this.node);
    }
    onSocketMouseDown(event, type) {
        event.stopPropagation();
        event.preventDefault();
        this.socketMouseDown.emit({ event, node: this.node, type });
    }
    onSocketMouseEnter(event, type) {
        this.socketMouseEnter.emit({ event, node: this.node, type });
    }
    onSocketMouseLeave(event) {
        this.socketMouseLeave.emit(event);
    }
    static { this.ɵfac = function CustomNodeViewComponent_Factory(t) { return new (t || CustomNodeViewComponent)(i0.ɵɵdirectiveInject(i1.ModuleManagerService)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomNodeViewComponent, selectors: [["app-custom-node"]], inputs: { node: "node", selected: "selected" }, outputs: { nodeSelected: "nodeSelected", nodeDeleted: "nodeDeleted", nodeUpdated: "nodeUpdated", socketMouseDown: "socketMouseDown", socketMouseEnter: "socketMouseEnter", socketMouseLeave: "socketMouseLeave" }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 14, vars: 7, consts: [[1, "custom-node", 3, "click"], [1, "node-header"], [1, "node-title"], [1, "node-actions"], ["title", "Edit Node", 1, "icon-button", 3, "click"], [1, "fas", "fa-pencil-alt"], ["title", "Delete Node", 1, "icon-button", "danger", 3, "click"], [1, "fas", "fa-times"], [1, "node-modules", 3, "dragover", "dragleave", "drop"], ["class", "empty-modules", 4, "ngIf"], ["class", "node-module", "draggable", "true", 3, "dragstart", "dragend", 4, "ngFor", "ngForOf"], [1, "socket", "input", 3, "mousedown", "mouseenter", "mouseleave"], [1, "socket", "output", 3, "mousedown", "mouseenter", "mouseleave"], [1, "empty-modules"], ["draggable", "true", 1, "node-module", 3, "dragstart", "dragend"], [1, "module-info"], [1, "fas", 3, "ngClass"], [1, "module-actions"], ["title", "Configure", 1, "icon-button", "small", 3, "click"], [1, "fas", "fa-cog"], ["title", "Delete", 1, "icon-button", "small", "danger", 3, "click"], [1, "fas", "fa-trash"]], template: function CustomNodeViewComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵlistener("click", function CustomNodeViewComponent_Template_div_click_0_listener() { return ctx.onNodeClick(); });
            i0.ɵɵelementStart(1, "div", 1)(2, "h4", 2);
            i0.ɵɵtext(3);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "div", 3)(5, "button", 4);
            i0.ɵɵlistener("click", function CustomNodeViewComponent_Template_button_click_5_listener($event) { return ctx.onEditName($event); });
            i0.ɵɵelement(6, "i", 5);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(7, "button", 6);
            i0.ɵɵlistener("click", function CustomNodeViewComponent_Template_button_click_7_listener($event) { return ctx.onDelete($event); });
            i0.ɵɵelement(8, "i", 7);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(9, "div", 8);
            i0.ɵɵlistener("dragover", function CustomNodeViewComponent_Template_div_dragover_9_listener($event) { return ctx.onDragOver($event); })("dragleave", function CustomNodeViewComponent_Template_div_dragleave_9_listener($event) { return ctx.onDragLeave($event); })("drop", function CustomNodeViewComponent_Template_div_drop_9_listener($event) { return ctx.onDrop($event); });
            i0.ɵɵtemplate(10, CustomNodeViewComponent_div_10_Template, 2, 0, "div", 9)(11, CustomNodeViewComponent_div_11_Template, 10, 5, "div", 10);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(12, "div", 11);
            i0.ɵɵlistener("mousedown", function CustomNodeViewComponent_Template_div_mousedown_12_listener($event) { return ctx.onSocketMouseDown($event, "input"); })("mouseenter", function CustomNodeViewComponent_Template_div_mouseenter_12_listener($event) { return ctx.onSocketMouseEnter($event, "input"); })("mouseleave", function CustomNodeViewComponent_Template_div_mouseleave_12_listener($event) { return ctx.onSocketMouseLeave($event); });
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(13, "div", 12);
            i0.ɵɵlistener("mousedown", function CustomNodeViewComponent_Template_div_mousedown_13_listener($event) { return ctx.onSocketMouseDown($event, "output"); })("mouseenter", function CustomNodeViewComponent_Template_div_mouseenter_13_listener($event) { return ctx.onSocketMouseEnter($event, "output"); })("mouseleave", function CustomNodeViewComponent_Template_div_mouseleave_13_listener($event) { return ctx.onSocketMouseLeave($event); });
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵclassProp("selected", ctx.selected);
            i0.ɵɵadvance(3);
            i0.ɵɵtextInterpolate(ctx.node.data.name);
            i0.ɵɵadvance(6);
            i0.ɵɵclassProp("drag-over", ctx.isDragOver);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.node.data.modules.length === 0);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngForOf", ctx.node.data.modules);
        } }, dependencies: [CommonModule, i2.NgClass, i2.NgForOf, i2.NgIf], styles: [".custom-node[_ngcontent-%COMP%] {\n      min-width: 280px;\n      position: relative;\n      cursor: move;\n      background: white;\n      border: 2px solid #dee2e6;\n      border-radius: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n    }\n\n    .custom-node[_ngcontent-%COMP%]:hover {\n      box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n    }\n\n    .custom-node.selected[_ngcontent-%COMP%] {\n      border-color: #3b82f6;\n      box-shadow: 0 0 0 3px rgba(59,130,246,0.25);\n    }\n\n    .node-header[_ngcontent-%COMP%] {\n      padding: 1rem;\n      background-color: #f8f9fa;\n      border-bottom: 1px solid #dee2e6;\n      border-radius: 6px 6px 0 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .node-title[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 1rem;\n      margin: 0;\n    }\n\n    .node-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 0.25rem;\n    }\n\n    .node-modules[_ngcontent-%COMP%] {\n      padding: 0.75rem;\n      min-height: 100px;\n      position: relative;\n    }\n\n    .node-modules.drag-over[_ngcontent-%COMP%] {\n      background-color: #e7f3ff;\n      border: 2px dashed #007bff;\n      border-radius: 4px;\n    }\n\n    .empty-modules[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100px;\n      color: #adb5bd;\n      font-size: 0.875rem;\n      text-align: center;\n    }\n\n    .node-module[_ngcontent-%COMP%] {\n      background-color: #f8f9fa;\n      border: 1px solid #dee2e6;\n      border-radius: 6px;\n      padding: 0.75rem;\n      margin-bottom: 0.5rem;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      transition: all 0.2s ease;\n      cursor: move;\n    }\n\n    .node-module[_ngcontent-%COMP%]:hover {\n      background-color: #e9ecef;\n      border-color: #adb5bd;\n    }\n\n    .node-module.dragging[_ngcontent-%COMP%] {\n      opacity: 0.5;\n    }\n\n    .module-info[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n\n    .module-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 0.25rem;\n    }\n\n    .socket[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 18px;\n      height: 18px;\n      border: 2px solid #ffffff;\n      border-radius: 50%;\n      background: #007bff;\n      z-index: 10;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n      cursor: crosshair;\n      transition: all 0.2s ease;\n    }\n\n    .socket.input[_ngcontent-%COMP%] {\n      left: -9px;\n    }\n\n    .socket.output[_ngcontent-%COMP%] {\n      right: -9px;\n    }\n\n    .socket[_ngcontent-%COMP%]:hover {\n      background: #0056b3;\n      transform: translateY(-50%) scale(1.2);\n      box-shadow: 0 3px 6px rgba(0,0,0,0.3);\n    }\n    \n    .socket.connecting[_ngcontent-%COMP%] {\n      background: #28a745;\n      animation: _ngcontent-%COMP%_pulse 1s infinite;\n    }\n    \n    @keyframes _ngcontent-%COMP%_pulse {\n      0% { transform: translateY(-50%) scale(1); }\n      50% { transform: translateY(-50%) scale(1.3); }\n      100% { transform: translateY(-50%) scale(1); }\n    }\n\n    .icon-button[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 32px;\n      height: 32px;\n      border: none;\n      border-radius: 50%;\n      background: transparent;\n      color: #6c757d;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .icon-button[_ngcontent-%COMP%]:hover {\n      background: #f0f0f0;\n      color: #495057;\n    }\n\n    .icon-button.small[_ngcontent-%COMP%] {\n      width: 24px;\n      height: 24px;\n      font-size: 0.75rem;\n    }\n\n    .icon-button.danger[_ngcontent-%COMP%] {\n      color: #dc3545;\n    }\n\n    .icon-button.danger[_ngcontent-%COMP%]:hover {\n      background: #fee;\n      color: #b02a37;\n    }"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomNodeViewComponent, [{
        type: Component,
        args: [{ selector: 'app-custom-node', standalone: true, imports: [CommonModule], template: `
    <div class="custom-node" [class.selected]="selected" (click)="onNodeClick()">
      <div class="node-header">
        <h4 class="node-title">{{ node.data.name }}</h4>
        <div class="node-actions">
          <button 
            class="icon-button" 
            (click)="onEditName($event)" 
            title="Edit Node">
            <i class="fas fa-pencil-alt"></i>
          </button>
          <button 
            class="icon-button danger" 
            (click)="onDelete($event)" 
            title="Delete Node">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </div>
      
      <div class="node-modules" 
           [class.drag-over]="isDragOver"
           (dragover)="onDragOver($event)"
           (dragleave)="onDragLeave($event)"
           (drop)="onDrop($event)">
        <div *ngIf="node.data.modules.length === 0" class="empty-modules">
          Drag modules here
        </div>
        
        <div *ngFor="let module of node.data.modules" 
             class="node-module"
             [attr.data-module-id]="module.id"
             draggable="true"
             (dragstart)="onModuleDragStart($event, module)"
             (dragend)="onModuleDragEnd($event)">
          <div class="module-info">
            <i class="fas" [ngClass]="module.icon" [style.color]="module.color"></i>
            <span>{{ module.name }}</span>
          </div>
          <div class="module-actions">
            <button 
              class="icon-button small" 
              (click)="onConfigureModule($event, module)" 
              title="Configure">
              <i class="fas fa-cog"></i>
            </button>
            <button 
              class="icon-button small danger" 
              (click)="onDeleteModule($event, module)" 
              title="Delete">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>
      </div>
      
      <div class="socket input" 
           (mousedown)="onSocketMouseDown($event, 'input')"
           (mouseenter)="onSocketMouseEnter($event, 'input')"
           (mouseleave)="onSocketMouseLeave($event)">
      </div>
      <div class="socket output" 
           (mousedown)="onSocketMouseDown($event, 'output')"
           (mouseenter)="onSocketMouseEnter($event, 'output')"
           (mouseleave)="onSocketMouseLeave($event)">
      </div>
    </div>
  `, styles: ["\n    .custom-node {\n      min-width: 280px;\n      position: relative;\n      cursor: move;\n      background: white;\n      border: 2px solid #dee2e6;\n      border-radius: 8px;\n      transition: all 0.2s ease;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n    }\n\n    .custom-node:hover {\n      box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n    }\n\n    .custom-node.selected {\n      border-color: #3b82f6;\n      box-shadow: 0 0 0 3px rgba(59,130,246,0.25);\n    }\n\n    .node-header {\n      padding: 1rem;\n      background-color: #f8f9fa;\n      border-bottom: 1px solid #dee2e6;\n      border-radius: 6px 6px 0 0;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    .node-title {\n      font-weight: 600;\n      font-size: 1rem;\n      margin: 0;\n    }\n\n    .node-actions {\n      display: flex;\n      gap: 0.25rem;\n    }\n\n    .node-modules {\n      padding: 0.75rem;\n      min-height: 100px;\n      position: relative;\n    }\n\n    .node-modules.drag-over {\n      background-color: #e7f3ff;\n      border: 2px dashed #007bff;\n      border-radius: 4px;\n    }\n\n    .empty-modules {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 100px;\n      color: #adb5bd;\n      font-size: 0.875rem;\n      text-align: center;\n    }\n\n    .node-module {\n      background-color: #f8f9fa;\n      border: 1px solid #dee2e6;\n      border-radius: 6px;\n      padding: 0.75rem;\n      margin-bottom: 0.5rem;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      transition: all 0.2s ease;\n      cursor: move;\n    }\n\n    .node-module:hover {\n      background-color: #e9ecef;\n      border-color: #adb5bd;\n    }\n\n    .node-module.dragging {\n      opacity: 0.5;\n    }\n\n    .module-info {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n\n    .module-actions {\n      display: flex;\n      gap: 0.25rem;\n    }\n\n    .socket {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 18px;\n      height: 18px;\n      border: 2px solid #ffffff;\n      border-radius: 50%;\n      background: #007bff;\n      z-index: 10;\n      box-shadow: 0 2px 4px rgba(0,0,0,0.2);\n      cursor: crosshair;\n      transition: all 0.2s ease;\n    }\n\n    .socket.input {\n      left: -9px;\n    }\n\n    .socket.output {\n      right: -9px;\n    }\n\n    .socket:hover {\n      background: #0056b3;\n      transform: translateY(-50%) scale(1.2);\n      box-shadow: 0 3px 6px rgba(0,0,0,0.3);\n    }\n    \n    .socket.connecting {\n      background: #28a745;\n      animation: pulse 1s infinite;\n    }\n    \n    @keyframes pulse {\n      0% { transform: translateY(-50%) scale(1); }\n      50% { transform: translateY(-50%) scale(1.3); }\n      100% { transform: translateY(-50%) scale(1); }\n    }\n\n    .icon-button {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 32px;\n      height: 32px;\n      border: none;\n      border-radius: 50%;\n      background: transparent;\n      color: #6c757d;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .icon-button:hover {\n      background: #f0f0f0;\n      color: #495057;\n    }\n\n    .icon-button.small {\n      width: 24px;\n      height: 24px;\n      font-size: 0.75rem;\n    }\n\n    .icon-button.danger {\n      color: #dc3545;\n    }\n\n    .icon-button.danger:hover {\n      background: #fee;\n      color: #b02a37;\n    }\n\n  "] }]
    }], () => [{ type: i1.ModuleManagerService }], { node: [{
            type: Input
        }], selected: [{
            type: Input
        }], nodeSelected: [{
            type: Output
        }], nodeDeleted: [{
            type: Output
        }], nodeUpdated: [{
            type: Output
        }], socketMouseDown: [{
            type: Output
        }], socketMouseEnter: [{
            type: Output
        }], socketMouseLeave: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CustomNodeViewComponent, { className: "CustomNodeViewComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/custom-node/custom-node.component.ts", lineNumber: 251 }); })();
//# sourceMappingURL=custom-node.component.js.map