import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Subject, takeUntil } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../../services/flow-executor.service";
import * as i2 from "@angular/common";
const _c0 = (a0, a1, a2, a3, a4) => ({ "fa-circle": a0, "fa-spinner fa-spin": a1, "fa-pause-circle": a2, "fa-check-circle": a3, "fa-exclamation-circle": a4 });
const _c1 = (a0, a1, a2, a3) => ({ "fa-spinner fa-spin": a0, "fa-pause-circle": a1, "fa-check-circle": a2, "fa-exclamation-circle": a3 });
function ExecutionPanelComponent_div_1_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 24);
    i0.ɵɵlistener("mousedown", function ExecutionPanelComponent_div_1_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event)); });
    i0.ɵɵelement(1, "div", 25);
    i0.ɵɵelementEnd();
} }
function ExecutionPanelComponent_div_25_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 26);
    i0.ɵɵelement(1, "i", 27);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "No execution logs yet. Click \"Run Flow\" to start.");
    i0.ɵɵelementEnd()();
} }
function ExecutionPanelComponent_div_26_div_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 35)(1, "strong");
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const log_r3 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(log_r3.stepName);
} }
function ExecutionPanelComponent_div_26_div_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 36)(1, "pre");
    i0.ɵɵtext(2);
    i0.ɵɵpipe(3, "json");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const log_r3 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 1, log_r3.data));
} }
function ExecutionPanelComponent_div_26_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 30);
    i0.ɵɵelement(4, "i", 12);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 31);
    i0.ɵɵtemplate(6, ExecutionPanelComponent_div_26_div_6_Template, 3, 1, "div", 32);
    i0.ɵɵelementStart(7, "div", 33);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(9, ExecutionPanelComponent_div_26_div_9_Template, 4, 3, "div", 34);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const log_r3 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵclassMap(ctx_r1.getLogClass(log_r3.type));
    i0.ɵɵclassProp("current-step", log_r3.stepId === ctx_r1.currentStepId && ctx_r1.currentStepId !== 0);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r1.formatTimestamp(log_r3.timestamp));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", ctx_r1.getLogIcon(log_r3.type));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", log_r3.stepId);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(log_r3.message);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngIf", log_r3.data);
} }
function ExecutionPanelComponent_div_27_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 37);
    i0.ɵɵlistener("click", function ExecutionPanelComponent_div_27_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.isPanelClosed = false); });
    i0.ɵɵelement(1, "i", 12);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "titlecase");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction4(4, _c1, ctx_r1.executionStatus === "running", ctx_r1.executionStatus === "paused", ctx_r1.executionStatus === "completed", ctx_r1.executionStatus === "error"));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 2, ctx_r1.executionStatus));
} }
export class ExecutionPanelComponent {
    constructor(flowExecutor) {
        this.flowExecutor = flowExecutor;
        this.destroy$ = new Subject();
        this.executionStatus = 'idle';
        this.executionLogs = [];
        this.currentStepId = null;
        // Resize properties
        this.panelHeight = 300; // Default height
        this.minHeight = 150;
        this.maxHeight = 600;
        this.isResizing = false; // Made public for template access
        this.startY = 0;
        this.startHeight = 0;
        // Panel visibility
        this.isPanelClosed = false;
        this.onResizeMove = (event) => {
            if (!this.isResizing)
                return;
            // Calculate new height (inverted because we're dragging from top)
            const deltaY = this.startY - event.clientY;
            const newHeight = this.startHeight + deltaY;
            // Apply constraints
            this.panelHeight = Math.max(this.minHeight, Math.min(this.maxHeight, newHeight));
        };
        this.onResizeEnd = () => {
            this.isResizing = false;
            document.removeEventListener('mousemove', this.onResizeMove);
            document.removeEventListener('mouseup', this.onResizeEnd);
            // Reset body styles
            document.body.style.cursor = '';
            document.body.style.userSelect = '';
        };
    }
    ngOnInit() {
        // Subscribe to execution status
        this.flowExecutor.executionStatus
            .pipe(takeUntil(this.destroy$))
            .subscribe(status => {
            this.executionStatus = status;
            // Reopen panel when a new execution starts
            if (status === 'running' && this.isPanelClosed) {
                this.isPanelClosed = false;
            }
        });
        // Subscribe to execution logs
        this.flowExecutor.executionLogs
            .pipe(takeUntil(this.destroy$))
            .subscribe(logs => {
            this.executionLogs = logs;
            // Auto-scroll to bottom when new logs arrive
            setTimeout(() => this.scrollToBottom(), 0);
        });
        // Subscribe to current step
        this.flowExecutor.currentStepId
            .pipe(takeUntil(this.destroy$))
            .subscribe(stepId => {
            this.currentStepId = stepId;
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
        // Clean up resize listeners
        document.removeEventListener('mousemove', this.onResizeMove);
        document.removeEventListener('mouseup', this.onResizeEnd);
    }
    onPause() {
        this.flowExecutor.pause();
    }
    onResume() {
        this.flowExecutor.resume();
    }
    onStop() {
        this.flowExecutor.stop();
    }
    clearLogs() {
        this.executionLogs = [];
    }
    closePanel() {
        this.isPanelClosed = true;
    }
    getLogIcon(type) {
        switch (type) {
            case 'start': return 'fa-play-circle';
            case 'complete': return 'fa-check-circle';
            case 'error': return 'fa-exclamation-circle';
            case 'log': return 'fa-info-circle';
            default: return 'fa-circle';
        }
    }
    getLogClass(type) {
        switch (type) {
            case 'start': return 'log-start';
            case 'complete': return 'log-success';
            case 'error': return 'log-error';
            case 'log': return 'log-info';
            default: return '';
        }
    }
    formatTimestamp(date) {
        return date.toLocaleTimeString('en-US', {
            hour12: false,
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            fractionalSecondDigits: 3
        });
    }
    scrollToBottom() {
        const logsContainer = document.querySelector('.logs-container');
        if (logsContainer) {
            logsContainer.scrollTop = logsContainer.scrollHeight;
        }
    }
    // Resize methods
    onResizeStart(event) {
        this.isResizing = true;
        this.startY = event.clientY;
        this.startHeight = this.panelHeight;
        // Add document listeners
        document.addEventListener('mousemove', this.onResizeMove);
        document.addEventListener('mouseup', this.onResizeEnd);
        // Add class to body to change cursor globally
        document.body.style.cursor = 'ns-resize';
        document.body.style.userSelect = 'none';
        // Prevent text selection during resize
        event.preventDefault();
    }
    static { this.ɵfac = function ExecutionPanelComponent_Factory(t) { return new (t || ExecutionPanelComponent)(i0.ɵɵdirectiveInject(i1.FlowExecutorService)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ExecutionPanelComponent, selectors: [["app-execution-panel"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 28, vars: 26, consts: [[1, "execution-panel"], ["class", "resize-handle", 3, "mousedown", 4, "ngIf"], [1, "panel-header"], [1, "panel-title"], [1, "fas", "fa-terminal"], [1, "header-actions"], ["title", "Clear logs", 1, "icon-button", 3, "click", "disabled"], [1, "fas", "fa-trash"], ["title", "Close panel", 1, "icon-button", "close", 3, "click"], [1, "fas", "fa-times"], [1, "execution-controls"], [1, "status-indicator"], [1, "fas", 3, "ngClass"], [1, "control-buttons"], ["title", "Pause execution", 1, "control-button", 3, "click", "disabled"], [1, "fas", "fa-pause"], ["title", "Resume execution", 1, "control-button", 3, "click", "disabled"], [1, "fas", "fa-play"], ["title", "Stop execution", 1, "control-button", "stop", 3, "click", "disabled"], [1, "fas", "fa-stop"], [1, "logs-container"], ["class", "empty-logs", 4, "ngIf"], ["class", "log-entry", 3, "class", "current-step", 4, "ngFor", "ngForOf"], ["class", "execution-indicator", "title", "Click to reopen execution panel", 3, "click", 4, "ngIf"], [1, "resize-handle", 3, "mousedown"], [1, "resize-grip"], [1, "empty-logs"], [1, "fas", "fa-info-circle"], [1, "log-entry"], [1, "log-timestamp"], [1, "log-icon"], [1, "log-content"], ["class", "log-step", 4, "ngIf"], [1, "log-message"], ["class", "log-data", 4, "ngIf"], [1, "log-step"], [1, "log-data"], ["title", "Click to reopen execution panel", 1, "execution-indicator", 3, "click"]], template: function ExecutionPanelComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0);
            i0.ɵɵtemplate(1, ExecutionPanelComponent_div_1_Template, 2, 0, "div", 1);
            i0.ɵɵelementStart(2, "div", 2)(3, "h3", 3);
            i0.ɵɵelement(4, "i", 4);
            i0.ɵɵtext(5, " Flow Execution ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "div", 5)(7, "button", 6);
            i0.ɵɵlistener("click", function ExecutionPanelComponent_Template_button_click_7_listener() { return ctx.clearLogs(); });
            i0.ɵɵelement(8, "i", 7);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(9, "button", 8);
            i0.ɵɵlistener("click", function ExecutionPanelComponent_Template_button_click_9_listener() { return ctx.closePanel(); });
            i0.ɵɵelement(10, "i", 9);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(11, "div", 10)(12, "div", 11);
            i0.ɵɵelement(13, "i", 12);
            i0.ɵɵelementStart(14, "span");
            i0.ɵɵtext(15);
            i0.ɵɵpipe(16, "titlecase");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(17, "div", 13)(18, "button", 14);
            i0.ɵɵlistener("click", function ExecutionPanelComponent_Template_button_click_18_listener() { return ctx.onPause(); });
            i0.ɵɵelement(19, "i", 15);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(20, "button", 16);
            i0.ɵɵlistener("click", function ExecutionPanelComponent_Template_button_click_20_listener() { return ctx.onResume(); });
            i0.ɵɵelement(21, "i", 17);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(22, "button", 18);
            i0.ɵɵlistener("click", function ExecutionPanelComponent_Template_button_click_22_listener() { return ctx.onStop(); });
            i0.ɵɵelement(23, "i", 19);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(24, "div", 20);
            i0.ɵɵtemplate(25, ExecutionPanelComponent_div_25_Template, 4, 0, "div", 21)(26, ExecutionPanelComponent_div_26_Template, 10, 9, "div", 22);
            i0.ɵɵelementEnd()();
            i0.ɵɵtemplate(27, ExecutionPanelComponent_div_27_Template, 5, 9, "div", 23);
        } if (rf & 2) {
            i0.ɵɵstyleProp("height", ctx.executionStatus !== "idle" && !ctx.isPanelClosed ? ctx.panelHeight : 0, "px");
            i0.ɵɵclassProp("active", ctx.executionStatus !== "idle" && !ctx.isPanelClosed)("resizing", ctx.isResizing);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.executionStatus !== "idle" && !ctx.isPanelClosed);
            i0.ɵɵadvance(6);
            i0.ɵɵproperty("disabled", ctx.executionStatus === "running");
            i0.ɵɵadvance(5);
            i0.ɵɵclassMap("status-" + ctx.executionStatus);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction5(20, _c0, ctx.executionStatus === "idle", ctx.executionStatus === "running", ctx.executionStatus === "paused", ctx.executionStatus === "completed", ctx.executionStatus === "error"));
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(16, 18, ctx.executionStatus));
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("disabled", ctx.executionStatus !== "running");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("disabled", ctx.executionStatus !== "paused");
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("disabled", ctx.executionStatus !== "running" && ctx.executionStatus !== "paused");
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("ngIf", ctx.executionLogs.length === 0);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngForOf", ctx.executionLogs);
            i0.ɵɵadvance();
            i0.ɵɵproperty("ngIf", ctx.executionStatus !== "idle" && ctx.isPanelClosed);
        } }, dependencies: [CommonModule, i2.NgClass, i2.NgForOf, i2.NgIf, i2.JsonPipe, i2.TitleCasePipe], styles: [".execution-panel[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  background: var(--white-color);\n  border-top: 1px solid var(--gray-700);\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n  transition: height 0.3s ease;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  \n  &.active {\n    transition: none; // Disable transition during resize\n  }\n  \n  &.resizing {\n    user-select: none;\n    \n    .resize-grip {\n      opacity: 1 !important;\n    }\n  }\n}\n\n.resize-handle[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -5px;\n  left: 0;\n  right: 0;\n  height: 10px;\n  cursor: ns-resize;\n  z-index: 10;\n  \n  &:hover .resize-grip {\n    opacity: 1;\n  }\n}\n\n.resize-grip[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  height: 4px;\n  background: var(--gray-800);\n  border-radius: 2px;\n  opacity: 0;\n  transition: opacity 0.2s;\n  \n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: var(--gray-700);\n  }\n  \n  &::before {\n    top: -2px;\n  }\n  \n  &::after {\n    bottom: -2px;\n  }\n}\n\n.panel-header[_ngcontent-%COMP%] {\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid var(--gray-700);\n  background: var(--gray-600);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0;\n  color: var(--gray-900);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  \n  i {\n    color: var(--mj-blue);\n  }\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.icon-button[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--gray-800);\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--transition-time);\n  \n  &:hover:not(:disabled) {\n    background: var(--gray-700);\n    color: var(--gray-900);\n  }\n  \n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  \n  &.close {\n    &:hover:not(:disabled) {\n      background: #dc3545;\n      color: white;\n    }\n  }\n}\n\n.execution-controls[_ngcontent-%COMP%] {\n  padding: 0.75rem 1.5rem;\n  background: var(--gray-600);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--gray-700);\n}\n\n.status-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  \n  &.status-idle {\n    color: var(--gray-800);\n  }\n  \n  &.status-running {\n    color: var(--mj-blue);\n  }\n  \n  &.status-paused {\n    color: #ffc107;\n  }\n  \n  &.status-completed {\n    color: #28a745;\n  }\n  \n  &.status-error {\n    color: #dc3545;\n  }\n}\n\n.control-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.control-button[_ngcontent-%COMP%] {\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  color: var(--gray-900);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  font-size: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  transition: all var(--transition-time);\n  \n  &:hover:not(:disabled) {\n    background: var(--gray-700);\n    border-color: var(--gray-800);\n  }\n  \n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  \n  &.stop {\n    color: #dc3545;\n    border-color: #dc3545;\n    \n    &:hover:not(:disabled) {\n      background: #dc3545;\n      color: white;\n    }\n  }\n}\n\n.logs-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  background: var(--gray-600);\n  padding: 1rem;\n}\n\n.empty-logs[_ngcontent-%COMP%] {\n  text-align: center;\n  color: var(--gray-800);\n  padding: 2rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  \n  i {\n    font-size: 2rem;\n    color: var(--mj-blue);\n  }\n  \n  p {\n    margin: 0;\n    font-size: 0.875rem;\n  }\n}\n\n.log-entry[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n  padding: 0.5rem;\n  margin-bottom: 0.5rem;\n  background: var(--white-color);\n  border-radius: var(--border-radius);\n  border-left: 3px solid transparent;\n  font-size: 0.875rem;\n  transition: all var(--transition-time);\n  \n  &.log-start {\n    border-left-color: var(--mj-blue);\n  }\n  \n  &.log-success {\n    border-left-color: #28a745;\n  }\n  \n  &.log-error {\n    border-left-color: #dc3545;\n  }\n  \n  &.log-info {\n    border-left-color: #17a2b8;\n  }\n  \n  &.current-step {\n    background: #e3f2fd;\n    box-shadow: 0 2px 4px rgba(0, 118, 182, 0.2);\n  }\n}\n\n.log-timestamp[_ngcontent-%COMP%] {\n  color: var(--gray-800);\n  font-family: monospace;\n  font-size: 0.75rem;\n  white-space: nowrap;\n  padding-top: 0.125rem;\n}\n\n.log-icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 20px;\n  text-align: center;\n  \n  .fa-play-circle {\n    color: var(--mj-blue);\n  }\n  \n  .fa-check-circle {\n    color: #28a745;\n  }\n  \n  .fa-exclamation-circle {\n    color: #dc3545;\n  }\n  \n  .fa-info-circle {\n    color: #17a2b8;\n  }\n}\n\n.log-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.log-step[_ngcontent-%COMP%] {\n  margin-bottom: 0.25rem;\n  color: var(--gray-900);\n}\n\n.log-message[_ngcontent-%COMP%] {\n  color: var(--gray-800);\n  word-wrap: break-word;\n}\n\n.log-data[_ngcontent-%COMP%] {\n  margin-top: 0.5rem;\n  \n  pre {\n    margin: 0;\n    padding: 0.5rem;\n    background: var(--gray-600);\n    border-radius: var(--border-radius);\n    font-size: 0.75rem;\n    overflow-x: auto;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n}\n\n//[_ngcontent-%COMP%]   Minimized[_ngcontent-%COMP%]   execution[_ngcontent-%COMP%]   indicator\n.execution-indicator[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--white-color);\n  border: 1px solid var(--gray-700);\n  border-radius: 30px;\n  padding: 0.5rem 1.5rem;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: all var(--transition-time);\n  z-index: 100;\n  font-size: 0.875rem;\n  font-weight: 600;\n  \n  &:hover {\n    transform: translateX(-50%) translateY(-2px);\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n  }\n  \n  i {\n    font-size: 1rem;\n    \n    &.fa-spinner {\n      color: var(--mj-blue);\n    }\n    \n    &.fa-pause-circle {\n      color: #ffc107;\n    }\n    \n    &.fa-check-circle {\n      color: #28a745;\n    }\n    \n    &.fa-exclamation-circle {\n      color: #dc3545;\n    }\n  }\n}"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExecutionPanelComponent, [{
        type: Component,
        args: [{ selector: 'app-execution-panel', standalone: true, imports: [CommonModule], template: "<div class=\"execution-panel\" \n     [class.active]=\"executionStatus !== 'idle' && !isPanelClosed\"\n     [class.resizing]=\"isResizing\"\n     [style.height.px]=\"executionStatus !== 'idle' && !isPanelClosed ? panelHeight : 0\">\n  \n  <!-- Resize handle -->\n  <div class=\"resize-handle\" \n       *ngIf=\"executionStatus !== 'idle' && !isPanelClosed\"\n       (mousedown)=\"onResizeStart($event)\">\n    <div class=\"resize-grip\"></div>\n  </div>\n  \n  <div class=\"panel-header\">\n    <h3 class=\"panel-title\">\n      <i class=\"fas fa-terminal\"></i> Flow Execution\n    </h3>\n    <div class=\"header-actions\">\n      <button \n        class=\"icon-button\"\n        (click)=\"clearLogs()\"\n        title=\"Clear logs\"\n        [disabled]=\"executionStatus === 'running'\">\n        <i class=\"fas fa-trash\"></i>\n      </button>\n      <button \n        class=\"icon-button close\"\n        (click)=\"closePanel()\"\n        title=\"Close panel\">\n        <i class=\"fas fa-times\"></i>\n      </button>\n    </div>\n  </div>\n  \n  <div class=\"execution-controls\">\n    <div class=\"status-indicator\" [class]=\"'status-' + executionStatus\">\n      <i class=\"fas\" [ngClass]=\"{\n        'fa-circle': executionStatus === 'idle',\n        'fa-spinner fa-spin': executionStatus === 'running',\n        'fa-pause-circle': executionStatus === 'paused',\n        'fa-check-circle': executionStatus === 'completed',\n        'fa-exclamation-circle': executionStatus === 'error'\n      }\"></i>\n      <span>{{ executionStatus | titlecase }}</span>\n    </div>\n    \n    <div class=\"control-buttons\">\n      <button \n        class=\"control-button\"\n        (click)=\"onPause()\"\n        [disabled]=\"executionStatus !== 'running'\"\n        title=\"Pause execution\">\n        <i class=\"fas fa-pause\"></i>\n      </button>\n      <button \n        class=\"control-button\"\n        (click)=\"onResume()\"\n        [disabled]=\"executionStatus !== 'paused'\"\n        title=\"Resume execution\">\n        <i class=\"fas fa-play\"></i>\n      </button>\n      <button \n        class=\"control-button stop\"\n        (click)=\"onStop()\"\n        [disabled]=\"executionStatus !== 'running' && executionStatus !== 'paused'\"\n        title=\"Stop execution\">\n        <i class=\"fas fa-stop\"></i>\n      </button>\n    </div>\n  </div>\n  \n  <div class=\"logs-container\">\n    <div *ngIf=\"executionLogs.length === 0\" class=\"empty-logs\">\n      <i class=\"fas fa-info-circle\"></i>\n      <p>No execution logs yet. Click \"Run Flow\" to start.</p>\n    </div>\n    \n    <div *ngFor=\"let log of executionLogs\" \n         class=\"log-entry\" \n         [class]=\"getLogClass(log.type)\"\n         [class.current-step]=\"log.stepId === currentStepId && currentStepId !== 0\">\n      <div class=\"log-timestamp\">{{ formatTimestamp(log.timestamp) }}</div>\n      <div class=\"log-icon\">\n        <i class=\"fas\" [ngClass]=\"getLogIcon(log.type)\"></i>\n      </div>\n      <div class=\"log-content\">\n        <div class=\"log-step\" *ngIf=\"log.stepId\">\n          <strong>{{ log.stepName }}</strong>\n        </div>\n        <div class=\"log-message\">{{ log.message }}</div>\n        <div class=\"log-data\" *ngIf=\"log.data\">\n          <pre>{{ log.data | json }}</pre>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<!-- Minimized indicator when panel is closed but execution is active -->\n<div class=\"execution-indicator\" \n     *ngIf=\"executionStatus !== 'idle' && isPanelClosed\"\n     (click)=\"isPanelClosed = false\"\n     title=\"Click to reopen execution panel\">\n  <i class=\"fas\" [ngClass]=\"{\n    'fa-spinner fa-spin': executionStatus === 'running',\n    'fa-pause-circle': executionStatus === 'paused',\n    'fa-check-circle': executionStatus === 'completed',\n    'fa-exclamation-circle': executionStatus === 'error'\n  }\"></i>\n  <span>{{ executionStatus | titlecase }}</span>\n</div>", styles: [".execution-panel {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 0;\n  background: var(--white-color);\n  border-top: 1px solid var(--gray-700);\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n  transition: height 0.3s ease;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  \n  &.active {\n    transition: none; // Disable transition during resize\n  }\n  \n  &.resizing {\n    user-select: none;\n    \n    .resize-grip {\n      opacity: 1 !important;\n    }\n  }\n}\n\n.resize-handle {\n  position: absolute;\n  top: -5px;\n  left: 0;\n  right: 0;\n  height: 10px;\n  cursor: ns-resize;\n  z-index: 10;\n  \n  &:hover .resize-grip {\n    opacity: 1;\n  }\n}\n\n.resize-grip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  height: 4px;\n  background: var(--gray-800);\n  border-radius: 2px;\n  opacity: 0;\n  transition: opacity 0.2s;\n  \n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: var(--gray-700);\n  }\n  \n  &::before {\n    top: -2px;\n  }\n  \n  &::after {\n    bottom: -2px;\n  }\n}\n\n.panel-header {\n  padding: 1rem 1.5rem;\n  border-bottom: 1px solid var(--gray-700);\n  background: var(--gray-600);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.panel-title {\n  font-size: 1rem;\n  font-weight: 600;\n  margin: 0;\n  color: var(--gray-900);\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  \n  i {\n    color: var(--mj-blue);\n  }\n}\n\n.header-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.icon-button {\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: var(--gray-800);\n  border-radius: 50%;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all var(--transition-time);\n  \n  &:hover:not(:disabled) {\n    background: var(--gray-700);\n    color: var(--gray-900);\n  }\n  \n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  \n  &.close {\n    &:hover:not(:disabled) {\n      background: #dc3545;\n      color: white;\n    }\n  }\n}\n\n.execution-controls {\n  padding: 0.75rem 1.5rem;\n  background: var(--gray-600);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--gray-700);\n}\n\n.status-indicator {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  \n  &.status-idle {\n    color: var(--gray-800);\n  }\n  \n  &.status-running {\n    color: var(--mj-blue);\n  }\n  \n  &.status-paused {\n    color: #ffc107;\n  }\n  \n  &.status-completed {\n    color: #28a745;\n  }\n  \n  &.status-error {\n    color: #dc3545;\n  }\n}\n\n.control-buttons {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.control-button {\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--gray-700);\n  background: var(--white-color);\n  color: var(--gray-900);\n  border-radius: var(--border-radius);\n  cursor: pointer;\n  font-size: 0.875rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n  transition: all var(--transition-time);\n  \n  &:hover:not(:disabled) {\n    background: var(--gray-700);\n    border-color: var(--gray-800);\n  }\n  \n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  \n  &.stop {\n    color: #dc3545;\n    border-color: #dc3545;\n    \n    &:hover:not(:disabled) {\n      background: #dc3545;\n      color: white;\n    }\n  }\n}\n\n.logs-container {\n  flex: 1;\n  overflow-y: auto;\n  background: var(--gray-600);\n  padding: 1rem;\n}\n\n.empty-logs {\n  text-align: center;\n  color: var(--gray-800);\n  padding: 2rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 1rem;\n  \n  i {\n    font-size: 2rem;\n    color: var(--mj-blue);\n  }\n  \n  p {\n    margin: 0;\n    font-size: 0.875rem;\n  }\n}\n\n.log-entry {\n  display: flex;\n  gap: 0.75rem;\n  padding: 0.5rem;\n  margin-bottom: 0.5rem;\n  background: var(--white-color);\n  border-radius: var(--border-radius);\n  border-left: 3px solid transparent;\n  font-size: 0.875rem;\n  transition: all var(--transition-time);\n  \n  &.log-start {\n    border-left-color: var(--mj-blue);\n  }\n  \n  &.log-success {\n    border-left-color: #28a745;\n  }\n  \n  &.log-error {\n    border-left-color: #dc3545;\n  }\n  \n  &.log-info {\n    border-left-color: #17a2b8;\n  }\n  \n  &.current-step {\n    background: #e3f2fd;\n    box-shadow: 0 2px 4px rgba(0, 118, 182, 0.2);\n  }\n}\n\n.log-timestamp {\n  color: var(--gray-800);\n  font-family: monospace;\n  font-size: 0.75rem;\n  white-space: nowrap;\n  padding-top: 0.125rem;\n}\n\n.log-icon {\n  flex-shrink: 0;\n  width: 20px;\n  text-align: center;\n  \n  .fa-play-circle {\n    color: var(--mj-blue);\n  }\n  \n  .fa-check-circle {\n    color: #28a745;\n  }\n  \n  .fa-exclamation-circle {\n    color: #dc3545;\n  }\n  \n  .fa-info-circle {\n    color: #17a2b8;\n  }\n}\n\n.log-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.log-step {\n  margin-bottom: 0.25rem;\n  color: var(--gray-900);\n}\n\n.log-message {\n  color: var(--gray-800);\n  word-wrap: break-word;\n}\n\n.log-data {\n  margin-top: 0.5rem;\n  \n  pre {\n    margin: 0;\n    padding: 0.5rem;\n    background: var(--gray-600);\n    border-radius: var(--border-radius);\n    font-size: 0.75rem;\n    overflow-x: auto;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n}\n\n// Minimized execution indicator\n.execution-indicator {\n  position: fixed;\n  bottom: 20px;\n  left: 50%;\n  transform: translateX(-50%);\n  background: var(--white-color);\n  border: 1px solid var(--gray-700);\n  border-radius: 30px;\n  padding: 0.5rem 1.5rem;\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n  cursor: pointer;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n  transition: all var(--transition-time);\n  z-index: 100;\n  font-size: 0.875rem;\n  font-weight: 600;\n  \n  &:hover {\n    transform: translateX(-50%) translateY(-2px);\n    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);\n  }\n  \n  i {\n    font-size: 1rem;\n    \n    &.fa-spinner {\n      color: var(--mj-blue);\n    }\n    \n    &.fa-pause-circle {\n      color: #ffc107;\n    }\n    \n    &.fa-check-circle {\n      color: #28a745;\n    }\n    \n    &.fa-exclamation-circle {\n      color: #dc3545;\n    }\n  }\n}"] }]
    }], () => [{ type: i1.FlowExecutorService }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExecutionPanelComponent, { className: "ExecutionPanelComponent", filePath: "src/lib/custom/AIAgents/FlowAgentType/flow-editor-integration/components/execution-panel/execution-panel.component.ts", lineNumber: 13 }); })();
//# sourceMappingURL=execution-panel.component.js.map