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

import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
import * as appstate from '../appstate.js';
import * as shared from './shared/index.js';
import * as interfaces from '../../dist_ts_interfaces/index.js';
import { appRouter } from '../router.js';

declare global {
  interface HTMLElementTagNameMap {
    'ops-view-emails': OpsViewEmails;
  }
}

type TEmailFolder = 'queued' | 'sent' | 'failed' | 'received' | 'security';

@customElement('ops-view-emails')
export class OpsViewEmails extends DeesElement {
  @state()
  accessor selectedFolder: TEmailFolder = 'queued';

  @state()
  accessor queuedEmails: interfaces.requests.IEmailQueueItem[] = [];

  @state()
  accessor sentEmails: interfaces.requests.IEmailQueueItem[] = [];

  @state()
  accessor failedEmails: interfaces.requests.IEmailQueueItem[] = [];

  @state()
  accessor securityIncidents: interfaces.requests.ISecurityIncident[] = [];

  @state()
  accessor selectedEmail: interfaces.requests.IEmailQueueItem | null = null;

  @state()
  accessor selectedIncident: interfaces.requests.ISecurityIncident | null = null;

  @state()
  accessor showCompose = false;

  @state()
  accessor isLoading = false;

  @state()
  accessor searchTerm = '';

  @state()
  accessor emailDomains: string[] = [];

  private stateSubscription: any;

  constructor() {
    super();
    this.loadData();
    this.loadEmailDomains();
  }

  async connectedCallback() {
    await super.connectedCallback();
    // Subscribe to state changes
    this.stateSubscription = appstate.emailOpsStatePart.state.subscribe((state) => {
      this.queuedEmails = state.queuedEmails;
      this.sentEmails = state.sentEmails;
      this.failedEmails = state.failedEmails;
      this.securityIncidents = state.securityIncidents;
      this.isLoading = state.isLoading;

      // Sync folder from state (e.g., when URL changes)
      if (state.currentView !== this.selectedFolder) {
        this.selectedFolder = state.currentView as TEmailFolder;
        this.loadFolderData(state.currentView as TEmailFolder);
      }
    });
  }

  async disconnectedCallback() {
    await super.disconnectedCallback();
    if (this.stateSubscription) {
      this.stateSubscription.unsubscribe();
    }
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
    css`
      :host {
        display: block;
        height: 100%;
      }

      .emailLayout {
        display: flex;
        gap: 16px;
        height: 100%;
        min-height: 600px;
      }

      .sidebar {
        flex-shrink: 0;
        width: 280px;
      }

      .mainArea {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: hidden;
      }

      .emailToolbar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .searchBox {
        flex: 1;
        min-width: 200px;
        max-width: 400px;
      }

      .emailList {
        flex: 1;
        overflow: hidden;
      }

      .emailPreview {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: ${cssManager.bdTheme('#fff', '#222')};
        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
        border-radius: 8px;
        overflow: hidden;
      }

      .emailHeader {
        padding: 24px;
        border-bottom: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
      }

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

      .emailMeta {
        display: flex;
        flex-direction: column;
        gap: 8px;
        font-size: 14px;
        color: ${cssManager.bdTheme('#666', '#999')};
      }

      .emailMetaRow {
        display: flex;
        gap: 8px;
      }

      .emailMetaLabel {
        font-weight: 600;
        min-width: 80px;
      }

      .emailBody {
        flex: 1;
        padding: 24px;
        overflow-y: auto;
        font-size: 15px;
        line-height: 1.6;
      }

      .emailActions {
        display: flex;
        gap: 8px;
        padding: 16px 24px;
        border-top: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
        background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
      }

      .emptyState {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 400px;
        color: ${cssManager.bdTheme('#999', '#666')};
      }

      .emptyIcon {
        font-size: 64px;
        margin-bottom: 16px;
        opacity: 0.3;
      }

      .emptyText {
        font-size: 18px;
      }

      .status-pending {
        color: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
      }

      .status-processing {
        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
      }

      .status-delivered {
        color: ${cssManager.bdTheme('#10b981', '#34d399')};
      }

      .status-failed {
        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
      }

      .status-deferred {
        color: ${cssManager.bdTheme('#f97316', '#fb923c')};
      }

      .severity-info {
        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
      }

      .severity-warn {
        color: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
      }

      .severity-error {
        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
      }

      .severity-critical {
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
        font-weight: bold;
      }

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

      .incidentHeader {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
      }

      .incidentTitle {
        font-size: 20px;
        font-weight: 600;
      }

      .incidentMeta {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px;
        margin-top: 16px;
      }

      .incidentField {
        padding: 12px;
        background: ${cssManager.bdTheme('#f8f9fa', '#1a1a1a')};
        border-radius: 6px;
      }

      .incidentFieldLabel {
        font-size: 12px;
        color: ${cssManager.bdTheme('#666', '#999')};
        margin-bottom: 4px;
      }

      .incidentFieldValue {
        font-size: 14px;
        word-break: break-all;
      }
    `,
  ];

