import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Subject, takeUntil, debounceTime } from 'rxjs';
import { Metadata } from '@memberjunction/core';
// Import standalone flow editor components
import { FlowEditorComponent } from './flow-editor-integration/components/flow-editor/flow-editor.component';
import { PropertiesPanelComponent } from './flow-editor-integration/components/properties-panel/properties-panel.component';
import { ExecutionPanelComponent } from './flow-editor-integration/components/execution-panel/execution-panel.component';
import { ToolbarComponent } from './flow-editor-integration/components/toolbar/toolbar.component';
// Import services
import { FlowEditorService } from './flow-editor-integration/services/flow-editor.service';
import { FlowExecutorService } from './flow-editor-integration/services/flow-executor.service';
import { MJFlowTransformerService } from './flow-editor-integration/services/mj-flow-transformer.service';
import * as i0 from "@angular/core";
import * as i1 from "./flow-editor-integration/services/flow-editor.service";
import * as i2 from "./flow-editor-integration/services/flow-executor.service";
import * as i3 from "./flow-editor-integration/services/mj-flow-transformer.service";
import * as i4 from "@angular/common";
const _c0 = ["flowEditor"];
function MJIntegratedFlowEditorComponent_span_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 20);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1("Agent ID: ", ctx_r1.agentId, "");
} }
function MJIntegratedFlowEditorComponent_button_5_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 21);
    i0.ɵɵlistener("click", function MJIntegratedFlowEditorComponent_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.saveAllChanges()); });
    i0.ɵɵelement(1, "i", 22);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("disabled", ctx_r1.saving);
    i0.ɵɵadvance();
    i0.ɵɵclassProp("fa-save", !ctx_r1.saving)("fa-spinner", ctx_r1.saving)("fa-spin", ctx_r1.saving);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r1.saving ? "Saving..." : "Save All Changes", " ");
} }
function MJIntegratedFlowEditorComponent_div_7_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 23)(1, "app-toolbar", 24);
    i0.ɵɵlistener("stepDragStart", function MJIntegratedFlowEditorComponent_div_7_Template_app_toolbar_stepDragStart_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onStepDragStart($event)); })("stepDragEnd", function MJIntegratedFlowEditorComponent_div_7_Template_app_toolbar_stepDragEnd_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onStepDragEnd()); });
    i0.ɵɵelementEnd()();
} }
function MJIntegratedFlowEditorComponent_app_properties_panel_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "app-properties-panel");
} }
function MJIntegratedFlowEditorComponent_div_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 25);
    i0.ɵɵelement(1, "app-execution-panel");
    i0.ɵɵelementEnd();
} }
function MJIntegratedFlowEditorComponent_span_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 15);
    i0.ɵɵelement(1, "i", 26);
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "date");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" Last saved: ", i0.ɵɵpipeBind2(3, 1, ctx_r1.lastSaved, "short"), " ");
} }
function MJIntegratedFlowEditorComponent_span_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 27);
    i0.ɵɵelement(1, "i", 28);
    i0.ɵɵtext(2, " Unsaved changes ");
    i0.ɵɵelementEnd();
} }
export class MJIntegratedFlowEditorComponent {
    constructor(flowEditorService, flowExecutorService, transformerService, cdr) {
        this.flowEditorService = flowEditorService;
        this.flowExecutorService = flowExecutorService;
        this.transformerService = transformerService;
        this.cdr = cdr;
        this.agentId = null;
        this.steps = [];
        this.paths = [];
        this.EditMode = false;
        this.stepsChanged = new EventEmitter();
        this.pathsChanged = new EventEmitter();
        // UI state
        this.showExecutionPanel = false;
        this.selectedStep = null;
        this.stepCount = 0;
        this.connectionCount = 0;
        this.lastSaved = null;
        this.hasUnsavedChanges = false;
        this.saving = false;
        this.destroy$ = new Subject();
        this.changeDebounce$ = new Subject();
    }
    ngOnChanges(changes) {
        // When input data changes, reload the flow
        if ((changes['steps'] || changes['paths']) && this.flowEditorComponent) {
            this.loadFlowData();
        }
    }
    ngOnInit() {
        // Subscribe to flow editor changes
        if (this.flowEditorService && this.flowEditorService.selectedNode) {
            this.flowEditorService.selectedNode
                .pipe(takeUntil(this.destroy$))
                .subscribe((node) => {
                this.selectedStep = node;
                this.cdr.detectChanges();
            });
        }
        // Track changes for auto-save indication
        this.changeDebounce$
            .pipe(debounceTime(1000), takeUntil(this.destroy$))
            .subscribe(() => {
            this.hasUnsavedChanges = true;
            this.cdr.detectChanges();
        });
        // Subscribe to flow changes
        this.subscribeToFlowChanges();
    }
    ngAfterViewInit() {
        // Load flow data after view is initialized
        // This ensures the flow editor component is ready
        this.loadFlowData();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    loadFlowData() {
        // Transform MJ entities to standalone models
        const { steps: transformedSteps, connections } = this.transformerService.transformToStandaloneModels(this.steps, this.paths);
        // Load saved positions from LocalStorage if available
        if (this.agentId) {
            const savedPositions = this.loadPositionsFromLocalStorage();
            if (savedPositions) {
                transformedSteps.forEach(step => {
                    const savedPos = savedPositions[step.id];
                    if (savedPos) {
                        step.position = [savedPos.x, savedPos.y];
                    }
                });
            }
        }
        // Load transformed data into the flow editor
        // Load into flow editor service
        this.flowEditorService.setAllSteps(transformedSteps);
        // Store connections in a property for now
        this.flowEditorService.connections = connections;
        // Update counts
        this.stepCount = transformedSteps.length;
        this.connectionCount = connections.length;
        // Initialize the flow editor component if it exists
        // We need to wait for the component to be ready
        setTimeout(() => {
            if (this.flowEditorComponent) {
                this.flowEditorComponent.steps = transformedSteps;
                this.flowEditorComponent.connections = connections;
                // Trigger the flow editor to render the data
                this.flowEditorComponent.loadFlowData();
            }
        }, 100);
    }
    subscribeToFlowChanges() {
        // For now, we'll track changes through the component itself
        // since the service doesn't have observables for these
        this.stepCount = this.steps.length;
        this.connectionCount = this.paths.length;
    }
    async saveAllChanges() {
        if (!this.EditMode || this.saving)
            return;
        this.saving = true;
        try {
            // Get current state from flow editor
            const currentSteps = this.flowEditorService.getAllSteps();
            const currentConnections = (this.flowEditorService.connections || []);
            // Transform back to MJ entities
            const { stepsToUpdate, pathsToUpdate, stepsToCreate, pathsToCreate } = this.transformerService.transformToMJEntities(currentSteps, currentConnections, this.steps, this.paths);
            // Save all updates
            const md = new Metadata();
            // Update existing steps
            for (const step of stepsToUpdate) {
                await step.Save();
            }
            // Create new steps
            for (const stepData of stepsToCreate) {
                const newStep = await md.GetEntityObject('MJ: AI Agent Steps');
                Object.assign(newStep, stepData);
                newStep.AgentID = this.agentId;
                await newStep.Save();
                // Add to our steps array and update the standalone model
                this.steps.push(newStep);
                // Update the mjEntityId in the standalone model
                const standaloneStep = currentSteps.find((s) => s.name === stepData.Name);
                if (standaloneStep) {
                    standaloneStep.mjEntityId = newStep.ID;
                }
            }
            // Update existing paths
            for (const path of pathsToUpdate) {
                await path.Save();
            }
            // Create new paths
            for (const pathData of pathsToCreate) {
                const newPath = await md.GetEntityObject('MJ: AI Agent Step Paths');
                Object.assign(newPath, pathData);
                await newPath.Save();
                // Add to our paths array
                this.paths.push(newPath);
                // Update the mjEntityId in the standalone model
                // Note: We need to find by comparing the original step IDs, not the numeric IDs
                const standaloneConnection = currentConnections.find((c) => {
                    // Find source and target steps by their MJ entity IDs
                    const sourceStep = currentSteps.find(s => s.mjEntityId === pathData.OriginStepID);
                    const targetStep = currentSteps.find(s => s.mjEntityId === pathData.DestinationStepID);
                    return sourceStep && targetStep && c.source === sourceStep.id && c.target === targetStep.id;
                });
                if (standaloneConnection) {
                    standaloneConnection.mjEntityId = newPath.ID;
                }
            }
            // Handle deletions (steps/paths that exist in MJ but not in current editor state)
            await this.handleDeletions(currentSteps, currentConnections);
            // Update state
            this.lastSaved = new Date();
            this.hasUnsavedChanges = false;
            // Emit change events
            this.stepsChanged.emit();
            this.pathsChanged.emit();
        }
        catch (error) {
            console.error('Failed to save changes:', error);
            alert('Failed to save changes. Please check the console for details.');
        }
        finally {
            this.saving = false;
            this.cdr.detectChanges();
        }
    }
    async handleDeletions(currentSteps, currentConnections) {
        // Find steps that exist in MJ but not in current state
        const currentStepIds = new Set(currentSteps.map(s => s.mjEntityId).filter(id => id));
        const stepsToDelete = this.steps.filter(mjStep => !currentStepIds.has(mjStep.ID));
        // Find paths that exist in MJ but not in current state
        const currentPathIds = new Set(currentConnections.map(c => c.mjEntityId).filter(id => id));
        const pathsToDelete = this.paths.filter(mjPath => !currentPathIds.has(mjPath.ID));
        // Delete removed paths first (due to foreign key constraints)
        for (const path of pathsToDelete) {
            await path.Delete();
            const index = this.paths.indexOf(path);
            if (index > -1) {
                this.paths.splice(index, 1);
            }
        }
        // Delete removed steps
        for (const step of stepsToDelete) {
            await step.Delete();
            const index = this.steps.indexOf(step);
            if (index > -1) {
                this.steps.splice(index, 1);
            }
        }
    }
    toggleExecutionPanel() {
        this.showExecutionPanel = !this.showExecutionPanel;
        this.cdr.detectChanges();
    }
    onStepDragStart(event) {
        // Handle drag start from toolbar
    }
    onStepDragEnd() {
        // Handle drag end
        // Save positions when step dragging ends
        this.savePositionsToLocalStorage();
    }
    onStepMoved(step) {
        // Save positions to LocalStorage when a step is moved
        this.savePositionsToLocalStorage();
    }
    onStepUpdated(updatedStep) {
        // Handle step updates from properties panel
        // Find and update the step in our local array
        const index = this.flowEditorService.getAllSteps().findIndex((s) => s.id === updatedStep.id);
        if (index !== -1) {
            const steps = this.flowEditorService.getAllSteps();
            steps[index] = updatedStep;
            this.flowEditorService.setAllSteps(steps);
            // Mark as having unsaved changes
            this.hasUnsavedChanges = true;
            this.changeDebounce$.next();
            this.cdr.detectChanges();
        }
    }
    // Public methods for parent component interaction
    refreshFlow() {
        this.loadFlowData();
    }
    async executeFlow() {
        if (!this.showExecutionPanel) {
            this.showExecutionPanel = true;
        }
        // Execute using the flow executor service
        const steps = this.flowEditorService.getAllSteps();
        const connections = (this.flowEditorService.connections || []);
        await this.flowExecutorService.executeFlow(steps, connections);
    }
    loadPositionsFromLocalStorage() {
        if (!this.agentId)
            return null;
        const storageKey = `flow-positions-${this.agentId}`;
        const savedData = localStorage.getItem(storageKey);
        if (savedData) {
            try {
                const parsed = JSON.parse(savedData);
                return parsed.steps || null;
            }
            catch (e) {
                console.error('Failed to parse saved positions:', e);
                return null;
            }
        }
        return null;
    }
    savePositionsToLocalStorage() {
        if (!this.agentId || !this.flowEditorComponent)
            return;
        const positions = {};
        this.flowEditorComponent.steps.forEach(step => {
            positions[step.id] = {
                x: step.position[0],
                y: step.position[1]
            };
        });
        const storageKey = `flow-positions-${this.agentId}`;
        const dataToSave = {
            steps: positions,
            timestamp: new Date().toISOString()
        };
        localStorage.setItem(storageKey, JSON.stringify(dataToSave));
    }
    static { this.ɵfac = function MJIntegratedFlowEditorComponent_Factory(t) { return new (t || MJIntegratedFlowEditorComponent)(i0.ɵɵdirectiveInject(i1.FlowEditorService), i0.ɵɵdirectiveInject(i2.FlowExecutorService), i0.ɵɵdirectiveInject(i3.MJFlowTransformerService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJIntegratedFlowEditorComponent, selectors: [["mj-integrated-flow-editor"]], viewQuery: function MJIntegratedFlowEditorComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.flowEditorComponent = _t.first);
        } }, inputs: { agentId: "agentId", steps: "steps", paths: "paths", EditMode: "EditMode" }, outputs: { stepsChanged: "stepsChanged", pathsChanged: "pathsChanged" }, standalone: true, features: [i0.ɵɵProvidersFeature([FlowEditorService, FlowExecutorService, MJFlowTransformerService]), i0.ɵɵNgOnChangesFeature, i0.ɵɵStandaloneFeature], decls: 23, vars: 15, consts: [["flowEditor", ""], [1, "mj-integrated-flow-editor"], [1, "editor-header"], [1, "header-left"], ["class", "agent-id", 4, "ngIf"], [1, "header-right"], ["class", "btn-save", 3, "disabled", "click", 4, "ngIf"], [1, "editor-container"], ["class", "toolbar-container", 4, "ngIf"], [1, "canvas-container"], [3, "toggleExecution", "stepMoved"], [1, "properties-container"], [4, "ngIf"], ["class", "execution-container", 4, "ngIf"], [1, "status-bar"], [1, "status-item"], [1, "fa-solid", "fa-circle-nodes"], [1, "fa-solid", "fa-link"], ["class", "status-item", 4, "ngIf"], ["class", "status-item unsaved", 4, "ngIf"], [1, "agent-id"], [1, "btn-save", 3, "click", "disabled"], [1, "fa-solid"], [1, "toolbar-container"], [3, "stepDragStart", "stepDragEnd"], [1, "execution-container"], [1, "fa-solid", "fa-clock"], [1, "status-item", "unsaved"], [1, "fa-solid", "fa-exclamation-triangle"]], template: function MJIntegratedFlowEditorComponent_Template(rf, ctx) { if (rf & 1) {
            const _r1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
            i0.ɵɵtemplate(3, MJIntegratedFlowEditorComponent_span_3_Template, 2, 1, "span", 4);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "div", 5);
            i0.ɵɵtemplate(5, MJIntegratedFlowEditorComponent_button_5_Template, 3, 8, "button", 6);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(6, "div", 7);
            i0.ɵɵtemplate(7, MJIntegratedFlowEditorComponent_div_7_Template, 2, 0, "div", 8);
            i0.ɵɵelementStart(8, "div", 9)(9, "app-flow-editor", 10, 0);
            i0.ɵɵlistener("toggleExecution", function MJIntegratedFlowEditorComponent_Template_app_flow_editor_toggleExecution_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleExecutionPanel()); })("stepMoved", function MJIntegratedFlowEditorComponent_Template_app_flow_editor_stepMoved_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onStepMoved($event)); });
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(11, "div", 11);
            i0.ɵɵtemplate(12, MJIntegratedFlowEditorComponent_app_properties_panel_12_Template, 1, 0, "app-properties-panel", 12);
            i0.ɵɵelementEnd()();
            i0.ɵɵtemplate(13, MJIntegratedFlowEditorComponent_div_13_Template, 2, 0, "div", 13);
            i0.ɵɵelementStart(14, "div", 14)(15, "span", 15);
            i0.ɵɵelement(16, "i", 16);
            i0.ɵɵtext(17);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(18, "span", 15);
            i0.ɵɵelement(19, "i", 17);
            i0.ɵɵtext(20);
            i0.ɵɵelementEnd();
            i0.ɵɵtemplate(21, MJIntegratedFlowEditorComponent_span_21_Template, 4, 4, "span", 18)(22, MJIntegratedFlowEditorComponent_span_22_Template, 3, 0, "span", 19);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("ngIf", ctx.agentId);
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngIf", ctx.EditMode);
            i0.ɵɵadvance();
            i0.ɵɵclassProp("with-execution", ctx.showExecutionPanel);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.EditMode);
            i0.ɵɵadvance(4);
            i0.ɵɵstyleProp("width", ctx.selectedStep ? 320 : 0, "px");
            i0.ɵɵclassProp("visible", ctx.selectedStep);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.selectedStep);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.showExecutionPanel);
            i0.ɵɵadvance(4);
            i0.ɵɵtextInterpolate1(" ", ctx.stepCount, " Steps ");
            i0.ɵɵadvance(3);
            i0.ɵɵtextInterpolate1(" ", ctx.connectionCount, " Connections ");
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.lastSaved);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.hasUnsavedChanges);
        } }, dependencies: [CommonModule, i4.NgIf, i4.DatePipe, FormsModule,
            FlowEditorComponent,
            PropertiesPanelComponent,
            ExecutionPanelComponent,
            ToolbarComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      width: 100%;\n      height: 100%;\n      min-height: 600px; \n\n    }\n    \n    .mj-integrated-flow-editor[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 600px; \n\n      background: #f5f6fa;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .editor-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 20px;\n      background: white;\n      border-bottom: 1px solid #e1e4e8;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 15px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #2c3e50;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .agent-id[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: #6c757d;\n      background: #f0f2f5;\n      padding: 4px 10px;\n      border-radius: 12px;\n    }\n\n    .header-right[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 10px;\n    }\n\n    .btn-save[_ngcontent-%COMP%], .btn-mode[_ngcontent-%COMP%] {\n      padding: 8px 16px;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .btn-save[_ngcontent-%COMP%] {\n      background: #10b981;\n      color: white;\n    }\n\n    .btn-save[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: #059669;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);\n    }\n\n    .btn-save[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-mode[_ngcontent-%COMP%] {\n      background: #6366f1;\n      color: white;\n    }\n\n    .btn-mode[_ngcontent-%COMP%]:hover {\n      background: #4f46e5;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n    }\n\n    .editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      position: relative;\n      overflow: visible; \n\n      transition: margin-bottom 0.3s;\n      min-height: 500px;\n    }\n\n    .editor-container.with-execution[_ngcontent-%COMP%] {\n      margin-bottom: 250px;\n    }\n\n    .toolbar-container[_ngcontent-%COMP%] {\n      width: 80px;\n      background: white;\n      border-right: 1px solid #e1e4e8;\n      padding: 10px;\n      overflow-y: auto;\n    }\n\n    .canvas-container[_ngcontent-%COMP%] {\n      flex: 1;\n      position: relative;\n      background: #fafbfc;\n      overflow: hidden; \n\n    }\n\n    .properties-container[_ngcontent-%COMP%] {\n      width: 0;\n      min-width: 0;\n      max-width: 320px;\n      background: white;\n      border-left: 1px solid #e1e4e8;\n      overflow: hidden;\n      transition: width 0.3s ease, min-width 0.3s ease;\n      position: relative;\n      box-shadow: -2px 0 5px rgba(0,0,0,0.05);\n      flex-shrink: 0; \n\n      height: 100%; \n\n    }\n\n    .properties-container.visible[_ngcontent-%COMP%] {\n      width: 320px !important; \n\n      min-width: 320px !important;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n    \n    app-properties-panel[_ngcontent-%COMP%] {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .execution-container[_ngcontent-%COMP%] {\n      position: fixed;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: 250px;\n      background: white;\n      border-top: 2px solid #e1e4e8;\n      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);\n      z-index: 100;\n    }\n\n    .status-bar[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 20px;\n      padding: 8px 20px;\n      background: white;\n      border-top: 1px solid #e1e4e8;\n      font-size: 12px;\n      color: #6c757d;\n    }\n\n    .status-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .status-item.unsaved[_ngcontent-%COMP%] {\n      color: #f59e0b;\n      font-weight: 500;\n    }\n\n    .status-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 11px;\n    }"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJIntegratedFlowEditorComponent, [{
        type: Component,
        args: [{ selector: 'mj-integrated-flow-editor', standalone: true, imports: [
                    CommonModule,
                    FormsModule,
                    FlowEditorComponent,
                    PropertiesPanelComponent,
                    ExecutionPanelComponent,
                    ToolbarComponent
                ], template: `
    <div class="mj-integrated-flow-editor">
      <!-- Header with mode toggle -->
      <div class="editor-header">
        <div class="header-left">
          <span class="agent-id" *ngIf="agentId">Agent ID: {{ agentId }}</span>
        </div>
        <div class="header-right">
          <button class="btn-save" *ngIf="EditMode" (click)="saveAllChanges()" [disabled]="saving">
            <i class="fa-solid" [class.fa-save]="!saving" [class.fa-spinner]="saving" [class.fa-spin]="saving"></i>
            {{ saving ? 'Saving...' : 'Save All Changes' }}
          </button>
        </div>
      </div>

      <!-- Main editor area -->
      <div class="editor-container" [class.with-execution]="showExecutionPanel">
        <!-- Toolbar -->
        <div class="toolbar-container" *ngIf="EditMode">
          <app-toolbar 
            (stepDragStart)="onStepDragStart($event)"
            (stepDragEnd)="onStepDragEnd()"></app-toolbar>
        </div>

        <!-- Flow Editor Canvas -->
        <div class="canvas-container">
          <app-flow-editor #flowEditor 
                          (toggleExecution)="toggleExecutionPanel()"
                          (stepMoved)="onStepMoved($event)"></app-flow-editor>
        </div>

        <!-- Properties Panel -->
        <div class="properties-container" 
             [class.visible]="selectedStep"
             [style.width.px]="selectedStep ? 320 : 0">
          <app-properties-panel *ngIf="selectedStep"></app-properties-panel>
        </div>
      </div>

      <!-- Execution Panel -->
      <div class="execution-container" *ngIf="showExecutionPanel">
        <app-execution-panel></app-execution-panel>
      </div>

      <!-- Status Bar -->
      <div class="status-bar">
        <span class="status-item">
          <i class="fa-solid fa-circle-nodes"></i>
          {{ stepCount }} Steps
        </span>
        <span class="status-item">
          <i class="fa-solid fa-link"></i>
          {{ connectionCount }} Connections
        </span>
        <span class="status-item" *ngIf="lastSaved">
          <i class="fa-solid fa-clock"></i>
          Last saved: {{ lastSaved | date:'short' }}
        </span>
        <span class="status-item unsaved" *ngIf="hasUnsavedChanges">
          <i class="fa-solid fa-exclamation-triangle"></i>
          Unsaved changes
        </span>
      </div>
    </div>
  `, providers: [FlowEditorService, FlowExecutorService, MJFlowTransformerService], styles: ["\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n      min-height: 600px; /* Ensure minimum height */\n    }\n    \n    .mj-integrated-flow-editor {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      min-height: 600px; /* Ensure minimum height */\n      background: #f5f6fa;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .editor-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 20px;\n      background: white;\n      border-bottom: 1px solid #e1e4e8;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 15px;\n    }\n\n    .header-left h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #2c3e50;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .agent-id {\n      font-size: 12px;\n      color: #6c757d;\n      background: #f0f2f5;\n      padding: 4px 10px;\n      border-radius: 12px;\n    }\n\n    .header-right {\n      display: flex;\n      gap: 10px;\n    }\n\n    .btn-save, .btn-mode {\n      padding: 8px 16px;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .btn-save {\n      background: #10b981;\n      color: white;\n    }\n\n    .btn-save:hover:not(:disabled) {\n      background: #059669;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);\n    }\n\n    .btn-save:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-mode {\n      background: #6366f1;\n      color: white;\n    }\n\n    .btn-mode:hover {\n      background: #4f46e5;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n    }\n\n    .editor-container {\n      flex: 1;\n      display: flex;\n      position: relative;\n      overflow: visible; /* Allow properties panel to be visible */\n      transition: margin-bottom 0.3s;\n      min-height: 500px;\n    }\n\n    .editor-container.with-execution {\n      margin-bottom: 250px;\n    }\n\n    .toolbar-container {\n      width: 80px;\n      background: white;\n      border-right: 1px solid #e1e4e8;\n      padding: 10px;\n      overflow-y: auto;\n    }\n\n    .canvas-container {\n      flex: 1;\n      position: relative;\n      background: #fafbfc;\n      overflow: hidden; /* Keep canvas overflow hidden */\n    }\n\n    .properties-container {\n      width: 0;\n      min-width: 0;\n      max-width: 320px;\n      background: white;\n      border-left: 1px solid #e1e4e8;\n      overflow: hidden;\n      transition: width 0.3s ease, min-width 0.3s ease;\n      position: relative;\n      box-shadow: -2px 0 5px rgba(0,0,0,0.05);\n      flex-shrink: 0; /* Prevent the container from shrinking */\n      height: 100%; /* Full height of parent */\n    }\n\n    .properties-container.visible {\n      width: 320px !important; /* Force the width with !important */\n      min-width: 320px !important;\n      overflow-y: auto;\n      overflow-x: hidden;\n    }\n    \n    app-properties-panel {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    .execution-container {\n      position: fixed;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      height: 250px;\n      background: white;\n      border-top: 2px solid #e1e4e8;\n      box-shadow: 0 -2px 10px rgba(0,0,0,0.1);\n      z-index: 100;\n    }\n\n    .status-bar {\n      display: flex;\n      gap: 20px;\n      padding: 8px 20px;\n      background: white;\n      border-top: 1px solid #e1e4e8;\n      font-size: 12px;\n      color: #6c757d;\n    }\n\n    .status-item {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .status-item.unsaved {\n      color: #f59e0b;\n      font-weight: 500;\n    }\n\n    .status-item i {\n      font-size: 11px;\n    }\n  "] }]
    }], () => [{ type: i1.FlowEditorService }, { type: i2.FlowExecutorService }, { type: i3.MJFlowTransformerService }, { type: i0.ChangeDetectorRef }], { flowEditorComponent: [{
            type: ViewChild,
            args: ['flowEditor']
        }], agentId: [{
            type: Input
        }], steps: [{
            type: Input
        }], paths: [{
            type: Input
        }], EditMode: [{
            type: Input
        }], stepsChanged: [{
            type: Output
        }], pathsChanged: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJIntegratedFlowEditorComponent, { className: "MJIntegratedFlowEditorComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/mj-integrated-flow-editor.component.ts", lineNumber: 291 }); })();
//# sourceMappingURL=mj-integrated-flow-editor.component.js.map