dcrouter/ts_web/elements/ops-view-security.ts

import * as plugins from '../plugins.js';
import * as shared from './shared/index.js';
import * as appstate from '../appstate.js';

import {
  DeesElement,
  customElement,
  html,
  state,
  css,
  cssManager,
} from '@design.estate/dees-element';
import { type IStatsTile } from '@design.estate/dees-catalog';

@customElement('ops-view-security')
export class OpsViewSecurity extends DeesElement {
  @state()
  accessor statsState: appstate.IStatsState = {
    serverStats: null,
    emailStats: null,
    dnsStats: null,
    securityMetrics: null,
    radiusStats: null,
    vpnStats: null,
    lastUpdated: 0,
    isLoading: false,
    error: null,
  };

  @state()
  accessor selectedTab: 'overview' | 'blocked' | 'authentication' | 'email-security' = 'overview';

  private tabLabelMap: Record<string, string> = {
    'overview': 'Overview',
    'blocked': 'Blocked IPs',
    'authentication': 'Authentication',
    'email-security': 'Email Security',
  };

  private labelToTab: Record<string, 'overview' | 'blocked' | 'authentication' | 'email-security'> = {
    'Overview': 'overview',
    'Blocked IPs': 'blocked',
    'Authentication': 'authentication',
    'Email Security': 'email-security',
  };

  constructor() {
    super();
    const subscription = appstate.statsStatePart
      .select((stateArg) => stateArg)
      .subscribe((statsState) => {
        this.statsState = statsState;
      });
    this.rxSubscriptions.push(subscription);
  }

  async firstUpdated() {
    const toggle = this.shadowRoot!.querySelector('dees-input-multitoggle') as any;
    if (toggle) {
      const sub = toggle.changeSubject.subscribe(() => {
        const tab = this.labelToTab[toggle.selectedOption];
        if (tab) this.selectedTab = tab;
      });
      this.rxSubscriptions.push(sub);
    }
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
    css`
      dees-input-multitoggle {
        margin-bottom: 24px;
      }

      h2 {
        margin: 32px 0 16px 0;
        font-size: 24px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#333', '#ccc')};
      }

      dees-statsgrid {
        margin-bottom: 32px;
      }

      .securityCard {
        background: ${cssManager.bdTheme('#fff', '#222')};
        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
        border-radius: 8px;
        padding: 24px;
        position: relative;
        overflow: hidden;
      }

      .actionButton {
        margin-top: 16px;
      }

    `,
  ];

  public render() {
    return html`
      <dees-heading level="2">Security</dees-heading>

      <dees-input-multitoggle
        .type=${'single'}
        .options=${['Overview', 'Blocked IPs', 'Authentication', 'Email Security']}
        .selectedOption=${this.tabLabelMap[this.selectedTab]}
      ></dees-input-multitoggle>

      ${this.renderTabContent()}
    `;
  }

  private renderTabContent() {
    const metrics = this.statsState.securityMetrics;
    
    if (!metrics) {
      return html`
        <div class="loadingMessage">
          <p>Loading security metrics...</p>
        </div>
      `;
    }

    switch(this.selectedTab) {
      case 'overview':
        return this.renderOverview(metrics);
      case 'blocked':
        return this.renderBlockedIPs(metrics);
      case 'authentication':
        return this.renderAuthentication(metrics);
      case 'email-security':
        return this.renderEmailSecurity(metrics);
    }
  }

