import { Component, Output, EventEmitter, ViewChild } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { MJReactComponent } from '@memberjunction/ng-react';
import { SharedService } from '@memberjunction/ng-shared';
import * as i0 from "@angular/core";
import * as i1 from "../../services/component-studio-state.service";
import * as i2 from "@angular/common";
import * as i3 from "@memberjunction/ng-react";
const _c0 = ["reactComponent"];
const _forTrack0 = ($index, $item) => $item.Size;
function ComponentPreviewComponent_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 13);
    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_3_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.StopComponent()); });
    i0.ɵɵelement(1, "i", 14);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3, "Stop");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(4, "button", 15);
    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_3_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RefreshComponent()); });
    i0.ɵɵelement(5, "i", 16);
    i0.ɵɵelementStart(6, "span");
    i0.ɵɵtext(7, "Refresh");
    i0.ɵɵelementEnd()();
} }
function ComponentPreviewComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 17);
    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_3_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RunSelectedComponent()); });
    i0.ɵɵelement(1, "i", 18);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3, "Run");
    i0.ɵɵelementEnd()();
} }
function ComponentPreviewComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵconditionalCreate(0, ComponentPreviewComponent_Conditional_3_Conditional_0_Template, 8, 0)(1, ComponentPreviewComponent_Conditional_3_Conditional_1_Template, 4, 0, "button", 12);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵconditional(ctx_r1.State.IsRunning ? 0 : 1);
} }
function ComponentPreviewComponent_Conditional_5_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 20);
    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_5_For_2_Template_button_click_0_listener() { const preset_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SetViewport(preset_r5.Size)); });
    i0.ɵɵelement(1, "i", 21);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const preset_r5 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("active", ctx_r1.ActiveViewport === preset_r5.Size);
    i0.ɵɵproperty("title", preset_r5.Label);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", preset_r5.Icon);
} }
function ComponentPreviewComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 5);
    i0.ɵɵrepeaterCreate(1, ComponentPreviewComponent_Conditional_5_For_2_Template, 2, 4, "button", 19, _forTrack0);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r1.ViewportPresets);
} }
function ComponentPreviewComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 22);
    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.SendErrorToAI()); });
    i0.ɵɵelement(1, "i", 23);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3, "Ask AI to Fix");
    i0.ɵɵelementEnd()();
} }
function ComponentPreviewComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 8);
    i0.ɵɵelement(1, "i", 24);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.GetComponentName(), " ");
} }
function ComponentPreviewComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 10);
    i0.ɵɵelement(1, "i", 25);
    i0.ɵɵelementStart(2, "h3");
    i0.ɵɵtext(3, "Select a component to preview");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5, "Choose a component from the sidebar to see its live preview here.");
    i0.ɵɵelementEnd()();
} }
function ComponentPreviewComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 11);
    i0.ɵɵelement(1, "i", 26);
    i0.ɵɵelementStart(2, "h3");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "button", 27);
    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_11_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.RunSelectedComponent()); });
    i0.ɵɵelement(7, "i", 18);
    i0.ɵɵtext(8, " Run Component ");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(ctx_r1.GetComponentName());
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r1.GetComponentDescription() || "No description available");
} }
function ComponentPreviewComponent_Conditional_12_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 30)(1, "div", 31)(2, "div", 32);
    i0.ɵɵelement(3, "i", 33);
    i0.ɵɵelementStart(4, "span", 34);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(6, "p", 35);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "div", 36)(9, "button", 37);
    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_12_Conditional_3_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.RefreshComponent()); });
    i0.ɵɵelement(10, "i", 16);
    i0.ɵɵtext(11, " Retry ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "button", 38);
    i0.ɵɵlistener("click", function ComponentPreviewComponent_Conditional_12_Conditional_3_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.SendErrorToAI()); });
    i0.ɵɵelement(13, "i", 23);
    i0.ɵɵtext(14, " Ask AI to Fix ");
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.State.CurrentError.type);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r1.State.CurrentError.message);
} }
function ComponentPreviewComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 28)(1, "mj-react-component", 29, 0);
    i0.ɵɵlistener("componentEvent", function ComponentPreviewComponent_Conditional_12_Template_mj_react_component_componentEvent_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnComponentEvent($event)); })("openEntityRecord", function ComponentPreviewComponent_Conditional_12_Template_mj_react_component_openEntityRecord_1_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnOpenEntityRecord($event)); });
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(3, ComponentPreviewComponent_Conditional_12_Conditional_3_Template, 15, 2, "div", 30);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵstyleProp("max-width", ctx_r1.GetPreviewContainerMaxWidth());
    i0.ɵɵclassProp("mobile", ctx_r1.ActiveViewport === "mobile")("tablet", ctx_r1.ActiveViewport === "tablet")("desktop", ctx_r1.ActiveViewport === "desktop");
    i0.ɵɵadvance();
    i0.ɵɵproperty("component", ctx_r1.LocalComponentSpec);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r1.State.CurrentError ? 3 : -1);
} }
/**
 * Component Preview - TOP section of CENTER panel.
 * Renders the live React component preview with toolbar controls.
 */
