var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import { DeesElement, customElement, html, css, cssManager, property, } from '@design.estate/dees-element';
let SzMtaDetailView = (() => {
    let _classDecorators = [customElement('sz-mta-detail-view')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _email_decorators;
    let _email_initializers = [];
    let _email_extraInitializers = [];
    var SzMtaDetailView = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _email_decorators = [property({ type: Object })];
            __esDecorate(this, null, _email_decorators, { kind: "accessor", name: "email", static: false, private: false, access: { has: obj => "email" in obj, get: obj => obj.email, set: (obj, value) => { obj.email = value; } }, metadata: _metadata }, _email_initializers, _email_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            SzMtaDetailView = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static demo = () => html `
    <div style="padding: 24px; max-width: 1200px;">
      <sz-mta-detail-view
        .email=${{
            id: '1',
            direction: 'outbound',
            status: 'delivered',
            from: 'noreply@serve.zone',
            to: 'user@example.com',
            toList: ['user@example.com'],
            subject: 'Welcome to serve.zone',
            timestamp: '2024-01-15 14:30:22',
            messageId: '<abc123@serve.zone>',
            size: '12.4 KB',
            smtpLog: [
                { timestamp: '14:30:20', direction: 'client', command: 'EHLO mail.serve.zone' },
                { timestamp: '14:30:20', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
                { timestamp: '14:30:20', direction: 'server', command: '250-STARTTLS', responseCode: 250 },
                { timestamp: '14:30:20', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
                { timestamp: '14:30:20', direction: 'client', command: 'STARTTLS' },
                { timestamp: '14:30:21', direction: 'server', command: '220 Ready to start TLS', responseCode: 220 },
                { timestamp: '14:30:21', direction: 'client', command: 'EHLO mail.serve.zone' },
                { timestamp: '14:30:21', direction: 'server', command: '250-mail.example.com Hello', responseCode: 250 },
                { timestamp: '14:30:21', direction: 'server', command: '250-AUTH PLAIN LOGIN', responseCode: 250 },
                { timestamp: '14:30:21', direction: 'server', command: '250 SIZE 52428800', responseCode: 250 },
                { timestamp: '14:30:21', direction: 'client', command: 'AUTH PLAIN AHVzZXIAcGFzc3dvcmQ=' },
                { timestamp: '14:30:21', direction: 'server', command: '235 2.7.0 Authentication successful', responseCode: 235 },
                { timestamp: '14:30:21', direction: 'client', command: 'MAIL FROM:<noreply@serve.zone>' },
                { timestamp: '14:30:21', direction: 'server', command: '250 OK', responseCode: 250 },
                { timestamp: '14:30:21', direction: 'client', command: 'RCPT TO:<user@example.com>' },
                { timestamp: '14:30:21', direction: 'server', command: '250 Accepted', responseCode: 250 },
                { timestamp: '14:30:22', direction: 'client', command: 'DATA' },
                { timestamp: '14:30:22', direction: 'server', command: '354 Enter message, ending with "." on a line by itself', responseCode: 354 },
                { timestamp: '14:30:22', direction: 'client', command: '.' },
                { timestamp: '14:30:22', direction: 'server', command: '250 OK id=1pQ2rS-0003Ab-C4', responseCode: 250 },
                { timestamp: '14:30:22', direction: 'client', command: 'QUIT' },
                { timestamp: '14:30:22', direction: 'server', command: '221 mail.example.com closing connection', responseCode: 221 },
            ],
            connectionInfo: {
                sourceIp: '10.0.1.50',
                sourceHostname: 'mail.serve.zone',
                destinationIp: '93.184.216.34',
                destinationPort: 25,
                tlsVersion: 'TLSv1.3',
                tlsCipher: 'TLS_AES_256_GCM_SHA384',
                authenticated: true,
                authMethod: 'PLAIN',
                authUser: 'noreply@serve.zone',
            },
            authenticationResults: {
                spf: 'pass',
                spfDomain: 'serve.zone',
                dkim: 'pass',
                dkimDomain: 'serve.zone',
                dmarc: 'pass',
                dmarcPolicy: 'reject',
            },
            headers: {
                'From': 'noreply@serve.zone',
                'To': 'user@example.com',
                'Subject': 'Welcome to serve.zone',
                'Date': 'Mon, 15 Jan 2024 14:30:22 +0000',
                'MIME-Version': '1.0',
                'Content-Type': 'text/html; charset=UTF-8',
            },
            body: '<html>\\n<head><title>Welcome</title></head>\\n<body>\\n  <h1>Welcome to serve.zone!</h1>\\n  <p>Your account has been created successfully.</p>\\n  <a href="https://serve.zone/dashboard">Go to Dashboard</a>\\n</body>\\n</html>',
        }}
      ></sz-mta-detail-view>
    </div>
  `;
        static demoGroups = ['MTA'];
        #email_accessor_storage = __runInitializers(this, _email_initializers, null);
        get email() { return this.#email_accessor_storage; }
        set email(value) { this.#email_accessor_storage = value; }
        static styles = [
            cssManager.defaultStyles,
            css `
      :host {
        display: block;
      }

      .header {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
      }

      .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        cursor: pointer;
        transition: color 200ms ease;
      }

      .back-link:hover {
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .email-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
      }

      .email-subject {
        font-size: 24px;
        font-weight: 700;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        margin: 0;
      }

      .badge-group {
        display: flex;
        gap: 8px;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 13px;
        font-weight: 500;
      }

      .status-badge.delivered {
        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .status-badge.bounced,
      .status-badge.rejected {
        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
      }

      .status-badge.deferred {
        background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
      }

      .status-badge.pending {
        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
      }

      .direction-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 12px;
        border-radius: 9999px;
        font-size: 13px;
        font-weight: 500;
      }

      .direction-badge.inbound {
        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .direction-badge.outbound {
        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
      }

      .content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
      }

      @media (min-width: 1024px) {
        .content {
          grid-template-columns: 2fr 1fr;
        }
      }

      .main-content {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .sidebar {
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      .card-header {
        height: 36px;
        display: flex;
        align-items: center;
        padding: 0 16px;
        width: 100%;
        box-sizing: border-box;
      }

      .card-heading {
        flex: 1;
        display: flex;
        align-items: baseline;
        gap: 8px;
        min-width: 0;
      }

      .card-title {
        font-weight: 500;
        font-size: 13px;
        letter-spacing: -0.01em;
        color: var(--dees-color-text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .card-subtitle {
        font-size: 12px;
        color: var(--dees-color-text-muted);
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .card-footer {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 0;
        height: 36px;
        width: 100%;
        box-sizing: border-box;
      }

      .tile-button {
        padding: 0 16px;
        height: 100%;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
        background: transparent;
        border: none;
        border-left: 1px solid var(--dees-color-border-subtle);
        color: var(--dees-color-text-muted);
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .tile-button:first-child {
        border-left: none;
      }

      .tile-button:hover {
        background: var(--dees-color-hover);
        color: var(--dees-color-text-primary);
      }

      .tile-button.primary {
        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
        font-weight: 600;
      }

      .tile-button.primary:hover {
        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
      }

      .card-content {
        padding: 16px;
      }

      .detail-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .detail-item {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }

      .detail-label {
        font-size: 14px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        flex-shrink: 0;
      }

      .detail-value {
        font-size: 14px;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        text-align: right;
        word-break: break-all;
      }

      .smtp-log-container {
        padding: 16px;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
        font-size: 13px;
        line-height: 1.6;
        max-height: 500px;
        overflow-y: auto;
        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
        display: flex;
        flex-direction: column;
        gap: 8px;
        scrollbar-width: thin;
        scrollbar-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')} transparent;
      }

      .smtp-log-container::-webkit-scrollbar {
        width: 6px;
      }

      .smtp-log-container::-webkit-scrollbar-track {
        background: transparent;
      }

      .smtp-log-container::-webkit-scrollbar-thumb {
        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
        border-radius: 3px;
      }

      /* Phase separators */
      .smtp-phase-separator {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 4px 0;
        margin: 4px 0;
      }

      .smtp-phase-line {
        flex: 1;
        height: 1px;
        background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
      }

      .smtp-phase-label {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
        white-space: nowrap;
      }

      /* Chat bubbles */
      .smtp-bubble {
        border-radius: 8px;
        padding: 10px 14px;
        max-width: 70%;
      }

      .smtp-bubble.client {
        align-self: flex-start;
        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.08)', 'rgba(59, 130, 246, 0.12)')};
        border-left: 3px solid ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
        margin-right: auto;
      }

      .smtp-bubble.server {
        align-self: flex-end;
        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.06)', 'rgba(34, 197, 94, 0.10)')};
        border-right: 3px solid ${cssManager.bdTheme('#22c55e', '#4ade80')};
        margin-left: auto;
        text-align: right;
      }

      .smtp-bubble-command {
        white-space: pre-wrap;
        word-break: break-all;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .smtp-bubble-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        font-size: 11px;
        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
      }

      .smtp-bubble.server .smtp-bubble-meta {
        justify-content: flex-end;
      }

      .smtp-direction-tag {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
      }

      .smtp-direction-tag.client {
        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
      }

      .smtp-direction-tag.server {
        color: ${cssManager.bdTheme('#22c55e', '#4ade80')};
      }

      /* Response code badges */
      .response-code-badge {
        display: inline-block;
        padding: 1px 7px;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 4px;
        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
      }

      .response-code-badge.code-2xx {
        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.15)', 'rgba(34, 197, 94, 0.25)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .response-code-badge.code-3xx {
        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.25)')};
        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
      }

      .response-code-badge.code-4xx {
        background: ${cssManager.bdTheme('rgba(250, 204, 21, 0.15)', 'rgba(250, 204, 21, 0.25)')};
        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
      }

      .response-code-badge.code-5xx {
        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.15)', 'rgba(239, 68, 68, 0.25)')};
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
      }

      /* SMTP metadata banner — sits inside content, above the log */
      .smtp-header-subtitle {
        padding: 10px 16px;
        font-size: 12px;
        color: var(--dees-color-text-muted);
        border-bottom: 1px solid var(--dees-color-border-subtle);
        font-family: monospace;
      }

      .smtp-direction-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
      }

      .smtp-direction-badge.inbound {
        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.12)', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .smtp-direction-badge.outbound {
        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.12)', 'rgba(59, 130, 246, 0.2)')};
        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
      }

      .email-body-container {
        padding: 16px;
        font-family: monospace;
        font-size: 13px;
        max-height: 500px;
        overflow-y: auto;
        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
        white-space: pre-wrap;
        word-break: break-all;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .tls-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .auth-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#27272a')};
      }

      .auth-row:last-child {
        border-bottom: none;
      }

      .auth-label {
        font-size: 14px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .auth-domain {
        font-size: 12px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin-left: 8px;
      }

      .auth-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 500;
      }

      .auth-badge.pass {
        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .auth-badge.fail {
        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
      }

      .auth-badge.softfail,
      .auth-badge.neutral,
      .auth-badge.none {
        background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
      }

      dees-tile.rejection-card::part(outer) {
        border-color: ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.3)')};
      }

      .rejection-content {
        font-size: 14px;
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
      }

      .rejection-label {
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin-bottom: 4px;
      }

      .rejection-text {
        font-family: monospace;
        font-size: 13px;
        padding: 8px 12px;
        background: ${cssManager.bdTheme('#fef2f2', 'rgba(239, 68, 68, 0.1)')};
        border-radius: 4px;
        margin-bottom: 12px;
        color: ${cssManager.bdTheme('#991b1b', '#fca5a5')};
      }

      .rejection-text:last-child {
        margin-bottom: 0;
      }

      .no-email {
        padding: 48px 24px;
        text-align: center;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }
    `,
        ];
        render() {
            if (!this.email) {
                return html `<div class="no-email">No email selected</div>`;
            }
            const email = this.email;
            return html `
      <div class="header">
        <div class="back-link" @click=${() => this.handleBack()}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="15 18 9 12 15 6"></polyline>
          </svg>
          Back to Emails
        </div>
      </div>

      <div class="email-header">
        <h1 class="email-subject">${email.subject}</h1>
        <div class="badge-group">
          <span class="status-badge ${email.status}">${email.status}</span>
          <span class="direction-badge ${email.direction}">${email.direction}</span>
        </div>
      </div>

      <div class="content">
        <div class="main-content">
          <!-- Email Metadata -->
          <dees-tile>
            <div slot="header" class="card-header">
              <div class="card-heading">
                <span class="card-title">Email Metadata</span>
              </div>
            </div>
            <div class="card-content">
              <div class="detail-list">
                <div class="detail-item">
                  <span class="detail-label">From</span>
                  <span class="detail-value">${email.from}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">To</span>
                  <span class="detail-value">${email.toList.join(', ')}</span>
                </div>
                ${email.cc && email.cc.length > 0 ? html `
                  <div class="detail-item">
                    <span class="detail-label">CC</span>
                    <span class="detail-value">${email.cc.join(', ')}</span>
                  </div>
                ` : ''}
                <div class="detail-item">
                  <span class="detail-label">Subject</span>
                  <span class="detail-value">${email.subject}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Date</span>
                  <span class="detail-value">${email.timestamp}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Message ID</span>
                  <span class="detail-value">${email.messageId}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Size</span>
                  <span class="detail-value">${email.size}</span>
                </div>
              </div>
            </div>
          </dees-tile>

          <!-- SMTP Transaction Log -->
          <dees-tile>
            <div slot="header" class="card-header">
              <div class="card-heading">
                <span class="card-title">SMTP Transaction Log</span>
                <span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
              </div>
            </div>
            <div class="smtp-header-subtitle">
              ${email.direction === 'outbound'
                ? `${email.connectionInfo.sourceHostname} → ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}`
                : `${email.connectionInfo.sourceIp} → ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`}
            </div>
            ${this.renderSmtpLog(email)}
            <div slot="footer" class="card-footer">
              <button class="tile-button" @click=${() => this.copySmtpLog()}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                </svg>
                Copy Log
              </button>
            </div>
          </dees-tile>

          <!-- Email Body -->
          <dees-tile>
            <div slot="header" class="card-header">
              <div class="card-heading">
                <span class="card-title">Email Body (Escaped)</span>
                <span class="card-subtitle">Raw content — HTML is not rendered</span>
              </div>
            </div>
            <pre class="email-body-container">${email.body}</pre>
          </dees-tile>
        </div>

        <div class="sidebar">
          <!-- Connection Info -->
          <dees-tile>
            <div slot="header" class="card-header">
              <div class="card-heading">
                <span class="card-title">Connection Info</span>
              </div>
            </div>
            <div class="card-content">
              <div class="detail-list">
                <div class="detail-item">
                  <span class="detail-label">Source IP</span>
                  <span class="detail-value">${email.connectionInfo.sourceIp}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Source Hostname</span>
                  <span class="detail-value">${email.connectionInfo.sourceHostname}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">Destination</span>
                  <span class="detail-value">${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">TLS</span>
                  <span class="detail-value">
                    ${email.connectionInfo.tlsVersion
                ? html `<span class="tls-badge">${email.connectionInfo.tlsVersion}</span>`
                : 'None'}
                  </span>
                </div>
                ${email.connectionInfo.tlsCipher ? html `
                  <div class="detail-item">
                    <span class="detail-label">Cipher</span>
                    <span class="detail-value">${email.connectionInfo.tlsCipher}</span>
                  </div>
                ` : ''}
                <div class="detail-item">
                  <span class="detail-label">Authenticated</span>
                  <span class="detail-value">${email.connectionInfo.authenticated ? 'Yes' : 'No'}</span>
                </div>
                ${email.connectionInfo.authenticated ? html `
                  <div class="detail-item">
                    <span class="detail-label">Auth Method</span>
                    <span class="detail-value">${email.connectionInfo.authMethod}</span>
                  </div>
                  <div class="detail-item">
                    <span class="detail-label">Auth User</span>
                    <span class="detail-value">${email.connectionInfo.authUser}</span>
                  </div>
                ` : ''}
              </div>
            </div>
          </dees-tile>

          <!-- Authentication Results -->
          <dees-tile>
            <div slot="header" class="card-header">
              <div class="card-heading">
                <span class="card-title">Authentication Results</span>
              </div>
            </div>
            <div class="card-content">
              <div class="auth-row">
                <div>
                  <span class="auth-label">SPF</span>
                  <span class="auth-domain">${email.authenticationResults.spfDomain}</span>
                </div>
                <span class="auth-badge ${email.authenticationResults.spf}">${email.authenticationResults.spf}</span>
              </div>
              <div class="auth-row">
                <div>
                  <span class="auth-label">DKIM</span>
                  <span class="auth-domain">${email.authenticationResults.dkimDomain}</span>
                </div>
                <span class="auth-badge ${email.authenticationResults.dkim}">${email.authenticationResults.dkim}</span>
              </div>
              <div class="auth-row">
                <div>
                  <span class="auth-label">DMARC</span>
                  <span class="auth-domain">policy: ${email.authenticationResults.dmarcPolicy}</span>
                </div>
                <span class="auth-badge ${email.authenticationResults.dmarc}">${email.authenticationResults.dmarc}</span>
              </div>
            </div>
          </dees-tile>

          <!-- Rejection Details (conditional) -->
          ${email.status === 'rejected' || email.status === 'bounced' ? html `
            <dees-tile class="rejection-card">
              <div slot="header" class="card-header">
                <div class="card-heading">
                  <span class="card-title">Rejection Details</span>
                </div>
              </div>
              <div class="card-content">
                ${email.rejectionReason ? html `
                  <div class="rejection-label">Rejection Reason</div>
                  <div class="rejection-text">${email.rejectionReason}</div>
                ` : ''}
                ${email.bounceMessage ? html `
                  <div class="rejection-label">Bounce Message</div>
                  <div class="rejection-text">${email.bounceMessage}</div>
                ` : ''}
              </div>
            </dees-tile>
          ` : ''}
        </div>
      </div>
    `;
        }
        getResponseCodeBadgeClass(code) {
            if (code >= 500)
                return 'code-5xx';
            if (code >= 400)
                return 'code-4xx';
            if (code >= 300)
                return 'code-3xx';
            return 'code-2xx';
        }
        getSmtpPhases(log) {
            const phases = [];
            let currentPhase = '';
            let ehloCount = 0;
            for (const entry of log) {
                const cmd = entry.command.toUpperCase();
                let phase = currentPhase;
                if (entry.direction === 'client') {
                    if (cmd.startsWith('EHLO') || cmd.startsWith('HELO')) {
                        ehloCount++;
                        if (ehloCount === 1) {
                            phase = 'connection';
                        }
                        else {
                            phase = 'post-tls';
                        }
                    }
                    else if (cmd === 'STARTTLS') {
                        phase = 'tls';
                    }
                    else if (cmd.startsWith('AUTH')) {
                        phase = 'auth';
                    }
                    else if (cmd.startsWith('MAIL FROM') || cmd.startsWith('RCPT TO') || cmd === 'DATA' || cmd === '.') {
                        phase = 'transfer';
                    }
                    else if (cmd === 'QUIT') {
                        phase = 'closing';
                    }
                }
                // Server responses stay in the current phase
                if (entry.direction === 'server' && phase === '') {
                    phase = currentPhase || 'connection';
                }
                if (phase === '')
                    phase = 'connection';
                if (phase !== currentPhase) {
                    currentPhase = phase;
                    const labels = {
                        'connection': 'Connection',
                        'tls': 'TLS Negotiation',
                        'post-tls': 'Post-TLS Handshake',
                        'auth': 'Authentication',
                        'transfer': 'Mail Transfer',
                        'closing': 'Closing',
                    };
                    phases.push({ phase, label: labels[phase] || phase, entries: [] });
                }
                if (phases.length === 0) {
                    phases.push({ phase: 'connection', label: 'Connection', entries: [] });
                }
                phases[phases.length - 1].entries.push(entry);
            }
            return phases;
        }
        renderSmtpLog(email) {
            const phases = this.getSmtpPhases(email.smtpLog);
            return html `
      <div class="smtp-log-container">
        ${phases.map(phase => html `
          <div class="smtp-phase-separator">
            <div class="smtp-phase-line"></div>
            <span class="smtp-phase-label">${phase.label}</span>
            <div class="smtp-phase-line"></div>
          </div>
          ${phase.entries.map(entry => html `
            <div class="smtp-bubble ${entry.direction}">
              ${entry.direction === 'server' && entry.responseCode ? html `
                <span class="response-code-badge ${this.getResponseCodeBadgeClass(entry.responseCode)}">${entry.responseCode}</span>
              ` : ''}
              <div class="smtp-bubble-command">${entry.command}</div>
              <div class="smtp-bubble-meta">
                <span>${entry.timestamp}</span>
                <span>·</span>
                <span class="smtp-direction-tag ${entry.direction}">${entry.direction === 'client' ? 'Client' : 'Server'}</span>
              </div>
            </div>
          `)}
        `)}
      </div>
    `;
        }
        copySmtpLog() {
            if (!this.email)
                return;
            const text = this.email.smtpLog
                .map(e => `[${e.timestamp}] ${e.direction === 'client' ? 'C:' : 'S:'} ${e.command}`)
                .join('\n');
            navigator.clipboard.writeText(text);
        }
        handleBack() {
            this.dispatchEvent(new CustomEvent('back', { bubbles: true, composed: true }));
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _email_extraInitializers);
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return SzMtaDetailView = _classThis;
})();
export { SzMtaDetailView };
//# sourceMappingURL=data:application/json;base64, 