import * as appstate from '../../appstate.js';
import { viewHostCss } from '../shared/css.js';

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

declare global {
  interface HTMLElementTagNameMap {
    'ops-view-email-security': OpsViewEmailSecurity;
  }
}

@customElement('ops-view-email-security')
export class OpsViewEmailSecurity extends DeesElement {
  @state()
  accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;

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

  public static styles = [
    cssManager.defaultStyles,
    viewHostCss,
    css`
      .securityContainer {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
    `,
  ];

  public render(): TemplateResult {
    const metrics = this.statsState.securityMetrics;

    if (!metrics) {
      return html`
        <div class="loadingMessage">
          <p>Loading security metrics...</p>
        </div>
      `;
    }

    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-heading level="3">Email Security</dees-heading>

      <div class="securityContainer">
        <dees-statsgrid
          .tiles=${tiles}
          .minTileWidth=${200}
        ></dees-statsgrid>

        <dees-settings
          .heading=${'Security Configuration'}
          .settingsFields=${[
            { key: 'spf', label: 'SPF checking', value: 'enabled' },
            { key: 'dkim', label: 'DKIM validation', value: 'enabled' },
            { key: 'dmarc', label: 'DMARC policy', value: 'enabled' },
            { key: 'spam', label: 'Spam filtering', value: 'enabled' },
          ]}
          .actions=${[{ name: 'Edit', action: () => this.showEditSecurityDialog() }]}
        ></dees-settings>
      </div>
    `;
  }

  private async showEditSecurityDialog() {
    const { DeesModal } = await import('@design.estate/dees-catalog');
    DeesModal.createAndShow({
      heading: 'Edit Security Configuration',
      content: html`
        <dees-form>
          <dees-input-checkbox .key=${'enableSPF'} .label=${'SPF checking'} .value=${true}></dees-input-checkbox>
          <dees-input-checkbox .key=${'enableDKIM'} .label=${'DKIM validation'} .value=${true}></dees-input-checkbox>
          <dees-input-checkbox .key=${'enableDMARC'} .label=${'DMARC policy enforcement'} .value=${true}></dees-input-checkbox>
          <dees-input-checkbox .key=${'enableSpamFilter'} .label=${'Spam filtering'} .value=${true}></dees-input-checkbox>
        </dees-form>
        <p style="margin-top: 12px; font-size: 12px; opacity: 0.7;">
          These settings are read-only for now. Update the dcrouter configuration to change them.
        </p>
      `,
      menuOptions: [
        { name: 'Close', action: async (modalArg: any) => modalArg.destroy() },
      ],
    });
  }
}