/**
 * @fileoverview Usage Patterns Analytics.
 *
 * Displays a time-of-day heatmap (7 days × 24 hours), day-of-week distribution bars,
 * peak hours summary cards, and an hourly throughput bar chart.
 * Data loaded from MJ: AI Prompt Runs for the last 30 days.
 */
import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } from '@angular/core';
import { Subject } from 'rxjs';
import { RunView } from '@memberjunction/core';
import { BaseAngularComponent } from '@memberjunction/ng-base-types';
import * as i0 from "@angular/core";
import * as i1 from "@memberjunction/ng-shared-generic";
import * as i2 from "@angular/common";
const _forTrack0 = ($index, $item) => $item.DayIndex;
const _forTrack1 = ($index, $item) => $item.Label;
const _forTrack2 = ($index, $item) => $item.Hour;
function AnalyticsUsagePatternsComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 0);
    i0.ɵɵelement(1, "mj-loading", 2);
    i0.ɵɵelementEnd();
} }
function AnalyticsUsagePatternsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 1);
    i0.ɵɵelement(1, "i", 3);
    i0.ɵɵelementStart(2, "div", 4);
    i0.ɵɵtext(3, "No Data Available");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 5);
    i0.ɵɵtext(5, "No prompt runs found in the last 30 days.");
    i0.ɵɵelementEnd()();
} }
function AnalyticsUsagePatternsComponent_Conditional_2_For_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 13);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const h_r1 = ctx.$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(h_r1);
} }
function AnalyticsUsagePatternsComponent_Conditional_2_For_12_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 25);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const h_r2 = i0.ɵɵnextContext().$implicit;
    const ɵ$index_38_r3 = i0.ɵɵnextContext().$index;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r3.getCellCount(ɵ$index_38_r3, h_r2));
} }
function AnalyticsUsagePatternsComponent_Conditional_2_For_12_For_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 24);
    i0.ɵɵconditionalCreate(1, AnalyticsUsagePatternsComponent_Conditional_2_For_12_For_3_Conditional_1_Template, 2, 1, "span", 25);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const h_r2 = ctx.$implicit;
    const ɵ$index_38_r3 = i0.ɵɵnextContext().$index;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵstyleProp("background", ctx_r3.getCellBackground(ɵ$index_38_r3, h_r2));
    i0.ɵɵproperty("title", ctx_r3.getCellTooltip(ɵ$index_38_r3, h_r2));
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r3.getCellCount(ɵ$index_38_r3, h_r2) > 0 ? 1 : -1);
} }
function AnalyticsUsagePatternsComponent_Conditional_2_For_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 22);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
    i0.ɵɵrepeaterCreate(2, AnalyticsUsagePatternsComponent_Conditional_2_For_12_For_3_Template, 2, 4, "div", 23, i0.ɵɵrepeaterTrackByIdentity);
} if (rf & 2) {
    const day_r5 = ctx.$implicit;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(day_r5);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r3.Hours);
} }
function AnalyticsUsagePatternsComponent_Conditional_2_For_20_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 16)(1, "span", 26);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 27);
    i0.ɵɵelement(4, "div", 28);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "span", 29);
    i0.ɵɵtext(6);
    i0.ɵɵpipe(7, "number");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const d_r6 = ctx.$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(d_r6.DayName);
    i0.ɵɵadvance(2);
    i0.ɵɵstyleProp("width", d_r6.WidthPercent, "%");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 4, d_r6.Count));
} }
function AnalyticsUsagePatternsComponent_Conditional_2_For_27_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 18)(1, "div", 30);
    i0.ɵɵelement(2, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 31)(4, "div", 32);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 33);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "div", 34);
    i0.ɵɵtext(9);
    i0.ɵɵpipe(10, "number");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const peak_r7 = ctx.$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵclassMap(peak_r7.Icon);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(peak_r7.Label);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(peak_r7.Value);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate2("", i0.ɵɵpipeBind1(10, 6, peak_r7.Count), " ", peak_r7.CountUnit || "runs");
} }
function AnalyticsUsagePatternsComponent_Conditional_2_For_37_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 21);
    i0.ɵɵelement(1, "div", 35);
    i0.ɵɵelementStart(2, "span", 36);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const bar_r8 = ctx.$implicit;
    i0.ɵɵproperty("title", bar_r8.Label + ": " + bar_r8.Count + " runs");
    i0.ɵɵadvance();
    i0.ɵɵstyleProp("height", bar_r8.HeightPercent, "%");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(bar_r8.Label);
} }
function AnalyticsUsagePatternsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "h4", 8);
    i0.ɵɵtext(3, "Time-of-Day Heatmap");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "span", 9);
    i0.ɵɵtext(5, "Execution count by day and hour");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(6, "div", 10)(7, "div", 11);
    i0.ɵɵelement(8, "div", 12);
    i0.ɵɵrepeaterCreate(9, AnalyticsUsagePatternsComponent_Conditional_2_For_10_Template, 2, 1, "div", 13, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵrepeaterCreate(11, AnalyticsUsagePatternsComponent_Conditional_2_For_12_Template, 4, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(13, "div", 14)(14, "div", 6)(15, "div", 7)(16, "h4", 8);
    i0.ɵɵtext(17, "Day-of-Week Distribution");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(18, "div", 15);
    i0.ɵɵrepeaterCreate(19, AnalyticsUsagePatternsComponent_Conditional_2_For_20_Template, 8, 6, "div", 16, _forTrack0);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(21, "div", 6)(22, "div", 7)(23, "h4", 8);
    i0.ɵɵtext(24, "Peak Hours Summary");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(25, "div", 17);
    i0.ɵɵrepeaterCreate(26, AnalyticsUsagePatternsComponent_Conditional_2_For_27_Template, 11, 8, "div", 18, _forTrack1);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(28, "div", 6)(29, "div", 7)(30, "h4", 8);
    i0.ɵɵtext(31, "Hourly Throughput");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(32, "span", 9);
    i0.ɵɵtext(33, "Total runs per hour (all days combined)");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(34, "div", 19)(35, "div", 20);
    i0.ɵɵrepeaterCreate(36, AnalyticsUsagePatternsComponent_Conditional_2_For_37_Template, 4, 4, "div", 21, _forTrack2);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵadvance(9);
    i0.ɵɵrepeater(ctx_r3.Hours);
    i0.ɵɵadvance(2);
    i0.ɵɵrepeater(ctx_r3.DayNames);
    i0.ɵɵadvance(8);
    i0.ɵɵrepeater(ctx_r3.DayDistributions);
    i0.ɵɵadvance(7);
    i0.ɵɵrepeater(ctx_r3.PeakSummaries);
    i0.ɵɵadvance(10);
    i0.ɵɵrepeater(ctx_r3.HourlyBars);
} }
const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const HOURS = Array.from({ length: 24 }, (_, i) => i);
const FIELDS = [
    'ID', 'RunAt', 'Success', 'Cost', 'TokensUsed', 'TokensPrompt', 'TokensCacheRead', 'TokensCacheWrite', 'ExecutionTimeMS'
];
export class AnalyticsUsagePatternsComponent extends BaseAngularComponent {
    _timeRange = '30d';
    isInitialized = false;
    set TimeRange(value) {
        if (value !== this._timeRange) {
            this._timeRange = value;
            if (this.isInitialized) {
                this.loadData();
            }
        }
    }
    get TimeRange() { return this._timeRange; }
    TimeRangeChange = new EventEmitter();
    // ── Public state ──
    IsLoading = true;
    TotalRuns = 0;
    HeatmapCells = []; // [day][hour]
    DayDistributions = [];
    PeakSummaries = [];
    HourlyBars = [];
    DayNames = DAY_NAMES;
    Hours = HOURS;
    // ── Private ──
    destroy$ = new Subject();
    cdr = inject(ChangeDetectorRef);
    async ngOnInit() {
        await this.loadData();
        this.isInitialized = true;
    }
    OnTimeRangeChange(range) {
        this.TimeRange = range;
        this.TimeRangeChange.emit(range);
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    // ── Heatmap helpers (called from template) ──
    getCellBackground(day, hour) {
        const intensity = this.HeatmapCells[day]?.[hour]?.Intensity ?? 0;
        return `color-mix(in srgb, var(--mj-brand-primary) ${intensity}%, var(--mj-bg-surface))`;
    }
    getCellTooltip(day, hour) {
        const count = this.HeatmapCells[day]?.[hour]?.Count ?? 0;
        return `${DAY_NAMES[day]} ${this.formatHourLabel(hour)}: ${count} runs`;
    }
    getCellCount(day, hour) {
        return this.HeatmapCells[day]?.[hour]?.Count ?? 0;
    }
    // ── Data Loading ──
    async loadData() {
        this.IsLoading = true;
        this.cdr.detectChanges();
        try {
            const runs = await this.fetchPromptRuns();
            this.TotalRuns = runs.length;
            if (runs.length > 0) {
                const dayCounts = this.buildDayHourCounts(runs);
                this.HeatmapCells = this.buildHeatmap(dayCounts);
                this.DayDistributions = this.buildDayDistributions(dayCounts);
                this.HourlyBars = this.buildHourlyBars(dayCounts);
                this.PeakSummaries = this.buildPeakSummaries(dayCounts, runs);
            }
        }
        catch (err) {
            console.error('Usage patterns data load failed:', err);
        }
        finally {
            this.IsLoading = false;
            this.cdr.detectChanges();
        }
    }
    async fetchPromptRuns() {
        const rv = RunView.FromMetadataProvider(this.ProviderToUse);
        const since = new Date();
        switch (this.TimeRange) {
            case '1h':
                since.setHours(since.getHours() - 1);
                break;
            case '6h':
                since.setHours(since.getHours() - 6);
                break;
            case '24h':
                since.setDate(since.getDate() - 1);
                break;
            case '7d':
                since.setDate(since.getDate() - 7);
                break;
            case '30d':
            default:
                since.setDate(since.getDate() - 30);
                break;
        }
        const sinceStr = since.toISOString();
        const result = await rv.RunView({
            EntityName: 'MJ: AI Prompt Runs',
            ExtraFilter: `RunAt >= '${sinceStr}'`,
            Fields: FIELDS,
            ResultType: 'simple'
        });
        if (!result.Success) {
            console.error('Failed to load prompt runs:', result.ErrorMessage);
            return [];
        }
        return result.Results ?? [];
    }
    /**
     * Build a 7×24 count matrix: dayCounts[dayIndex][hour] = count.
     * dayIndex 0 = Monday, 6 = Sunday. Uses the JS Date getDay() offset.
     */
    buildDayHourCounts(runs) {
        const counts = Array.from({ length: 7 }, () => new Array(24).fill(0));
        for (const run of runs) {
            const dt = new Date(run.RunAt);
            const jsDay = dt.getDay(); // 0=Sun, 1=Mon, ..., 6=Sat
            const dayIndex = jsDay === 0 ? 6 : jsDay - 1; // Convert to 0=Mon, 6=Sun
            const hour = dt.getHours();
            counts[dayIndex][hour]++;
        }
        return counts;
    }
    buildHeatmap(dayCounts) {
        const maxCount = this.findMaxCount(dayCounts);
        return dayCounts.map((hours, day) => hours.map((count, hour) => ({
            Day: day,
            Hour: hour,
            Count: count,
            Intensity: maxCount > 0 ? Math.round((count / maxCount) * 100) : 0
        })));
    }
    buildDayDistributions(dayCounts) {
        const daySums = dayCounts.map(hours => hours.reduce((sum, c) => sum + c, 0));
        const maxDay = Math.max(...daySums, 1);
        return daySums.map((count, i) => ({
            DayIndex: i,
            DayName: DAY_NAMES[i],
            Count: count,
            WidthPercent: Math.round((count / maxDay) * 100)
        }));
    }
    buildHourlyBars(dayCounts) {
        const hourSums = HOURS.map(h => dayCounts.reduce((sum, dayHours) => sum + dayHours[h], 0));
        const maxHour = Math.max(...hourSums, 1);
        return hourSums.map((count, h) => ({
            Hour: h,
            Label: this.formatHourLabel(h),
            Count: count,
            HeightPercent: Math.round((count / maxHour) * 100)
        }));
    }
    buildPeakSummaries(dayCounts, runs) {
        const hourSums = HOURS.map(h => dayCounts.reduce((sum, dayHours) => sum + dayHours[h], 0));
        const daySums = dayCounts.map(hours => hours.reduce((sum, c) => sum + c, 0));
        // Busiest hour
        const busiestHourIdx = this.indexOfMax(hourSums);
        const busiestHour = {
            Label: 'Busiest Hour',
            Value: `${this.formatHourRange(busiestHourIdx)}`,
            Count: hourSums[busiestHourIdx],
            Icon: 'fa-solid fa-fire'
        };
        // Busiest day
        const busiestDayIdx = this.indexOfMax(daySums);
        const busiestDay = {
            Label: 'Busiest Day',
            Value: this.fullDayName(busiestDayIdx),
            Count: daySums[busiestDayIdx],
            Icon: 'fa-solid fa-calendar-day'
        };
        // Quietest cell (day+hour combo)
        let minCount = Infinity;
        let quietDay = 0;
        let quietHour = 0;
        for (let d = 0; d < 7; d++) {
            for (let h = 0; h < 24; h++) {
                if (dayCounts[d][h] < minCount) {
                    minCount = dayCounts[d][h];
                    quietDay = d;
                    quietHour = h;
                }
            }
        }
        const quietest = {
            Label: 'Quietest Period',
            Value: `${DAY_NAMES[quietDay]} ${this.formatHourLabel(quietHour)}`,
            Count: minCount,
            Icon: 'fa-solid fa-moon'
        };
        // Overall prompt-cache hit rate for the period (cache reads / total input processed)
        let cacheRead = 0, inputForHit = 0;
        for (const r of runs) {
            const read = r.TokensCacheRead ?? 0;
            cacheRead += read;
            inputForHit += (r.TokensPrompt ?? 0) + read + (r.TokensCacheWrite ?? 0);
        }
        const cacheHitRate = {
            Label: 'Cache Hit Rate',
            Value: inputForHit > 0 ? `${Math.round((cacheRead / inputForHit) * 100)}%` : '—',
            Count: cacheRead,
            Icon: 'fa-solid fa-bolt',
            CountUnit: 'cached tokens'
        };
        return [busiestHour, busiestDay, quietest, cacheHitRate];
    }
    // ── Utility helpers ──
    findMaxCount(dayCounts) {
        let max = 0;
        for (const hours of dayCounts) {
            for (const c of hours) {
                if (c > max)
                    max = c;
            }
        }
        return max;
    }
    indexOfMax(arr) {
        let maxIdx = 0;
        for (let i = 1; i < arr.length; i++) {
            if (arr[i] > arr[maxIdx])
                maxIdx = i;
        }
        return maxIdx;
    }
    formatHourLabel(h) {
        if (h === 0)
            return '12a';
        if (h < 12)
            return `${h}a`;
        if (h === 12)
            return '12p';
        return `${h - 12}p`;
    }
    formatHourRange(h) {
        const start = this.formatHour12(h);
        const end = this.formatHour12((h + 1) % 24);
        return `${start} - ${end}`;
    }
    formatHour12(h) {
        if (h === 0)
            return '12:00 AM';
        if (h < 12)
            return `${h}:00 AM`;
        if (h === 12)
            return '12:00 PM';
        return `${h - 12}:00 PM`;
    }
    fullDayName(idx) {
        const names = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
        return names[idx] ?? 'Unknown';
    }
    static ɵfac = /*@__PURE__*/ (() => { let ɵAnalyticsUsagePatternsComponent_BaseFactory; return function AnalyticsUsagePatternsComponent_Factory(__ngFactoryType__) { return (ɵAnalyticsUsagePatternsComponent_BaseFactory || (ɵAnalyticsUsagePatternsComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AnalyticsUsagePatternsComponent)))(__ngFactoryType__ || AnalyticsUsagePatternsComponent); }; })();
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AnalyticsUsagePatternsComponent, selectors: [["app-analytics-usage-patterns"]], inputs: { TimeRange: "TimeRange" }, outputs: { TimeRangeChange: "TimeRangeChange" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 3, vars: 1, consts: [[1, "loading-container"], [1, "empty-state"], ["text", "Analyzing usage patterns..."], [1, "fa-solid", "fa-chart-line", "empty-state__icon"], [1, "empty-state__title"], [1, "empty-state__subtitle"], [1, "panel"], [1, "panel__header"], [1, "panel__title"], [1, "panel__subtitle"], [1, "heatmap-wrapper"], [1, "heatmap-grid"], [1, "heatmap-corner"], [1, "heatmap-hour-label"], [1, "two-col-row"], [1, "day-distribution"], [1, "day-bar-row"], [1, "peak-cards"], [1, "peak-card"], [1, "hourly-chart"], [1, "hourly-bars"], [1, "hourly-bar-col", 3, "title"], [1, "heatmap-day-label"], [1, "heatmap-cell", 3, "background", "title"], [1, "heatmap-cell", 3, "title"], [1, "heatmap-cell__count"], [1, "day-bar-label"], [1, "day-bar-track"], [1, "day-bar-fill"], [1, "day-bar-count"], [1, "peak-card__icon"], [1, "peak-card__content"], [1, "peak-card__label"], [1, "peak-card__value"], [1, "peak-card__count"], [1, "hourly-bar"], [1, "hourly-bar-label"]], template: function AnalyticsUsagePatternsComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, AnalyticsUsagePatternsComponent_Conditional_0_Template, 2, 0, "div", 0)(1, AnalyticsUsagePatternsComponent_Conditional_1_Template, 6, 0, "div", 1)(2, AnalyticsUsagePatternsComponent_Conditional_2_Template, 38, 0);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.IsLoading ? 0 : ctx.TotalRuns === 0 ? 1 : 2);
        } }, dependencies: [i1.LoadingComponent, i2.DecimalPipe], styles: ["[_nghost-%COMP%] { display: block; }\n\n        \n\n        .section-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 16px;\n        }\n\n        .section-header__left[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .section-header__icon[_ngcontent-%COMP%] {\n            font-size: 18px;\n            color: var(--mj-brand-primary);\n        }\n\n        .section-header__title[_ngcontent-%COMP%] {\n            font-size: 18px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            margin: 0;\n        }\n\n        .time-range-badge[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 5px 12px;\n            border-radius: 20px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-subtle);\n        }\n\n        \n\n        .loading-container[_ngcontent-%COMP%] {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        .empty-state[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 60px 24px;\n            text-align: center;\n        }\n\n        .empty-state__icon[_ngcontent-%COMP%] {\n            font-size: 36px;\n            color: var(--mj-text-muted);\n            margin-bottom: 12px;\n        }\n\n        .empty-state__title[_ngcontent-%COMP%] {\n            font-size: 16px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin-bottom: 4px;\n        }\n\n        .empty-state__subtitle[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: var(--mj-text-muted);\n        }\n\n        \n\n        .panel[_ngcontent-%COMP%] {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            padding: 20px;\n            margin-bottom: 16px;\n        }\n\n        .panel__header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: baseline;\n            gap: 10px;\n            margin-bottom: 16px;\n        }\n\n        .panel__title[_ngcontent-%COMP%] {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin: 0;\n        }\n\n        .panel__subtitle[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        \n\n        .heatmap-wrapper[_ngcontent-%COMP%] {\n            overflow-x: auto;\n        }\n\n        .heatmap-grid[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: 44px repeat(24, 1fr);\n            gap: 2px;\n            min-width: 600px;\n        }\n\n        .heatmap-corner[_ngcontent-%COMP%] {\n            \n\n        }\n\n        .heatmap-hour-label[_ngcontent-%COMP%] {\n            font-size: 10px;\n            color: var(--mj-text-muted);\n            text-align: center;\n            padding-bottom: 4px;\n            font-weight: 500;\n        }\n\n        .heatmap-day-label[_ngcontent-%COMP%] {\n            font-size: 11px;\n            color: var(--mj-text-secondary);\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            justify-content: flex-end;\n            padding-right: 6px;\n        }\n\n        .heatmap-cell[_ngcontent-%COMP%] {\n            min-height: 28px;\n            border-radius: 3px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: default;\n            transition: opacity 0.15s ease;\n        }\n\n        .heatmap-cell[_ngcontent-%COMP%]:hover {\n            opacity: 0.8;\n            outline: 1px solid var(--mj-border-strong);\n        }\n\n        .heatmap-cell__count[_ngcontent-%COMP%] {\n            font-size: 9px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        \n\n        .two-col-row[_ngcontent-%COMP%] {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 16px;\n        }\n\n        @media (max-width: 1024px) {\n            .two-col-row[_ngcontent-%COMP%] {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        \n\n        .day-distribution[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n\n        .day-bar-row[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .day-bar-label[_ngcontent-%COMP%] {\n            width: 36px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            text-align: right;\n            flex-shrink: 0;\n        }\n\n        .day-bar-track[_ngcontent-%COMP%] {\n            flex: 1;\n            height: 22px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 4px;\n            overflow: hidden;\n        }\n\n        .day-bar-fill[_ngcontent-%COMP%] {\n            height: 100%;\n            background: var(--mj-brand-primary);\n            border-radius: 4px;\n            transition: width 0.3s ease;\n            min-width: 2px;\n        }\n\n        .day-bar-count[_ngcontent-%COMP%] {\n            width: 48px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            text-align: right;\n            flex-shrink: 0;\n        }\n\n        \n\n        .peak-cards[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .peak-card[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 14px;\n            padding: 14px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 10px;\n        }\n\n        .peak-card__icon[_ngcontent-%COMP%] {\n            width: 40px;\n            height: 40px;\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 16px;\n            flex-shrink: 0;\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n        }\n\n        .peak-card[_ngcontent-%COMP%]:nth-child(2)   .peak-card__icon[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n            color: var(--mj-status-success);\n        }\n\n        .peak-card[_ngcontent-%COMP%]:nth-child(3)   .peak-card__icon[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n            color: var(--mj-status-info);\n        }\n\n        .peak-card__content[_ngcontent-%COMP%] {\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n        }\n\n        .peak-card__label[_ngcontent-%COMP%] {\n            font-size: 11px;\n            font-weight: 500;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.3px;\n        }\n\n        .peak-card__value[_ngcontent-%COMP%] {\n            font-size: 14px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n        }\n\n        .peak-card__count[_ngcontent-%COMP%] {\n            font-size: 12px;\n            color: var(--mj-text-secondary);\n        }\n\n        \n\n        .hourly-chart[_ngcontent-%COMP%] {\n            padding-top: 8px;\n        }\n\n        .hourly-bars[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: flex-end;\n            gap: 3px;\n            height: 160px;\n        }\n\n        .hourly-bar-col[_ngcontent-%COMP%] {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-end;\n            height: 100%;\n            cursor: default;\n        }\n\n        .hourly-bar[_ngcontent-%COMP%] {\n            width: 100%;\n            min-height: 2px;\n            background: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-bg-surface));\n            border-radius: 3px 3px 0 0;\n            transition: background 0.15s ease, height 0.3s ease;\n        }\n\n        .hourly-bar-col[_ngcontent-%COMP%]:hover   .hourly-bar[_ngcontent-%COMP%] {\n            background: color-mix(in srgb, var(--mj-brand-primary) 60%, var(--mj-bg-surface));\n        }\n\n        .hourly-bar-label[_ngcontent-%COMP%] {\n            font-size: 9px;\n            color: var(--mj-text-muted);\n            margin-top: 4px;\n            white-space: nowrap;\n        }\n\n        \n\n        @media (max-width: 1024px) {\n            .heatmap-grid[_ngcontent-%COMP%] {\n                grid-template-columns: 36px repeat(24, 1fr);\n            }\n\n            .heatmap-cell[_ngcontent-%COMP%] {\n                min-height: 22px;\n            }\n\n            .heatmap-cell__count[_ngcontent-%COMP%] {\n                font-size: 8px;\n            }\n\n            .hourly-bars[_ngcontent-%COMP%] {\n                height: 120px;\n            }\n        }"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AnalyticsUsagePatternsComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'app-analytics-usage-patterns', template: `

        @if (IsLoading) {
            <div class="loading-container">
                <mj-loading text="Analyzing usage patterns..."></mj-loading>
            </div>
        } @else if (TotalRuns === 0) {
            <div class="empty-state">
                <i class="fa-solid fa-chart-line empty-state__icon"></i>
                <div class="empty-state__title">No Data Available</div>
                <div class="empty-state__subtitle">No prompt runs found in the last 30 days.</div>
            </div>
        } @else {
            <!-- Heatmap -->
            <div class="panel">
                <div class="panel__header">
                    <h4 class="panel__title">Time-of-Day Heatmap</h4>
                    <span class="panel__subtitle">Execution count by day and hour</span>
                </div>
                <div class="heatmap-wrapper">
                    <div class="heatmap-grid">
                        <!-- Corner spacer -->
                        <div class="heatmap-corner"></div>
                        <!-- Hour labels -->
                        @for (h of Hours; track h) {
                            <div class="heatmap-hour-label">{{ h }}</div>
                        }

                        <!-- Rows: one per day -->
                        @for (day of DayNames; track day; let d = $index) {
                            <div class="heatmap-day-label">{{ day }}</div>
                            @for (h of Hours; track h) {
                                <div
                                    class="heatmap-cell"
                                    [style.background]="getCellBackground(d, h)"
                                    [title]="getCellTooltip(d, h)">
                                    @if (getCellCount(d, h) > 0) {
                                        <span class="heatmap-cell__count">{{ getCellCount(d, h) }}</span>
                                    }
                                </div>
                            }
                        }
                    </div>
                </div>
            </div>

            <!-- Day Distribution + Peak Summary -->
            <div class="two-col-row">
                <!-- Day-of-Week Distribution -->
                <div class="panel">
                    <div class="panel__header">
                        <h4 class="panel__title">Day-of-Week Distribution</h4>
                    </div>
                    <div class="day-distribution">
                        @for (d of DayDistributions; track d.DayIndex) {
                            <div class="day-bar-row">
                                <span class="day-bar-label">{{ d.DayName }}</span>
                                <div class="day-bar-track">
                                    <div
                                        class="day-bar-fill"
                                        [style.width.%]="d.WidthPercent">
                                    </div>
                                </div>
                                <span class="day-bar-count">{{ d.Count | number }}</span>
                            </div>
                        }
                    </div>
                </div>

                <!-- Peak Hours Summary -->
                <div class="panel">
                    <div class="panel__header">
                        <h4 class="panel__title">Peak Hours Summary</h4>
                    </div>
                    <div class="peak-cards">
                        @for (peak of PeakSummaries; track peak.Label) {
                            <div class="peak-card">
                                <div class="peak-card__icon">
                                    <i [class]="peak.Icon"></i>
                                </div>
                                <div class="peak-card__content">
                                    <div class="peak-card__label">{{ peak.Label }}</div>
                                    <div class="peak-card__value">{{ peak.Value }}</div>
                                    <div class="peak-card__count">{{ peak.Count | number }} {{ peak.CountUnit || 'runs' }}</div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            </div>

            <!-- Hourly Throughput -->
            <div class="panel">
                <div class="panel__header">
                    <h4 class="panel__title">Hourly Throughput</h4>
                    <span class="panel__subtitle">Total runs per hour (all days combined)</span>
                </div>
                <div class="hourly-chart">
                    <div class="hourly-bars">
                        @for (bar of HourlyBars; track bar.Hour) {
                            <div class="hourly-bar-col" [title]="bar.Label + ': ' + bar.Count + ' runs'">
                                <div
                                    class="hourly-bar"
                                    [style.height.%]="bar.HeightPercent">
                                </div>
                                <span class="hourly-bar-label">{{ bar.Label }}</span>
                            </div>
                        }
                    </div>
                </div>
            </div>
        }
    `, styles: ["\n        :host { display: block; }\n\n        /* \u2500\u2500 Header \u2500\u2500 */\n        .section-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            margin-bottom: 16px;\n        }\n\n        .section-header__left {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .section-header__icon {\n            font-size: 18px;\n            color: var(--mj-brand-primary);\n        }\n\n        .section-header__title {\n            font-size: 18px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n            margin: 0;\n        }\n\n        .time-range-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 5px 12px;\n            border-radius: 20px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-subtle);\n        }\n\n        /* \u2500\u2500 Loading / Empty \u2500\u2500 */\n        .loading-container {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 300px;\n        }\n\n        .empty-state {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            padding: 60px 24px;\n            text-align: center;\n        }\n\n        .empty-state__icon {\n            font-size: 36px;\n            color: var(--mj-text-muted);\n            margin-bottom: 12px;\n        }\n\n        .empty-state__title {\n            font-size: 16px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin-bottom: 4px;\n        }\n\n        .empty-state__subtitle {\n            font-size: 13px;\n            color: var(--mj-text-muted);\n        }\n\n        /* \u2500\u2500 Panels \u2500\u2500 */\n        .panel {\n            background: var(--mj-bg-surface);\n            border: 1px solid var(--mj-border-default);\n            border-radius: 12px;\n            padding: 20px;\n            margin-bottom: 16px;\n        }\n\n        .panel__header {\n            display: flex;\n            align-items: baseline;\n            gap: 10px;\n            margin-bottom: 16px;\n        }\n\n        .panel__title {\n            font-size: 14px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            margin: 0;\n        }\n\n        .panel__subtitle {\n            font-size: 12px;\n            color: var(--mj-text-muted);\n        }\n\n        /* \u2500\u2500 Heatmap \u2500\u2500 */\n        .heatmap-wrapper {\n            overflow-x: auto;\n        }\n\n        .heatmap-grid {\n            display: grid;\n            grid-template-columns: 44px repeat(24, 1fr);\n            gap: 2px;\n            min-width: 600px;\n        }\n\n        .heatmap-corner {\n            /* empty top-left cell */\n        }\n\n        .heatmap-hour-label {\n            font-size: 10px;\n            color: var(--mj-text-muted);\n            text-align: center;\n            padding-bottom: 4px;\n            font-weight: 500;\n        }\n\n        .heatmap-day-label {\n            font-size: 11px;\n            color: var(--mj-text-secondary);\n            font-weight: 600;\n            display: flex;\n            align-items: center;\n            justify-content: flex-end;\n            padding-right: 6px;\n        }\n\n        .heatmap-cell {\n            min-height: 28px;\n            border-radius: 3px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: default;\n            transition: opacity 0.15s ease;\n        }\n\n        .heatmap-cell:hover {\n            opacity: 0.8;\n            outline: 1px solid var(--mj-border-strong);\n        }\n\n        .heatmap-cell__count {\n            font-size: 9px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n        }\n\n        /* \u2500\u2500 Two Column Row \u2500\u2500 */\n        .two-col-row {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 16px;\n        }\n\n        @media (max-width: 1024px) {\n            .two-col-row {\n                grid-template-columns: 1fr;\n            }\n        }\n\n        /* \u2500\u2500 Day Distribution \u2500\u2500 */\n        .day-distribution {\n            display: flex;\n            flex-direction: column;\n            gap: 10px;\n        }\n\n        .day-bar-row {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .day-bar-label {\n            width: 36px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-secondary);\n            text-align: right;\n            flex-shrink: 0;\n        }\n\n        .day-bar-track {\n            flex: 1;\n            height: 22px;\n            background: var(--mj-bg-surface-sunken);\n            border-radius: 4px;\n            overflow: hidden;\n        }\n\n        .day-bar-fill {\n            height: 100%;\n            background: var(--mj-brand-primary);\n            border-radius: 4px;\n            transition: width 0.3s ease;\n            min-width: 2px;\n        }\n\n        .day-bar-count {\n            width: 48px;\n            font-size: 12px;\n            font-weight: 600;\n            color: var(--mj-text-primary);\n            text-align: right;\n            flex-shrink: 0;\n        }\n\n        /* \u2500\u2500 Peak Cards \u2500\u2500 */\n        .peak-cards {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .peak-card {\n            display: flex;\n            align-items: center;\n            gap: 14px;\n            padding: 14px;\n            background: var(--mj-bg-surface-card);\n            border: 1px solid var(--mj-border-subtle);\n            border-radius: 10px;\n        }\n\n        .peak-card__icon {\n            width: 40px;\n            height: 40px;\n            border-radius: 10px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 16px;\n            flex-shrink: 0;\n            background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n            color: var(--mj-brand-primary);\n        }\n\n        .peak-card:nth-child(2) .peak-card__icon {\n            background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n            color: var(--mj-status-success);\n        }\n\n        .peak-card:nth-child(3) .peak-card__icon {\n            background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n            color: var(--mj-status-info);\n        }\n\n        .peak-card__content {\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n        }\n\n        .peak-card__label {\n            font-size: 11px;\n            font-weight: 500;\n            color: var(--mj-text-muted);\n            text-transform: uppercase;\n            letter-spacing: 0.3px;\n        }\n\n        .peak-card__value {\n            font-size: 14px;\n            font-weight: 700;\n            color: var(--mj-text-primary);\n        }\n\n        .peak-card__count {\n            font-size: 12px;\n            color: var(--mj-text-secondary);\n        }\n\n        /* \u2500\u2500 Hourly Throughput Chart \u2500\u2500 */\n        .hourly-chart {\n            padding-top: 8px;\n        }\n\n        .hourly-bars {\n            display: flex;\n            align-items: flex-end;\n            gap: 3px;\n            height: 160px;\n        }\n\n        .hourly-bar-col {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: flex-end;\n            height: 100%;\n            cursor: default;\n        }\n\n        .hourly-bar {\n            width: 100%;\n            min-height: 2px;\n            background: color-mix(in srgb, var(--mj-brand-primary) 35%, var(--mj-bg-surface));\n            border-radius: 3px 3px 0 0;\n            transition: background 0.15s ease, height 0.3s ease;\n        }\n\n        .hourly-bar-col:hover .hourly-bar {\n            background: color-mix(in srgb, var(--mj-brand-primary) 60%, var(--mj-bg-surface));\n        }\n\n        .hourly-bar-label {\n            font-size: 9px;\n            color: var(--mj-text-muted);\n            margin-top: 4px;\n            white-space: nowrap;\n        }\n\n        /* \u2500\u2500 Responsive \u2500\u2500 */\n        @media (max-width: 1024px) {\n            .heatmap-grid {\n                grid-template-columns: 36px repeat(24, 1fr);\n            }\n\n            .heatmap-cell {\n                min-height: 22px;\n            }\n\n            .heatmap-cell__count {\n                font-size: 8px;\n            }\n\n            .hourly-bars {\n                height: 120px;\n            }\n        }\n    "] }]
    }], null, { TimeRange: [{
            type: Input
        }], TimeRangeChange: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AnalyticsUsagePatternsComponent, { className: "AnalyticsUsagePatternsComponent", filePath: "src/AI/components/analytics/usage-patterns/usage-patterns.component.ts", lineNumber: 529 }); })();
export function LoadAnalyticsUsagePatterns() { }
//# sourceMappingURL=usage-patterns.component.js.map