import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { UUIDsEqual } from '@memberjunction/global';
import * as i0 from "@angular/core";
import * as i1 from "../services/testing-instrumentation.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "@memberjunction/ng-ui-components";
import * as i5 from "@memberjunction/ng-testing";
const _forTrack0 = ($index, $item) => $item.testRunID;
const _forTrack1 = ($index, $item) => $item.id;
function TestingReviewComponent_Conditional_0_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function TestingReviewComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, TestingReviewComponent_Conditional_0_ng_container_0_Template, 1, 0, "ng-container", 1);
} if (rf & 2) {
    i0.ɵɵnextContext();
    const content_r1 = i0.ɵɵreference(3);
    i0.ɵɵproperty("ngTemplateOutlet", content_r1);
} }
function TestingReviewComponent_Conditional_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-stat-badge", 4);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("Count", ctx_r2.PendingCount);
} }
function TestingReviewComponent_Conditional_1_ng_container_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function TestingReviewComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    const _r2 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 2)(2, "div", 3);
    i0.ɵɵconditionalCreate(3, TestingReviewComponent_Conditional_1_Conditional_3_Template, 1, 1, "mj-stat-badge", 4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 5)(5, "mj-refresh-button", 6);
    i0.ɵɵlistener("Clicked", function TestingReviewComponent_Conditional_1_Template_mj_refresh_button_Clicked_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.Refresh()); });
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(6, "mj-page-body");
    i0.ɵɵtemplate(7, TestingReviewComponent_Conditional_1_ng_container_7_Template, 1, 0, "ng-container", 1);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    const content_r1 = i0.ɵɵreference(3);
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(ctx_r2.PendingCount > 0 ? 3 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("Loading", ctx_r2.IsRefreshing);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngTemplateOutlet", content_r1);
} }
function TestingReviewComponent_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 8)(1, "div", 27)(2, "div", 28);
    i0.ɵɵelement(3, "i", 29);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 30)(5, "div", 31);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "div", 32);
    i0.ɵɵtext(8, "Pending Review");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(9, "div", 27)(10, "div", 33);
    i0.ɵɵelement(11, "i", 34);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "div", 30)(13, "div", 31);
    i0.ɵɵtext(14);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(15, "div", 32);
    i0.ɵɵtext(16, "Reviewed");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(17, "div", 27)(18, "div", 35);
    i0.ɵɵelement(19, "i", 36);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(20, "div", 30)(21, "div", 31);
    i0.ɵɵtext(22);
    i0.ɵɵelementStart(23, "span", 37);
    i0.ɵɵtext(24, "/10");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(25, "div", 32);
    i0.ɵɵtext(26, "Avg Rating");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(27, "div", 27)(28, "div", 38);
    i0.ɵɵelement(29, "i", 39);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(30, "div", 30)(31, "div", 31);
    i0.ɵɵtext(32);
    i0.ɵɵelementStart(33, "span", 37);
    i0.ɵɵtext(34, "%");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(35, "div", 32);
    i0.ɵɵtext(36, "Agreement Rate");
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(6);
    i0.ɵɵtextInterpolate(ctx_r2.Metrics.humanPendingCount);
    i0.ɵɵadvance(8);
    i0.ɵɵtextInterpolate(ctx_r2.Metrics.humanReviewedCount);
    i0.ɵɵadvance(8);
    i0.ɵɵtextInterpolate(ctx_r2.FormatDecimal(ctx_r2.Metrics.humanAvgRating, 1));
    i0.ɵɵadvance(10);
    i0.ɵɵtextInterpolate(ctx_r2.FormatDecimal(ctx_r2.Metrics.agreementRate, 0));
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 40);
    i0.ɵɵelement(1, "i", 42);
    i0.ɵɵelementStart(2, "h3");
    i0.ɵɵtext(3, "All caught up!");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5, "No tests currently require human review.");
    i0.ɵɵelementEnd()();
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 58);
    i0.ɵɵtext(1, " No Feedback ");
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 59);
    i0.ɵɵtext(1, " Score Mismatch ");
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 60);
    i0.ɵɵtext(1, " Needs Verification ");
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_For_6_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 77);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_For_6_Template_button_click_0_listener() { const n_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.SelectRating(n_r9)); });
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const n_r9 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(6);
    i0.ɵɵclassProp("selected", ctx_r2.FormState.rating != null && n_r9 <= ctx_r2.FormState.rating)("current", ctx_r2.FormState.rating === n_r9);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", n_r9, " ");
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 65);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(6);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1("", ctx_r2.FormState.rating, "/10");
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 57)(1, "div", 61)(2, "label", 62);
    i0.ɵɵtext(3, "Rating");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 63);
    i0.ɵɵrepeaterCreate(5, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_For_6_Template, 2, 5, "button", 64, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵconditionalCreate(7, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Conditional_7_Template, 2, 1, "span", 65);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "div", 61)(9, "label", 62);
    i0.ɵɵtext(10, "Is the automated result correct?");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "div", 66)(12, "button", 67);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.SelectCorrectness(true)); });
    i0.ɵɵelement(13, "i", 68);
    i0.ɵɵtext(14, " Correct ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(15, "button", 69);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.SelectCorrectness(false)); });
    i0.ɵɵelement(16, "i", 70);
    i0.ɵɵtext(17, " Incorrect ");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(18, "div", 61)(19, "label", 62);
    i0.ɵɵtext(20, "Notes (optional)");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(21, "textarea", 71);
    i0.ɵɵlistener("input", function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Template_textarea_input_21_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.OnCommentsChange($event)); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(22, "div", 72)(23, "button", 73);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r7); const item_r6 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SubmitReview(item_r6)); });
    i0.ɵɵelement(24, "i", 74);
    i0.ɵɵtext(25);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(26, "button", 75);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.SkipItem()); });
    i0.ɵɵelement(27, "i", 76);
    i0.ɵɵtext(28, " Skip ");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(5);
    i0.ɵɵadvance(5);
    i0.ɵɵrepeater(ctx_r2.RatingNumbers);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r2.FormState.rating != null ? 7 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵclassProp("active", ctx_r2.FormState.isCorrect === true);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r2.FormState.isCorrect === false);
    i0.ɵɵadvance(6);
    i0.ɵɵproperty("value", ctx_r2.FormState.comments);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("disabled", !ctx_r2.IsFormValid || ctx_r2.IsSubmitting);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.IsSubmitting ? "Submitting..." : "Submit", " ");
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Template_div_click_1_listener() { const item_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.ToggleExpand(item_r6.testRunID)); });
    i0.ɵɵelementStart(2, "div", 46)(3, "div", 47);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 48)(6, "span", 49);
    i0.ɵɵelement(7, "i", 50);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd();
    i0.ɵɵelement(9, "app-score-indicator", 51)(10, "app-test-status-badge", 52);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(11, "div", 53)(12, "span", 54);
    i0.ɵɵconditionalCreate(13, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_13_Template, 2, 0)(14, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_14_Template, 2, 0)(15, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_15_Template, 2, 0);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "button", 55);
    i0.ɵɵelement(17, "i", 56);
    i0.ɵɵelementEnd()()();
    i0.ɵɵconditionalCreate(18, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Conditional_18_Template, 29, 8, "div", 57);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r6 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(4);
    i0.ɵɵclassProp("expanded", ctx_r2.IsItemExpanded(item_r6.testRunID));
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(item_r6.testName);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.FormatRelativeTime(item_r6.runDateTime), " ");
    i0.ɵɵadvance();
    i0.ɵɵproperty("score", item_r6.automatedScore)("showBar", true);
    i0.ɵɵadvance();
    i0.ɵɵproperty("status", item_r6.automatedStatus);
    i0.ɵɵadvance(2);
    i0.ɵɵclassMap("reason-" + item_r6.reason);
    i0.ɵɵadvance();
    i0.ɵɵconditional(item_r6.reason === "no-feedback" ? 13 : item_r6.reason === "high-score-failed" ? 14 : 15);
    i0.ɵɵadvance(4);
    i0.ɵɵclassProp("fa-chevron-down", !ctx_r2.IsItemExpanded(item_r6.testRunID))("fa-chevron-up", ctx_r2.IsItemExpanded(item_r6.testRunID));
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.IsItemExpanded(item_r6.testRunID) ? 18 : -1);
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 41);
    i0.ɵɵrepeaterCreate(1, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_For_2_Template, 19, 15, "div", 43, _forTrack0);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r2.PendingItems);
} }
function TestingReviewComponent_ng_template_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 14);
    i0.ɵɵconditionalCreate(1, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_1_Template, 6, 0, "div", 40)(2, TestingReviewComponent_ng_template_2_Conditional_10_Conditional_2_Template, 3, 0, "div", 41);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.PendingItems.length === 0 ? 1 : 2);
} }
function TestingReviewComponent_ng_template_2_Conditional_11_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 40);
    i0.ɵɵelement(1, "i", 88);
    i0.ɵɵelementStart(2, "h3");
    i0.ɵɵtext(3, "No reviewed items");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5, "Reviewed tests will appear here once feedback is submitted.");
    i0.ɵɵelementEnd()();
} }
function TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_For_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "span", 103);
} if (rf & 2) {
    const n_r11 = ctx.$implicit;
    const item_r12 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵclassProp("filled", item_r12.humanRating != null && n_r11 <= item_r12.humanRating);
} }
function TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 99);
    i0.ɵɵelement(1, "i", 68);
    i0.ɵɵtext(2, " Correct ");
    i0.ɵɵelementEnd();
} }
function TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 100);
    i0.ɵɵelement(1, "i", 70);
    i0.ɵɵtext(2, " Incorrect ");
    i0.ɵɵelementEnd();
} }
function TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
    const _r13 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 104);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Conditional_18_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const item_r12 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.ToggleHistoryComment(item_r12.id)); });
    i0.ɵɵelementStart(1, "p");
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const item_r12 = i0.ɵɵnextContext().$implicit;
    const ctx_r2 = i0.ɵɵnextContext(4);
    i0.ɵɵclassProp("expanded", ctx_r2.ExpandedHistoryId === item_r12.id);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(item_r12.humanComments);
} }
function TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 89)(1, "div", 90)(2, "div", 91);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 92);
    i0.ɵɵelement(5, "i", 93);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "div", 94)(8, "div", 95);
    i0.ɵɵrepeaterCreate(9, TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_For_10_Template, 1, 2, "span", 96, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "span", 97);
    i0.ɵɵtext(12);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(13, "div", 98);
    i0.ɵɵconditionalCreate(14, TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Conditional_14_Template, 3, 0, "span", 99)(15, TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Conditional_15_Template, 3, 0, "span", 100);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "div", 101);
    i0.ɵɵelement(17, "app-score-indicator", 51);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(18, TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Conditional_18_Template, 3, 3, "div", 102);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r12 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(4);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(item_r12.testName);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.FormatRelativeTime(item_r12.runDateTime), " ");
    i0.ɵɵadvance(3);
    i0.ɵɵrepeater(ctx_r2.RatingNumbers);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("", item_r12.humanRating ?? 0, "/10");
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(item_r12.humanIsCorrect === true ? 14 : item_r12.humanIsCorrect === false ? 15 : -1);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("score", item_r12.score)("showBar", true);
    i0.ɵɵadvance();
    i0.ɵɵconditional(item_r12.humanComments ? 18 : -1);
} }
function TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 87);
    i0.ɵɵrepeaterCreate(1, TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_For_2_Template, 19, 7, "div", 89, _forTrack1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r2.FilteredHistoryItems);
} }
function TestingReviewComponent_ng_template_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 14)(1, "div", 78)(2, "div", 79);
    i0.ɵɵelement(3, "i", 80);
    i0.ɵɵelementStart(4, "input", 81);
    i0.ɵɵlistener("input", function TestingReviewComponent_ng_template_2_Conditional_11_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnHistorySearch($event)); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(5, "div", 82)(6, "label");
    i0.ɵɵtext(7, "Sort by:");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "select", 83);
    i0.ɵɵlistener("change", function TestingReviewComponent_ng_template_2_Conditional_11_Template_select_change_8_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnHistorySortChange($event)); });
    i0.ɵɵelementStart(9, "option", 84);
    i0.ɵɵtext(10, "Date");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "option", 85);
    i0.ɵɵtext(12, "Rating");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(13, "option", 86);
    i0.ɵɵtext(14, "Test Name");
    i0.ɵɵelementEnd()()()();
    i0.ɵɵconditionalCreate(15, TestingReviewComponent_ng_template_2_Conditional_11_Conditional_15_Template, 6, 0, "div", 40)(16, TestingReviewComponent_ng_template_2_Conditional_11_Conditional_16_Template, 3, 0, "div", 87);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("value", ctx_r2.HistorySearchText);
    i0.ɵɵadvance(4);
    i0.ɵɵproperty("value", ctx_r2.HistorySortField);
    i0.ɵɵadvance(7);
    i0.ɵɵconditional(ctx_r2.FilteredHistoryItems.length === 0 ? 15 : 16);
} }
function TestingReviewComponent_ng_template_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 26);
    i0.ɵɵelement(1, "i", 59);
    i0.ɵɵtext(2, " Low agreement may indicate evaluation criteria need refinement. ");
    i0.ɵɵelementEnd();
} }
function TestingReviewComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 7);
    i0.ɵɵconditionalCreate(1, TestingReviewComponent_ng_template_2_Conditional_1_Template, 37, 4, "div", 8);
    i0.ɵɵelementStart(2, "div", 9)(3, "div", 10)(4, "button", 11);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetView("queue")); });
    i0.ɵɵelement(5, "i", 12);
    i0.ɵɵtext(6, " Review Queue ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "button", 11);
    i0.ɵɵlistener("click", function TestingReviewComponent_ng_template_2_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.SetView("history")); });
    i0.ɵɵelement(8, "i", 13);
    i0.ɵɵtext(9, " History ");
    i0.ɵɵelementEnd()()();
    i0.ɵɵconditionalCreate(10, TestingReviewComponent_ng_template_2_Conditional_10_Template, 3, 1, "div", 14);
    i0.ɵɵconditionalCreate(11, TestingReviewComponent_ng_template_2_Conditional_11_Template, 17, 3, "div", 14);
    i0.ɵɵelementStart(12, "div", 15)(13, "h3");
    i0.ɵɵelement(14, "i", 16);
    i0.ɵɵtext(15, " Human vs Auto Agreement ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "div", 17)(17, "div", 18)(18, "div", 19);
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelementStart(19, "svg", 20);
    i0.ɵɵelement(20, "circle", 21)(21, "circle", 22);
    i0.ɵɵelementEnd();
    i0.ɵɵnamespaceHTML();
    i0.ɵɵelementStart(22, "div", 23);
    i0.ɵɵtext(23);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(24, "div", 24)(25, "p", 25);
    i0.ɵɵtext(26, " Measures how often human reviewers agree with automated evaluation scores. ");
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(27, TestingReviewComponent_ng_template_2_Conditional_27_Template, 3, 0, "div", 26);
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.Metrics ? 1 : -1);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r2.CurrentView === "queue");
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r2.CurrentView === "history");
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(ctx_r2.CurrentView === "queue" ? 10 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.CurrentView === "history" ? 11 : -1);
    i0.ɵɵadvance(10);
    i0.ɵɵattribute("stroke", ctx_r2.AgreementColor)("stroke-dasharray", ctx_r2.AgreementDash);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("", ctx_r2.FormatDecimal(ctx_r2.AgreementRate, 0), "%");
    i0.ɵɵadvance(4);
    i0.ɵɵconditional(ctx_r2.AgreementRate < 70 ? 27 : -1);
} }
export class TestingReviewComponent {
    instrumentationService;
    cdr;
    initialState = null;
    /** When true, the inner bespoke .page-header is hidden — the parent shell owns the chrome. */
    HideToolbar = false;
    stateChange = new EventEmitter();
    destroy$ = new Subject();
    // View state
    CurrentView = 'queue';
    ExpandedItemId = null;
    ExpandedHistoryId = null;
    IsRefreshing = false;
    IsSubmitting = false;
    HistorySearchText = '';
    HistorySortField = 'date';
    // Form state for active review
    FormState = { rating: null, isCorrect: null, comments: '' };
    // Data
    PendingItems = [];
    HistoryItems = [];
    FilteredHistoryItems = [];
    Metrics = null;
    PendingCount = 0;
    // Constants
    RatingNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    constructor(instrumentationService, cdr) {
        this.instrumentationService = instrumentationService;
        this.cdr = cdr;
    }
    ngOnInit() {
        this.restoreState();
        this.setupSubscriptions();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    // ------------------------------------------------------------------
    //  Computed properties
    // ------------------------------------------------------------------
    get IsFormValid() {
        return this.FormState.rating != null && this.FormState.isCorrect != null;
    }
    get AgreementRate() {
        return this.Metrics?.agreementRate ?? 0;
    }
    get AgreementColor() {
        const rate = this.AgreementRate;
        if (rate >= 80)
            return '#22c55e';
        if (rate >= 60)
            return '#eab308';
        return '#ef4444';
    }
    get AgreementDash() {
        const circumference = 2 * Math.PI * 52; // r=52
        const filled = (this.AgreementRate / 100) * circumference;
        return `${filled} ${circumference}`;
    }
    // ------------------------------------------------------------------
    //  Setup
    // ------------------------------------------------------------------
    restoreState() {
        if (!this.initialState)
            return;
        const view = this.initialState['viewMode'];
        if (view === 'queue' || view === 'history') {
            this.CurrentView = view;
        }
    }
    setupSubscriptions() {
        this.instrumentationService.pendingFeedback$
            .pipe(takeUntil(this.destroy$))
            .subscribe(items => {
            this.PendingItems = items;
            this.PendingCount = items.length;
            this.cdr.markForCheck();
        });
        this.instrumentationService.evaluationMetrics$
            .pipe(takeUntil(this.destroy$))
            .subscribe(metrics => {
            this.Metrics = metrics;
            this.cdr.markForCheck();
        });
        this.instrumentationService.testRunsWithFeedback$
            .pipe(takeUntil(this.destroy$))
            .subscribe(runs => {
            this.HistoryItems = runs.filter(r => r.hasHumanFeedback);
            this.applyHistoryFilters();
            this.cdr.markForCheck();
        });
    }
    // ------------------------------------------------------------------
    //  View toggling
    // ------------------------------------------------------------------
    SetView(mode) {
        this.CurrentView = mode;
        this.ExpandedItemId = null;
        this.emitState();
        this.cdr.markForCheck();
    }
    // ------------------------------------------------------------------
    //  Queue interactions
    // ------------------------------------------------------------------
    IsItemExpanded(testRunID) {
        return UUIDsEqual(this.ExpandedItemId, testRunID);
    }
    ToggleExpand(testRunID) {
        if (UUIDsEqual(this.ExpandedItemId, testRunID)) {
            this.ExpandedItemId = null;
        }
        else {
            this.ExpandedItemId = testRunID;
            this.resetForm();
        }
        this.cdr.markForCheck();
    }
    SelectRating(n) {
        this.FormState = { ...this.FormState, rating: n };
        this.cdr.markForCheck();
    }
    SelectCorrectness(value) {
        this.FormState = { ...this.FormState, isCorrect: value };
        this.cdr.markForCheck();
    }
    OnCommentsChange(event) {
        const target = event.target;
        this.FormState = { ...this.FormState, comments: target.value };
    }
    async SubmitReview(item) {
        if (!this.IsFormValid || this.IsSubmitting)
            return;
        this.IsSubmitting = true;
        this.cdr.markForCheck();
        try {
            const success = await this.instrumentationService.submitFeedback(item.testRunID, this.FormState.rating, this.FormState.isCorrect, this.FormState.comments);
            if (success) {
                this.ExpandedItemId = null;
                this.resetForm();
            }
        }
        finally {
            this.IsSubmitting = false;
            this.cdr.markForCheck();
        }
    }
    SkipItem() {
        const currentIndex = this.PendingItems.findIndex(i => UUIDsEqual(i.testRunID, this.ExpandedItemId));
        this.ExpandedItemId = null;
        this.resetForm();
        // Expand the next item if available
        if (currentIndex >= 0 && currentIndex + 1 < this.PendingItems.length) {
            this.ExpandedItemId = this.PendingItems[currentIndex + 1].testRunID;
        }
        this.cdr.markForCheck();
    }
    // ------------------------------------------------------------------
    //  History interactions
    // ------------------------------------------------------------------
    OnHistorySearch(event) {
        const target = event.target;
        this.HistorySearchText = target.value;
        this.applyHistoryFilters();
        this.cdr.markForCheck();
    }
    OnHistorySortChange(event) {
        const target = event.target;
        this.HistorySortField = target.value;
        this.applyHistoryFilters();
        this.cdr.markForCheck();
    }
    ToggleHistoryComment(id) {
        this.ExpandedHistoryId = this.ExpandedHistoryId === id ? null : id;
        this.cdr.markForCheck();
    }
    // ------------------------------------------------------------------
    //  Refresh
    // ------------------------------------------------------------------
    Refresh() {
        this.IsRefreshing = true;
        this.cdr.markForCheck();
        this.instrumentationService.refresh();
        setTimeout(() => {
            this.IsRefreshing = false;
            this.cdr.markForCheck();
        }, 1500);
    }
    // ------------------------------------------------------------------
    //  Formatting helpers
    // ------------------------------------------------------------------
    FormatDecimal(value, decimals) {
        if (value == null)
            return '0';
        return value.toFixed(decimals);
    }
    FormatRelativeTime(date) {
        const now = Date.now();
        const then = date instanceof Date ? date.getTime() : new Date(date).getTime();
        const diffMs = now - then;
        const diffMin = Math.floor(diffMs / 60000);
        if (diffMin < 1)
            return 'just now';
        if (diffMin < 60)
            return `${diffMin}m ago`;
        const diffHours = Math.floor(diffMin / 60);
        if (diffHours < 24)
            return `${diffHours}h ago`;
        const diffDays = Math.floor(diffHours / 24);
        if (diffDays < 7)
            return `${diffDays}d ago`;
        const diffWeeks = Math.floor(diffDays / 7);
        if (diffWeeks < 4)
            return `${diffWeeks}w ago`;
        const diffMonths = Math.floor(diffDays / 30);
        return `${diffMonths}mo ago`;
    }
    // ------------------------------------------------------------------
    //  Private helpers
    // ------------------------------------------------------------------
    resetForm() {
        this.FormState = { rating: null, isCorrect: null, comments: '' };
    }
    applyHistoryFilters() {
        let items = [...this.HistoryItems];
        // Search filter
        if (this.HistorySearchText) {
            const term = this.HistorySearchText.toLowerCase();
            items = items.filter(i => i.testName.toLowerCase().includes(term));
        }
        // Sort
        items.sort((a, b) => {
            switch (this.HistorySortField) {
                case 'date':
                    return b.runDateTime.getTime() - a.runDateTime.getTime();
                case 'rating':
                    return (b.humanRating ?? 0) - (a.humanRating ?? 0);
                case 'test-name':
                    return a.testName.localeCompare(b.testName);
                default:
                    return 0;
            }
        });
        this.FilteredHistoryItems = items;
    }
    emitState() {
        this.stateChange.emit({ viewMode: this.CurrentView });
    }
    static ɵfac = function TestingReviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TestingReviewComponent)(i0.ɵɵdirectiveInject(i1.TestingInstrumentationService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TestingReviewComponent, selectors: [["app-testing-review"]], inputs: { initialState: "initialState", HideToolbar: "HideToolbar" }, outputs: { stateChange: "stateChange" }, standalone: false, decls: 4, vars: 1, consts: [["content", ""], [4, "ngTemplateOutlet"], ["Title", "Human Review", "Icon", "fa-solid fa-clipboard-check", "Subtitle", "Human-in-the-loop review for test outcomes"], ["meta", ""], ["Icon", "fa-solid fa-hourglass-half", "Label", "pending", "Variant", "warning", 3, "Count"], ["actions", ""], [3, "Clicked", "Loading"], [1, "review-page"], [1, "kpi-row"], [1, "view-toggle-bar"], [1, "toggle-group"], [1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list-check"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "content-card"], [1, "calibration-section"], [1, "fa-solid", "fa-scale-balanced"], [1, "calibration-body"], [1, "gauge-display"], [1, "gauge-ring"], ["viewBox", "0 0 120 120", 1, "gauge-svg"], ["cx", "60", "cy", "60", "r", "52", "fill", "none", "stroke-width", "10", 1, "gauge-track"], ["cx", "60", "cy", "60", "r", "52", "fill", "none", "stroke-width", "10", "stroke-linecap", "round", "stroke-dashoffset", "0", "transform", "rotate(-90 60 60)"], [1, "gauge-value"], [1, "calibration-text"], [1, "calibration-description"], [1, "calibration-warning"], [1, "kpi-card"], [1, "kpi-icon", "orange"], [1, "fa-solid", "fa-hourglass-half"], [1, "kpi-content"], [1, "kpi-value"], [1, "kpi-label"], [1, "kpi-icon", "green"], [1, "fa-solid", "fa-check-circle"], [1, "kpi-icon", "gold"], [1, "fa-solid", "fa-star"], [1, "kpi-unit"], [1, "kpi-icon", "blue"], [1, "fa-solid", "fa-handshake"], [1, "empty-state"], [1, "queue-list"], [1, "fa-solid", "fa-circle-check"], [1, "queue-item", 3, "expanded"], [1, "queue-item"], [1, "queue-item-header", 3, "click"], [1, "item-info"], [1, "item-name"], [1, "item-meta"], [1, "meta-time"], [1, "fa-solid", "fa-clock"], [3, "score", "showBar"], [3, "status"], [1, "item-actions-area"], [1, "reason-badge"], [1, "expand-toggle"], [1, "fa-solid"], [1, "review-form-panel"], [1, "fa-solid", "fa-comment-slash"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "fa-solid", "fa-circle-question"], [1, "form-section"], [1, "form-label"], [1, "rating-row"], [1, "rating-circle", 3, "selected", "current"], [1, "rating-display"], [1, "correctness-row"], [1, "correctness-btn", "correct", 3, "click"], [1, "fa-solid", "fa-check"], [1, "correctness-btn", "incorrect", 3, "click"], [1, "fa-solid", "fa-xmark"], ["rows", "3", "placeholder", "Add any comments about this evaluation...", 1, "notes-textarea", 3, "input", "value"], [1, "form-actions"], [1, "submit-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-paper-plane"], [1, "skip-btn", 3, "click"], [1, "fa-solid", "fa-forward"], [1, "rating-circle", 3, "click"], [1, "history-filters"], [1, "search-wrapper"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search by test name...", 3, "input", "value"], [1, "sort-control"], [3, "change", "value"], ["value", "date"], ["value", "rating"], ["value", "test-name"], [1, "history-list"], [1, "fa-solid", "fa-folder-open"], [1, "history-item"], [1, "history-item-main"], [1, "history-name"], [1, "history-date"], [1, "fa-solid", "fa-calendar"], [1, "history-rating"], [1, "rating-dots"], [1, "rating-dot", 3, "filled"], [1, "rating-label"], [1, "history-verdict"], [1, "verdict", "correct"], [1, "verdict", "incorrect"], [1, "history-auto-score"], [1, "history-comments", 3, "expanded"], [1, "rating-dot"], [1, "history-comments", 3, "click"]], template: function TestingReviewComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, TestingReviewComponent_Conditional_0_Template, 1, 1, "ng-container")(1, TestingReviewComponent_Conditional_1_Template, 8, 3, "mj-page-layout");
            i0.ɵɵtemplate(2, TestingReviewComponent_ng_template_2_Template, 28, 11, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.HideToolbar ? 0 : 1);
        } }, dependencies: [i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.MJPageHeaderComponent, i4.MJPageLayoutComponent, i4.MJPageBodyComponent, i4.MJStatBadgeComponent, i4.MJRefreshButtonComponent, i5.TestStatusBadgeComponent, i5.ScoreIndicatorComponent], styles: ["[_nghost-%COMP%] {\n      display: block;\n      height: 100%;\n    }\n\n    .review-page[_ngcontent-%COMP%] {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n\n    \n\n    .page-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      background: var(--mj-bg-surface);\n      padding: 20px;\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .header-left[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .pending-badge[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 14px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 20px;\n    }\n\n    .badge-count[_ngcontent-%COMP%] {\n      background: var(--mj-status-warning);\n      color: var(--mj-text-inverse);\n      min-width: 24px;\n      height: 24px;\n      padding: 0 6px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 12px;\n      font-weight: 700;\n    }\n\n    .badge-text[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-status-warning);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      background: var(--mj-bg-surface-card);\n      border-color: var(--mj-border-strong);\n    }\n\n    .refresh-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    \n\n    .kpi-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 16px;\n      margin-bottom: 20px;\n    }\n\n    .kpi-card[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      padding: 20px;\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n      color: var(--mj-text-inverse);\n      flex-shrink: 0;\n    }\n\n    .kpi-icon.orange[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n    .kpi-icon.green[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n    .kpi-icon.gold[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n    .kpi-icon.blue[_ngcontent-%COMP%] { background: var(--mj-brand-primary); }\n\n    .kpi-content[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .kpi-value[_ngcontent-%COMP%] {\n      font-size: 26px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .kpi-unit[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n    }\n\n    .kpi-label[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    \n\n    .view-toggle-bar[_ngcontent-%COMP%] {\n      margin-bottom: 20px;\n    }\n\n    .toggle-group[_ngcontent-%COMP%] {\n      display: inline-flex;\n      background: var(--mj-bg-surface);\n      border-radius: 10px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 24px;\n      border: none;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .toggle-btn[_ngcontent-%COMP%]:hover:not(.active) {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .toggle-btn.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    \n\n    .content-card[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n      margin-bottom: 20px;\n    }\n\n    \n\n    .queue-list[_ngcontent-%COMP%] {\n      max-height: 600px;\n      overflow-y: auto;\n    }\n\n    .queue-item[_ngcontent-%COMP%] {\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      transition: background 0.2s ease;\n    }\n\n    .queue-item.expanded[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .queue-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .queue-item-header[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      cursor: pointer;\n      transition: background 0.2s ease;\n    }\n\n    .queue-item-header[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n\n    .item-info[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .item-name[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin-bottom: 6px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-meta[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 14px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .meta-time[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .item-actions-area[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex-shrink: 0;\n    }\n\n    .reason-badge[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      border-radius: 16px;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .reason-no-feedback[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .reason-high-score-failed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .reason-low-score-passed[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .expand-toggle[_ngcontent-%COMP%] {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 8px;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: all 0.2s ease;\n    }\n\n    .expand-toggle[_ngcontent-%COMP%]:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-muted);\n    }\n\n    \n\n    .review-form-panel[_ngcontent-%COMP%] {\n      padding: 20px 20px 20px 36px;\n      border-top: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n    }\n\n    .form-section[_ngcontent-%COMP%] {\n      margin-bottom: 20px;\n    }\n\n    .form-section[_ngcontent-%COMP%]:last-of-type {\n      margin-bottom: 16px;\n    }\n\n    .form-label[_ngcontent-%COMP%] {\n      display: block;\n      font-size: 12px;\n      font-weight: 700;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 10px;\n    }\n\n    \n\n    .rating-row[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .rating-circle[_ngcontent-%COMP%] {\n      width: 36px;\n      height: 36px;\n      border-radius: 50%;\n      border: 2px solid var(--mj-border-strong);\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n      font-weight: 700;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.15s ease;\n    }\n\n    .rating-circle[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n      transform: scale(1.1);\n    }\n\n    .rating-circle.selected[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .rating-circle.current[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary-hover);\n      border-color: var(--mj-brand-primary-hover);\n      color: var(--mj-text-inverse);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .rating-display[_ngcontent-%COMP%] {\n      margin-left: 12px;\n      font-size: 16px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    \n\n    .correctness-row[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n    }\n\n    .correctness-btn[_ngcontent-%COMP%] {\n      flex: 1;\n      max-width: 200px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      padding: 12px 20px;\n      border: 2px solid var(--mj-border-strong);\n      border-radius: 10px;\n      background: var(--mj-bg-surface-card);\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .correctness-btn.correct[_ngcontent-%COMP%]:hover, \n   .correctness-btn.correct.active[_ngcontent-%COMP%] {\n      border-color: var(--mj-status-success);\n      background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .correctness-btn.incorrect[_ngcontent-%COMP%]:hover, \n   .correctness-btn.incorrect.active[_ngcontent-%COMP%] {\n      border-color: var(--mj-status-error);\n      background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    \n\n    .notes-textarea[_ngcontent-%COMP%] {\n      width: 100%;\n      max-width: 500px;\n      padding: 12px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 8px;\n      font-size: 14px;\n      font-family: inherit;\n      resize: vertical;\n      min-height: 72px;\n      box-sizing: border-box;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n    }\n\n    .notes-textarea[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    \n\n    .form-actions[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n    }\n\n    .submit-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 11px 22px;\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    .submit-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .submit-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .skip-btn[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 11px 20px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-muted);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .skip-btn[_ngcontent-%COMP%]:hover {\n      border-color: var(--mj-border-strong);\n      background: var(--mj-bg-surface-card);\n    }\n\n    \n\n    .history-filters[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 16px;\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      align-items: center;\n    }\n\n    .search-wrapper[_ngcontent-%COMP%] {\n      flex: 1;\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-wrapper[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n      position: absolute;\n      left: 12px;\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n    }\n\n    .search-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      width: 100%;\n      padding: 10px 12px 10px 36px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .search-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .sort-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      flex-shrink: 0;\n    }\n\n    .sort-control[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 12px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    \n\n    .history-list[_ngcontent-%COMP%] {\n      max-height: 600px;\n      overflow-y: auto;\n    }\n\n    .history-item[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .history-item[_ngcontent-%COMP%]:last-child {\n      border-bottom: none;\n    }\n\n    .history-item-main[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 160px;\n    }\n\n    .history-name[_ngcontent-%COMP%] {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n    }\n\n    .history-date[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-disabled);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .history-rating[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .rating-dots[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 3px;\n    }\n\n    .rating-dot[_ngcontent-%COMP%] {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: var(--mj-border-default);\n    }\n\n    .rating-dot.filled[_ngcontent-%COMP%] {\n      background: var(--mj-status-warning);\n    }\n\n    .rating-label[_ngcontent-%COMP%] {\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n    }\n\n    .history-verdict[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n    }\n\n    .verdict[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border-radius: 14px;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .verdict.correct[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .verdict.incorrect[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .history-auto-score[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n    }\n\n    .history-comments[_ngcontent-%COMP%] {\n      width: 100%;\n      margin-top: 8px;\n      padding: 10px 14px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      border-left: 3px solid var(--mj-brand-primary);\n      cursor: pointer;\n    }\n\n    .history-comments[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      line-height: 1.5;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .history-comments.expanded[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      white-space: normal;\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n      padding: 60px 20px;\n      text-align: center;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 52px;\n      margin-bottom: 16px;\n      color: var(--mj-status-success);\n    }\n\n    .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      font-size: 18px;\n      color: var(--mj-text-primary);\n      margin: 0 0 8px 0;\n      font-weight: 600;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      font-size: 14px;\n      color: var(--mj-text-disabled);\n      margin: 0;\n    }\n\n    \n\n    .calibration-section[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      padding: 24px;\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .calibration-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      margin: 0 0 20px 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .calibration-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-brand-primary);\n    }\n\n    .calibration-body[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 32px;\n    }\n\n    .gauge-display[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n    }\n\n    .gauge-ring[_ngcontent-%COMP%] {\n      position: relative;\n      width: 120px;\n      height: 120px;\n    }\n\n    .gauge-svg[_ngcontent-%COMP%] {\n      width: 100%;\n      height: 100%;\n    }\n\n    .gauge-track[_ngcontent-%COMP%] {\n      stroke: var(--mj-border-default);\n    }\n\n    .gauge-value[_ngcontent-%COMP%] {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 24px;\n      font-weight: 800;\n      color: var(--mj-text-primary);\n    }\n\n    .calibration-text[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .calibration-description[_ngcontent-%COMP%] {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      color: var(--mj-text-muted);\n      line-height: 1.6;\n    }\n\n    .calibration-warning[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 12px 16px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-status-warning);\n    }\n\n    .calibration-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      color: var(--mj-status-warning);\n      font-size: 16px;\n      flex-shrink: 0;\n    }\n\n    \n\n    .queue-item[_ngcontent-%COMP%] {\n      animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n    }\n\n    @keyframes _ngcontent-%COMP%_fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    \n\n    @media (max-width: 1024px) {\n      .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 768px) {\n      .review-page[_ngcontent-%COMP%] {\n        padding: 16px;\n      }\n\n      .page-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n        align-items: flex-start;\n      }\n\n      .kpi-row[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      .kpi-card[_ngcontent-%COMP%] {\n        padding: 16px;\n      }\n\n      .kpi-value[_ngcontent-%COMP%] {\n        font-size: 22px;\n      }\n\n      .queue-item-header[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n      }\n\n      .item-actions-area[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: flex-end;\n        margin-top: 8px;\n      }\n\n      .correctness-row[_ngcontent-%COMP%] {\n        flex-direction: column;\n      }\n\n      .correctness-btn[_ngcontent-%COMP%] {\n        max-width: 100%;\n      }\n\n      .history-item[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n\n      .calibration-body[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n      }\n    }"], changeDetection: 0 });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TestingReviewComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-testing-review', changeDetection: ChangeDetectionStrategy.OnPush, template: `
    @if (HideToolbar) {
      <ng-container *ngTemplateOutlet="content"></ng-container>
    } @else {
      <mj-page-layout>
        <mj-page-header
          Title="Human Review"
          Icon="fa-solid fa-clipboard-check"
          Subtitle="Human-in-the-loop review for test outcomes">
          <div meta>
            @if (PendingCount > 0) {
              <mj-stat-badge
                Icon="fa-solid fa-hourglass-half"
                [Count]="PendingCount"
                Label="pending"
                Variant="warning">
              </mj-stat-badge>
            }
          </div>
          <div actions>
            <mj-refresh-button [Loading]="IsRefreshing" (Clicked)="Refresh()"></mj-refresh-button>
          </div>
        </mj-page-header>
        <mj-page-body>
          <ng-container *ngTemplateOutlet="content"></ng-container>
        </mj-page-body>
      </mj-page-layout>
    }

    <ng-template #content>
    <!-- Inner page content -->
    <div class="review-page">

      <!-- KPI Summary Row -->
      @if (Metrics) {
        <div class="kpi-row">
          <div class="kpi-card">
            <div class="kpi-icon orange">
              <i class="fa-solid fa-hourglass-half"></i>
            </div>
            <div class="kpi-content">
              <div class="kpi-value">{{ Metrics.humanPendingCount }}</div>
              <div class="kpi-label">Pending Review</div>
            </div>
          </div>
          <div class="kpi-card">
            <div class="kpi-icon green">
              <i class="fa-solid fa-check-circle"></i>
            </div>
            <div class="kpi-content">
              <div class="kpi-value">{{ Metrics.humanReviewedCount }}</div>
              <div class="kpi-label">Reviewed</div>
            </div>
          </div>
          <div class="kpi-card">
            <div class="kpi-icon gold">
              <i class="fa-solid fa-star"></i>
            </div>
            <div class="kpi-content">
              <div class="kpi-value">{{ FormatDecimal(Metrics.humanAvgRating, 1) }}<span class="kpi-unit">/10</span></div>
              <div class="kpi-label">Avg Rating</div>
            </div>
          </div>
          <div class="kpi-card">
            <div class="kpi-icon blue">
              <i class="fa-solid fa-handshake"></i>
            </div>
            <div class="kpi-content">
              <div class="kpi-value">{{ FormatDecimal(Metrics.agreementRate, 0) }}<span class="kpi-unit">%</span></div>
              <div class="kpi-label">Agreement Rate</div>
            </div>
          </div>
        </div>
      }

      <!-- View Mode Toggle -->
      <div class="view-toggle-bar">
        <div class="toggle-group">
          <button class="toggle-btn" [class.active]="CurrentView === 'queue'" (click)="SetView('queue')">
            <i class="fa-solid fa-list-check"></i>
            Review Queue
          </button>
          <button class="toggle-btn" [class.active]="CurrentView === 'history'" (click)="SetView('history')">
            <i class="fa-solid fa-clock-rotate-left"></i>
            History
          </button>
        </div>
      </div>

      <!-- Review Queue View -->
      @if (CurrentView === 'queue') {
        <div class="content-card">
          @if (PendingItems.length === 0) {
            <div class="empty-state">
              <i class="fa-solid fa-circle-check"></i>
              <h3>All caught up!</h3>
              <p>No tests currently require human review.</p>
            </div>
          } @else {
            <div class="queue-list">
              @for (item of PendingItems; track item.testRunID) {
                <div class="queue-item" [class.expanded]="IsItemExpanded(item.testRunID)">
                  <div class="queue-item-header" (click)="ToggleExpand(item.testRunID)">
                    <div class="item-info">
                      <div class="item-name">{{ item.testName }}</div>
                      <div class="item-meta">
                        <span class="meta-time">
                          <i class="fa-solid fa-clock"></i>
                          {{ FormatRelativeTime(item.runDateTime) }}
                        </span>
                        <app-score-indicator [score]="item.automatedScore" [showBar]="true"></app-score-indicator>
                        <app-test-status-badge [status]="$any(item.automatedStatus)"></app-test-status-badge>
                      </div>
                    </div>
                    <div class="item-actions-area">
                      <span class="reason-badge" [class]="'reason-' + item.reason">
                        @if (item.reason === 'no-feedback') {
                          <i class="fa-solid fa-comment-slash"></i> No Feedback
                        } @else if (item.reason === 'high-score-failed') {
                          <i class="fa-solid fa-triangle-exclamation"></i> Score Mismatch
                        } @else {
                          <i class="fa-solid fa-circle-question"></i> Needs Verification
                        }
                      </span>
                      <button class="expand-toggle">
                        <i class="fa-solid" [class.fa-chevron-down]="!IsItemExpanded(item.testRunID)"
                           [class.fa-chevron-up]="IsItemExpanded(item.testRunID)"></i>
                      </button>
                    </div>
                  </div>

                  @if (IsItemExpanded(item.testRunID)) {
                    <div class="review-form-panel">
                      <!-- Rating -->
                      <div class="form-section">
                        <label class="form-label">Rating</label>
                        <div class="rating-row">
                          @for (n of RatingNumbers; track n) {
                            <button class="rating-circle"
                                    [class.selected]="FormState.rating != null && n <= FormState.rating"
                                    [class.current]="FormState.rating === n"
                                    (click)="SelectRating(n)">
                              {{ n }}
                            </button>
                          }
                          @if (FormState.rating != null) {
                            <span class="rating-display">{{ FormState.rating }}/10</span>
                          }
                        </div>
                      </div>

                      <!-- Correctness -->
                      <div class="form-section">
                        <label class="form-label">Is the automated result correct?</label>
                        <div class="correctness-row">
                          <button class="correctness-btn correct"
                                  [class.active]="FormState.isCorrect === true"
                                  (click)="SelectCorrectness(true)">
                            <i class="fa-solid fa-check"></i> Correct
                          </button>
                          <button class="correctness-btn incorrect"
                                  [class.active]="FormState.isCorrect === false"
                                  (click)="SelectCorrectness(false)">
                            <i class="fa-solid fa-xmark"></i> Incorrect
                          </button>
                        </div>
                      </div>

                      <!-- Notes -->
                      <div class="form-section">
                        <label class="form-label">Notes (optional)</label>
                        <textarea class="notes-textarea"
                                  rows="3"
                                  placeholder="Add any comments about this evaluation..."
                                  [value]="FormState.comments"
                                  (input)="OnCommentsChange($event)"></textarea>
                      </div>

                      <!-- Actions -->
                      <div class="form-actions">
                        <button class="submit-btn"
                                [disabled]="!IsFormValid || IsSubmitting"
                                (click)="SubmitReview(item)">
                          <i class="fa-solid fa-paper-plane"></i>
                          {{ IsSubmitting ? 'Submitting...' : 'Submit' }}
                        </button>
                        <button class="skip-btn" (click)="SkipItem()">
                          <i class="fa-solid fa-forward"></i> Skip
                        </button>
                      </div>
                    </div>
                  }
                </div>
              }
            </div>
          }
        </div>
      }

      <!-- History View -->
      @if (CurrentView === 'history') {
        <div class="content-card">
          <!-- Filter Bar -->
          <div class="history-filters">
            <div class="search-wrapper">
              <i class="fa-solid fa-search"></i>
              <input type="text"
                     placeholder="Search by test name..."
                     [value]="HistorySearchText"
                     (input)="OnHistorySearch($event)" />
            </div>
            <div class="sort-control">
              <label>Sort by:</label>
              <select [value]="HistorySortField" (change)="OnHistorySortChange($event)">
                <option value="date">Date</option>
                <option value="rating">Rating</option>
                <option value="test-name">Test Name</option>
              </select>
            </div>
          </div>

          @if (FilteredHistoryItems.length === 0) {
            <div class="empty-state">
              <i class="fa-solid fa-folder-open"></i>
              <h3>No reviewed items</h3>
              <p>Reviewed tests will appear here once feedback is submitted.</p>
            </div>
          } @else {
            <div class="history-list">
              @for (item of FilteredHistoryItems; track item.id) {
                <div class="history-item">
                  <div class="history-item-main">
                    <div class="history-name">{{ item.testName }}</div>
                    <div class="history-date">
                      <i class="fa-solid fa-calendar"></i>
                      {{ FormatRelativeTime(item.runDateTime) }}
                    </div>
                  </div>
                  <div class="history-rating">
                    <div class="rating-dots">
                      @for (n of RatingNumbers; track n) {
                        <span class="rating-dot" [class.filled]="item.humanRating != null && n <= item.humanRating"></span>
                      }
                    </div>
                    <span class="rating-label">{{ item.humanRating ?? 0 }}/10</span>
                  </div>
                  <div class="history-verdict">
                    @if (item.humanIsCorrect === true) {
                      <span class="verdict correct">
                        <i class="fa-solid fa-check"></i> Correct
                      </span>
                    } @else if (item.humanIsCorrect === false) {
                      <span class="verdict incorrect">
                        <i class="fa-solid fa-xmark"></i> Incorrect
                      </span>
                    }
                  </div>
                  <div class="history-auto-score">
                    <app-score-indicator [score]="item.score" [showBar]="true"></app-score-indicator>
                  </div>
                  @if (item.humanComments) {
                    <div class="history-comments"
                         [class.expanded]="ExpandedHistoryId === item.id"
                         (click)="ToggleHistoryComment(item.id)">
                      <p>{{ item.humanComments }}</p>
                    </div>
                  }
                </div>
              }
            </div>
          }
        </div>
      }

      <!-- Calibration Insights -->
      <div class="calibration-section">
        <h3>
          <i class="fa-solid fa-scale-balanced"></i>
          Human vs Auto Agreement
        </h3>
        <div class="calibration-body">
          <div class="gauge-display">
            <div class="gauge-ring">
              <svg viewBox="0 0 120 120" class="gauge-svg">
                <circle cx="60" cy="60" r="52" fill="none" class="gauge-track" stroke-width="10" />
                <circle cx="60" cy="60" r="52" fill="none"
                        [attr.stroke]="AgreementColor"
                        stroke-width="10"
                        stroke-linecap="round"
                        [attr.stroke-dasharray]="AgreementDash"
                        stroke-dashoffset="0"
                        transform="rotate(-90 60 60)" />
              </svg>
              <div class="gauge-value">{{ FormatDecimal(AgreementRate, 0) }}%</div>
            </div>
          </div>
          <div class="calibration-text">
            <p class="calibration-description">
              Measures how often human reviewers agree with automated evaluation scores.
            </p>
            @if (AgreementRate < 70) {
              <div class="calibration-warning">
                <i class="fa-solid fa-triangle-exclamation"></i>
                Low agreement may indicate evaluation criteria need refinement.
              </div>
            }
          </div>
        </div>
      </div>
    </div>
    </ng-template>
  `, styles: ["\n    :host {\n      display: block;\n      height: 100%;\n    }\n\n    .review-page {\n      padding: 20px;\n      height: 100%;\n      overflow-y: auto;\n      background: var(--mj-bg-surface-card);\n      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    }\n\n    /* Page Header */\n    .page-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      background: var(--mj-bg-surface);\n      padding: 20px;\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .header-left {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .header-left h2 {\n      margin: 0;\n      font-size: 22px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-left h2 i {\n      color: var(--mj-brand-primary);\n    }\n\n    .pending-badge {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 6px 14px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 20px;\n    }\n\n    .badge-count {\n      background: var(--mj-status-warning);\n      color: var(--mj-text-inverse);\n      min-width: 24px;\n      height: 24px;\n      padding: 0 6px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 12px;\n      font-weight: 700;\n    }\n\n    .badge-text {\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-status-warning);\n    }\n\n    .refresh-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 18px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .refresh-btn:hover:not(:disabled) {\n      background: var(--mj-bg-surface-card);\n      border-color: var(--mj-border-strong);\n    }\n\n    .refresh-btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    /* KPI Row */\n    .kpi-row {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 16px;\n      margin-bottom: 20px;\n    }\n\n    .kpi-card {\n      background: var(--mj-bg-surface);\n      padding: 20px;\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .kpi-icon {\n      width: 48px;\n      height: 48px;\n      border-radius: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 20px;\n      color: var(--mj-text-inverse);\n      flex-shrink: 0;\n    }\n\n    .kpi-icon.orange { background: var(--mj-status-warning); }\n    .kpi-icon.green { background: var(--mj-status-success); }\n    .kpi-icon.gold { background: var(--mj-status-warning); }\n    .kpi-icon.blue { background: var(--mj-brand-primary); }\n\n    .kpi-content {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .kpi-value {\n      font-size: 26px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n      line-height: 1;\n      margin-bottom: 4px;\n    }\n\n    .kpi-unit {\n      font-size: 14px;\n      font-weight: 500;\n      color: var(--mj-text-muted);\n    }\n\n    .kpi-label {\n      font-size: 11px;\n      color: var(--mj-text-muted);\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    }\n\n    /* View Toggle */\n    .view-toggle-bar {\n      margin-bottom: 20px;\n    }\n\n    .toggle-group {\n      display: inline-flex;\n      background: var(--mj-bg-surface);\n      border-radius: 10px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n    }\n\n    .toggle-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 24px;\n      border: none;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-muted);\n      font-size: 13px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .toggle-btn:hover:not(.active) {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .toggle-btn.active {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    /* Content Card */\n    .content-card {\n      background: var(--mj-bg-surface);\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n      overflow: hidden;\n      margin-bottom: 20px;\n    }\n\n    /* Queue List */\n    .queue-list {\n      max-height: 600px;\n      overflow-y: auto;\n    }\n\n    .queue-item {\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      transition: background 0.2s ease;\n    }\n\n    .queue-item.expanded {\n      background: var(--mj-bg-surface-card);\n    }\n\n    .queue-item:last-child {\n      border-bottom: none;\n    }\n\n    .queue-item-header {\n      padding: 16px 20px;\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      cursor: pointer;\n      transition: background 0.2s ease;\n    }\n\n    .queue-item-header:hover {\n      background: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n    }\n\n    .item-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .item-name {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin-bottom: 6px;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .item-meta {\n      display: flex;\n      gap: 14px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      align-items: center;\n      flex-wrap: wrap;\n    }\n\n    .meta-time {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .item-actions-area {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      flex-shrink: 0;\n    }\n\n    .reason-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      padding: 6px 12px;\n      border-radius: 16px;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .reason-no-feedback {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      color: var(--mj-brand-primary);\n    }\n\n    .reason-high-score-failed {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .reason-low-score-passed {\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-warning);\n    }\n\n    .expand-toggle {\n      background: none;\n      border: none;\n      color: var(--mj-text-disabled);\n      cursor: pointer;\n      padding: 8px;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: all 0.2s ease;\n    }\n\n    .expand-toggle:hover {\n      background: var(--mj-border-default);\n      color: var(--mj-text-muted);\n    }\n\n    /* Review Form */\n    .review-form-panel {\n      padding: 20px 20px 20px 36px;\n      border-top: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n    }\n\n    .form-section {\n      margin-bottom: 20px;\n    }\n\n    .form-section:last-of-type {\n      margin-bottom: 16px;\n    }\n\n    .form-label {\n      display: block;\n      font-size: 12px;\n      font-weight: 700;\n      color: var(--mj-text-secondary);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 10px;\n    }\n\n    /* Rating Circles */\n    .rating-row {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .rating-circle {\n      width: 36px;\n      height: 36px;\n      border-radius: 50%;\n      border: 2px solid var(--mj-border-strong);\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n      font-weight: 700;\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.15s ease;\n    }\n\n    .rating-circle:hover {\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-brand-primary);\n      transform: scale(1.1);\n    }\n\n    .rating-circle.selected {\n      background: var(--mj-brand-primary);\n      border-color: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .rating-circle.current {\n      background: var(--mj-brand-primary-hover);\n      border-color: var(--mj-brand-primary-hover);\n      color: var(--mj-text-inverse);\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .rating-display {\n      margin-left: 12px;\n      font-size: 16px;\n      font-weight: 700;\n      color: var(--mj-text-primary);\n    }\n\n    /* Correctness Buttons */\n    .correctness-row {\n      display: flex;\n      gap: 12px;\n    }\n\n    .correctness-btn {\n      flex: 1;\n      max-width: 200px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      gap: 8px;\n      padding: 12px 20px;\n      border: 2px solid var(--mj-border-strong);\n      border-radius: 10px;\n      background: var(--mj-bg-surface-card);\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .correctness-btn.correct:hover,\n    .correctness-btn.correct.active {\n      border-color: var(--mj-status-success);\n      background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .correctness-btn.incorrect:hover,\n    .correctness-btn.incorrect.active {\n      border-color: var(--mj-status-error);\n      background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    /* Notes */\n    .notes-textarea {\n      width: 100%;\n      max-width: 500px;\n      padding: 12px;\n      border: 1px solid var(--mj-border-strong);\n      border-radius: 8px;\n      font-size: 14px;\n      font-family: inherit;\n      resize: vertical;\n      min-height: 72px;\n      box-sizing: border-box;\n      background: var(--mj-bg-surface-card);\n      color: var(--mj-text-primary);\n    }\n\n    .notes-textarea:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    /* Form Actions */\n    .form-actions {\n      display: flex;\n      gap: 12px;\n    }\n\n    .submit-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 11px 22px;\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    .submit-btn:hover:not(:disabled) {\n      transform: translateY(-1px);\n      box-shadow: var(--mj-shadow-md);\n    }\n\n    .submit-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .skip-btn {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 11px 20px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-muted);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s ease;\n    }\n\n    .skip-btn:hover {\n      border-color: var(--mj-border-strong);\n      background: var(--mj-bg-surface-card);\n    }\n\n    /* History Filters */\n    .history-filters {\n      display: flex;\n      gap: 16px;\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      align-items: center;\n    }\n\n    .search-wrapper {\n      flex: 1;\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-wrapper > i {\n      position: absolute;\n      left: 12px;\n      color: var(--mj-text-disabled);\n      font-size: 13px;\n    }\n\n    .search-wrapper input {\n      width: 100%;\n      padding: 10px 12px 10px 36px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      font-size: 13px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    .search-wrapper input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    }\n\n    .sort-control {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      flex-shrink: 0;\n    }\n\n    .sort-control select {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      font-size: 12px;\n      background: var(--mj-bg-surface);\n      color: var(--mj-text-primary);\n    }\n\n    /* History List */\n    .history-list {\n      max-height: 600px;\n      overflow-y: auto;\n    }\n\n    .history-item {\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--mj-bg-surface-sunken);\n      display: flex;\n      align-items: center;\n      gap: 16px;\n      flex-wrap: wrap;\n    }\n\n    .history-item:last-child {\n      border-bottom: none;\n    }\n\n    .history-item-main {\n      flex: 1;\n      min-width: 160px;\n    }\n\n    .history-name {\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      margin-bottom: 4px;\n    }\n\n    .history-date {\n      font-size: 12px;\n      color: var(--mj-text-disabled);\n      display: flex;\n      align-items: center;\n      gap: 5px;\n    }\n\n    .history-rating {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .rating-dots {\n      display: flex;\n      gap: 3px;\n    }\n\n    .rating-dot {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n      background: var(--mj-border-default);\n    }\n\n    .rating-dot.filled {\n      background: var(--mj-status-warning);\n    }\n\n    .rating-label {\n      font-size: 12px;\n      font-weight: 600;\n      color: var(--mj-text-muted);\n    }\n\n    .history-verdict {\n      flex-shrink: 0;\n    }\n\n    .verdict {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border-radius: 14px;\n      font-size: 11px;\n      font-weight: 600;\n    }\n\n    .verdict.correct {\n      background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-success);\n    }\n\n    .verdict.incorrect {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\n    }\n\n    .history-auto-score {\n      flex-shrink: 0;\n    }\n\n    .history-comments {\n      width: 100%;\n      margin-top: 8px;\n      padding: 10px 14px;\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      border-left: 3px solid var(--mj-brand-primary);\n      cursor: pointer;\n    }\n\n    .history-comments p {\n      margin: 0;\n      font-size: 13px;\n      color: var(--mj-text-secondary);\n      line-height: 1.5;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .history-comments.expanded p {\n      white-space: normal;\n    }\n\n    /* Empty State */\n    .empty-state {\n      padding: 60px 20px;\n      text-align: center;\n    }\n\n    .empty-state i {\n      font-size: 52px;\n      margin-bottom: 16px;\n      color: var(--mj-status-success);\n    }\n\n    .empty-state h3 {\n      font-size: 18px;\n      color: var(--mj-text-primary);\n      margin: 0 0 8px 0;\n      font-weight: 600;\n    }\n\n    .empty-state p {\n      font-size: 14px;\n      color: var(--mj-text-disabled);\n      margin: 0;\n    }\n\n    /* Calibration Section */\n    .calibration-section {\n      background: var(--mj-bg-surface);\n      padding: 24px;\n      border-radius: 12px;\n      box-shadow: var(--mj-shadow-sm);\n    }\n\n    .calibration-section h3 {\n      margin: 0 0 20px 0;\n      font-size: 16px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n\n    .calibration-section h3 i {\n      color: var(--mj-brand-primary);\n    }\n\n    .calibration-body {\n      display: flex;\n      align-items: center;\n      gap: 32px;\n    }\n\n    .gauge-display {\n      flex-shrink: 0;\n    }\n\n    .gauge-ring {\n      position: relative;\n      width: 120px;\n      height: 120px;\n    }\n\n    .gauge-svg {\n      width: 100%;\n      height: 100%;\n    }\n\n    .gauge-track {\n      stroke: var(--mj-border-default);\n    }\n\n    .gauge-value {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 24px;\n      font-weight: 800;\n      color: var(--mj-text-primary);\n    }\n\n    .calibration-text {\n      flex: 1;\n    }\n\n    .calibration-description {\n      margin: 0 0 12px 0;\n      font-size: 14px;\n      color: var(--mj-text-muted);\n      line-height: 1.6;\n    }\n\n    .calibration-warning {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding: 12px 16px;\n      background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n      border: 1px solid var(--mj-status-warning);\n      border-radius: 8px;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-status-warning);\n    }\n\n    .calibration-warning i {\n      color: var(--mj-status-warning);\n      font-size: 16px;\n      flex-shrink: 0;\n    }\n\n    /* Success toast animation */\n    .queue-item {\n      animation: fadeIn 0.2s ease;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    /* Responsive */\n    @media (max-width: 1024px) {\n      .kpi-row {\n        grid-template-columns: repeat(2, 1fr);\n      }\n    }\n\n    @media (max-width: 768px) {\n      .review-page {\n        padding: 16px;\n      }\n\n      .page-header {\n        flex-direction: column;\n        gap: 16px;\n        align-items: flex-start;\n      }\n\n      .kpi-row {\n        grid-template-columns: 1fr 1fr;\n      }\n\n      .kpi-card {\n        padding: 16px;\n      }\n\n      .kpi-value {\n        font-size: 22px;\n      }\n\n      .queue-item-header {\n        flex-wrap: wrap;\n      }\n\n      .item-actions-area {\n        width: 100%;\n        justify-content: flex-end;\n        margin-top: 8px;\n      }\n\n      .correctness-row {\n        flex-direction: column;\n      }\n\n      .correctness-btn {\n        max-width: 100%;\n      }\n\n      .history-item {\n        flex-direction: column;\n        align-items: flex-start;\n      }\n\n      .calibration-body {\n        flex-direction: column;\n        align-items: center;\n        text-align: center;\n      }\n    }\n  "] }]
    }], () => [{ type: i1.TestingInstrumentationService }, { type: i0.ChangeDetectorRef }], { initialState: [{
            type: Input
        }], HideToolbar: [{
            type: Input
        }], stateChange: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TestingReviewComponent, { className: "TestingReviewComponent", filePath: "src/Testing/components/testing-review.component.ts", lineNumber: 1210 }); })();
//# sourceMappingURL=testing-review.component.js.map