  public render() {
    if (this.selectedEmail) {
      return this.renderEmailDetail();
    }

    if (this.selectedIncident) {
      return this.renderIncidentDetail();
    }

    return html`
      <ops-sectionheading>Email Operations</ops-sectionheading>

      <!-- Toolbar -->
      <div class="emailToolbar" style="margin-bottom: 16px;">
        <dees-button @click=${() => this.openComposeModal()} type="highlighted">
          <dees-icon icon="lucide:penLine" slot="iconSlot"></dees-icon>
          Compose
        </dees-button>

        <dees-input-text
          class="searchBox"
          placeholder="Search..."
          .value=${this.searchTerm}
          @input=${(e: Event) => this.searchTerm = (e.target as any).value}
        >
          <dees-icon icon="lucide:search" slot="iconSlot"></dees-icon>
        </dees-input-text>

        <dees-button @click=${() => this.refreshData()}>
          ${this.isLoading ? html`<dees-spinner slot="iconSlot" size="small"></dees-spinner>` : html`<dees-icon slot="iconSlot" icon="lucide:refreshCw"></dees-icon>`}
          Refresh
        </dees-button>

        <div style="margin-left: auto; display: flex; gap: 8px;">
          <dees-button-group>
            <dees-button
              @click=${() => this.selectFolder('queued')}
              .type=${this.selectedFolder === 'queued' ? 'highlighted' : 'normal'}
            >
              Queued ${this.queuedEmails.length > 0 ? `(${this.queuedEmails.length})` : ''}
            </dees-button>
            <dees-button
              @click=${() => this.selectFolder('sent')}
              .type=${this.selectedFolder === 'sent' ? 'highlighted' : 'normal'}
            >
              Sent
            </dees-button>
            <dees-button
              @click=${() => this.selectFolder('failed')}
              .type=${this.selectedFolder === 'failed' ? 'highlighted' : 'normal'}
            >
              Failed ${this.failedEmails.length > 0 ? `(${this.failedEmails.length})` : ''}
            </dees-button>
            <dees-button
              @click=${() => this.selectFolder('security')}
              .type=${this.selectedFolder === 'security' ? 'highlighted' : 'normal'}
            >
              Security ${this.securityIncidents.length > 0 ? `(${this.securityIncidents.length})` : ''}
            </dees-button>
          </dees-button-group>
        </div>
      </div>

      ${this.renderContent()}
    `;
  }

  private renderContent() {
    switch (this.selectedFolder) {
      case 'queued':
        return this.renderEmailTable(this.queuedEmails, 'Queued Emails', 'Emails waiting to be delivered');
      case 'sent':
        return this.renderEmailTable(this.sentEmails, 'Sent Emails', 'Successfully delivered emails');
      case 'failed':
        return this.renderEmailTable(this.failedEmails, 'Failed Emails', 'Emails that failed to deliver', true);
      case 'security':
        return this.renderSecurityIncidents();
      default:
        return this.renderEmptyState('Select a folder');
    }
  }

  private renderEmailTable(
    emails: interfaces.requests.IEmailQueueItem[],
    heading1: string,
    heading2: string,
    showResend = false
  ) {
    const filteredEmails = this.filterEmails(emails);

    if (filteredEmails.length === 0) {
      return this.renderEmptyState(`No emails in ${this.selectedFolder}`);
    }

    const actions = [
      {
        name: 'View Details',
        iconName: 'lucide:eye',
        type: ['doubleClick', 'inRow'] as any,
        actionFunc: async (actionData: any) => {
          this.selectedEmail = actionData.item;
        }
      }
    ];

    if (showResend) {
      actions.push({
        name: 'Resend',
        iconName: 'lucide:send',
        type: ['inRow'] as any,
        actionFunc: async (actionData: any) => {
          await this.resendEmail(actionData.item.id);
        }
      });
    }

    return html`
      <dees-table
        .data=${filteredEmails}
        .displayFunction=${(email: interfaces.requests.IEmailQueueItem) => ({
          'Status': html`<span class="status-${email.status}">${email.status}</span>`,
          'From': email.from || 'N/A',
          'To': email.to?.join(', ') || 'N/A',
          'Subject': email.subject || 'No subject',
          'Attempts': email.attempts,
          'Created': this.formatDate(email.createdAt),
        })}
        .dataActions=${actions}
        .selectionMode=${'single'}
        heading1=${heading1}
        heading2=${`${filteredEmails.length} emails - ${heading2}`}
      ></dees-table>
    `;
  }