  private renderOverview(metrics: any) {
    const threatLevel = this.calculateThreatLevel(metrics);
    const threatScore = this.getThreatScore(metrics);

    // Derive active sessions from recent successful auth events (last hour)
    const allEvents: any[] = metrics.recentEvents || [];
    const oneHourAgo = Date.now() - 3600000;
    const recentAuthSuccesses = allEvents.filter(
      (evt: any) => evt.type === 'authentication' && evt.success === true && evt.timestamp >= oneHourAgo
    ).length;

    const tiles: IStatsTile[] = [
      {
        id: 'threatLevel',
        title: 'Threat Level',
        value: threatScore,
        type: 'gauge',
        icon: 'lucide:Shield',
        gaugeOptions: {
          min: 0,
          max: 100,
          thresholds: [
            { value: 0, color: '#ef4444' },
            { value: 30, color: '#f59e0b' },
            { value: 70, color: '#22c55e' },
          ],
        },
        description: `Status: ${threatLevel.toUpperCase()}`,
      },
      {
        id: 'blockedThreats',
        title: 'Blocked Threats',
        value: (metrics.blockedIPs?.length || 0) + metrics.spamDetected,
        type: 'number',
        icon: 'lucide:ShieldCheck',
        color: '#ef4444',
        description: 'Total threats blocked today',
      },
      {
        id: 'activeSessions',
        title: 'Active Sessions',
        value: recentAuthSuccesses,
        type: 'number',
        icon: 'lucide:Users',
        color: '#22c55e',
        description: 'Authenticated in last hour',
      },
      {
        id: 'authFailures',
        title: 'Auth Failures',
        value: metrics.authenticationFailures,
        type: 'number',
        icon: 'lucide:LockOpen',
        color: metrics.authenticationFailures > 10 ? '#ef4444' : '#f59e0b',
        description: 'Failed login attempts today',
      },
    ];
    
    return html`
      <dees-statsgrid
        .tiles=${tiles}
        .minTileWidth=${200}
      ></dees-statsgrid>

      <h2>Recent Security Events</h2>
      <dees-table
        .heading1=${'Security Events'}
        .heading2=${'Last 24 hours'}
        .data=${this.getSecurityEvents(metrics)}
        .displayFunction=${(item) => ({
          'Time': new Date(item.timestamp).toLocaleTimeString(),
          'Event': item.event,
          'Severity': item.severity,
          'Details': item.details,
        })}
      ></dees-table>
    `;
  }

  private renderBlockedIPs(metrics: any) {
    const blockedIPs: string[] = metrics.blockedIPs || [];

    const tiles: IStatsTile[] = [
      {
        id: 'totalBlocked',
        title: 'Blocked IPs',
        value: blockedIPs.length,
        type: 'number',
        icon: 'lucide:ShieldBan',
        color: blockedIPs.length > 0 ? '#ef4444' : '#22c55e',
        description: 'Currently blocked addresses',
      },
    ];

    return html`
      <dees-statsgrid
        .tiles=${tiles}
        .minTileWidth=${200}
      ></dees-statsgrid>

      <dees-table
        .heading1=${'Blocked IP Addresses'}
        .heading2=${'IPs blocked due to suspicious activity'}
        .data=${blockedIPs.map((ip) => ({ ip }))}
        .displayFunction=${(item) => ({
          'IP Address': item.ip,
          'Reason': 'Suspicious activity',
        })}
        .dataActions=${[
          {
            name: 'Unblock',
            iconName: 'lucide:shield-off',
            type: ['contextmenu' as const],
            actionFunc: async (item) => {
              await this.unblockIP(item.ip);
            },
          },
          {
            name: 'Clear All',
            iconName: 'lucide:trash-2',
            type: ['header' as const],
            actionFunc: async () => {
              await this.clearBlockedIPs();
            },
          },
        ]}
      ></dees-table>
    `;
  }

  private renderAuthentication(metrics: any) {
    // Derive auth events from recentEvents
    const allEvents: any[] = metrics.recentEvents || [];
    const authEvents = allEvents.filter((evt: any) => evt.type === 'authentication');
    const successfulLogins = authEvents.filter((evt: any) => evt.success === true).length;

    const tiles: IStatsTile[] = [
      {
        id: 'authFailures',
        title: 'Authentication Failures',
        value: metrics.authenticationFailures,
        type: 'number',
        icon: 'lucide:LockOpen',
        color: metrics.authenticationFailures > 10 ? '#ef4444' : '#f59e0b',
        description: 'Failed authentication attempts today',
      },
      {
        id: 'successfulLogins',
        title: 'Successful Logins',
        value: successfulLogins,
        type: 'number',
        icon: 'lucide:Lock',
        color: '#22c55e',
        description: 'Successful logins today',
      },
    ];

    // Map auth events to login history table data
    const loginHistory = authEvents.map((evt: any) => ({
      timestamp: evt.timestamp,
      username: evt.details?.username || 'unknown',
      ipAddress: evt.ipAddress || 'unknown',
      success: evt.success ?? false,
      reason: evt.success ? '' : evt.message || 'Authentication failed',
    }));

    return html`
      <dees-statsgrid
        .tiles=${tiles}
        .minTileWidth=${200}
      ></dees-statsgrid>

      <h2>Recent Login Attempts</h2>
      <dees-table
        .heading1=${'Login History'}
        .heading2=${'Recent authentication attempts'}
        .data=${loginHistory}
        .displayFunction=${(item) => ({
          'Time': new Date(item.timestamp).toLocaleString(),
          'Username': item.username,
          'IP Address': item.ipAddress,
          'Status': item.success ? 'Success' : 'Failed',
          'Reason': item.reason || '-',
        })}
      ></dees-table>
    `;
  }

