/**
 * @fileoverview Search Result Detail Component (Task 8)
 *
 * Full-page detail view for a search result with breadcrumb navigation
 * back to search, score breakdown visualization, and related items sidebar.
 * Blends mockup results-detail-option-a (side panel) + option-b (full page).
 */
import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@memberjunction/ng-shared-generic";
import * as i2 from "@memberjunction/ng-ui-components";
const _forTrack0 = ($index, $item) => $item.Label;
const _forTrack1 = ($index, $item) => $item.ID;
function SearchResultDetailComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    const _r2 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "nav", 3)(1, "button", 32);
    i0.ɵɵlistener("click", function SearchResultDetailComponent_Conditional_0_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.GoBack()); });
    i0.ɵɵelement(2, "i", 33);
    i0.ɵɵtext(3, " Back to Search Results ");
    i0.ɵɵelementEnd()();
} }
function SearchResultDetailComponent_Conditional_0_For_35_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 24)(1, "span", 34);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 35);
    i0.ɵɵelement(4, "div", 36);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "span", 37);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const entry_r4 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(entry_r4.Label);
    i0.ɵɵadvance(2);
    i0.ɵɵclassMap(ctx_r2.GetScoreClass(entry_r4.Score));
    i0.ɵɵstyleProp("width", ctx_r2.GetScoreBarWidth(entry_r4.Score));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.FormatScore(entry_r4.Score));
} }
function SearchResultDetailComponent_Conditional_0_Conditional_43_For_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 40);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const tag_r5 = ctx.$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(tag_r5);
} }
function SearchResultDetailComponent_Conditional_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 16)(1, "h3", 17);
    i0.ɵɵelement(2, "i", 38);
    i0.ɵɵtext(3, " Tags ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 39);
    i0.ɵɵrepeaterCreate(5, SearchResultDetailComponent_Conditional_0_Conditional_43_For_6_Template, 2, 1, "span", 40, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(5);
    i0.ɵɵrepeater(ctx_r2.Result.Tags);
} }
function SearchResultDetailComponent_Conditional_0_Conditional_47_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-loading", 30);
} }
function SearchResultDetailComponent_Conditional_0_Conditional_48_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-empty-state", 31);
} }
function SearchResultDetailComponent_Conditional_0_Conditional_49_For_1_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 42);
    i0.ɵɵlistener("click", function SearchResultDetailComponent_Conditional_0_Conditional_49_For_1_Template_div_click_0_listener() { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnRelatedItemClick(item_r7)); });
    i0.ɵɵelement(1, "i");
    i0.ɵɵelementStart(2, "div", 43)(3, "span", 44);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "span", 45);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "span", 46);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const item_r7 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵclassMap(item_r7.SourceIcon + " related-item-icon");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(item_r7.Title);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(item_r7.EntityName);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.FormatScore(item_r7.Score));
} }
function SearchResultDetailComponent_Conditional_0_Conditional_49_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵrepeaterCreate(0, SearchResultDetailComponent_Conditional_0_Conditional_49_For_1_Template, 9, 5, "div", 41, _forTrack1);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵrepeater(ctx_r2.RelatedItems);
} }
function SearchResultDetailComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 2);
    i0.ɵɵconditionalCreate(1, SearchResultDetailComponent_Conditional_0_Conditional_1_Template, 4, 0, "nav", 3);
    i0.ɵɵelementStart(2, "div", 4)(3, "div", 5)(4, "div", 6)(5, "div", 7);
    i0.ɵɵelement(6, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "div", 8)(8, "h1", 9);
    i0.ɵɵtext(9);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "div", 10)(11, "span", 11);
    i0.ɵɵelement(12, "i", 12);
    i0.ɵɵtext(13);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "span", 11);
    i0.ɵɵelement(15, "i");
    i0.ɵɵtext(16);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(17, "span", 11);
    i0.ɵɵelement(18, "i", 13);
    i0.ɵɵtext(19);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(20, "button", 14);
    i0.ɵɵlistener("click", function SearchResultDetailComponent_Conditional_0_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OpenSourceRecord()); });
    i0.ɵɵelement(21, "i", 15);
    i0.ɵɵtext(22, " Open Record ");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(23, "div", 16)(24, "h3", 17);
    i0.ɵɵelement(25, "i", 18);
    i0.ɵɵtext(26, " Relevance Score ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(27, "div", 19)(28, "div", 20)(29, "span", 21);
    i0.ɵɵtext(30);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(31, "span", 22);
    i0.ɵɵtext(32, "Overall Score");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(33, "div", 23);
    i0.ɵɵrepeaterCreate(34, SearchResultDetailComponent_Conditional_0_For_35_Template, 7, 6, "div", 24, _forTrack0);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(36, "div", 16)(37, "h3", 17);
    i0.ɵɵelement(38, "i", 25);
    i0.ɵɵtext(39, " Content Preview ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(40, "div", 26)(41, "p", 27);
    i0.ɵɵtext(42);
    i0.ɵɵelementEnd()()();
    i0.ɵɵconditionalCreate(43, SearchResultDetailComponent_Conditional_0_Conditional_43_Template, 7, 0, "div", 16);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(44, "aside", 28)(45, "h3", 29);
    i0.ɵɵtext(46, "Related Items");
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(47, SearchResultDetailComponent_Conditional_0_Conditional_47_Template, 1, 0, "mj-loading", 30)(48, SearchResultDetailComponent_Conditional_0_Conditional_48_Template, 1, 0, "mj-empty-state", 31)(49, SearchResultDetailComponent_Conditional_0_Conditional_49_Template, 2, 0);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("detail-side-panel", ctx_r2.SidePanelMode);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r2.SidePanelMode ? 1 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵclassMap(ctx_r2.Result.SourceIcon);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(ctx_r2.Result.Title);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.Result.EntityName, " ");
    i0.ɵɵadvance(2);
    i0.ɵɵclassMap(ctx_r2.Result.SourceIcon);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r2.GetSourceTypeLabel(ctx_r2.Result.SourceType), " ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.Result.RecordID, " ");
    i0.ɵɵadvance(9);
    i0.ɵɵclassMap(ctx_r2.GetScoreClass(ctx_r2.Result.Score));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r2.FormatScore(ctx_r2.Result.Score));
    i0.ɵɵadvance(4);
    i0.ɵɵrepeater(ctx_r2.GetScoreBreakdownEntries());
    i0.ɵɵadvance(8);
    i0.ɵɵtextInterpolate(ctx_r2.Result.Snippet);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.Result.Tags.length > 0 ? 43 : -1);
    i0.ɵɵadvance(4);
    i0.ɵɵconditional(ctx_r2.IsLoadingRelated ? 47 : ctx_r2.RelatedItems.length === 0 ? 48 : 49);
} }
function SearchResultDetailComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-empty-state", 1);
} }
export class SearchResultDetailComponent {
    cdr = inject(ChangeDetectorRef);
    /** The search result to display in detail */
    Result = null;
    /** Whether to show in side panel mode (no breadcrumb) */
    SidePanelMode = false;
    BackClicked = new EventEmitter();
    RelatedItemSelected = new EventEmitter();
    NavigateToRecord = new EventEmitter();
    // --- Component State ---
    RelatedItems = [];
    IsLoadingRelated = false;
    /** Navigate back to search results */
    GoBack() {
        this.BackClicked.emit();
    }
    /** Navigate to the source record */
    OpenSourceRecord() {
        if (!this.Result)
            return;
        this.NavigateToRecord.emit({
            EntityName: this.Result.EntityName,
            RecordID: this.Result.RecordID
        });
    }
    /** Handle clicking a related item */
    OnRelatedItemClick(item) {
        this.RelatedItemSelected.emit(item);
    }
    /** Format a score as percentage */
    FormatScore(score) {
        return `${Math.round(score * 100)}%`;
    }
    /** Get the width percentage for score bar visualization */
    GetScoreBarWidth(score) {
        return `${Math.round(score * 100)}%`;
    }
    /** Get the CSS class for a score level */
    GetScoreClass(score) {
        if (score >= 0.8)
            return 'score-high';
        if (score >= 0.5)
            return 'score-medium';
        return 'score-low';
    }
    /** Get score breakdown entries for visualization */
    GetScoreBreakdownEntries() {
        if (!this.Result?.ScoreBreakdown)
            return [];
        const entries = [];
        const breakdown = this.Result.ScoreBreakdown;
        if (breakdown.Vector !== undefined) {
            entries.push({ Label: 'Vector Similarity', Score: breakdown.Vector });
        }
        if (breakdown.FullText !== undefined) {
            entries.push({ Label: 'Full-Text Match', Score: breakdown.FullText });
        }
        if (breakdown.Entity !== undefined) {
            entries.push({ Label: 'Entity Match', Score: breakdown.Entity });
        }
        return entries;
    }
    /** Get a human-readable source type label */
    GetSourceTypeLabel(sourceType) {
        const labels = {
            'entity': 'Entity Record',
            'content-item': 'Content Item',
            'file': 'Document',
            'web-page': 'Web Page'
        };
        return labels[sourceType] ?? sourceType;
    }
    static ɵfac = function SearchResultDetailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SearchResultDetailComponent)(); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SearchResultDetailComponent, selectors: [["app-search-result-detail"]], inputs: { Result: "Result", SidePanelMode: "SidePanelMode" }, outputs: { BackClicked: "BackClicked", RelatedItemSelected: "RelatedItemSelected", NavigateToRecord: "NavigateToRecord" }, standalone: false, decls: 2, vars: 1, consts: [[1, "detail-page", 3, "detail-side-panel"], ["Icon", "fa-solid fa-file-magnifying-glass", "Title", "No result selected", "Message", "Select a search result to view details", 1, "detail-empty"], [1, "detail-page"], [1, "detail-breadcrumb"], [1, "detail-layout"], [1, "detail-main"], [1, "detail-header"], [1, "detail-header-icon"], [1, "detail-header-info"], [1, "detail-title"], [1, "detail-meta"], [1, "detail-meta-item"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-key"], [1, "detail-open-record-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "detail-section"], [1, "detail-section-title"], [1, "fa-solid", "fa-chart-bar"], [1, "score-overview"], [1, "score-main"], [1, "score-main-value"], [1, "score-main-label"], [1, "score-breakdown"], [1, "score-bar-row"], [1, "fa-solid", "fa-align-left"], [1, "detail-snippet-box"], [1, "detail-snippet"], [1, "detail-sidebar"], [1, "sidebar-title"], ["text", "Loading...", "size", "small"], ["Size", "compact", "Icon", "fa-solid fa-link", "Title", "No related items found"], [1, "breadcrumb-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "score-bar-label"], [1, "score-bar-track"], [1, "score-bar-fill"], [1, "score-bar-value"], [1, "fa-solid", "fa-tags"], [1, "detail-tags"], [1, "detail-tag"], [1, "related-item"], [1, "related-item", 3, "click"], [1, "related-item-info"], [1, "related-item-title"], [1, "related-item-entity"], [1, "related-item-score"]], template: function SearchResultDetailComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, SearchResultDetailComponent_Conditional_0_Template, 50, 17, "div", 0)(1, SearchResultDetailComponent_Conditional_1_Template, 1, 0, "mj-empty-state", 1);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.Result ? 0 : 1);
        } }, dependencies: [i1.LoadingComponent, i2.MJEmptyStateComponent], styles: ["\n\n\n.detail-page[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.detail-side-panel[_ngcontent-%COMP%] {\n    border-left: 1px solid var(--mj-border-default);\n}\n\n\n\n.detail-empty[_ngcontent-%COMP%] {\n    min-height: 300px;\n}\n\n\n\n.detail-breadcrumb[_ngcontent-%COMP%] {\n    padding: 0.75rem 1.5rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.breadcrumb-back[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 0.85rem;\n    cursor: pointer;\n    padding: 0.35rem 0.5rem;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.breadcrumb-back[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n\n\n.detail-layout[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n.detail-main[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 1.5rem;\n    overflow-y: auto;\n}\n\n\n\n.detail-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 1rem;\n    margin-bottom: 2rem;\n    padding-bottom: 1.5rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-header-icon[_ngcontent-%COMP%] {\n    width: 3rem;\n    height: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 1.2rem;\n    flex-shrink: 0;\n}\n\n.detail-header-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.detail-title[_ngcontent-%COMP%] {\n    font-size: 1.4rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 0.5rem;\n}\n\n.detail-meta[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n}\n\n.detail-meta-item[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.35rem;\n    font-size: 0.82rem;\n    color: var(--mj-text-muted);\n}\n\n.detail-open-record-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.4rem;\n    padding: 0.5rem 1rem;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.85rem;\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.detail-open-record-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n\n\n.detail-section[_ngcontent-%COMP%] {\n    margin-bottom: 1.5rem;\n}\n\n.detail-section-title[_ngcontent-%COMP%] {\n    font-size: 0.9rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 0.75rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.detail-section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 0.82rem;\n}\n\n\n\n.score-overview[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 2rem;\n    align-items: flex-start;\n}\n\n.score-main[_ngcontent-%COMP%] {\n    width: 5rem;\n    height: 5rem;\n    border-radius: 50%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: 3px solid;\n}\n\n.score-main.score-high[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-success);\n    background: var(--mj-status-success-bg);\n}\n\n.score-main.score-medium[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-warning);\n    background: var(--mj-status-warning-bg);\n}\n\n.score-main.score-low[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-error);\n    background: var(--mj-status-error-bg);\n}\n\n.score-main-value[_ngcontent-%COMP%] {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.score-main-label[_ngcontent-%COMP%] {\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n}\n\n.score-breakdown[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.score-bar-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n}\n\n.score-bar-label[_ngcontent-%COMP%] {\n    width: 120px;\n    font-size: 0.82rem;\n    color: var(--mj-text-secondary);\n    flex-shrink: 0;\n}\n\n.score-bar-track[_ngcontent-%COMP%] {\n    flex: 1;\n    height: 8px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.score-bar-fill[_ngcontent-%COMP%] {\n    height: 100%;\n    border-radius: 4px;\n    transition: width 0.3s ease;\n}\n\n.score-bar-fill.score-high[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.score-bar-fill.score-medium[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n}\n\n.score-bar-fill.score-low[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n}\n\n.score-bar-value[_ngcontent-%COMP%] {\n    width: 40px;\n    font-size: 0.78rem;\n    color: var(--mj-text-muted);\n    text-align: right;\n}\n\n\n\n.detail-snippet-box[_ngcontent-%COMP%] {\n    padding: 1rem;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-subtle);\n}\n\n.detail-snippet[_ngcontent-%COMP%] {\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n    line-height: 1.6;\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n\n\n.detail-tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n}\n\n.detail-tag[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 0.25rem 0.65rem;\n    border-radius: 9999px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    border: 1px solid var(--mj-border-subtle);\n}\n\n\n\n.detail-sidebar[_ngcontent-%COMP%] {\n    width: 280px;\n    border-left: 1px solid var(--mj-border-default);\n    padding: 1.5rem 1rem;\n    overflow-y: auto;\n    flex-shrink: 0;\n}\n\n.sidebar-title[_ngcontent-%COMP%] {\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 1rem;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n}\n\n.related-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.5rem 0.6rem;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.1s ease;\n}\n\n.related-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.related-item-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 0.82rem;\n    flex-shrink: 0;\n}\n\n.related-item-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.related-item-title[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 0.82rem;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.related-item-entity[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.related-item-score[_ngcontent-%COMP%] {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n\n\n@media (max-width: 768px) {\n    .detail-layout[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .detail-sidebar[_ngcontent-%COMP%] {\n        width: 100%;\n        border-left: none;\n        border-top: 1px solid var(--mj-border-default);\n    }\n\n    .score-overview[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: center;\n    }\n}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SearchResultDetailComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-search-result-detail', template: "@if (Result) {\n    <div class=\"detail-page\" [class.detail-side-panel]=\"SidePanelMode\">\n        <!-- Breadcrumb (full page mode only) -->\n        @if (!SidePanelMode) {\n            <nav class=\"detail-breadcrumb\">\n                <button class=\"breadcrumb-back\" (click)=\"GoBack()\">\n                    <i class=\"fa-solid fa-arrow-left\"></i>\n                    Back to Search Results\n                </button>\n            </nav>\n        }\n\n        <div class=\"detail-layout\">\n            <!-- Main Content -->\n            <div class=\"detail-main\">\n                <!-- Header -->\n                <div class=\"detail-header\">\n                    <div class=\"detail-header-icon\">\n                        <i [class]=\"Result.SourceIcon\"></i>\n                    </div>\n                    <div class=\"detail-header-info\">\n                        <h1 class=\"detail-title\">{{ Result.Title }}</h1>\n                        <div class=\"detail-meta\">\n                            <span class=\"detail-meta-item\">\n                                <i class=\"fa-solid fa-table\"></i>\n                                {{ Result.EntityName }}\n                            </span>\n                            <span class=\"detail-meta-item\">\n                                <i [class]=\"Result.SourceIcon\"></i>\n                                {{ GetSourceTypeLabel(Result.SourceType) }}\n                            </span>\n                            <span class=\"detail-meta-item\">\n                                <i class=\"fa-solid fa-key\"></i>\n                                {{ Result.RecordID }}\n                            </span>\n                        </div>\n                    </div>\n                    <button class=\"detail-open-record-btn\" (click)=\"OpenSourceRecord()\">\n                        <i class=\"fa-solid fa-external-link-alt\"></i>\n                        Open Record\n                    </button>\n                </div>\n\n                <!-- Score Section -->\n                <div class=\"detail-section\">\n                    <h3 class=\"detail-section-title\">\n                        <i class=\"fa-solid fa-chart-bar\"></i>\n                        Relevance Score\n                    </h3>\n                    <div class=\"score-overview\">\n                        <div class=\"score-main\" [class]=\"GetScoreClass(Result.Score)\">\n                            <span class=\"score-main-value\">{{ FormatScore(Result.Score) }}</span>\n                            <span class=\"score-main-label\">Overall Score</span>\n                        </div>\n                        <div class=\"score-breakdown\">\n                            @for (entry of GetScoreBreakdownEntries(); track entry.Label) {\n                                <div class=\"score-bar-row\">\n                                    <span class=\"score-bar-label\">{{ entry.Label }}</span>\n                                    <div class=\"score-bar-track\">\n                                        <div class=\"score-bar-fill\" [style.width]=\"GetScoreBarWidth(entry.Score)\" [class]=\"GetScoreClass(entry.Score)\"></div>\n                                    </div>\n                                    <span class=\"score-bar-value\">{{ FormatScore(entry.Score) }}</span>\n                                </div>\n                            }\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Snippet Section -->\n                <div class=\"detail-section\">\n                    <h3 class=\"detail-section-title\">\n                        <i class=\"fa-solid fa-align-left\"></i>\n                        Content Preview\n                    </h3>\n                    <div class=\"detail-snippet-box\">\n                        <p class=\"detail-snippet\">{{ Result.Snippet }}</p>\n                    </div>\n                </div>\n\n                <!-- Tags Section -->\n                @if (Result.Tags.length > 0) {\n                    <div class=\"detail-section\">\n                        <h3 class=\"detail-section-title\">\n                            <i class=\"fa-solid fa-tags\"></i>\n                            Tags\n                        </h3>\n                        <div class=\"detail-tags\">\n                            @for (tag of Result.Tags; track tag) {\n                                <span class=\"detail-tag\">{{ tag }}</span>\n                            }\n                        </div>\n                    </div>\n                }\n            </div>\n\n            <!-- Related Items Sidebar -->\n            <aside class=\"detail-sidebar\">\n                <h3 class=\"sidebar-title\">Related Items</h3>\n                @if (IsLoadingRelated) {\n                    <mj-loading text=\"Loading...\" size=\"small\"></mj-loading>\n                } @else if (RelatedItems.length === 0) {\n                    <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-link\"\n                        Title=\"No related items found\" />\n                } @else {\n                    @for (item of RelatedItems; track item.ID) {\n                        <div class=\"related-item\" (click)=\"OnRelatedItemClick(item)\">\n                            <i [class]=\"item.SourceIcon + ' related-item-icon'\"></i>\n                            <div class=\"related-item-info\">\n                                <span class=\"related-item-title\">{{ item.Title }}</span>\n                                <span class=\"related-item-entity\">{{ item.EntityName }}</span>\n                            </div>\n                            <span class=\"related-item-score\">{{ FormatScore(item.Score) }}</span>\n                        </div>\n                    }\n                }\n            </aside>\n        </div>\n    </div>\n} @else {\n    <mj-empty-state class=\"detail-empty\" Icon=\"fa-solid fa-file-magnifying-glass\"\n        Title=\"No result selected\"\n        Message=\"Select a search result to view details\" />\n}\n", styles: ["/* Search Result Detail */\n\n.detail-page {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.detail-side-panel {\n    border-left: 1px solid var(--mj-border-default);\n}\n\n/* keeps the empty-state filling the detail pane (host centers its own content) */\n.detail-empty {\n    min-height: 300px;\n}\n\n/* Breadcrumb */\n.detail-breadcrumb {\n    padding: 0.75rem 1.5rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.breadcrumb-back {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    border: none;\n    background: transparent;\n    color: var(--mj-text-secondary);\n    font-size: 0.85rem;\n    cursor: pointer;\n    padding: 0.35rem 0.5rem;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.breadcrumb-back:hover {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n/* Layout */\n.detail-layout {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n.detail-main {\n    flex: 1;\n    padding: 1.5rem;\n    overflow-y: auto;\n}\n\n/* Header */\n.detail-header {\n    display: flex;\n    align-items: flex-start;\n    gap: 1rem;\n    margin-bottom: 2rem;\n    padding-bottom: 1.5rem;\n    border-bottom: 1px solid var(--mj-border-subtle);\n}\n\n.detail-header-icon {\n    width: 3rem;\n    height: 3rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    font-size: 1.2rem;\n    flex-shrink: 0;\n}\n\n.detail-header-info {\n    flex: 1;\n}\n\n.detail-title {\n    font-size: 1.4rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 0.5rem;\n}\n\n.detail-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n}\n\n.detail-meta-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.35rem;\n    font-size: 0.82rem;\n    color: var(--mj-text-muted);\n}\n\n.detail-open-record-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 0.4rem;\n    padding: 0.5rem 1rem;\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 0.85rem;\n    cursor: pointer;\n    flex-shrink: 0;\n    transition: all 0.15s ease;\n}\n\n.detail-open-record-btn:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n}\n\n/* Sections */\n.detail-section {\n    margin-bottom: 1.5rem;\n}\n\n.detail-section-title {\n    font-size: 0.9rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 0.75rem;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n}\n\n.detail-section-title i {\n    color: var(--mj-text-muted);\n    font-size: 0.82rem;\n}\n\n/* Score Visualization */\n.score-overview {\n    display: flex;\n    gap: 2rem;\n    align-items: flex-start;\n}\n\n.score-main {\n    width: 5rem;\n    height: 5rem;\n    border-radius: 50%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    border: 3px solid;\n}\n\n.score-main.score-high {\n    border-color: var(--mj-status-success);\n    background: var(--mj-status-success-bg);\n}\n\n.score-main.score-medium {\n    border-color: var(--mj-status-warning);\n    background: var(--mj-status-warning-bg);\n}\n\n.score-main.score-low {\n    border-color: var(--mj-status-error);\n    background: var(--mj-status-error-bg);\n}\n\n.score-main-value {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n.score-main-label {\n    font-size: 0.6rem;\n    color: var(--mj-text-muted);\n    text-transform: uppercase;\n}\n\n.score-breakdown {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\n.score-bar-row {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n}\n\n.score-bar-label {\n    width: 120px;\n    font-size: 0.82rem;\n    color: var(--mj-text-secondary);\n    flex-shrink: 0;\n}\n\n.score-bar-track {\n    flex: 1;\n    height: 8px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    overflow: hidden;\n}\n\n.score-bar-fill {\n    height: 100%;\n    border-radius: 4px;\n    transition: width 0.3s ease;\n}\n\n.score-bar-fill.score-high {\n    background: var(--mj-status-success);\n}\n\n.score-bar-fill.score-medium {\n    background: var(--mj-status-warning);\n}\n\n.score-bar-fill.score-low {\n    background: var(--mj-status-error);\n}\n\n.score-bar-value {\n    width: 40px;\n    font-size: 0.78rem;\n    color: var(--mj-text-muted);\n    text-align: right;\n}\n\n/* Content Preview */\n.detail-snippet-box {\n    padding: 1rem;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    border: 1px solid var(--mj-border-subtle);\n}\n\n.detail-snippet {\n    color: var(--mj-text-primary);\n    font-size: 0.9rem;\n    line-height: 1.6;\n    margin: 0;\n    white-space: pre-wrap;\n}\n\n/* Tags */\n.detail-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.35rem;\n}\n\n.detail-tag {\n    display: inline-block;\n    padding: 0.25rem 0.65rem;\n    border-radius: 9999px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n    font-size: 0.8rem;\n    border: 1px solid var(--mj-border-subtle);\n}\n\n/* Sidebar */\n.detail-sidebar {\n    width: 280px;\n    border-left: 1px solid var(--mj-border-default);\n    padding: 1.5rem 1rem;\n    overflow-y: auto;\n    flex-shrink: 0;\n}\n\n.sidebar-title {\n    font-size: 0.82rem;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 1rem;\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n}\n\n.related-item {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.5rem 0.6rem;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: background 0.1s ease;\n}\n\n.related-item:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.related-item-icon {\n    color: var(--mj-brand-primary);\n    font-size: 0.82rem;\n    flex-shrink: 0;\n}\n\n.related-item-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.related-item-title {\n    display: block;\n    font-size: 0.82rem;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.related-item-entity {\n    display: block;\n    font-size: 0.72rem;\n    color: var(--mj-text-muted);\n}\n\n.related-item-score {\n    font-size: 0.72rem;\n    color: var(--mj-brand-primary);\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n/* Mobile responsive */\n@media (max-width: 768px) {\n    .detail-layout {\n        flex-direction: column;\n    }\n\n    .detail-sidebar {\n        width: 100%;\n        border-left: none;\n        border-top: 1px solid var(--mj-border-default);\n    }\n\n    .score-overview {\n        flex-direction: column;\n        align-items: center;\n    }\n}\n"] }]
    }], null, { Result: [{
            type: Input
        }], SidePanelMode: [{
            type: Input
        }], BackClicked: [{
            type: Output
        }], RelatedItemSelected: [{
            type: Output
        }], NavigateToRecord: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SearchResultDetailComponent, { className: "SearchResultDetailComponent", filePath: "src/KnowledgeHub/components/results-detail/search-result-detail.component.ts", lineNumber: 34 }); })();
//# sourceMappingURL=search-result-detail.component.js.map