  private renderSecurityIncidents() {
    const incidents = this.securityIncidents;

    if (incidents.length === 0) {
      return this.renderEmptyState('No security incidents');
    }

    return html`
      <dees-table
        .data=${incidents}
        .displayFunction=${(incident: interfaces.requests.ISecurityIncident) => ({
          'Severity': html`<span class="severity-${incident.level}">${incident.level.toUpperCase()}</span>`,
          'Type': incident.type,
          'Message': incident.message,
          'IP': incident.ipAddress || 'N/A',
          'Domain': incident.domain || 'N/A',
          'Time': this.formatDate(incident.timestamp),
        })}
        .dataActions=${[
          {
            name: 'View Details',
            iconName: 'lucide:eye',
            type: ['doubleClick', 'inRow'],
            actionFunc: async (actionData: any) => {
              this.selectedIncident = actionData.item;
            }
          }
        ]}
        .selectionMode=${'single'}
        heading1="Security Incidents"
        heading2=${`${incidents.length} incidents`}
      ></dees-table>
    `;
  }

  private renderEmailDetail() {
    if (!this.selectedEmail) return '';

    return html`
      <ops-sectionheading>Email Details</ops-sectionheading>
      <div class="emailLayout">
        <div class="sidebar">
          <dees-windowbox>
            <dees-button @click=${() => this.selectedEmail = null} type="secondary" style="width: 100%;">
              <dees-icon icon="lucide:arrowLeft" slot="iconSlot"></dees-icon>
              Back to List
            </dees-button>
          </dees-windowbox>
        </div>
        <div class="mainArea">
          <div class="emailPreview">
            <div class="emailHeader">
              <div class="emailSubject">${this.selectedEmail.subject || 'No subject'}</div>
              <div class="emailMeta">
                <div class="emailMetaRow">
                  <span class="emailMetaLabel">Status:</span>
                  <span class="status-${this.selectedEmail.status}">${this.selectedEmail.status}</span>
                </div>
                <div class="emailMetaRow">
                  <span class="emailMetaLabel">From:</span>
                  <span>${this.selectedEmail.from || 'N/A'}</span>
                </div>
                <div class="emailMetaRow">
                  <span class="emailMetaLabel">To:</span>
                  <span>${this.selectedEmail.to?.join(', ') || 'N/A'}</span>
                </div>
                <div class="emailMetaRow">
                  <span class="emailMetaLabel">Mode:</span>
                  <span>${this.selectedEmail.processingMode}</span>
                </div>
                <div class="emailMetaRow">
                  <span class="emailMetaLabel">Attempts:</span>
                  <span>${this.selectedEmail.attempts}</span>
                </div>
                <div class="emailMetaRow">
                  <span class="emailMetaLabel">Created:</span>
                  <span>${new Date(this.selectedEmail.createdAt).toLocaleString()}</span>
                </div>
                ${this.selectedEmail.deliveredAt ? html`
                  <div class="emailMetaRow">
                    <span class="emailMetaLabel">Delivered:</span>
                    <span>${new Date(this.selectedEmail.deliveredAt).toLocaleString()}</span>
                  </div>
                ` : ''}
                ${this.selectedEmail.lastError ? html`
                  <div class="emailMetaRow">
                    <span class="emailMetaLabel">Last Error:</span>
                    <span style="color: #ef4444;">${this.selectedEmail.lastError}</span>
                  </div>
                ` : ''}
              </div>
            </div>

            <div class="emailActions">
              ${this.selectedEmail.status === 'failed' ? html`
                <dees-button @click=${() => this.resendEmail(this.selectedEmail!.id)} type="highlighted">
                  <dees-icon icon="lucide:send" slot="iconSlot"></dees-icon>
                  Resend
                </dees-button>
              ` : ''}
              <dees-button @click=${() => this.selectedEmail = null}>
                <dees-icon icon="lucide:x" slot="iconSlot"></dees-icon>
                Close
              </dees-button>
            </div>
          </div>
        </div>
      </div>
    `;
  }

