import { Component, ViewChild } from '@angular/core';
import { unifiedMergeView, getChunks, goToNextChunk, goToPreviousChunk } from '@codemirror/merge';
import * as i0 from "@angular/core";
import * as i1 from "../../services/component-studio-state.service";
import * as i2 from "@angular/forms";
import * as i3 from "@memberjunction/ng-code-editor";
import * as i4 from "@memberjunction/ng-ui-components";
const _c0 = ["diffEditor"];
const _forTrack0 = ($index, $item) => $item.title;
function CodeEditorPanelComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 16);
} }
function CodeEditorPanelComponent_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "span", 17);
} }
function CodeEditorPanelComponent_For_3_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 15);
    i0.ɵɵlistener("click", function CodeEditorPanelComponent_For_3_Template_button_click_0_listener() { const ɵ$index_5_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SelectTab(ɵ$index_5_r2)); });
    i0.ɵɵconditionalCreate(1, CodeEditorPanelComponent_For_3_Conditional_1_Template, 1, 0, "i", 16);
    i0.ɵɵtext(2);
    i0.ɵɵconditionalCreate(3, CodeEditorPanelComponent_For_3_Conditional_3_Template, 1, 0, "span", 17);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const section_r4 = ctx.$implicit;
    const ɵ$index_5_r2 = ctx.$index;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("active", ctx_r2.ActiveTabIndex === ɵ$index_5_r2);
    i0.ɵɵadvance();
    i0.ɵɵconditional(section_r4.isDependency ? 1 : -1);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", section_r4.title, " ");
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.HasChanges(section_r4) ? 3 : -1);
} }
function CodeEditorPanelComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 8)(1, "span", 18);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "button", 19);
    i0.ɵɵlistener("click", function CodeEditorPanelComponent_Conditional_13_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.GoToPreviousChunk()); });
    i0.ɵɵelement(4, "i", 20);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "button", 21);
    i0.ɵɵlistener("click", function CodeEditorPanelComponent_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.GoToNextChunk()); });
    i0.ɵɵelement(6, "i", 22);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate2("", ctx_r2.DiffChunkCount, " change", ctx_r2.DiffChunkCount !== 1 ? "s" : "");
    i0.ɵɵadvance();
    i0.ɵɵproperty("disabled", ctx_r2.DiffChunkCount === 0);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("disabled", ctx_r2.DiffChunkCount === 0);
} }
function CodeEditorPanelComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 12)(1, "button", 23);
    i0.ɵɵlistener("click", function CodeEditorPanelComponent_Conditional_17_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.ApplyChanges()); });
    i0.ɵɵelement(2, "i", 24);
    i0.ɵɵtext(3, " Apply ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "button", 25);
    i0.ɵɵlistener("click", function CodeEditorPanelComponent_Conditional_17_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CancelChanges()); });
    i0.ɵɵtext(5, " Cancel ");
    i0.ɵɵelementEnd()();
} }
function CodeEditorPanelComponent_Conditional_19_Case_0_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 26)(1, "mj-code-editor", 28);
    i0.ɵɵtwoWayListener("ngModelChange", function CodeEditorPanelComponent_Conditional_19_Case_0_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.ActiveSection.code, $event) || (ctx_r2.ActiveSection.code = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("ngModelChange", function CodeEditorPanelComponent_Conditional_19_Case_0_Template_mj_code_editor_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnCodeChanged()); });
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.ActiveSection.code);
    i0.ɵɵproperty("language", "javascript")("indentWithTab", true)("placeholder", "Enter component code...");
} }
function CodeEditorPanelComponent_Conditional_19_Case_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 26);
    i0.ɵɵelement(1, "mj-code-editor", 29);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngModel", ctx_r2.ActiveSection.originalCode)("language", "javascript")("readonly", true);
} }
function CodeEditorPanelComponent_Conditional_19_Case_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 27);
    i0.ɵɵelement(1, "mj-code-editor", 30, 0);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngModel", ctx_r2.ActiveSection.code)("language", "javascript")("readonly", true)("extensions", ctx_r2.DiffExtensions);
} }
function CodeEditorPanelComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵconditionalCreate(0, CodeEditorPanelComponent_Conditional_19_Case_0_Template, 2, 4, "div", 26)(1, CodeEditorPanelComponent_Conditional_19_Case_1_Template, 2, 3, "div", 26)(2, CodeEditorPanelComponent_Conditional_19_Case_2_Template, 3, 4, "div", 27);
} if (rf & 2) {
    let tmp_1_0;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵconditional((tmp_1_0 = ctx_r2.ViewMode) === "current" ? 0 : tmp_1_0 === "original" ? 1 : tmp_1_0 === "diff" ? 2 : -1);
} }
function CodeEditorPanelComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-empty-state", 14);
} }
export class CodeEditorPanelComponent {
    State;
    cdr;
    ActiveTabIndex = 0;
    ViewMode = 'current';
    DiffExtensions = [];
    DiffChunkCount = 0;
    set DiffEditorRef(ref) {
        if (ref?.view) {
            this.diffView = ref.view;
            this.updateChunkCount();
        }
    }
    diffView = null;
    constructor(State, cdr) {
        this.State = State;
        this.cdr = cdr;
    }
    get ActiveSection() {
        const sections = this.State.CodeSections;
        if (sections.length === 0)
            return null;
        if (this.ActiveTabIndex >= sections.length) {
            this.ActiveTabIndex = 0;
        }
        return sections[this.ActiveTabIndex];
    }
    HasChanges(section) {
        return section.code !== section.originalCode;
    }
    SelectTab(index) {
        this.ActiveTabIndex = index;
        this.ViewMode = 'current';
        this.cdr.detectChanges();
    }
    SetViewMode(mode) {
        this.ViewMode = mode;
        if (mode === 'diff') {
            this.buildDiffExtensions();
        }
        this.cdr.detectChanges();
    }
    OnCodeChanged() {
        this.State.IsEditingCode = true;
    }
    ApplyChanges() {
        this.State.ApplyCodeChanges();
    }
    CancelChanges() {
        this.State.InitializeEditors();
        this.ActiveTabIndex = 0;
        this.ViewMode = 'current';
        this.cdr.detectChanges();
    }
    CopyCode() {
        const section = this.ActiveSection;
        if (!section)
            return;
        const text = this.ViewMode === 'original' ? section.originalCode : section.code;
        navigator.clipboard.writeText(text).catch(err => {
            console.error('Failed to copy code to clipboard:', err);
        });
    }
    GoToNextChunk() {
        if (this.diffView) {
            goToNextChunk(this.diffView);
        }
    }
    GoToPreviousChunk() {
        if (this.diffView) {
            goToPreviousChunk(this.diffView);
        }
    }
    updateChunkCount() {
        if (!this.diffView) {
            this.DiffChunkCount = 0;
            return;
        }
        // Schedule after the merge view has initialized
        Promise.resolve().then(() => {
            if (!this.diffView)
                return;
            const result = getChunks(this.diffView.state);
            this.DiffChunkCount = result ? result.chunks.length : 0;
            this.cdr.detectChanges();
        });
    }
    buildDiffExtensions() {
        const section = this.ActiveSection;
        if (!section) {
            this.DiffExtensions = [];
            return;
        }
        this.DiffExtensions = unifiedMergeView({
            original: section.originalCode,
            highlightChanges: true,
            gutter: true
        });
    }
    static ɵfac = function CodeEditorPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CodeEditorPanelComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CodeEditorPanelComponent, selectors: [["mj-code-editor-panel"]], viewQuery: function CodeEditorPanelComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.DiffEditorRef = _t.first);
        } }, standalone: false, decls: 21, vars: 9, consts: [["diffEditor", ""], [1, "code-editor-panel"], [1, "code-tab-bar"], [1, "code-tab", 3, "active"], [1, "code-toolbar"], [1, "view-mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "diff-nav"], [1, "toolbar-spacer"], ["title", "Copy code to clipboard", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "action-buttons"], [1, "code-editor-body"], ["Size", "compact", "Icon", "fa-solid fa-file-code", "Title", "No code sections available. Select a component to view its code."], [1, "code-tab", 3, "click"], [1, "fa-solid", "fa-puzzle-piece", "dep-icon"], ["title", "Modified", 1, "modified-dot"], [1, "diff-count"], ["title", "Previous change (\u2191)", 1, "icon-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["title", "Next change (\u2193)", 1, "icon-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", 3, "click"], [1, "editor-pane"], [1, "editor-pane", "diff-pane"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"], [3, "ngModel", "language", "readonly"], [3, "ngModel", "language", "readonly", "extensions"]], template: function CodeEditorPanelComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
            i0.ɵɵrepeaterCreate(2, CodeEditorPanelComponent_For_3_Template, 4, 5, "button", 3, _forTrack0);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "div", 4)(5, "div", 5)(6, "button", 6);
            i0.ɵɵlistener("click", function CodeEditorPanelComponent_Template_button_click_6_listener() { return ctx.SetViewMode("current"); });
            i0.ɵɵtext(7, " Current ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(8, "button", 6);
            i0.ɵɵlistener("click", function CodeEditorPanelComponent_Template_button_click_8_listener() { return ctx.SetViewMode("original"); });
            i0.ɵɵtext(9, " Original ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(10, "button", 6);
            i0.ɵɵlistener("click", function CodeEditorPanelComponent_Template_button_click_10_listener() { return ctx.SetViewMode("diff"); });
            i0.ɵɵelement(11, "i", 7);
            i0.ɵɵtext(12, " Diff ");
            i0.ɵɵelementEnd()();
            i0.ɵɵconditionalCreate(13, CodeEditorPanelComponent_Conditional_13_Template, 7, 4, "div", 8);
            i0.ɵɵelement(14, "span", 9);
            i0.ɵɵelementStart(15, "button", 10);
            i0.ɵɵlistener("click", function CodeEditorPanelComponent_Template_button_click_15_listener() { return ctx.CopyCode(); });
            i0.ɵɵelement(16, "i", 11);
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(17, CodeEditorPanelComponent_Conditional_17_Template, 6, 0, "div", 12);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(18, "div", 13);
            i0.ɵɵconditionalCreate(19, CodeEditorPanelComponent_Conditional_19_Template, 3, 1)(20, CodeEditorPanelComponent_Conditional_20_Template, 1, 0, "mj-empty-state", 14);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(2);
            i0.ɵɵrepeater(ctx.State.CodeSections);
            i0.ɵɵadvance(4);
            i0.ɵɵclassProp("active", ctx.ViewMode === "current");
            i0.ɵɵadvance(2);
            i0.ɵɵclassProp("active", ctx.ViewMode === "original");
            i0.ɵɵadvance(2);
            i0.ɵɵclassProp("active", ctx.ViewMode === "diff");
            i0.ɵɵadvance(3);
            i0.ɵɵconditional(ctx.ViewMode === "diff" ? 13 : -1);
            i0.ɵɵadvance(4);
            i0.ɵɵconditional(ctx.State.IsEditingCode ? 17 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.ActiveSection ? 19 : 20);
        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.MJButtonDirective, i4.MJEmptyStateComponent], styles: [".code-editor-panel[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    \n\n    .code-tab-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      height: 36px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      gap: 2px;\n      overflow-x: auto;\n    }\n\n    .code-tab[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n      font-family: inherit;\n      position: relative;\n    }\n\n    .code-tab[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .code-tab.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .dep-icon[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-brand-primary);\n    }\n\n    .modified-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--mj-status-error);\n      display: inline-block;\n      margin-left: 2px;\n    }\n\n    \n\n    .code-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 4px 8px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      gap: 8px;\n    }\n\n    .view-mode-toggle[_ngcontent-%COMP%] {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n    }\n\n    .toolbar-spacer[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .icon-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 28px;\n      height: 28px;\n      border: none;\n      border-radius: 6px;\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    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n\n    .diff-nav[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      margin-left: 4px;\n    }\n\n    .diff-count[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      padding: 0 4px;\n      white-space: nowrap;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.35;\n      cursor: default;\n    }\n\n    \n\n    .code-editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n    }\n\n    .editor-pane[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .editor-pane[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\n    }\n\n    \n\n    [_nghost-%COMP%]     .diff-pane .cm-mergeView .cm-changedLine {\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    }\n\n    [_nghost-%COMP%]     .diff-pane .cm-mergeView .cm-deletedChunk {\n      background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    }\n\n    \n\n    mj-empty-state[_ngcontent-%COMP%] { flex: 1; }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CodeEditorPanelComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-code-editor-panel', template: `
    <div class="code-editor-panel">
      <!-- Tab bar: one tab per code section -->
      <div class="code-tab-bar">
        @for (section of State.CodeSections; track section.title; let i = $index) {
          <button class="code-tab"
                  [class.active]="ActiveTabIndex === i"
                  (click)="SelectTab(i)">
            @if (section.isDependency) {
              <i class="fa-solid fa-puzzle-piece dep-icon"></i>
            }
            {{ section.title }}
            @if (HasChanges(section)) {
              <span class="modified-dot" title="Modified"></span>
            }
          </button>
        }
      </div>

      <!-- Toolbar: view mode toggle + actions -->
      <div class="code-toolbar">
        <div class="view-mode-toggle">
          <button class="mode-btn" [class.active]="ViewMode === 'current'" (click)="SetViewMode('current')">
            Current
          </button>
          <button class="mode-btn" [class.active]="ViewMode === 'original'" (click)="SetViewMode('original')">
            Original
          </button>
          <button class="mode-btn" [class.active]="ViewMode === 'diff'" (click)="SetViewMode('diff')">
            <i class="fa-solid fa-code-compare"></i> Diff
          </button>
        </div>
        @if (ViewMode === 'diff') {
          <div class="diff-nav">
            <span class="diff-count">{{ DiffChunkCount }} change{{ DiffChunkCount !== 1 ? 's' : '' }}</span>
            <button class="icon-btn" (click)="GoToPreviousChunk()" title="Previous change (↑)" [disabled]="DiffChunkCount === 0">
              <i class="fa-solid fa-chevron-up"></i>
            </button>
            <button class="icon-btn" (click)="GoToNextChunk()" title="Next change (↓)" [disabled]="DiffChunkCount === 0">
              <i class="fa-solid fa-chevron-down"></i>
            </button>
          </div>
        }
        <span class="toolbar-spacer"></span>
        <button class="icon-btn" (click)="CopyCode()" title="Copy code to clipboard">
          <i class="fa-solid fa-copy"></i>
        </button>
        @if (State.IsEditingCode) {
          <div class="action-buttons">
            <button mjButton variant="primary" (click)="ApplyChanges()">
              <i class="fa-solid fa-check"></i> Apply
            </button>
            <button mjButton (click)="CancelChanges()">
              Cancel
            </button>
          </div>
        }
      </div>

      <!-- Editor body -->
      <div class="code-editor-body">
        @if (ActiveSection) {
          @switch (ViewMode) {
            @case ('current') {
              <div class="editor-pane">
                <mj-code-editor
                  [(ngModel)]="ActiveSection.code"
                  [language]="'javascript'"
                  [indentWithTab]="true"
                  [placeholder]="'Enter component code...'"
                  (ngModelChange)="OnCodeChanged()">
                </mj-code-editor>
              </div>
            }
            @case ('original') {
              <div class="editor-pane">
                <mj-code-editor
                  [ngModel]="ActiveSection.originalCode"
                  [language]="'javascript'"
                  [readonly]="true">
                </mj-code-editor>
              </div>
            }
            @case ('diff') {
              <div class="editor-pane diff-pane">
                <mj-code-editor
                  #diffEditor
                  [ngModel]="ActiveSection.code"
                  [language]="'javascript'"
                  [readonly]="true"
                  [extensions]="DiffExtensions">
                </mj-code-editor>
              </div>
            }
          }
        } @else {
          <mj-empty-state Size="compact" Icon="fa-solid fa-file-code"
            Title="No code sections available. Select a component to view its code." />
        }
      </div>
    </div>
  `, styles: ["\n    .code-editor-panel {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    /* ---- Tab bar ---- */\n    .code-tab-bar {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      height: 36px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      gap: 2px;\n      overflow-x: auto;\n    }\n\n    .code-tab {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n      font-family: inherit;\n      position: relative;\n    }\n\n    .code-tab:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .code-tab.active {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .dep-icon {\n      font-size: 10px;\n      color: var(--mj-brand-primary);\n    }\n\n    .modified-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--mj-status-error);\n      display: inline-block;\n      margin-left: 2px;\n    }\n\n    /* ---- Toolbar ---- */\n    .code-toolbar {\n      display: flex;\n      align-items: center;\n      padding: 4px 8px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      gap: 8px;\n    }\n\n    .view-mode-toggle {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn i {\n      font-size: 10px;\n    }\n\n    .toolbar-spacer {\n      flex: 1;\n    }\n\n    .icon-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 28px;\n      height: 28px;\n      border: none;\n      border-radius: 6px;\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    .icon-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .action-buttons {\n      display: flex;\n      gap: 6px;\n    }\n\n    .diff-nav {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      margin-left: 4px;\n    }\n\n    .diff-count {\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      padding: 0 4px;\n      white-space: nowrap;\n    }\n\n    .icon-btn:disabled {\n      opacity: 0.35;\n      cursor: default;\n    }\n\n    /* ---- Editor body ---- */\n    .code-editor-body {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n    }\n\n    .editor-pane {\n      flex: 1;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .editor-pane mj-code-editor {\n      display: block;\n      height: 100%;\n    }\n\n    /* ---- Diff-specific styles ---- */\n    :host ::ng-deep .diff-pane .cm-mergeView .cm-changedLine {\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    }\n\n    :host ::ng-deep .diff-pane .cm-mergeView .cm-deletedChunk {\n      background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    }\n\n    /* Fill the flex-fill editor body so the placeholder centers. */\n    mj-empty-state { flex: 1; }\n  "] }]
    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { DiffEditorRef: [{
            type: ViewChild,
            args: ['diffEditor']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CodeEditorPanelComponent, { className: "CodeEditorPanelComponent", filePath: "src/ComponentStudio/components/editors/code-editor-panel.component.ts", lineNumber: 310 }); })();
//# sourceMappingURL=code-editor-panel.component.js.map