export class ComponentPreviewComponent {
    State;
    cdr;
    ReactComponentRef;
    AskAIToFix = new EventEmitter();
    // --- Viewport ---
    ActiveViewport = 'desktop';
    ViewportPresets = [
        { Size: 'mobile', Label: 'Mobile (375px)', Icon: 'fa-mobile-screen', MaxWidth: '375px' },
        { Size: 'tablet', Label: 'Tablet (768px)', Icon: 'fa-tablet-screen-button', MaxWidth: '768px' },
        { Size: 'desktop', Label: 'Desktop (100%)', Icon: 'fa-desktop', MaxWidth: '100%' }
    ];
    // --- Local spec for refresh cycle ---
    LocalComponentSpec = null;
    destroy$ = new Subject();
    constructor(State, cdr) {
        this.State = State;
        this.cdr = cdr;
    }
    ngOnInit() {
        this.syncSpecFromState();
        this.State.StateChanged
            .pipe(takeUntil(this.destroy$))
            .subscribe(() => {
            this.syncSpecFromState();
            this.cdr.detectChanges();
        });
        this.State.RefreshComponent
            .pipe(takeUntil(this.destroy$))
            .subscribe(() => {
            this.refreshPreview();
        });
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    // ============================================================
    // TOOLBAR ACTIONS
    // ============================================================
    RunSelectedComponent() {
        if (this.State.SelectedComponent) {
            this.State.RunComponent(this.State.SelectedComponent);
        }
    }
    StopComponent() {
        MJReactComponent.forceClearRegistries();
        this.State.StopComponent();
    }
    RefreshComponent() {
        if (this.State.SelectedComponent && this.State.IsRunning) {
            MJReactComponent.forceClearRegistries();
            this.refreshPreview();
        }
    }
    SetViewport(size) {
        this.ActiveViewport = size;
        this.cdr.detectChanges();
    }
    SendErrorToAI() {
        if (this.State.CurrentError) {
            this.AskAIToFix.emit(this.State.CurrentError);
            this.State.SendErrorToAI.emit(this.State.CurrentError);
        }
    }
    // ============================================================
    // VIEWPORT HELPERS
    // ============================================================
    GetActivePreset() {
        return this.ViewportPresets.find(p => p.Size === this.ActiveViewport) || this.ViewportPresets[2];
    }
    GetPreviewContainerMaxWidth() {
        return this.GetActivePreset().MaxWidth;
    }
    // ============================================================
    // REACT COMPONENT EVENTS
    // ============================================================
    OnComponentEvent(event) {
        if (event.type === 'error') {
            this.State.CurrentError = {
                type: event.payload?.source || 'Component Error',
                message: event.payload?.error || 'An error occurred while rendering the component',
                technicalDetails: event.payload?.errorInfo || event.payload
            };
            this.cdr.detectChanges();
        }
        else if (event.type === 'loaded') {
            const resolvedSpec = event.payload?.resolvedSpec;
            if (resolvedSpec) {
                this.State.UpdateWithResolvedSpec(resolvedSpec);
            }
        }
    }
    OnOpenEntityRecord(event) {
        SharedService.Instance.OpenEntityRecord(event.entityName, event.key);
    }
    // ============================================================
    // STATE HELPERS
    // ============================================================
    GetComponentName() {
        if (!this.State.SelectedComponent)
            return '';
        return this.State.GetComponentName(this.State.SelectedComponent);
    }
    GetComponentDescription() {
        if (!this.State.SelectedComponent)
            return undefined;
        return this.State.GetComponentDescription(this.State.SelectedComponent);
    }
    // ============================================================
    // PRIVATE
    // ============================================================
    syncSpecFromState() {
        this.LocalComponentSpec = this.State.ComponentSpec;
    }
    /**
     * Refresh the preview by nulling the spec, detecting changes,
     * then restoring the spec after a short delay.
     */
    refreshPreview() {
        if (!this.State.SelectedComponent)
            return;
        const spec = this.State.GetComponentSpec(this.State.SelectedComponent);
        // Null out to force React to unmount
        this.LocalComponentSpec = null;
        this.cdr.detectChanges();
        // Re-set after a brief pause to force fresh mount
        setTimeout(() => {
            this.LocalComponentSpec = spec;
            this.State.ComponentSpec = spec;
            this.State.CurrentError = null;
            try {
                this.cdr.detectChanges();
            }
            catch (error) {
                console.error('Error during refresh detectChanges:', error);
            }
        }, 10);
    }
    static ɵfac = function ComponentPreviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentPreviewComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentPreviewComponent, selectors: [["mj-component-preview"]], viewQuery: function ComponentPreviewComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.ReactComponentRef = _t.first);
        } }, outputs: { AskAIToFix: "AskAIToFix" }, standalone: false, decls: 13, vars: 5, consts: [["reactComponent", ""], [1, "component-preview"], [1, "preview-toolbar"], [1, "toolbar-left"], [1, "toolbar-center"], [1, "viewport-selector"], [1, "toolbar-right"], ["title", "Ask AI to fix this error", 1, "toolbar-btn", "ai-fix-btn"], [1, "running-indicator"], [1, "preview-area"], [1, "empty-state"], [1, "empty-state", "run-state"], ["title", "Run component", 1, "toolbar-btn", "run-btn"], ["title", "Stop component", 1, "toolbar-btn", "stop-btn", 3, "click"], [1, "fa-solid", "fa-stop"], ["title", "Refresh component", 1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-rotate-right"], ["title", "Run component", 1, "toolbar-btn", "run-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "viewport-btn", 3, "active", "title"], [1, "viewport-btn", 3, "click", "title"], [1, "fa-solid", 3, "ngClass"], ["title", "Ask AI to fix this error", 1, "toolbar-btn", "ai-fix-btn", 3, "click"], [1, "fa-solid", "fa-wand-magic-sparkles"], [1, "fa-solid", "fa-circle", "running-dot"], [1, "fa-solid", "fa-eye", "fa-3x"], [1, "fa-solid", "fa-play-circle", "fa-3x"], [1, "run-component-btn", 3, "click"], [1, "preview-container"], [3, "componentEvent", "openEntityRecord", "component"], [1, "error-overlay"], [1, "error-overlay-content"], [1, "error-overlay-header"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "error-overlay-title"], [1, "error-overlay-message"], [1, "error-overlay-actions"], [1, "toolbar-btn", 3, "click"], [1, "toolbar-btn", "ai-fix-btn", 3, "click"]], template: function ComponentPreviewComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
            i0.ɵɵconditionalCreate(3, ComponentPreviewComponent_Conditional_3_Template, 2, 1);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "div", 4);
            i0.ɵɵconditionalCreate(5, ComponentPreviewComponent_Conditional_5_Template, 3, 0, "div", 5);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "div", 6);
            i0.ɵɵconditionalCreate(7, ComponentPreviewComponent_Conditional_7_Template, 4, 0, "button", 7);
            i0.ɵɵconditionalCreate(8, ComponentPreviewComponent_Conditional_8_Template, 3, 1, "span", 8);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(9, "div", 9);
            i0.ɵɵconditionalCreate(10, ComponentPreviewComponent_Conditional_10_Template, 6, 0, "div", 10)(11, ComponentPreviewComponent_Conditional_11_Template, 9, 2, "div", 11)(12, ComponentPreviewComponent_Conditional_12_Template, 4, 10);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(3);
            i0.ɵɵconditional(ctx.State.SelectedComponent ? 3 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.State.IsRunning ? 5 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.State.CurrentError ? 7 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.State.IsRunning && ctx.State.SelectedComponent ? 8 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(!ctx.State.SelectedComponent ? 10 : !ctx.State.IsRunning ? 11 : ctx.LocalComponentSpec ? 12 : -1);
        } }, dependencies: [i2.NgClass, i3.MJReactComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.component-preview[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n\n\n\n\n\n.preview-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  min-height: 42px;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-left[_ngcontent-%COMP%], \n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-center[_ngcontent-%COMP%], \n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-left[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n}\n\n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-center[_ngcontent-%COMP%] {\n  flex: 1 1 auto;\n  justify-content: center;\n}\n\n.preview-toolbar[_ngcontent-%COMP%]   .toolbar-right[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 11px;\n}\n\n.run-btn[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.run-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-success) 60%, transparent);\n}\n\n.stop-btn[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.stop-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 60%, transparent);\n}\n\n.ai-fix-btn[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.ai-fix-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 60%, transparent);\n}\n\n.running-indicator[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.running-indicator[_ngcontent-%COMP%]   .running-dot[_ngcontent-%COMP%] {\n  font-size: 7px;\n  color: var(--mj-status-success);\n  animation: _ngcontent-%COMP%_pulse-dot 1.5s ease-in-out infinite;\n}\n\n@keyframes _ngcontent-%COMP%_pulse-dot {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.3; }\n}\n\n\n\n\n\n\n.viewport-selector[_ngcontent-%COMP%] {\n  display: inline-flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.viewport-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.15s ease;\n}\n\n.viewport-btn[_ngcontent-%COMP%]:not(:last-child) {\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.viewport-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.viewport-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.viewport-btn.active[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.preview-area[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  position: relative;\n  display: flex;\n  justify-content: center;\n}\n\n.preview-container[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  transition: max-width 0.3s ease;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.preview-container.mobile[_ngcontent-%COMP%], \n.preview-container.tablet[_ngcontent-%COMP%] {\n  border-left: 1px solid var(--mj-border-default);\n  border-right: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.preview-container.desktop[_ngcontent-%COMP%] {\n  max-width: 100% !important;\n}\n\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  text-align: center;\n  padding: 40px 24px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  color: var(--mj-border-default);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n.run-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n.run-component-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 20px;\n  padding: 10px 24px;\n  border: none;\n  border-radius: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-component-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.run-component-btn[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.run-component-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 13px;\n}\n\n\n\n\n\n\n.error-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-top: 2px solid var(--mj-status-error);\n  backdrop-filter: blur(4px);\n  padding: 16px 20px;\n  animation: _ngcontent-%COMP%_slide-up 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slide-up {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.error-overlay-content[_ngcontent-%COMP%] {\n  max-width: 600px;\n}\n\n.error-overlay-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.error-overlay-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 16px;\n}\n\n.error-overlay-header[_ngcontent-%COMP%]   .error-overlay-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-status-error);\n}\n\n.error-overlay-message[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n}\n\n.error-overlay-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentPreviewComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-component-preview', template: "<div class=\"component-preview\">\n  <!-- Toolbar -->\n  <div class=\"preview-toolbar\">\n    <div class=\"toolbar-left\">\n      @if (State.SelectedComponent) {\n        @if (State.IsRunning) {\n          <button class=\"toolbar-btn stop-btn\" (click)=\"StopComponent()\" title=\"Stop component\">\n            <i class=\"fa-solid fa-stop\"></i>\n            <span>Stop</span>\n          </button>\n          <button class=\"toolbar-btn\" (click)=\"RefreshComponent()\" title=\"Refresh component\">\n            <i class=\"fa-solid fa-rotate-right\"></i>\n            <span>Refresh</span>\n          </button>\n        } @else {\n          <button class=\"toolbar-btn run-btn\" (click)=\"RunSelectedComponent()\" title=\"Run component\">\n            <i class=\"fa-solid fa-play\"></i>\n            <span>Run</span>\n          </button>\n        }\n      }\n    </div>\n\n    <div class=\"toolbar-center\">\n      <!-- Viewport Size Selector (segmented control) -->\n      @if (State.IsRunning) {\n        <div class=\"viewport-selector\">\n          @for (preset of ViewportPresets; track preset.Size) {\n            <button\n              class=\"viewport-btn\"\n              [class.active]=\"ActiveViewport === preset.Size\"\n              (click)=\"SetViewport(preset.Size)\"\n              [title]=\"preset.Label\">\n              <i class=\"fa-solid\" [ngClass]=\"preset.Icon\"></i>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"toolbar-right\">\n      @if (State.CurrentError) {\n        <button class=\"toolbar-btn ai-fix-btn\" (click)=\"SendErrorToAI()\" title=\"Ask AI to fix this error\">\n          <i class=\"fa-solid fa-wand-magic-sparkles\"></i>\n          <span>Ask AI to Fix</span>\n        </button>\n      }\n      @if (State.IsRunning && State.SelectedComponent) {\n        <span class=\"running-indicator\">\n          <i class=\"fa-solid fa-circle running-dot\"></i>\n          {{ GetComponentName() }}\n        </span>\n      }\n    </div>\n  </div>\n\n  <!-- Preview Area -->\n  <div class=\"preview-area\">\n    @if (!State.SelectedComponent) {\n      <!-- Empty State: No component selected -->\n      <div class=\"empty-state\">\n        <i class=\"fa-solid fa-eye fa-3x\"></i>\n        <h3>Select a component to preview</h3>\n        <p>Choose a component from the sidebar to see its live preview here.</p>\n      </div>\n    } @else if (!State.IsRunning) {\n      <!-- Component selected but not running -->\n      <div class=\"empty-state run-state\">\n        <i class=\"fa-solid fa-play-circle fa-3x\"></i>\n        <h3>{{ GetComponentName() }}</h3>\n        <p>{{ GetComponentDescription() || 'No description available' }}</p>\n        <button class=\"run-component-btn\" (click)=\"RunSelectedComponent()\">\n          <i class=\"fa-solid fa-play\"></i> Run Component\n        </button>\n      </div>\n    } @else if (LocalComponentSpec) {\n      <!-- Live Preview Container -->\n      <div class=\"preview-container\"\n           [style.max-width]=\"GetPreviewContainerMaxWidth()\"\n           [class.mobile]=\"ActiveViewport === 'mobile'\"\n           [class.tablet]=\"ActiveViewport === 'tablet'\"\n           [class.desktop]=\"ActiveViewport === 'desktop'\">\n        <mj-react-component\n          #reactComponent\n          [component]=\"LocalComponentSpec\"\n          (componentEvent)=\"OnComponentEvent($event)\"\n          (openEntityRecord)=\"OnOpenEntityRecord($event)\">\n        </mj-react-component>\n      </div>\n\n      <!-- Error Overlay (inline, does not replace the component) -->\n      @if (State.CurrentError) {\n        <div class=\"error-overlay\">\n          <div class=\"error-overlay-content\">\n            <div class=\"error-overlay-header\">\n              <i class=\"fa-solid fa-exclamation-triangle\"></i>\n              <span class=\"error-overlay-title\">{{ State.CurrentError.type }}</span>\n            </div>\n            <p class=\"error-overlay-message\">{{ State.CurrentError.message }}</p>\n            <div class=\"error-overlay-actions\">\n              <button class=\"toolbar-btn\" (click)=\"RefreshComponent()\">\n                <i class=\"fa-solid fa-rotate-right\"></i> Retry\n              </button>\n              <button class=\"toolbar-btn ai-fix-btn\" (click)=\"SendErrorToAI()\">\n                <i class=\"fa-solid fa-wand-magic-sparkles\"></i> Ask AI to Fix\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.component-preview {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n/* ============================================================\n   TOOLBAR\n   ============================================================ */\n\n.preview-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 12px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  min-height: 42px;\n  gap: 12px;\n  flex-shrink: 0;\n}\n\n.preview-toolbar .toolbar-left,\n.preview-toolbar .toolbar-center,\n.preview-toolbar .toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.preview-toolbar .toolbar-left {\n  flex: 0 0 auto;\n}\n\n.preview-toolbar .toolbar-center {\n  flex: 1 1 auto;\n  justify-content: center;\n}\n\n.preview-toolbar .toolbar-right {\n  flex: 0 0 auto;\n}\n\n.toolbar-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 5px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  white-space: nowrap;\n}\n\n.toolbar-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n}\n\n.toolbar-btn i {\n  font-size: 11px;\n}\n\n.run-btn {\n  color: var(--mj-status-success);\n  border-color: color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.run-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-success) 60%, transparent);\n}\n\n.stop-btn {\n  color: var(--mj-status-error);\n  border-color: color-mix(in srgb, var(--mj-status-error) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.stop-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-status-error) 60%, transparent);\n}\n\n.ai-fix-btn {\n  color: var(--mj-brand-primary);\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.ai-fix-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 60%, transparent);\n}\n\n.running-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  max-width: 200px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.running-indicator .running-dot {\n  font-size: 7px;\n  color: var(--mj-status-success);\n  animation: pulse-dot 1.5s ease-in-out infinite;\n}\n\n@keyframes pulse-dot {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.3; }\n}\n\n/* ============================================================\n   VIEWPORT SELECTOR (segmented control)\n   ============================================================ */\n\n.viewport-selector {\n  display: inline-flex;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  overflow: hidden;\n  background: var(--mj-bg-surface);\n}\n\n.viewport-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 28px;\n  border: none;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.15s ease;\n}\n\n.viewport-btn:not(:last-child) {\n  border-right: 1px solid var(--mj-border-default);\n}\n\n.viewport-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.viewport-btn.active {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.viewport-btn.active:hover {\n  background: var(--mj-brand-primary);\n}\n\n/* ============================================================\n   PREVIEW AREA\n   ============================================================ */\n\n.preview-area {\n  flex: 1;\n  overflow: auto;\n  position: relative;\n  display: flex;\n  justify-content: center;\n}\n\n.preview-container {\n  width: 100%;\n  height: 100%;\n  margin: 0 auto;\n  transition: max-width 0.3s ease;\n  overflow: auto;\n  background: var(--mj-bg-surface);\n}\n\n.preview-container.mobile,\n.preview-container.tablet {\n  border-left: 1px solid var(--mj-border-default);\n  border-right: 1px solid var(--mj-border-default);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.preview-container.desktop {\n  max-width: 100% !important;\n}\n\n/* ============================================================\n   EMPTY STATES\n   ============================================================ */\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n  text-align: center;\n  padding: 40px 24px;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state i {\n  margin-bottom: 16px;\n  color: var(--mj-border-default);\n}\n\n.empty-state h3 {\n  margin: 0 0 8px 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.empty-state p {\n  margin: 0;\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  max-width: 320px;\n  line-height: 1.5;\n}\n\n.run-state h3 {\n  color: var(--mj-text-primary);\n}\n\n.run-component-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 20px;\n  padding: 10px 24px;\n  border: none;\n  border-radius: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.run-component-btn:hover {\n  background: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.run-component-btn:active {\n  transform: translateY(0);\n}\n\n.run-component-btn i {\n  font-size: 13px;\n}\n\n/* ============================================================\n   ERROR OVERLAY\n   ============================================================ */\n\n.error-overlay {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 10;\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-top: 2px solid var(--mj-status-error);\n  backdrop-filter: blur(4px);\n  padding: 16px 20px;\n  animation: slide-up 0.2s ease-out;\n}\n\n@keyframes slide-up {\n  from {\n    transform: translateY(100%);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.error-overlay-content {\n  max-width: 600px;\n}\n\n.error-overlay-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 6px;\n}\n\n.error-overlay-header i {\n  color: var(--mj-status-error);\n  font-size: 16px;\n}\n\n.error-overlay-header .error-overlay-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-status-error);\n}\n\n.error-overlay-message {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n}\n\n.error-overlay-actions {\n  display: flex;\n  gap: 8px;\n}\n"] }]
    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { ReactComponentRef: [{
            type: ViewChild,
            args: ['reactComponent']
        }], AskAIToFix: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentPreviewComponent, { className: "ComponentPreviewComponent", filePath: "src/ComponentStudio/components/workspace/component-preview.component.ts", lineNumber: 42 }); })();
//# sourceMappingURL=component-preview.component.js.map