  private renderEmailSecurity(metrics: any) {
    const tiles: IStatsTile[] = [
      {
        id: 'malware',
        title: 'Malware Detection',
        value: metrics.malwareDetected,
        type: 'number',
        icon: 'lucide:BugOff',
        color: metrics.malwareDetected > 0 ? '#ef4444' : '#22c55e',
        description: 'Malware detected',
      },
      {
        id: 'phishing',
        title: 'Phishing Detection',
        value: metrics.phishingDetected,
        type: 'number',
        icon: 'lucide:Fish',
        color: metrics.phishingDetected > 0 ? '#ef4444' : '#22c55e',
        description: 'Phishing attempts detected',
      },
      {
        id: 'suspicious',
        title: 'Suspicious Activities',
        value: metrics.suspiciousActivities,
        type: 'number',
        icon: 'lucide:TriangleAlert',
        color: metrics.suspiciousActivities > 5 ? '#ef4444' : '#f59e0b',
        description: 'Suspicious activities detected',
      },
      {
        id: 'spam',
        title: 'Spam Detection',
        value: metrics.spamDetected,
        type: 'number',
        icon: 'lucide:Ban',
        color: '#f59e0b',
        description: 'Spam emails blocked',
      },
    ];

    return html`
      <dees-statsgrid
        .tiles=${tiles}
        .minTileWidth=${200}
      ></dees-statsgrid>

      <h2>Email Security Configuration</h2>
      <div class="securityCard">
        <dees-form>
          <dees-input-checkbox 
            .key=${'enableSPF'} 
            .label=${'Enable SPF checking'} 
            .value=${true}
          ></dees-input-checkbox>
          <dees-input-checkbox 
            .key=${'enableDKIM'} 
            .label=${'Enable DKIM validation'} 
            .value=${true}
          ></dees-input-checkbox>
          <dees-input-checkbox 
            .key=${'enableDMARC'} 
            .label=${'Enable DMARC policy enforcement'} 
            .value=${true}
          ></dees-input-checkbox>
          <dees-input-checkbox 
            .key=${'enableSpamFilter'} 
            .label=${'Enable spam filtering'} 
            .value=${true}
          ></dees-input-checkbox>
        </dees-form>
        <dees-button 
          class="actionButton"
          type="highlighted"
          @click=${() => this.saveEmailSecuritySettings()}
        >
          Save Settings
        </dees-button>
      </div>
    `;
  }

  private calculateThreatLevel(metrics: any): string {
    const score = this.getThreatScore(metrics);
    if (score < 30) return 'alert';
    if (score < 70) return 'warning';
    return 'success';
  }

  private getThreatScore(metrics: any): number {
    // Simple scoring algorithm
    let score = 100;
    const blockedCount = Array.isArray(metrics.blockedIPs) ? metrics.blockedIPs.length : (metrics.blockedIPs || 0);
    score -= blockedCount * 2;
    score -= (metrics.authenticationFailures || 0) * 1;
    score -= (metrics.spamDetected || 0) * 0.5;
    score -= (metrics.malwareDetected || 0) * 3;
    score -= (metrics.phishingDetected || 0) * 3;
    score -= (metrics.suspiciousActivities || 0) * 2;
    return Math.max(0, Math.min(100, Math.round(score)));
  }

  private getSecurityEvents(metrics: any): any[] {
    const events: any[] = metrics.recentEvents || [];
    return events.map((evt: any) => ({
      timestamp: evt.timestamp,
      event: evt.message,
      severity: evt.level === 'critical' ? 'critical' : evt.level === 'error' ? 'high' : evt.level === 'warn' ? 'warning' : 'info',
      details: evt.ipAddress ? `IP: ${evt.ipAddress}` : evt.domain ? `Domain: ${evt.domain}` : evt.type,
    }));
  }

  private async clearBlockedIPs() {
    // SmartProxy manages IP blocking — not yet exposed via API
    alert('Clearing blocked IPs is not yet supported from the UI.');
  }

  private async unblockIP(ip: string) {
    // SmartProxy manages IP blocking — not yet exposed via API
    alert(`Unblocking IP ${ip} is not yet supported from the UI.`);
  }

  private async saveEmailSecuritySettings() {
    // Config is read-only from the UI for now
    alert('Email security settings are read-only. Update the dcrouter configuration file to change these settings.');
  }
}