  private renderIncidentDetail() {
    if (!this.selectedIncident) return '';

    const incident = this.selectedIncident;

    return html`
      <ops-sectionheading>Security Incident Details</ops-sectionheading>
      <div style="margin-bottom: 16px;">
        <dees-button @click=${() => this.selectedIncident = null} type="secondary">
          <dees-icon icon="lucide:arrowLeft" slot="iconSlot"></dees-icon>
          Back to List
        </dees-button>
      </div>
      <div class="incidentDetails">
        <div class="incidentHeader">
          <div>
            <div class="incidentTitle">${incident.message}</div>
            <div style="margin-top: 8px; color: #666;">
              ${new Date(incident.timestamp).toLocaleString()}
            </div>
          </div>
          <span class="severity-${incident.level}" style="font-size: 16px; padding: 4px 12px; background: rgba(0,0,0,0.1); border-radius: 4px;">
            ${incident.level.toUpperCase()}
          </span>
        </div>

        <div class="incidentMeta">
          <div class="incidentField">
            <div class="incidentFieldLabel">Type</div>
            <div class="incidentFieldValue">${incident.type}</div>
          </div>
          ${incident.ipAddress ? html`
            <div class="incidentField">
              <div class="incidentFieldLabel">IP Address</div>
              <div class="incidentFieldValue">${incident.ipAddress}</div>
            </div>
          ` : ''}
          ${incident.domain ? html`
            <div class="incidentField">
              <div class="incidentFieldLabel">Domain</div>
              <div class="incidentFieldValue">${incident.domain}</div>
            </div>
          ` : ''}
          ${incident.emailId ? html`
            <div class="incidentField">
              <div class="incidentFieldLabel">Email ID</div>
              <div class="incidentFieldValue">${incident.emailId}</div>
            </div>
          ` : ''}
          ${incident.userId ? html`
            <div class="incidentField">
              <div class="incidentFieldLabel">User ID</div>
              <div class="incidentFieldValue">${incident.userId}</div>
            </div>
          ` : ''}
          ${incident.action ? html`
            <div class="incidentField">
              <div class="incidentFieldLabel">Action</div>
              <div class="incidentFieldValue">${incident.action}</div>
            </div>
          ` : ''}
          ${incident.result ? html`
            <div class="incidentField">
              <div class="incidentFieldLabel">Result</div>
              <div class="incidentFieldValue">${incident.result}</div>
            </div>
          ` : ''}
          ${incident.success !== undefined ? html`
            <div class="incidentField">
              <div class="incidentFieldLabel">Success</div>
              <div class="incidentFieldValue">${incident.success ? 'Yes' : 'No'}</div>
            </div>
          ` : ''}
        </div>

        ${incident.details ? html`
          <div style="margin-top: 24px;">
            <div class="incidentFieldLabel" style="margin-bottom: 8px;">Details</div>
            <pre style="background: #1a1a1a; color: #e5e5e5; padding: 16px; border-radius: 6px; overflow-x: auto; font-size: 13px;">
${JSON.stringify(incident.details, null, 2)}
            </pre>
          </div>
        ` : ''}
      </div>
    `;
  }

  private renderEmptyState(message: string) {
    return html`
      <div class="emptyState">
        <dees-icon class="emptyIcon" icon="lucide:inbox"></dees-icon>
        <div class="emptyText">${message}</div>
      </div>
    `;
  }

