var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component } from '@angular/core';
import { RegisterClass } from '@memberjunction/global';
import { BaseResourceComponent } from '@memberjunction/ng-shared';
import { RunView } from '@memberjunction/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../AI/components/charts/time-series-chart.component";
import * as i3 from "@memberjunction/ng-ui-components";
function CommunicationMonitorResourceComponent_For_71_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 33)(1, "div", 41);
    i0.ɵɵelement(2, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 42)(4, "span", 43);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "span", 44);
    i0.ɵɵtext(7);
    i0.ɵɵpipe(8, "date");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(9, "span", 45);
    i0.ɵɵtext(10);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const log_r1 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", ctx_r1.getActivityIconClass(log_r1));
    i0.ɵɵadvance();
    i0.ɵɵclassMap(ctx_r1.getActivityIcon(log_r1));
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(log_r1.CommunicationProviderMessageType || "Message");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate2("", log_r1.CommunicationProvider, " \u2022 ", i0.ɵɵpipeBind2(8, 8, log_r1.MessageDate, "shortTime"));
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngClass", log_r1.Status.toLowerCase());
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", log_r1.Status, " ");
} }
function CommunicationMonitorResourceComponent_Conditional_72_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 34);
    i0.ɵɵelement(1, "i", 46);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "No recent activity");
    i0.ɵɵelementEnd()();
} }
function CommunicationMonitorResourceComponent_For_82_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 37);
    i0.ɵɵelement(1, "div", 47);
    i0.ɵɵelementStart(2, "div", 48);
    i0.ɵɵelement(3, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 49)(5, "div", 50);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "div", 51);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(9, "div", 52);
    i0.ɵɵelement(10, "div", 53);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "span", 54);
    i0.ɵɵtext(12);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const provider_r3 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵclassProp("active", provider_r3.IsActive);
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", provider_r3.ColorClass);
    i0.ɵɵadvance();
    i0.ɵɵclassMap(provider_r3.IconClass);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(provider_r3.Name);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate2("", provider_r3.Type, " \u2022 ", provider_r3.SentCount, " sent today");
    i0.ɵɵadvance(2);
    i0.ɵɵstyleProp("width", provider_r3.SuccessRate, "%");
    i0.ɵɵproperty("ngClass", ctx_r1.getHealthClass(provider_r3.SuccessRate));
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", ctx_r1.getHealthClass(provider_r3.SuccessRate));
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1("", provider_r3.SuccessRate, "%");
} }
function CommunicationMonitorResourceComponent_Conditional_83_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 34);
    i0.ɵɵelement(1, "i", 55);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "No providers configured");
    i0.ɵɵelementEnd()();
} }
function CommunicationMonitorResourceComponent_For_92_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 40)(1, "div", 56);
    i0.ɵɵelement(2, "i");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 57)(4, "div", 58);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 59);
    i0.ɵɵtext(7);
    i0.ɵɵpipe(8, "number");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(9, "div", 60);
    i0.ɵɵelement(10, "div", 61);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "span", 62);
    i0.ɵɵtext(12);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const channel_r4 = ctx.$implicit;
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", channel_r4.ColorClass);
    i0.ɵɵadvance();
    i0.ɵɵclassMap(channel_r4.IconClass);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(channel_r4.Name);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(8, 10, channel_r4.Count), " messages");
    i0.ɵɵadvance(3);
    i0.ɵɵstyleProp("width", channel_r4.Percentage, "%")("background", channel_r4.ColorClass === "email" ? "var(--mj-brand-primary)" : "var(--mj-status-success)");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1("", channel_r4.Percentage, "%");
} }
function CommunicationMonitorResourceComponent_Conditional_93_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 34);
    i0.ɵɵelement(1, "i", 38);
    i0.ɵɵelementStart(2, "p");
    i0.ɵɵtext(3, "No channel data available");
    i0.ɵɵelementEnd()();
} }
let CommunicationMonitorResourceComponent = class CommunicationMonitorResourceComponent extends BaseResourceComponent {
    cdr;
    isLoading = false;
    stats = {
        totalSent: 0,
        deliveryRate: 0,
        pending: 0,
        failed: 0
    };
    recentLogs = [];
    chartData = [];
    chartConfig = {
        useDualAxis: false,
        showGrid: true,
        showTooltip: true,
        colors: ['#4f6bed', '#cf222e']
    };
    providerHealth = [];
    channelBreakdown = [];
    constructor(cdr) {
        super();
        this.cdr = cdr;
    }
    async ngOnInit() {
        super.ngOnInit();
        await this.loadData();
        this.NotifyLoadComplete();
    }
    ngOnDestroy() {
        super.ngOnDestroy();
    }
    async loadData() {
        try {
            this.isLoading = true;
            this.cdr.detectChanges();
            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
            const yesterday = new Date();
            yesterday.setDate(yesterday.getDate() - 1);
            const yesterdayIso = yesterday.toISOString();
            const [totalResult, failedResult, pendingResult, recentResult, allLogsResult, providersResult] = await Promise.all([
                rv.RunView({
                    EntityName: 'MJ: Communication Logs',
                    ExtraFilter: `MessageDate >= '${yesterdayIso}'`,
                    ResultType: 'count_only'
                }),
                rv.RunView({
                    EntityName: 'MJ: Communication Logs',
                    ExtraFilter: `MessageDate >= '${yesterdayIso}' AND Status = 'Failed'`,
                    ResultType: 'count_only'
                }),
                rv.RunView({
                    EntityName: 'MJ: Communication Logs',
                    ExtraFilter: `Status = 'Pending'`,
                    ResultType: 'count_only'
                }),
                rv.RunView({
                    EntityName: 'MJ: Communication Logs',
                    OrderBy: 'MessageDate DESC',
                    MaxRows: 8,
                    ResultType: 'entity_object'
                }),
                rv.RunView({
                    EntityName: 'MJ: Communication Logs',
                    ExtraFilter: `MessageDate >= '${yesterdayIso}'`,
                    OrderBy: 'MessageDate ASC',
                    ResultType: 'entity_object'
                }),
                rv.RunView({
                    EntityName: 'MJ: Communication Providers',
                    OrderBy: 'Name ASC',
                    ResultType: 'entity_object'
                })
            ]);
            if (totalResult.Success)
                this.stats.totalSent = totalResult.TotalRowCount;
            if (failedResult.Success)
                this.stats.failed = failedResult.TotalRowCount;
            if (pendingResult.Success)
                this.stats.pending = pendingResult.TotalRowCount;
            this.stats.deliveryRate = this.stats.totalSent > 0
                ? parseFloat(((this.stats.totalSent - this.stats.failed) / this.stats.totalSent * 100).toFixed(1))
                : 100;
            if (recentResult.Success) {
                this.recentLogs = recentResult.Results;
            }
            if (allLogsResult.Success) {
                this.chartData = this.processTrendData(allLogsResult.Results, yesterday);
                this.channelBreakdown = this.buildChannelBreakdown(allLogsResult.Results);
            }
            if (providersResult.Success && allLogsResult.Success) {
                this.providerHealth = this.buildProviderHealth(providersResult.Results, allLogsResult.Results);
            }
        }
        catch (error) {
            console.error('Error loading monitor data:', error);
        }
        finally {
            this.isLoading = false;
            this.cdr.detectChanges();
        }
    }
    getActivityIconClass(log) {
        if (log.Status === 'Failed')
            return 'error';
        const type = (log.CommunicationProviderMessageType || '').toLowerCase();
        if (type.includes('sms'))
            return 'sms';
        return 'email';
    }
    getActivityIcon(log) {
        if (log.Direction === 'Receiving')
            return 'fa-solid fa-arrow-down';
        const type = (log.CommunicationProviderMessageType || '').toLowerCase();
        if (type.includes('sms'))
            return 'fa-solid fa-comment-sms';
        return 'fa-solid fa-envelope';
    }
    getHealthClass(rate) {
        if (rate >= 98)
            return 'excellent';
        if (rate >= 95)
            return 'good';
        if (rate >= 85)
            return 'warning';
        return 'critical';
    }
    processTrendData(logs, startTime) {
        const buckets = [];
        const now = new Date();
        const current = new Date(startTime);
        current.setMinutes(0, 0, 0);
        while (current <= now) {
            const bucketStart = new Date(current);
            const bucketEnd = new Date(current.getTime() + 60 * 60 * 1000);
            const bucketLogs = logs.filter(l => {
                const d = new Date(l.MessageDate);
                return d >= bucketStart && d < bucketEnd;
            });
            buckets.push({
                timestamp: bucketStart,
                executions: bucketLogs.length,
                errors: bucketLogs.filter(l => l.Status === 'Failed').length,
                cost: 0,
                tokens: 0,
                avgTime: 0
            });
            current.setHours(current.getHours() + 1);
        }
        return buckets;
    }
    buildProviderHealth(providers, logs) {
        return providers.map(p => {
            const providerLogs = logs.filter(l => l.CommunicationProvider === p.Name);
            const sent = providerLogs.length;
            const failed = providerLogs.filter(l => l.Status === 'Failed').length;
            const rate = sent > 0 ? parseFloat(((sent - failed) / sent * 100).toFixed(1)) : 100;
            return {
                Name: p.Name,
                Type: this.getProviderType(p.Name),
                SentCount: sent,
                SuccessRate: rate,
                IsActive: p.Status === 'Active',
                IconClass: this.getProviderIconClass(p.Name),
                ColorClass: this.getProviderColorClass(p.Name)
            };
        });
    }
    buildChannelBreakdown(logs) {
        const total = logs.length;
        if (total === 0)
            return [];
        const emailLogs = logs.filter(l => {
            const type = (l.CommunicationProviderMessageType || '').toLowerCase();
            return type.includes('email') || (!type.includes('sms'));
        });
        const smsLogs = logs.filter(l => {
            const type = (l.CommunicationProviderMessageType || '').toLowerCase();
            return type.includes('sms');
        });
        const channels = [];
        if (emailLogs.length > 0) {
            channels.push({
                Name: 'Email',
                IconClass: 'fa-solid fa-envelope',
                Count: emailLogs.length,
                Percentage: Math.round((emailLogs.length / total) * 100),
                ColorClass: 'email'
            });
        }
        if (smsLogs.length > 0) {
            channels.push({
                Name: 'SMS',
                IconClass: 'fa-solid fa-comment-sms',
                Count: smsLogs.length,
                Percentage: Math.round((smsLogs.length / total) * 100),
                ColorClass: 'sms'
            });
        }
        return channels;
    }
    getProviderType(name) {
        const n = name.toLowerCase();
        if (n.includes('twilio'))
            return 'SMS';
        return 'Email';
    }
    getProviderIconClass(name) {
        const n = name.toLowerCase();
        if (n.includes('sendgrid'))
            return 'fa-solid fa-envelope';
        if (n.includes('twilio'))
            return 'fa-solid fa-comment-sms';
        if (n.includes('gmail') || n.includes('google'))
            return 'fa-brands fa-google';
        if (n.includes('microsoft') || n.includes('graph') || n.includes('outlook'))
            return 'fa-brands fa-microsoft';
        return 'fa-solid fa-server';
    }
    getProviderColorClass(name) {
        const n = name.toLowerCase();
        if (n.includes('sendgrid'))
            return 'sendgrid';
        if (n.includes('twilio'))
            return 'twilio';
        if (n.includes('gmail') || n.includes('google'))
            return 'gmail';
        if (n.includes('microsoft') || n.includes('graph') || n.includes('outlook'))
            return 'msgraph';
        return '';
    }
    async GetResourceDisplayName(data) {
        return 'Monitor';
    }
    async GetResourceIconClass(data) {
        return 'fa-solid fa-chart-line';
    }
    static ɵfac = function CommunicationMonitorResourceComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CommunicationMonitorResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CommunicationMonitorResourceComponent, selectors: [["mj-communication-monitor-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 94, vars: 35, consts: [["Title", "Monitor", "Icon", "fa-solid fa-chart-line", "Subtitle", "Live delivery health, provider status, and channel breakdown"], ["actions", ""], ["mjButton", "", "variant", "secondary", "size", "sm", "title", "Refresh", 3, "click", "disabled"], [1, "fa-solid", "fa-rotate"], [1, "action-btn-label"], [1, "kpi-strip"], [1, "kpi-card", "sent"], [1, "kpi-icon"], [1, "fa-solid", "fa-paper-plane"], [1, "kpi-body"], [1, "kpi-label"], [1, "kpi-value"], [1, "kpi-delta"], [1, "fa-solid"], [1, "kpi-card", "delivered"], [1, "fa-solid", "fa-check-double"], [1, "delivery-bar"], [1, "delivery-fill"], [1, "kpi-card", "pending"], [1, "fa-solid", "fa-clock"], [1, "kpi-delta", "neutral"], [1, "fa-solid", "fa-minus"], [1, "kpi-card", "failed"], [1, "fa-solid", "fa-circle-exclamation"], [1, "content-grid"], [1, "card"], [1, "card-header"], [1, "fa-solid", "fa-chart-bar"], [1, "chart-container-inner"], [3, "data", "showLegend", "showControls", "config"], [1, "fa-solid", "fa-bolt"], [1, "card-body", "no-padding"], [1, "activity-feed"], [1, "activity-item"], [1, "empty-state"], [1, "fa-solid", "fa-heart-pulse"], [1, "provider-health-list"], [1, "provider-row"], [1, "fa-solid", "fa-layer-group"], [1, "channel-breakdown"], [1, "channel-row"], [1, "activity-icon", 3, "ngClass"], [1, "activity-body"], [1, "activity-title"], [1, "activity-meta"], [1, "activity-status", 3, "ngClass"], [1, "fa-solid", "fa-inbox"], [1, "provider-status-dot"], [1, "provider-logo", 3, "ngClass"], [1, "provider-info"], [1, "provider-name"], [1, "provider-type"], [1, "provider-health-bar"], [1, "provider-health-fill", 3, "ngClass"], [1, "provider-rate", 3, "ngClass"], [1, "fa-solid", "fa-server"], [1, "channel-icon", 3, "ngClass"], [1, "channel-info"], [1, "channel-name"], [1, "channel-count"], [1, "channel-bar-wrapper"], [1, "channel-bar-fill"], [1, "channel-pct"]], template: function CommunicationMonitorResourceComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 0)(2, "div", 1)(3, "button", 2);
            i0.ɵɵlistener("click", function CommunicationMonitorResourceComponent_Template_button_click_3_listener() { return ctx.loadData(); });
            i0.ɵɵelement(4, "i", 3);
            i0.ɵɵelementStart(5, "span", 4);
            i0.ɵɵtext(6, "Refresh");
            i0.ɵɵelementEnd()()()();
            i0.ɵɵelementStart(7, "mj-page-body")(8, "div", 5)(9, "div", 6)(10, "div", 7);
            i0.ɵɵelement(11, "i", 8);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(12, "div", 9)(13, "span", 10);
            i0.ɵɵtext(14, "Total Sent");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(15, "span", 11);
            i0.ɵɵtext(16);
            i0.ɵɵpipe(17, "number");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(18, "span", 12);
            i0.ɵɵelement(19, "i", 13);
            i0.ɵɵtext(20, " Last 24 hours ");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(21, "div", 14)(22, "div", 7);
            i0.ɵɵelement(23, "i", 15);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(24, "div", 9)(25, "span", 10);
            i0.ɵɵtext(26, "Delivery Rate");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(27, "span", 11);
            i0.ɵɵtext(28);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(29, "div", 16);
            i0.ɵɵelement(30, "div", 17);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(31, "div", 18)(32, "div", 7);
            i0.ɵɵelement(33, "i", 19);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(34, "div", 9)(35, "span", 10);
            i0.ɵɵtext(36, "Pending");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(37, "span", 11);
            i0.ɵɵtext(38);
            i0.ɵɵpipe(39, "number");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(40, "span", 20);
            i0.ɵɵelement(41, "i", 21);
            i0.ɵɵtext(42, " Awaiting provider ");
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(43, "div", 22)(44, "div", 7);
            i0.ɵɵelement(45, "i", 23);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(46, "div", 9)(47, "span", 10);
            i0.ɵɵtext(48, "Failed");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(49, "span", 11);
            i0.ɵɵtext(50);
            i0.ɵɵpipe(51, "number");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(52, "span", 12);
            i0.ɵɵelement(53, "i", 13);
            i0.ɵɵtext(54);
            i0.ɵɵelementEnd()()()();
            i0.ɵɵelementStart(55, "div", 24)(56, "div", 25)(57, "div", 26)(58, "h3");
            i0.ɵɵelement(59, "i", 27);
            i0.ɵɵtext(60, " Delivery Volume");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(61, "div", 28);
            i0.ɵɵelement(62, "app-time-series-chart", 29);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(63, "div", 25)(64, "div", 26)(65, "h3");
            i0.ɵɵelement(66, "i", 30);
            i0.ɵɵtext(67, " Recent Activity");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(68, "div", 31)(69, "div", 32);
            i0.ɵɵrepeaterCreate(70, CommunicationMonitorResourceComponent_For_71_Template, 11, 11, "div", 33, i0.ɵɵrepeaterTrackByIdentity);
            i0.ɵɵconditionalCreate(72, CommunicationMonitorResourceComponent_Conditional_72_Template, 4, 0, "div", 34);
            i0.ɵɵelementEnd()()()();
            i0.ɵɵelementStart(73, "div", 24)(74, "div", 25)(75, "div", 26)(76, "h3");
            i0.ɵɵelement(77, "i", 35);
            i0.ɵɵtext(78, " Provider Health");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(79, "div", 31)(80, "div", 36);
            i0.ɵɵrepeaterCreate(81, CommunicationMonitorResourceComponent_For_82_Template, 13, 13, "div", 37, i0.ɵɵrepeaterTrackByIdentity);
            i0.ɵɵconditionalCreate(83, CommunicationMonitorResourceComponent_Conditional_83_Template, 4, 0, "div", 34);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(84, "div", 25)(85, "div", 26)(86, "h3");
            i0.ɵɵelement(87, "i", 38);
            i0.ɵɵtext(88, " Channel Breakdown");
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(89, "div", 31)(90, "div", 39);
            i0.ɵɵrepeaterCreate(91, CommunicationMonitorResourceComponent_For_92_Template, 13, 12, "div", 40, i0.ɵɵrepeaterTrackByIdentity);
            i0.ɵɵconditionalCreate(93, CommunicationMonitorResourceComponent_Conditional_93_Template, 4, 0, "div", 34);
            i0.ɵɵelementEnd()()()()()();
        } if (rf & 2) {
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("disabled", ctx.isLoading);
            i0.ɵɵadvance();
            i0.ɵɵclassProp("spinning", ctx.isLoading);
            i0.ɵɵadvance(12);
            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 29, ctx.stats.totalSent));
            i0.ɵɵadvance(2);
            i0.ɵɵclassMap(ctx.stats.totalSent > 0 ? "up" : "neutral");
            i0.ɵɵadvance();
            i0.ɵɵclassProp("fa-arrow-up", ctx.stats.totalSent > 0)("fa-minus", ctx.stats.totalSent === 0);
            i0.ɵɵadvance(9);
            i0.ɵɵtextInterpolate1("", ctx.stats.deliveryRate, "%");
            i0.ɵɵadvance(2);
            i0.ɵɵstyleProp("width", ctx.stats.deliveryRate, "%");
            i0.ɵɵadvance(8);
            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(39, 31, ctx.stats.pending));
            i0.ɵɵadvance(12);
            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(51, 33, ctx.stats.failed));
            i0.ɵɵadvance(2);
            i0.ɵɵclassMap(ctx.stats.failed > 0 ? "down" : "neutral");
            i0.ɵɵadvance();
            i0.ɵɵclassProp("fa-arrow-up", ctx.stats.failed > 0)("fa-minus", ctx.stats.failed === 0);
            i0.ɵɵadvance();
            i0.ɵɵtextInterpolate1(" ", ctx.stats.failed > 0 ? "Requires attention" : "No failures", " ");
            i0.ɵɵadvance(8);
            i0.ɵɵproperty("data", ctx.chartData)("showLegend", true)("showControls", false)("config", ctx.chartConfig);
            i0.ɵɵadvance(8);
            i0.ɵɵrepeater(ctx.recentLogs);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.recentLogs.length === 0 ? 72 : -1);
            i0.ɵɵadvance(9);
            i0.ɵɵrepeater(ctx.providerHealth);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.providerHealth.length === 0 ? 83 : -1);
            i0.ɵɵadvance(8);
            i0.ɵɵrepeater(ctx.channelBreakdown);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.channelBreakdown.length === 0 ? 93 : -1);
        } }, dependencies: [i1.NgClass, i2.TimeSeriesChartComponent, i3.MJButtonDirective, i3.MJPageHeaderComponent, i3.MJPageLayoutComponent, i3.MJPageBodyComponent, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n    .kpi-strip[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n    }\n    .kpi-card[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        padding: 20px;\n        display: flex;\n        align-items: flex-start;\n        gap: 16px;\n        transition: all 0.15s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    .kpi-card[_ngcontent-%COMP%]:hover {\n        box-shadow: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\n    }\n    .kpi-card[_ngcontent-%COMP%]::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n    }\n    .kpi-card.sent[_ngcontent-%COMP%]::before { background: var(--mj-brand-primary); }\n    .kpi-card.delivered[_ngcontent-%COMP%]::before { background: var(--mj-status-success); }\n    .kpi-card.pending[_ngcontent-%COMP%]::before { background: var(--mj-status-warning); }\n    .kpi-card.failed[_ngcontent-%COMP%]::before { background: var(--mj-status-error); }\n\n    .kpi-icon[_ngcontent-%COMP%] {\n        width: 44px; height: 44px;\n        border-radius: 12px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent[_ngcontent-%COMP%]   .kpi-icon[_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    .kpi-card.delivered[_ngcontent-%COMP%]   .kpi-icon[_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    .kpi-card.pending[_ngcontent-%COMP%]   .kpi-icon[_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    .kpi-card.failed[_ngcontent-%COMP%]   .kpi-icon[_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    .kpi-body[_ngcontent-%COMP%] { flex: 1; display: flex; flex-direction: column; gap: 2px; }\n    .kpi-label[_ngcontent-%COMP%] {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n    }\n    .kpi-value[_ngcontent-%COMP%] {\n        font-size: 28px; font-weight: 800;\n        color: var(--mj-text-primary);\n        letter-spacing: -0.02em; line-height: 1.1;\n    }\n    .kpi-delta[_ngcontent-%COMP%] {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        margin-top: 4px; padding: 2px 8px;\n        border-radius: 10px; width: fit-content;\n    }\n    .kpi-delta.up[_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    .kpi-delta.down[_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    .kpi-delta.neutral[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-sunken);\n        color: var(--mj-text-muted);\n    }\n\n    .delivery-bar[_ngcontent-%COMP%] {\n        height: 6px; margin-top: 10px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill[_ngcontent-%COMP%] {\n        height: 100%; border-radius: 3px;\n        background: var(--mj-status-success); transition: width 0.6s ease;\n    }\n\n    \n\n    .content-grid[_ngcontent-%COMP%] {\n        display: grid;\n        grid-template-columns: 1.6fr 1fr;\n        gap: 16px;\n        margin-bottom: 16px;\n    }\n\n    .card[_ngcontent-%COMP%] {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        overflow: hidden;\n    }\n    .card-header[_ngcontent-%COMP%] {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        color: var(--mj-text-muted);\n        font-size: 12px;\n    }\n    .card-body[_ngcontent-%COMP%] { padding: 16px 20px; }\n    .card-body.no-padding[_ngcontent-%COMP%] { padding: 0; }\n\n    .chart-container-inner[_ngcontent-%COMP%] {\n        padding: 16px 20px;\n        min-height: 300px;\n    }\n\n    \n\n    .activity-feed[_ngcontent-%COMP%] { max-height: 370px; overflow-y: auto; }\n    .activity-item[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mj-border-default);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .activity-item[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-sunken); }\n\n    .activity-icon[_ngcontent-%COMP%] {\n        width: 34px; height: 34px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email[_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    .activity-icon.sms[_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    .activity-icon.error[_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    .activity-body[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n    .activity-title[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 600;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta[_ngcontent-%COMP%] {\n        font-size: 11px; color: var(--mj-text-muted); margin-top: 1px;\n        display: block;\n    }\n    .activity-status[_ngcontent-%COMP%] {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: 4px;\n        flex-shrink: 0;\n    }\n    .activity-status.complete[_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    .activity-status.failed[_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    .activity-status.pending[_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    \n\n    .provider-health-list[_ngcontent-%COMP%] { display: flex; flex-direction: column; }\n    .provider-row[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mj-border-default);\n        transition: background 0.15s ease;\n    }\n    .provider-row[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .provider-row[_ngcontent-%COMP%]:hover { background: var(--mj-bg-surface-sunken); }\n\n    .provider-status-dot[_ngcontent-%COMP%] {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mj-border-strong);\n    }\n    .provider-status-dot.active[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n\n    .provider-logo[_ngcontent-%COMP%] {\n        width: 36px; height: 36px;\n        border-radius: 8px;\n        background: var(--mj-bg-surface-sunken);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n    .provider-logo.twilio[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n    .provider-logo.gmail[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n    .provider-logo.msgraph[_ngcontent-%COMP%] { color: var(--mj-brand-primary); }\n\n    .provider-info[_ngcontent-%COMP%] { flex: 1; }\n    .provider-name[_ngcontent-%COMP%] { font-size: 13px; font-weight: 600; color: var(--mj-text-primary); }\n    .provider-type[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); }\n\n    .provider-health-bar[_ngcontent-%COMP%] {\n        width: 80px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .provider-health-fill[_ngcontent-%COMP%] {\n        height: 100%; border-radius: 3px;\n        transition: width 0.4s ease;\n    }\n    .provider-health-fill.excellent[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n    .provider-health-fill.good[_ngcontent-%COMP%] { background: var(--mj-status-success); }\n    .provider-health-fill.warning[_ngcontent-%COMP%] { background: var(--mj-status-warning); }\n    .provider-health-fill.critical[_ngcontent-%COMP%] { background: var(--mj-status-error); }\n\n    .provider-rate[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n    .provider-rate.good[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n    .provider-rate.warning[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n    .provider-rate.critical[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n    \n\n    .channel-breakdown[_ngcontent-%COMP%] { display: flex; flex-direction: column; }\n    .channel-row[_ngcontent-%COMP%] {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n    .channel-row[_ngcontent-%COMP%]:last-child { border-bottom: none; }\n    .channel-icon[_ngcontent-%COMP%] {\n        width: 32px; height: 32px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email[_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    .channel-icon.sms[_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    .channel-info[_ngcontent-%COMP%] { flex: 1; }\n    .channel-name[_ngcontent-%COMP%] { font-size: 12px; font-weight: 600; color: var(--mj-text-primary); }\n    .channel-count[_ngcontent-%COMP%] { font-size: 11px; color: var(--mj-text-muted); }\n\n    .channel-bar-wrapper[_ngcontent-%COMP%] {\n        width: 100px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .channel-bar-fill[_ngcontent-%COMP%] { height: 100%; border-radius: 3px; }\n    .channel-pct[_ngcontent-%COMP%] {\n        font-size: 12px; font-weight: 700;\n        color: var(--mj-text-primary);\n        min-width: 36px; text-align: right;\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 40px 0; color: var(--mj-text-muted);\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0; font-size: 13px; }\n\n    @media (max-width: 1200px) {\n        .kpi-strip[_ngcontent-%COMP%] { grid-template-columns: repeat(2, 1fr); }\n        .content-grid[_ngcontent-%COMP%] { grid-template-columns: 1fr; }\n    }"] });
};
CommunicationMonitorResourceComponent = __decorate([
    RegisterClass(BaseResourceComponent, 'CommunicationMonitorResource')
], CommunicationMonitorResourceComponent);
export { CommunicationMonitorResourceComponent };
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommunicationMonitorResourceComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-communication-monitor-resource', template: `
    <mj-page-layout>
      <mj-page-header
        Title="Monitor"
        Icon="fa-solid fa-chart-line"
        Subtitle="Live delivery health, provider status, and channel breakdown">
        <div actions>
          <button mjButton variant="secondary" size="sm" (click)="loadData()" [disabled]="isLoading" title="Refresh">
            <i class="fa-solid fa-rotate" [class.spinning]="isLoading"></i> <span class="action-btn-label">Refresh</span>
          </button>
        </div>
      </mj-page-header>

      <mj-page-body>
        <!-- KPI STRIP -->
        <div class="kpi-strip">
          <div class="kpi-card sent">
            <div class="kpi-icon"><i class="fa-solid fa-paper-plane"></i></div>
            <div class="kpi-body">
              <span class="kpi-label">Total Sent</span>
              <span class="kpi-value">{{stats.totalSent | number}}</span>
              <span class="kpi-delta" [class]="stats.totalSent > 0 ? 'up' : 'neutral'">
                <i class="fa-solid" [class.fa-arrow-up]="stats.totalSent > 0" [class.fa-minus]="stats.totalSent === 0"></i>
                Last 24 hours
              </span>
            </div>
          </div>
          <div class="kpi-card delivered">
            <div class="kpi-icon"><i class="fa-solid fa-check-double"></i></div>
            <div class="kpi-body">
              <span class="kpi-label">Delivery Rate</span>
              <span class="kpi-value">{{stats.deliveryRate}}%</span>
              <div class="delivery-bar">
                <div class="delivery-fill" [style.width.%]="stats.deliveryRate"></div>
              </div>
            </div>
          </div>
          <div class="kpi-card pending">
            <div class="kpi-icon"><i class="fa-solid fa-clock"></i></div>
            <div class="kpi-body">
              <span class="kpi-label">Pending</span>
              <span class="kpi-value">{{stats.pending | number}}</span>
              <span class="kpi-delta neutral">
                <i class="fa-solid fa-minus"></i> Awaiting provider
              </span>
            </div>
          </div>
          <div class="kpi-card failed">
            <div class="kpi-icon"><i class="fa-solid fa-circle-exclamation"></i></div>
            <div class="kpi-body">
              <span class="kpi-label">Failed</span>
              <span class="kpi-value">{{stats.failed | number}}</span>
              <span class="kpi-delta" [class]="stats.failed > 0 ? 'down' : 'neutral'">
                <i class="fa-solid" [class.fa-arrow-up]="stats.failed > 0" [class.fa-minus]="stats.failed === 0"></i>
                {{stats.failed > 0 ? 'Requires attention' : 'No failures'}}
              </span>
            </div>
          </div>
        </div>
    
        <!-- CHARTS + ACTIVITY ROW -->
        <div class="content-grid">
          <div class="card">
            <div class="card-header">
              <h3><i class="fa-solid fa-chart-bar"></i> Delivery Volume</h3>
            </div>
            <div class="chart-container-inner">
              <app-time-series-chart
                [data]="chartData"
                [showLegend]="true"
                [showControls]="false"
                [config]="chartConfig">
              </app-time-series-chart>
            </div>
          </div>
    
          <div class="card">
            <div class="card-header">
              <h3><i class="fa-solid fa-bolt"></i> Recent Activity</h3>
            </div>
            <div class="card-body no-padding">
              <div class="activity-feed">
                @for (log of recentLogs; track log) {
                  <div class="activity-item">
                    <div class="activity-icon" [ngClass]="getActivityIconClass(log)">
                      <i [class]="getActivityIcon(log)"></i>
                    </div>
                    <div class="activity-body">
                      <span class="activity-title">{{log.CommunicationProviderMessageType || 'Message'}}</span>
                      <span class="activity-meta">{{log.CommunicationProvider}} &bull; {{log.MessageDate | date:'shortTime'}}</span>
                    </div>
                    <span class="activity-status" [ngClass]="log.Status.toLowerCase()">
                      {{log.Status}}
                    </span>
                  </div>
                }
                @if (recentLogs.length === 0) {
                  <div class="empty-state">
                    <i class="fa-solid fa-inbox"></i>
                    <p>No recent activity</p>
                  </div>
                }
              </div>
            </div>
          </div>
        </div>
    
        <!-- PROVIDER HEALTH + CHANNEL BREAKDOWN -->
        <div class="content-grid">
          <div class="card">
            <div class="card-header">
              <h3><i class="fa-solid fa-heart-pulse"></i> Provider Health</h3>
            </div>
            <div class="card-body no-padding">
              <div class="provider-health-list">
                @for (provider of providerHealth; track provider) {
                  <div class="provider-row">
                    <div class="provider-status-dot" [class.active]="provider.IsActive"></div>
                    <div class="provider-logo" [ngClass]="provider.ColorClass">
                      <i [class]="provider.IconClass"></i>
                    </div>
                    <div class="provider-info">
                      <div class="provider-name">{{provider.Name}}</div>
                      <div class="provider-type">{{provider.Type}} &bull; {{provider.SentCount}} sent today</div>
                    </div>
                    <div class="provider-health-bar">
                      <div class="provider-health-fill" [ngClass]="getHealthClass(provider.SuccessRate)" [style.width.%]="provider.SuccessRate"></div>
                    </div>
                    <span class="provider-rate" [ngClass]="getHealthClass(provider.SuccessRate)">{{provider.SuccessRate}}%</span>
                  </div>
                }
                @if (providerHealth.length === 0) {
                  <div class="empty-state">
                    <i class="fa-solid fa-server"></i>
                    <p>No providers configured</p>
                  </div>
                }
              </div>
            </div>
          </div>
    
          <div class="card">
            <div class="card-header">
              <h3><i class="fa-solid fa-layer-group"></i> Channel Breakdown</h3>
            </div>
            <div class="card-body no-padding">
              <div class="channel-breakdown">
                @for (channel of channelBreakdown; track channel) {
                  <div class="channel-row">
                    <div class="channel-icon" [ngClass]="channel.ColorClass">
                      <i [class]="channel.IconClass"></i>
                    </div>
                    <div class="channel-info">
                      <div class="channel-name">{{channel.Name}}</div>
                      <div class="channel-count">{{channel.Count | number}} messages</div>
                    </div>
                    <div class="channel-bar-wrapper">
                      <div class="channel-bar-fill" [style.width.%]="channel.Percentage" [style.background]="channel.ColorClass === 'email' ? 'var(--mj-brand-primary)' : 'var(--mj-status-success)'"></div>
                    </div>
                    <span class="channel-pct">{{channel.Percentage}}%</span>
                  </div>
                }
                @if (channelBreakdown.length === 0) {
                  <div class="empty-state">
                    <i class="fa-solid fa-layer-group"></i>
                    <p>No channel data available</p>
                  </div>
                }
              </div>
            </div>
          </div>
        </div>
      </mj-page-body>
    </mj-page-layout>
    `, styles: ["\n    /* KPI STRIP */\n    .kpi-strip {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 16px;\n        margin-bottom: 24px;\n    }\n    .kpi-card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        padding: 20px;\n        display: flex;\n        align-items: flex-start;\n        gap: 16px;\n        transition: all 0.15s ease;\n        position: relative;\n        overflow: hidden;\n    }\n    .kpi-card:hover {\n        box-shadow: 0 2px 8px var(--mj-shadow-md);\n        border-color: var(--mj-border-strong);\n    }\n    .kpi-card::before {\n        content: '';\n        position: absolute;\n        top: 0; left: 0; right: 0;\n        height: 3px;\n    }\n    .kpi-card.sent::before { background: var(--mj-brand-primary); }\n    .kpi-card.delivered::before { background: var(--mj-status-success); }\n    .kpi-card.pending::before { background: var(--mj-status-warning); }\n    .kpi-card.failed::before { background: var(--mj-status-error); }\n\n    .kpi-icon {\n        width: 44px; height: 44px;\n        border-radius: 12px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .kpi-card.sent .kpi-icon {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .kpi-card.delivered .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-card.pending .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\n    .kpi-card.failed .kpi-icon {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n\n    .kpi-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }\n    .kpi-label {\n        font-size: 11px; font-weight: 600;\n        text-transform: uppercase; letter-spacing: 0.5px;\n        color: var(--mj-text-muted);\n    }\n    .kpi-value {\n        font-size: 28px; font-weight: 800;\n        color: var(--mj-text-primary);\n        letter-spacing: -0.02em; line-height: 1.1;\n    }\n    .kpi-delta {\n        display: inline-flex; align-items: center;\n        gap: 4px; font-size: 11px; font-weight: 600;\n        margin-top: 4px; padding: 2px 8px;\n        border-radius: 10px; width: fit-content;\n    }\n    .kpi-delta.up {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .kpi-delta.down {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .kpi-delta.neutral {\n        background: var(--mj-bg-surface-sunken);\n        color: var(--mj-text-muted);\n    }\n\n    .delivery-bar {\n        height: 6px; margin-top: 10px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .delivery-fill {\n        height: 100%; border-radius: 3px;\n        background: var(--mj-status-success); transition: width 0.6s ease;\n    }\n\n    /* CONTENT GRID */\n    .content-grid {\n        display: grid;\n        grid-template-columns: 1.6fr 1fr;\n        gap: 16px;\n        margin-bottom: 16px;\n    }\n\n    .card {\n        background: var(--mj-bg-surface-card);\n        border: 1px solid var(--mj-border-default);\n        border-radius: 12px;\n        overflow: hidden;\n    }\n    .card-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        padding: 16px 20px 12px;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n    .card-header h3 {\n        font-size: 13px; font-weight: 700;\n        color: var(--mj-text-primary);\n        display: flex; align-items: center; gap: 8px;\n        margin: 0;\n    }\n    .card-header h3 i {\n        color: var(--mj-text-muted);\n        font-size: 12px;\n    }\n    .card-body { padding: 16px 20px; }\n    .card-body.no-padding { padding: 0; }\n\n    .chart-container-inner {\n        padding: 16px 20px;\n        min-height: 300px;\n    }\n\n    /* ACTIVITY FEED */\n    .activity-feed { max-height: 370px; overflow-y: auto; }\n    .activity-item {\n        display: flex; align-items: center; gap: 12px;\n        padding: 12px 20px;\n        border-bottom: 1px solid var(--mj-border-default);\n        transition: background 0.15s ease; cursor: pointer;\n    }\n    .activity-item:last-child { border-bottom: none; }\n    .activity-item:hover { background: var(--mj-bg-surface-sunken); }\n\n    .activity-icon {\n        width: 34px; height: 34px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 12px; flex-shrink: 0;\n    }\n    .activity-icon.email {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .activity-icon.sms {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-icon.error {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n\n    .activity-body { flex: 1; min-width: 0; }\n    .activity-title {\n        font-size: 12px; font-weight: 600;\n        color: var(--mj-text-primary);\n        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n        display: block;\n    }\n    .activity-meta {\n        font-size: 11px; color: var(--mj-text-muted); margin-top: 1px;\n        display: block;\n    }\n    .activity-status {\n        font-size: 10px; font-weight: 700;\n        text-transform: uppercase; letter-spacing: 0.3px;\n        padding: 3px 8px;\n        border-radius: 4px;\n        flex-shrink: 0;\n    }\n    .activity-status.complete {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n    .activity-status.failed {\n        background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-error);\n    }\n    .activity-status.pending {\n        background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-warning);\n    }\n\n    /* PROVIDER HEALTH */\n    .provider-health-list { display: flex; flex-direction: column; }\n    .provider-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mj-border-default);\n        transition: background 0.15s ease;\n    }\n    .provider-row:last-child { border-bottom: none; }\n    .provider-row:hover { background: var(--mj-bg-surface-sunken); }\n\n    .provider-status-dot {\n        width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;\n        background: var(--mj-border-strong);\n    }\n    .provider-status-dot.active { background: var(--mj-status-success); }\n\n    .provider-logo {\n        width: 36px; height: 36px;\n        border-radius: 8px;\n        background: var(--mj-bg-surface-sunken);\n        display: flex; align-items: center; justify-content: center;\n        font-size: 16px; flex-shrink: 0;\n    }\n    .provider-logo.sendgrid { color: var(--mj-brand-primary); }\n    .provider-logo.twilio { color: var(--mj-status-error); }\n    .provider-logo.gmail { color: var(--mj-status-error); }\n    .provider-logo.msgraph { color: var(--mj-brand-primary); }\n\n    .provider-info { flex: 1; }\n    .provider-name { font-size: 13px; font-weight: 600; color: var(--mj-text-primary); }\n    .provider-type { font-size: 11px; color: var(--mj-text-muted); }\n\n    .provider-health-bar {\n        width: 80px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .provider-health-fill {\n        height: 100%; border-radius: 3px;\n        transition: width 0.4s ease;\n    }\n    .provider-health-fill.excellent { background: var(--mj-status-success); }\n    .provider-health-fill.good { background: var(--mj-status-success); }\n    .provider-health-fill.warning { background: var(--mj-status-warning); }\n    .provider-health-fill.critical { background: var(--mj-status-error); }\n\n    .provider-rate {\n        font-size: 12px; font-weight: 700;\n        min-width: 44px; text-align: right;\n    }\n    .provider-rate.excellent { color: var(--mj-status-success); }\n    .provider-rate.good { color: var(--mj-status-success); }\n    .provider-rate.warning { color: var(--mj-status-warning); }\n    .provider-rate.critical { color: var(--mj-status-error); }\n\n    /* CHANNEL BREAKDOWN */\n    .channel-breakdown { display: flex; flex-direction: column; }\n    .channel-row {\n        display: flex; align-items: center; gap: 12px;\n        padding: 14px 20px;\n        border-bottom: 1px solid var(--mj-border-default);\n    }\n    .channel-row:last-child { border-bottom: none; }\n    .channel-icon {\n        width: 32px; height: 32px;\n        border-radius: 8px;\n        display: flex; align-items: center; justify-content: center;\n        font-size: 13px; flex-shrink: 0;\n    }\n    .channel-icon.email {\n        background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n        color: var(--mj-brand-primary);\n    }\n    .channel-icon.sms {\n        background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n        color: var(--mj-status-success);\n    }\n\n    .channel-info { flex: 1; }\n    .channel-name { font-size: 12px; font-weight: 600; color: var(--mj-text-primary); }\n    .channel-count { font-size: 11px; color: var(--mj-text-muted); }\n\n    .channel-bar-wrapper {\n        width: 100px; height: 6px;\n        background: var(--mj-bg-surface-sunken);\n        border-radius: 3px; overflow: hidden;\n    }\n    .channel-bar-fill { height: 100%; border-radius: 3px; }\n    .channel-pct {\n        font-size: 12px; font-weight: 700;\n        color: var(--mj-text-primary);\n        min-width: 36px; text-align: right;\n    }\n\n    /* EMPTY STATE */\n    .empty-state {\n        display: flex; flex-direction: column;\n        align-items: center; justify-content: center;\n        padding: 40px 0; color: var(--mj-text-muted);\n    }\n    .empty-state i { font-size: 2rem; margin-bottom: 12px; opacity: 0.5; }\n    .empty-state p { margin: 0; font-size: 13px; }\n\n    @media (max-width: 1200px) {\n        .kpi-strip { grid-template-columns: repeat(2, 1fr); }\n        .content-grid { grid-template-columns: 1fr; }\n    }\n  "] }]
    }], () => [{ type: i0.ChangeDetectorRef }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CommunicationMonitorResourceComponent, { className: "CommunicationMonitorResourceComponent", filePath: "src/Communication/communication-monitor-resource.component.ts", lineNumber: 520 }); })();
//# sourceMappingURL=communication-monitor-resource.component.js.map