import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
import * as i2 from "@memberjunction/ng-testing";
import * as i3 from "@memberjunction/ng-ui-components";
import * as i4 from "./oracle-breakdown-table.component";
import * as i5 from "@angular/common";
function TestRunDetailPanelComponent_Conditional_0_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    const _r2 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 33);
    i0.ɵɵlistener("click", function TestRunDetailPanelComponent_Conditional_0_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onClose()); });
    i0.ɵɵelement(1, "i", 34);
    i0.ɵɵelementEnd();
} }
function TestRunDetailPanelComponent_Conditional_0_Conditional_31_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 13)(1, "div", 14);
    i0.ɵɵtext(2, "Target");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 35);
    i0.ɵɵlistener("click", function TestRunDetailPanelComponent_Conditional_0_Conditional_31_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onViewTarget()); });
    i0.ɵɵelement(4, "i", 36);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.testRun.targetType, " ");
} }
function TestRunDetailPanelComponent_Conditional_0_Conditional_32_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 18);
    i0.ɵɵelement(1, "app-oracle-breakdown-table", 37);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("results", ctx_r2.oracleResults);
} }
function TestRunDetailPanelComponent_Conditional_0_Conditional_33_ng_template_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 41);
    i0.ɵɵtext(1, " Result Details ");
} }
function TestRunDetailPanelComponent_Conditional_0_Conditional_33_ng_template_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 42)(1, "pre", 43);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.formatJSON(ctx_r2.resultDetails));
} }
function TestRunDetailPanelComponent_Conditional_0_Conditional_33_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 19)(1, "mj-accordion-panel", 38);
    i0.ɵɵtwoWayListener("ExpandedChange", function TestRunDetailPanelComponent_Conditional_0_Conditional_33_Template_mj_accordion_panel_ExpandedChange_1_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.showResultDetails, $event) || (ctx_r2.showResultDetails = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵtemplate(2, TestRunDetailPanelComponent_Conditional_0_Conditional_33_ng_template_2_Template, 2, 0, "ng-template", 39)(3, TestRunDetailPanelComponent_Conditional_0_Conditional_33_ng_template_3_Template, 3, 1, "ng-template", 40);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵproperty("FlushBody", true);
    i0.ɵɵtwoWayProperty("Expanded", ctx_r2.showResultDetails);
} }
function TestRunDetailPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 3)(6, "span", 4);
    i0.ɵɵelement(7, "i", 5);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "span", 6);
    i0.ɵɵelement(10, "i", 7);
    i0.ɵɵtext(11);
    i0.ɵɵpipe(12, "date");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(13, "div", 8);
    i0.ɵɵelement(14, "app-test-status-badge", 9);
    i0.ɵɵconditionalCreate(15, TestRunDetailPanelComponent_Conditional_0_Conditional_15_Template, 2, 0, "button", 10);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(16, "div", 11)(17, "div", 12)(18, "div", 13)(19, "div", 14);
    i0.ɵɵtext(20, "Score");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(21, "app-score-indicator", 15);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(22, "div", 13)(23, "div", 14);
    i0.ɵɵtext(24, "Cost");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(25, "app-cost-display", 16);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(26, "div", 13)(27, "div", 14);
    i0.ɵɵtext(28, "Duration");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(29, "div", 17);
    i0.ɵɵtext(30);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(31, TestRunDetailPanelComponent_Conditional_0_Conditional_31_Template, 6, 1, "div", 13);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(32, TestRunDetailPanelComponent_Conditional_0_Conditional_32_Template, 2, 1, "div", 18);
    i0.ɵɵconditionalCreate(33, TestRunDetailPanelComponent_Conditional_0_Conditional_33_Template, 4, 2, "div", 19);
    i0.ɵɵelementStart(34, "div", 20)(35, "div", 21)(36, "h4");
    i0.ɵɵelement(37, "i", 22);
    i0.ɵɵtext(38, " Human Feedback ");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(39, "div", 23)(40, "div", 24)(41, "div", 25)(42, "label");
    i0.ɵɵtext(43, "Rating (1-10)");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(44, "input", 26);
    i0.ɵɵtwoWayListener("ngModelChange", function TestRunDetailPanelComponent_Conditional_0_Template_input_ngModelChange_44_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.feedbackRating, $event) || (ctx_r2.feedbackRating = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(45, "div", 25)(46, "label");
    i0.ɵɵtext(47, "Is Correct?");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(48, "div", 27)(49, "label", 28)(50, "input", 29);
    i0.ɵɵtwoWayListener("ngModelChange", function TestRunDetailPanelComponent_Conditional_0_Template_input_ngModelChange_50_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.feedbackIsCorrect, $event) || (ctx_r2.feedbackIsCorrect = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(51, "span");
    i0.ɵɵtext(52, "Yes, the automated result is correct");
    i0.ɵɵelementEnd()()()()();
    i0.ɵɵelementStart(53, "div", 25)(54, "label");
    i0.ɵɵtext(55, "Comments");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(56, "textarea", 30);
    i0.ɵɵtwoWayListener("ngModelChange", function TestRunDetailPanelComponent_Conditional_0_Template_textarea_ngModelChange_56_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.feedbackComments, $event) || (ctx_r2.feedbackComments = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(57, "button", 31);
    i0.ɵɵlistener("click", function TestRunDetailPanelComponent_Conditional_0_Template_button_click_57_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSubmitFeedback()); });
    i0.ɵɵelement(58, "i", 32);
    i0.ɵɵtext(59);
    i0.ɵɵelementEnd()()()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(ctx_r2.testRun.testName);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.testRun.testType, " ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(12, 19, ctx_r2.testRun.runDateTime, "medium"), " ");
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("status", ctx_r2.testRun.status);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.closeable ? 15 : -1);
    i0.ɵɵadvance(6);
    i0.ɵɵproperty("score", ctx_r2.testRun.score)("showBar", true)("showIcon", true);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("cost", ctx_r2.testRun.cost)("showIcon", true);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r2.formatDuration(ctx_r2.testRun.duration));
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.testRun.targetType ? 31 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.oracleResults && ctx_r2.oracleResults.length > 0 ? 32 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.resultDetails ? 33 : -1);
    i0.ɵɵadvance(11);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.feedbackRating);
    i0.ɵɵadvance(6);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.feedbackIsCorrect);
    i0.ɵɵadvance(6);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.feedbackComments);
    i0.ɵɵadvance();
    i0.ɵɵproperty("disabled", ctx_r2.submittingFeedback);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.submittingFeedback ? "Submitting..." : "Submit Feedback", " ");
} }
export class TestRunDetailPanelComponent {
    testRun;
    oracleResults = [];
    resultDetails = null;
    closeable = true;
    close = new EventEmitter();
    viewTarget = new EventEmitter();
    submitFeedback = new EventEmitter();
    showResultDetails = false;
    feedbackRating = 5;
    feedbackIsCorrect = true;
    feedbackComments = '';
    submittingFeedback = false;
    formatDuration(milliseconds) {
        if (milliseconds < 1000) {
            return `${milliseconds}ms`;
        }
        const seconds = Math.floor(milliseconds / 1000);
        const minutes = Math.floor(seconds / 60);
        if (minutes > 0) {
            return `${minutes}m ${seconds % 60}s`;
        }
        return `${seconds}s`;
    }
    formatJSON(obj) {
        try {
            return JSON.stringify(obj, null, 2);
        }
        catch (error) {
            return String(obj);
        }
    }
    // toggleResultDetails() removed — the Result Details disclosure is now an
    // <mj-accordion-panel> bound via [(Expanded)]="showResultDetails" (pure flip,
    // default change detection), so no explicit toggle handler is needed.
    onClose() {
        this.close.emit();
    }
    onViewTarget() {
        if (this.testRun.targetType && this.testRun.targetLogID) {
            this.viewTarget.emit({
                type: this.testRun.targetType,
                id: this.testRun.targetLogID
            });
        }
    }
    async onSubmitFeedback() {
        this.submittingFeedback = true;
        this.submitFeedback.emit({
            rating: this.feedbackRating,
            isCorrect: this.feedbackIsCorrect,
            comments: this.feedbackComments
        });
        // Reset after submission
        setTimeout(() => {
            this.submittingFeedback = false;
            this.feedbackRating = 5;
            this.feedbackIsCorrect = true;
            this.feedbackComments = '';
        }, 1000);
    }
    static ɵfac = function TestRunDetailPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestRunDetailPanelComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestRunDetailPanelComponent, selectors: [["app-test-run-detail-panel"]], inputs: { testRun: "testRun", oracleResults: "oracleResults", resultDetails: "resultDetails", closeable: "closeable" }, outputs: { close: "close", viewTarget: "viewTarget", submitFeedback: "submitFeedback" }, standalone: false, decls: 1, vars: 1, consts: [[1, "test-run-detail-panel"], [1, "detail-header"], [1, "header-left"], [1, "header-meta"], [1, "test-type"], [1, "fa-solid", "fa-tag"], [1, "run-time"], [1, "fa-solid", "fa-clock"], [1, "header-right"], [3, "status"], [1, "close-btn"], [1, "detail-content"], [1, "metrics-section"], [1, "metric-card"], [1, "metric-label"], [3, "score", "showBar", "showIcon"], [3, "cost", "showIcon"], [1, "metric-value"], [1, "oracle-section"], [1, "details-section"], [1, "feedback-section"], [1, "section-header"], [1, "fa-solid", "fa-comment-dots"], [1, "feedback-form"], [1, "form-row"], [1, "form-group"], ["type", "number", "min", "1", "max", "10", 1, "rating-input", 3, "ngModelChange", "ngModel"], [1, "checkbox-group"], [1, "checkbox-label"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], ["rows", "3", "placeholder", "Enter your feedback comments...", 1, "comments-textarea", 3, "ngModelChange", "ngModel"], [1, "submit-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "metric-value", "target-link", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [3, "results"], ["Size", "sm", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], [1, "fa-solid", "fa-file-alt", 2, "color", "var(--mj-brand-primary)"], [1, "details-content"], [1, "json-viewer"]], template: function TestRunDetailPanelComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, TestRunDetailPanelComponent_Conditional_0_Template, 60, 22, "div", 0);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.testRun ? 0 : -1);
        } }, dependencies: [i1.DefaultValueAccessor, i1.NumberValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.MinValidator, i1.MaxValidator, i1.NgModel, i2.TestStatusBadgeComponent, i2.ScoreIndicatorComponent, i2.CostDisplayComponent, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJAccordionBodyDirective, i4.OracleBreakdownTableComponent, i5.DatePipe], styles: [".test-run-detail-panel[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .detail-header[_ngcontent-%COMP%] {\n      padding: 20px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 8px 0;\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .header-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\n      font-size: 12px;\n      opacity: 0.9;\n    }\n\n    .header-meta[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .header-right[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .close-btn[_ngcontent-%COMP%] {\n      background: rgba(255, 255, 255, 0.2);\n      border: none;\n      color: var(--mj-text-inverse);\n      padding: 8px 12px;\n      border-radius: 4px;\n      cursor: pointer;\n      transition: background 0.2s ease;\n    }\n\n    .close-btn[_ngcontent-%COMP%]:hover {\n      background: rgba(255, 255, 255, 0.3);\n    }\n\n    .detail-content[_ngcontent-%COMP%] {\n      padding: 20px;\n    }\n\n    .metrics-section[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n      gap: 16px;\n      margin-bottom: 24px;\n    }\n\n    .metric-card[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      padding: 16px;\n      border-radius: 8px;\n      border-left: 4px solid var(--mj-brand-primary);\n    }\n\n    .metric-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-secondary);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 8px;\n    }\n\n    .metric-value[_ngcontent-%COMP%] {\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .target-link[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      font-size: 14px;\n    }\n\n    .target-link[_ngcontent-%COMP%]:hover {\n      text-decoration: underline;\n    }\n\n    .oracle-section[_ngcontent-%COMP%], \n   .details-section[_ngcontent-%COMP%], \n   .feedback-section[_ngcontent-%COMP%] {\n      margin-bottom: 24px;\n    }\n\n    .section-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n      padding-bottom: 8px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    \n\n\n\n\n    .details-content[_ngcontent-%COMP%] {\n      margin-top: 12px;\n    }\n\n    .json-viewer[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      padding: 16px;\n      font-size: 11px;\n      line-height: 1.5;\n      overflow-x: auto;\n      max-height: 300px;\n      overflow-y: auto;\n      font-family: 'Courier New', monospace;\n    }\n\n    .feedback-form[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n      padding: 16px;\n      border-radius: 8px;\n    }\n\n    .form-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 1fr 2fr;\n      gap: 16px;\n      margin-bottom: 16px;\n    }\n\n    .form-group[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n    }\n\n    .rating-input[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .checkbox-group[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n    }\n\n    .checkbox-label[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n    }\n\n    .checkbox-label[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n      width: 16px;\n      height: 16px;\n      cursor: pointer;\n    }\n\n    .comments-textarea[_ngcontent-%COMP%] {\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 13px;\n      font-family: inherit;\n      resize: vertical;\n    }\n\n    .submit-btn[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 10px 20px;\n      border-radius: 4px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: background 0.2s ease;\n    }\n\n    .submit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .submit-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    @media (max-width: 768px) {\n      .form-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n\n      .metrics-section[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n      }\n    }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestRunDetailPanelComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-test-run-detail-panel', template: `
    @if (testRun) {
      <div class="test-run-detail-panel">
        <div class="detail-header">
          <div class="header-left">
            <h3>{{ testRun.testName }}</h3>
            <div class="header-meta">
              <span class="test-type">
                <i class="fa-solid fa-tag"></i>
                {{ testRun.testType }}
              </span>
              <span class="run-time">
                <i class="fa-solid fa-clock"></i>
                {{ testRun.runDateTime | date:'medium' }}
              </span>
            </div>
          </div>
          <div class="header-right">
            <app-test-status-badge [status]="testRun.status"></app-test-status-badge>
            @if (closeable) {
              <button class="close-btn" (click)="onClose()">
                <i class="fa-solid fa-times"></i>
              </button>
            }
          </div>
        </div>
        <div class="detail-content">
          <!-- Main Metrics -->
          <div class="metrics-section">
            <div class="metric-card">
              <div class="metric-label">Score</div>
              <app-score-indicator [score]="testRun.score" [showBar]="true" [showIcon]="true"></app-score-indicator>
            </div>
            <div class="metric-card">
              <div class="metric-label">Cost</div>
              <app-cost-display [cost]="testRun.cost" [showIcon]="true"></app-cost-display>
            </div>
            <div class="metric-card">
              <div class="metric-label">Duration</div>
              <div class="metric-value">{{ formatDuration(testRun.duration) }}</div>
            </div>
            @if (testRun.targetType) {
              <div class="metric-card">
                <div class="metric-label">Target</div>
                <div class="metric-value target-link" (click)="onViewTarget()">
                  <i class="fa-solid fa-external-link-alt"></i>
                  {{ testRun.targetType }}
                </div>
              </div>
            }
          </div>
          <!-- Oracle Breakdown -->
          @if (oracleResults && oracleResults.length > 0) {
            <div class="oracle-section">
              <app-oracle-breakdown-table [results]="oracleResults"></app-oracle-breakdown-table>
            </div>
          }
          <!-- Result Details -->
          @if (resultDetails) {
            <div class="details-section">
              <mj-accordion-panel Size="sm" [FlushBody]="true" [(Expanded)]="showResultDetails">
                <ng-template mjAccordionTitle>
                  <i class="fa-solid fa-file-alt" style="color: var(--mj-brand-primary)"></i>
                  Result Details
                </ng-template>
                <ng-template mjAccordionBody>
                  <div class="details-content">
                    <pre class="json-viewer">{{ formatJSON(resultDetails) }}</pre>
                  </div>
                </ng-template>
              </mj-accordion-panel>
            </div>
          }
          <!-- Feedback Section -->
          <div class="feedback-section">
            <div class="section-header">
              <h4>
                <i class="fa-solid fa-comment-dots"></i>
                Human Feedback
              </h4>
            </div>
            <div class="feedback-form">
              <div class="form-row">
                <div class="form-group">
                  <label>Rating (1-10)</label>
                  <input
                    type="number"
                    [(ngModel)]="feedbackRating"
                    min="1"
                    max="10"
                    class="rating-input"
                    />
                </div>
                <div class="form-group">
                  <label>Is Correct?</label>
                  <div class="checkbox-group">
                    <label class="checkbox-label">
                      <input type="checkbox" [(ngModel)]="feedbackIsCorrect" />
                      <span>Yes, the automated result is correct</span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label>Comments</label>
                <textarea
                  [(ngModel)]="feedbackComments"
                  rows="3"
                  class="comments-textarea"
                  placeholder="Enter your feedback comments..."
                ></textarea>
              </div>
              <button class="submit-btn" (click)="onSubmitFeedback()" [disabled]="submittingFeedback">
                <i class="fa-solid fa-paper-plane"></i>
                {{ submittingFeedback ? 'Submitting...' : 'Submit Feedback' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    }
    `, styles: ["\n    .test-run-detail-panel {\n      background: var(--mj-bg-surface);\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .detail-header {\n      padding: 20px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n    }\n\n    .header-left h3 {\n      margin: 0 0 8px 0;\n      font-size: 18px;\n      font-weight: 600;\n    }\n\n    .header-meta {\n      display: flex;\n      gap: 16px;\n      font-size: 12px;\n      opacity: 0.9;\n    }\n\n    .header-meta span {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .header-right {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .close-btn {\n      background: rgba(255, 255, 255, 0.2);\n      border: none;\n      color: var(--mj-text-inverse);\n      padding: 8px 12px;\n      border-radius: 4px;\n      cursor: pointer;\n      transition: background 0.2s ease;\n    }\n\n    .close-btn:hover {\n      background: rgba(255, 255, 255, 0.3);\n    }\n\n    .detail-content {\n      padding: 20px;\n    }\n\n    .metrics-section {\n      display: grid;\n      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n      gap: 16px;\n      margin-bottom: 24px;\n    }\n\n    .metric-card {\n      background: var(--mj-bg-surface-card);\n      padding: 16px;\n      border-radius: 8px;\n      border-left: 4px solid var(--mj-brand-primary);\n    }\n\n    .metric-label {\n      font-size: 11px;\n      color: var(--mj-text-secondary);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 8px;\n    }\n\n    .metric-value {\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .target-link {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      color: var(--mj-brand-primary);\n      cursor: pointer;\n      font-size: 14px;\n    }\n\n    .target-link:hover {\n      text-decoration: underline;\n    }\n\n    .oracle-section,\n    .details-section,\n    .feedback-section {\n      margin-bottom: 24px;\n    }\n\n    .section-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 12px;\n      padding-bottom: 8px;\n      border-bottom: 1px solid var(--mj-border-default);\n    }\n\n    .section-header h4 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .section-header h4 i {\n      color: var(--mj-brand-primary);\n    }\n\n    /* .toggle-btn removed \u2014 the Result Details chevron is now provided by\n       <mj-accordion-panel>. (.section-header is kept; the Feedback section\n       still uses it.) */\n\n    .details-content {\n      margin-top: 12px;\n    }\n\n    .json-viewer {\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      padding: 16px;\n      font-size: 11px;\n      line-height: 1.5;\n      overflow-x: auto;\n      max-height: 300px;\n      overflow-y: auto;\n      font-family: 'Courier New', monospace;\n    }\n\n    .feedback-form {\n      background: var(--mj-bg-surface-card);\n      padding: 16px;\n      border-radius: 8px;\n    }\n\n    .form-row {\n      display: grid;\n      grid-template-columns: 1fr 2fr;\n      gap: 16px;\n      margin-bottom: 16px;\n    }\n\n    .form-group {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .form-group label {\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\n    }\n\n    .rating-input {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .checkbox-group {\n      display: flex;\n      align-items: center;\n    }\n\n    .checkbox-label {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n      cursor: pointer;\n    }\n\n    .checkbox-label input[type=\"checkbox\"] {\n      width: 16px;\n      height: 16px;\n      cursor: pointer;\n    }\n\n    .comments-textarea {\n      padding: 10px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 13px;\n      font-family: inherit;\n      resize: vertical;\n    }\n\n    .submit-btn {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n      border: none;\n      padding: 10px 20px;\n      border-radius: 4px;\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      transition: background 0.2s ease;\n    }\n\n    .submit-btn:hover:not(:disabled) {\n      background: var(--mj-brand-primary-hover);\n    }\n\n    .submit-btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    @media (max-width: 768px) {\n      .form-row {\n        grid-template-columns: 1fr;\n      }\n\n      .metrics-section {\n        grid-template-columns: 1fr;\n      }\n    }\n  "] }]
    }], null, { testRun: [{
            type: Input
        }], oracleResults: [{
            type: Input
        }], resultDetails: [{
            type: Input
        }], closeable: [{
            type: Input
        }], close: [{
            type: Output
        }], viewTarget: [{
            type: Output
        }], submitFeedback: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestRunDetailPanelComponent, { className: "TestRunDetailPanelComponent", filePath: "src/Testing/components/widgets/test-run-detail-panel.component.ts", lineNumber: 378 }); })();
//# sourceMappingURL=test-run-detail-panel.component.js.map