  private async openComposeModal() {
    const { DeesModal } = await import('@design.estate/dees-catalog');

    // Ensure domains are loaded before opening modal
    if (this.emailDomains.length === 0) {
      await this.loadEmailDomains();
    }

    await DeesModal.createAndShow({
      heading: 'New Email',
      width: 'large',
      content: html`
        <div>
          <dees-form @formData=${async (e: CustomEvent) => {
            await this.sendEmail(e.detail);
            const modals = document.querySelectorAll('dees-modal');
            modals.forEach(m => (m as any).destroy?.());
          }}>
            <div style="display: flex; gap: 8px; align-items: flex-end;">
              <dees-input-text
                key="fromUsername"
                label="From"
                placeholder="username"
                .value=${'admin'}
                required
                style="flex: 1;"
              ></dees-input-text>
              <span style="padding-bottom: 12px; font-size: 18px; color: #666;">@</span>
              <dees-input-dropdown
                key="fromDomain"
                label=" "
                .options=${this.emailDomains.length > 0
                  ? this.emailDomains.map(domain => ({ key: domain, value: domain }))
                  : [{ key: 'dcrouter.local', value: 'dcrouter.local' }]}
                .selectedKey=${this.emailDomains[0] || 'dcrouter.local'}
                required
                style="flex: 1;"
              ></dees-input-dropdown>
            </div>

            <dees-input-tags
              key="to"
              label="To"
              placeholder="Enter recipient email addresses..."
              required
            ></dees-input-tags>

            <dees-input-tags
              key="cc"
              label="CC"
              placeholder="Enter CC recipients..."
            ></dees-input-tags>

            <dees-input-text
              key="subject"
              label="Subject"
              placeholder="Enter email subject..."
              required
            ></dees-input-text>

            <dees-input-wysiwyg
              key="body"
              label="Message"
              outputFormat="html"
            ></dees-input-wysiwyg>
          </dees-form>
        </div>
      `,
      menuOptions: [
        {
          name: 'Send',
          iconName: 'lucide:send',
          action: async (modalArg) => {
            const form = modalArg.shadowRoot?.querySelector('dees-form') as any;
            form?.submit();
          }
        },
        {
          name: 'Cancel',
          iconName: 'lucide:x',
          action: async (modalArg) => await modalArg.destroy()
        }
      ]
    });
  }

  private filterEmails(emails: interfaces.requests.IEmailQueueItem[]): interfaces.requests.IEmailQueueItem[] {
    if (!this.searchTerm) {
      return emails;
    }

    const search = this.searchTerm.toLowerCase();
    return emails.filter(e =>
      (e.subject?.toLowerCase().includes(search)) ||
      (e.from?.toLowerCase().includes(search)) ||
      (e.to?.some(t => t.toLowerCase().includes(search)))
    );
  }

  private selectFolder(folder: TEmailFolder) {
    // Use router for navigation to update URL
    appRouter.navigateToEmailFolder(folder);
    // Clear selections
    this.selectedEmail = null;
    this.selectedIncident = null;
  }

  private formatDate(timestamp: number): string {
    const date = new Date(timestamp);
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const hours = diff / (1000 * 60 * 60);

    if (hours < 24) {
      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    } else if (hours < 168) { // 7 days
      return date.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });
    } else {
      return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
    }
  }

  private async loadData() {
    this.isLoading = true;
    await this.loadFolderData(this.selectedFolder);
    this.isLoading = false;
  }

  private async loadFolderData(folder: TEmailFolder) {
    switch (folder) {
      case 'queued':
        await appstate.emailOpsStatePart.dispatchAction(appstate.fetchQueuedEmailsAction, null);
        break;
      case 'sent':
        await appstate.emailOpsStatePart.dispatchAction(appstate.fetchSentEmailsAction, null);
        break;
      case 'failed':
        await appstate.emailOpsStatePart.dispatchAction(appstate.fetchFailedEmailsAction, null);
        break;
      case 'security':
        await appstate.emailOpsStatePart.dispatchAction(appstate.fetchSecurityIncidentsAction, null);
        break;
    }
  }

  private async loadEmailDomains() {
    try {
      await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
      const config = appstate.configStatePart.getState().config;

      if (config?.email?.domains && Array.isArray(config.email.domains) && config.email.domains.length > 0) {
        this.emailDomains = config.email.domains;
      } else {
        this.emailDomains = ['dcrouter.local'];
      }
    } catch (error) {
      console.error('Failed to load email domains:', error);
      this.emailDomains = ['dcrouter.local'];
    }
  }

  private async refreshData() {
    this.isLoading = true;
    await this.loadFolderData(this.selectedFolder);
    this.isLoading = false;
  }

  private async sendEmail(formData: any) {
    try {
      console.log('Sending email:', formData);
      // TODO: Implement actual email sending via API
      // For now, just log the data
      const fromEmail = `${formData.fromUsername || 'admin'}@${formData.fromDomain || this.emailDomains[0] || 'dcrouter.local'}`;
      console.log('From:', fromEmail);
      console.log('To:', formData.to);
      console.log('Subject:', formData.subject);
    } catch (error: any) {
      console.error('Failed to send email', error);
    }
  }

  private async resendEmail(emailId: string) {
    try {
      await appstate.emailOpsStatePart.dispatchAction(appstate.resendEmailAction, emailId);
      this.selectedEmail = null;
    } catch (error) {
      console.error('Failed to resend email:', error);
    }
  }
}