/* ===========================================================
   CloudScale Devtools, Mail / SMTP admin JS  v1.9.4
   Handles: SMTP settings save, from-address save, test email.
   =========================================================== */
( function () {
    'use strict';

    const { ajaxUrl, nonce, testTo } = window.csdtDevtoolsSmtp || {};

    // ── Helpers ───────────────────────────────────────────────────────────

    function post( action, data ) {
        const body = new URLSearchParams( { action, nonce, ...data } );
        return fetch( ajaxUrl, { method: 'POST', body } )
            .then( r => r.json() )
            .then( res => {
                if ( res === -1 || res === 0 ) {
                    return { success: false, data: 'Session expired, please reload and try again.' };
                }
                return res;
            } );
    }

    function flash( el, ok ) {
        if ( ! el ) return;
        el.classList.add( 'visible' );
        el.style.color = ok ? '#16a34a' : '#dc2626';
        setTimeout( () => {
            el.classList.remove( 'visible' );
            el.style.color = '';
        }, 10000 );
    }

    // ── Enable toggle, dim/enable fields ────────────────────────────────

    const enabledToggle = document.getElementById( 'cs-smtp-enabled' );
    const smtpFields    = document.getElementById( 'cs-smtp-fields' );

    if ( enabledToggle && smtpFields ) {
        enabledToggle.addEventListener( 'change', () => {
            smtpFields.style.opacity       = enabledToggle.checked ? '1'    : '0.5';
            smtpFields.style.pointerEvents = enabledToggle.checked ? 'auto' : 'none';
        } );
    }

    // ── Auth toggle, show/hide credentials ──────────────────────────────

    const authToggle   = document.getElementById( 'cs-smtp-auth' );
    const authFields   = document.getElementById( 'cs-smtp-auth-fields' );

    if ( authToggle && authFields ) {
        authToggle.addEventListener( 'change', () => {
            authFields.style.display = authToggle.checked ? '' : 'none';
        } );
    }

    // ── Encryption → auto-fill port ──────────────────────────────────────

    const encryptionSel = document.getElementById( 'cs-smtp-encryption' );
    const portInput     = document.getElementById( 'cs-smtp-port' );

    if ( encryptionSel && portInput ) {
        encryptionSel.addEventListener( 'change', () => {
            const portMap = { tls: '587', ssl: '465', none: '25' };
            portInput.value = portMap[ encryptionSel.value ] || '587';
        } );
    }

    // ── Password "Change" reveal + View toggle ───────────────────────────

    const passChangeBtn = document.getElementById( 'cs-smtp-pass-change' );
    const passRow       = document.getElementById( 'cs-smtp-pass-row' );
    const passInput     = document.getElementById( 'cs-smtp-pass' );
    const passViewBtn   = document.getElementById( 'cs-smtp-pass-view' );

    if ( passChangeBtn && passRow ) {
        passChangeBtn.addEventListener( 'click', () => {
            passRow.style.display = 'flex';
            passChangeBtn.parentElement.style.display = 'none';
            if ( passInput ) passInput.focus();
        } );
    }

    if ( passViewBtn && passInput ) {
        passViewBtn.addEventListener( 'click', () => {
            const isHidden = passInput.type === 'password';
            passInput.type        = isHidden ? 'text'    : 'password';
            passViewBtn.textContent = isHidden ? 'Hide'  : 'View';
        } );
    }

    // ── SMTP save ─────────────────────────────────────────────────────────

    const smtpSaveBtn = document.getElementById( 'cs-smtp-save' );
    const smtpSaved   = document.getElementById( 'cs-smtp-saved' );

    function collectSmtpPayload() {
        return {
            enabled:    document.getElementById( 'cs-smtp-enabled' )?.checked    ? '1' : '0',
            host:       document.getElementById( 'cs-smtp-host' )?.value.trim()  || '',
            port:       document.getElementById( 'cs-smtp-port' )?.value         || '587',
            encryption: document.getElementById( 'cs-smtp-encryption' )?.value   || 'tls',
            auth:       document.getElementById( 'cs-smtp-auth' )?.checked       ? '1' : '0',
            user:       document.getElementById( 'cs-smtp-user' )?.value.trim()  || '',
            // Only send password if the user has entered something.
            pass:       document.getElementById( 'cs-smtp-pass' )?.value         || '',
            from_email: document.getElementById( 'cs-smtp-from-email' )?.value.trim() || '',
            from_name:  document.getElementById( 'cs-smtp-from-name' )?.value.trim()  || '',
        };
    }

    if ( smtpSaveBtn ) {
        smtpSaveBtn.addEventListener( 'click', () => {
            smtpSaveBtn.disabled = true;
            post( 'csdt_devtools_smtp_save', collectSmtpPayload() ).then( res => {
                smtpSaveBtn.disabled = false;
                flash( smtpSaved, res.success );
                if ( ! res.success ) {
                    alert( res.data || 'Save failed.' );
                }
            } ).catch( () => {
                smtpSaveBtn.disabled = false;
                alert( 'Save failed. Check your connection.' );
            } );
        } );
    }

    // ── From Address save ─────────────────────────────────────────────────

    const fromSaveBtn = document.getElementById( 'cs-smtp-from-save' );
    const fromSaved   = document.getElementById( 'cs-smtp-from-saved' );

    if ( fromSaveBtn ) {
        fromSaveBtn.addEventListener( 'click', () => {
            fromSaveBtn.disabled = true;
            // Re-use the same AJAX action, server saves all fields each time.
            post( 'csdt_devtools_smtp_save', collectSmtpPayload() ).then( res => {
                fromSaveBtn.disabled = false;
                flash( fromSaved, res.success );
                if ( ! res.success ) {
                    alert( res.data || 'Save failed.' );
                }
            } ).catch( () => {
                fromSaveBtn.disabled = false;
                alert( 'Save failed. Check your connection.' );
            } );
        } );
    }

    // ── Send test email ───────────────────────────────────────────────────

    const testBtn    = document.getElementById( 'cs-smtp-test-btn' );
    const testResult = document.getElementById( 'cs-smtp-test-result' );

    function renderTestError( data ) {
        if ( ! testResult ) return;
        testResult.innerHTML = '';

        if ( data?.type === 'preflight' && Array.isArray( data.issues ) ) {
            // Pre-flight: render a simple list of what's missing/wrong.
            const heading = document.createElement( 'strong' );
            heading.style.color = '#c0392b';
            heading.textContent = '✗ Fix these issues before testing:';
            testResult.appendChild( heading );
            const ul = document.createElement( 'ul' );
            ul.style.cssText = 'margin:6px 0 0 18px;padding:0;color:#c0392b;font-size:13px';
            data.issues.forEach( msg => {
                const li = document.createElement( 'li' );
                li.textContent = msg;
                ul.appendChild( li );
            } );
            testResult.appendChild( ul );

        } else if ( data?.type === 'smtp' ) {
            // SMTP error: show the message + collapsible debug log.
            const msg = document.createElement( 'div' );
            msg.style.cssText = 'color:#c0392b;font-weight:600;font-size:13px';
            msg.textContent = '✗ ' + ( data.message || 'SMTP error.' );
            testResult.appendChild( msg );

            if ( data.debug && data.debug.length ) {
                const details = document.createElement( 'details' );
                details.style.cssText = 'margin-top:8px;font-size:12px';
                const summary = document.createElement( 'summary' );
                summary.style.cssText = 'cursor:pointer;color:#666';
                summary.textContent = 'Show SMTP debug log';
                details.appendChild( summary );
                const pre = document.createElement( 'pre' );
                pre.style.cssText = 'margin:6px 0 0;padding:8px 10px;background:#f8f8f8;border:1px solid #e0e0e0;border-radius:4px;overflow-x:auto;color:#333;line-height:1.5;font-size:11px;white-space:pre-wrap';
                pre.textContent = data.debug.join( '\n' );
                details.appendChild( pre );
                testResult.appendChild( details );
            }

        } else {
            testResult.style.color = '#c0392b';
            testResult.textContent = '✗ ' + ( typeof data === 'string' ? data : 'Send failed.' );
        }
    }

    if ( testBtn ) {
        testBtn.addEventListener( 'click', () => {
            testBtn.disabled    = true;
            testBtn.textContent = '⏳ Sending…';
            if ( testResult ) {
                testResult.innerHTML = '';
                testResult.style.color = '';
            }
            post( 'csdt_devtools_smtp_test', {} ).then( res => {
                testBtn.disabled    = false;
                testBtn.textContent = '📨 Send Test Email';
                if ( res.success ) {
                    if ( testResult ) {
                        testResult.style.color  = '#2d7d46';
                        testResult.textContent  = '✓ Email sent to ' + ( res.data?.to || testTo );
                    }
                } else {
                    renderTestError( res.data );
                }
                // Refresh the activity log either way so the attempt appears immediately.
                setTimeout( refreshLog, 500 );
            } ).catch( () => {
                testBtn.disabled    = false;
                testBtn.textContent = '📨 Send Test Email';
                if ( testResult ) {
                    testResult.style.color = '#c0392b';
                    testResult.textContent = '✗ Request failed. Check your connection.';
                }
            } );
        } );
    }

    // ── Notification channels: toggle dim/undim card bodies ─────────────

    const emailToggle    = document.getElementById( 'csdt-notify-email-enabled' );
    const emailBody      = document.getElementById( 'csdt-email-channel-body' );
    const telegramToggle = document.getElementById( 'csdt-notify-telegram-enabled' );
    const telegramBody   = document.getElementById( 'csdt-telegram-channel-body' );

    function setChannelActive( toggle, body ) {
        if ( ! toggle || ! body ) return;
        toggle.addEventListener( 'change', () => {
            body.style.opacity       = toggle.checked ? '1'    : '0.5';
            body.style.pointerEvents = toggle.checked ? 'auto' : 'none';
        } );
    }
    setChannelActive( emailToggle,    emailBody );
    setChannelActive( telegramToggle, telegramBody );

    // ── Notification channels: Telegram field show/hide toggles ─────────

    [ [ 'csdt-tg-token', 'csdt-tg-token-toggle' ], [ 'csdt-tg-chat-id', 'csdt-tg-chat-toggle' ] ].forEach( function( pair ) {
        var inp = document.getElementById( pair[0] );
        var btn = document.getElementById( pair[1] );
        if ( ! inp || ! btn ) return;
        btn.addEventListener( 'click', function() {
            var shown = inp.type === 'text';
            inp.type        = shown ? 'password' : 'text';
            btn.textContent = shown ? 'Show' : 'Hide';
        } );
    } );

    // ── Notification channels: Fetch Chat ID ────────────────────────────

    var tgFetchBtn = document.getElementById( 'csdt-tg-fetch-btn' );
    if ( tgFetchBtn ) {
        tgFetchBtn.addEventListener( 'click', function() {
            var btn    = this;
            var token  = ( document.getElementById( 'csdt-tg-token' )?.value || '' ).trim();
            var msg    = document.getElementById( 'csdt-tg-fetch-msg' );
            var chatIn = document.getElementById( 'csdt-tg-chat-id' );
            if ( ! token ) { if ( msg ) { msg.textContent = 'Enter bot token first.'; msg.style.color = '#c00'; } return; }
            btn.disabled = true;
            if ( msg ) { msg.textContent = 'Fetching…'; msg.style.color = '#666'; }
            var fd = new FormData();
            fd.append( 'action',         'cloudscale_telegram_fetch_chat_id' );
            fd.append( 'nonce',          btn.dataset.nonce );
            fd.append( 'telegram_token', token );
            fetch( ajaxUrl, { method: 'POST', body: fd } )
                .then( function( r ) { return r.json(); } )
                .then( function( d ) {
                    if ( d.success ) {
                        if ( chatIn ) chatIn.value = d.data.chat_id;
                        if ( msg ) { msg.textContent = 'Chat ID found: ' + d.data.chat_id; msg.style.color = '#0a5'; }
                    } else {
                        if ( msg ) { msg.textContent = d.data || 'Failed.'; msg.style.color = '#c00'; }
                    }
                } )
                .catch( function() { if ( msg ) { msg.textContent = 'Request error.'; msg.style.color = '#c00'; } } )
                .finally( function() { btn.disabled = false; } );
        } );
    }

    // ── Notification channels: Telegram send test ────────────────────────

    var tgTestBtn = document.getElementById( 'csdt-tg-test-btn' );
    if ( tgTestBtn ) {
        tgTestBtn.addEventListener( 'click', function() {
            var btn = this;
            var msg = document.getElementById( 'csdt-tg-test-msg' );
            btn.disabled = true;
            if ( msg ) { msg.textContent = 'Sending…'; msg.style.color = '#666'; }
            var fd = new FormData();
            fd.append( 'action',       'cloudscale_telegram_test' );
            fd.append( 'nonce',        btn.dataset.nonce );
            fd.append( 'test_source',  btn.dataset.source || '' );
            fetch( ajaxUrl, { method: 'POST', body: fd } )
                .then( function( r ) { return r.json(); } )
                .then( function( d ) {
                    if ( msg ) {
                        msg.textContent = d.success ? ( d.data?.msg || 'Sent.' ) : ( d.data || 'Failed.' );
                        msg.style.color = d.success ? '#0a5' : '#c00';
                    }
                } )
                .catch( function() { if ( msg ) { msg.textContent = 'Request error.'; msg.style.color = '#c00'; } } )
                .finally( function() { btn.disabled = false; } );
        } );
    }

    // ── Notification channels: save ──────────────────────────────────────

    const notifyChannelsSaveBtn   = document.getElementById( 'csdt-notify-channels-save' );
    const notifyChannelsSavedSpan = document.getElementById( 'csdt-notify-channels-saved' );

    if ( notifyChannelsSaveBtn ) {
        notifyChannelsSaveBtn.addEventListener( 'click', () => {
            notifyChannelsSaveBtn.disabled = true;
            const data = {
                nonce:            notifyChannelsSaveBtn.dataset.nonce,
                email_enabled:    document.getElementById( 'csdt-notify-email-enabled' )?.checked    ? '1' : '0',
                telegram_enabled: document.getElementById( 'csdt-notify-telegram-enabled' )?.checked ? '1' : '0',
                email_to:         ( document.getElementById( 'csdt-notify-email-address' )?.value || '' ).trim(),
                telegram_token:   ( document.getElementById( 'csdt-tg-token' )?.value    || '' ),
                telegram_chat_id: ( document.getElementById( 'csdt-tg-chat-id' )?.value  || '' ),
            };
            const body = new URLSearchParams( { action: 'csdt_notify_channels_save', ...data } );
            fetch( ajaxUrl, { method: 'POST', body } )
                .then( r => r.json() )
                .then( res => {
                    notifyChannelsSaveBtn.disabled = false;
                    flash( notifyChannelsSavedSpan, res.success );
                    if ( ! res.success ) alert( res.data || 'Save failed.' );
                } )
                .catch( () => {
                    notifyChannelsSaveBtn.disabled = false;
                    alert( 'Save failed. Check your connection.' );
                } );
        } );
    }

    // ── Email activity log: collapse toggle ──────────────────────────────

    function initEmailLogToggle() {
        const toggleBtn = document.getElementById( 'cs-email-log-toggle' );
        const logBody   = document.getElementById( 'cs-email-log-body' );
        const header    = document.getElementById( 'cs-email-log-header' );
        if ( ! toggleBtn || ! logBody ) return;

        function setExpanded( open ) {
            logBody.style.display      = open ? '' : 'none';
            toggleBtn.setAttribute( 'aria-expanded', open ? 'true' : 'false' );
            toggleBtn.textContent      = open ? '▼ Hide' : '▶ Show';
        }

        toggleBtn.addEventListener( 'click', e => {
            e.stopPropagation();
            setExpanded( logBody.style.display === 'none' );
        } );

        if ( header ) {
            header.addEventListener( 'click', e => {
                if ( e.target === toggleBtn ) return;
                setExpanded( logBody.style.display === 'none' );
            } );
        }
    }

    // ── Email log: refresh and clear ─────────────────────────────────────

    function refreshLog() {
        const logWrap = document.getElementById( 'cs-email-log-wrap' );
        if ( ! logWrap ) return;
        post( 'csdt_devtools_smtp_log_fetch', {} ).then( res => {
            if ( ! res.success ) return;
            const rows = res.data;
            if ( ! rows || rows.length === 0 ) {
                logWrap.innerHTML = '<p style="color:#888;font-size:13px;margin:0">No emails logged yet. Emails are recorded here as soon as WordPress sends them.</p>';
                return;
            }
            const monthNames = [ 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec' ];
            function fmtTs( ts ) {
                const d = new Date( ts * 1000 );
                const pad = n => String( n ).padStart( 2, '0' );
                return monthNames[ d.getMonth() ] + ' ' + d.getDate() + ', ' + pad( d.getHours() ) + ':' + pad( d.getMinutes() ) + ':' + pad( d.getSeconds() );
            }
            let html = '<div style="overflow-x:auto"><table style="width:100%;border-collapse:collapse;font-size:13px">'
                     + '<thead><tr style="background:#f3f4f6;text-align:left">'
                     + '<th style="padding:7px 10px;border-bottom:1px solid #e0e0e0;white-space:nowrap">Time</th>'
                     + '<th style="padding:7px 10px;border-bottom:1px solid #e0e0e0">To</th>'
                     + '<th style="padding:7px 10px;border-bottom:1px solid #e0e0e0">Subject</th>'
                     + '<th style="padding:7px 10px;border-bottom:1px solid #e0e0e0;white-space:nowrap">Via</th>'
                     + '<th style="padding:7px 10px;border-bottom:1px solid #e0e0e0">Status</th>'
                     + '<th style="padding:7px 10px;border-bottom:1px solid #e0e0e0"></th>'
                     + '</tr></thead><tbody>';
            rows.forEach( ( row, i ) => {
                const bg      = i % 2 === 0 ? '#fff' : '#fafafa';
                const via     = row.via === 'smtp'
                    ? '<span style="background:#e8f5e9;color:#2d7d46;padding:1px 6px;border-radius:3px;font-size:11px">SMTP</span>'
                    : '<span style="background:#f3f4f6;color:#666;padding:1px 6px;border-radius:3px;font-size:11px">PHP mail</span>';
                let status;
                if ( row.status === 'sent' ) {
                    status = '<span style="color:#2d7d46;font-weight:600">✓ Sent</span>';
                } else if ( row.status === 'failed' ) {
                    const err = row.error ? ', ' + row.error : '';
                    status = '<span style="color:#c0392b;font-weight:600">✗ Failed' + err + '</span>';
                } else {
                    status = '<span style="color:#888">,  Unknown</span>';
                }
                const viewBtn = '<button type="button" class="csdt-email-view-btn" data-idx="' + i + '" style="background:none;border:1px solid #2563eb;color:#2563eb;border-radius:4px;padding:2px 10px;font-size:11px;cursor:pointer;white-space:nowrap;">View</button>';
                html += `<tr style="background:${bg}">
                    <td style="padding:7px 10px;border-bottom:1px solid #f0f0f0;white-space:nowrap;color:#666">${fmtTs(row.ts)}</td>
                    <td style="padding:7px 10px;border-bottom:1px solid #f0f0f0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${row.to}</td>
                    <td style="padding:7px 10px;border-bottom:1px solid #f0f0f0;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${row.subject}</td>
                    <td style="padding:7px 10px;border-bottom:1px solid #f0f0f0">${via}</td>
                    <td style="padding:7px 10px;border-bottom:1px solid #f0f0f0">${status}</td>
                    <td style="padding:7px 10px;border-bottom:1px solid #f0f0f0">${viewBtn}</td>
                </tr>`;
            } );
            html += '</tbody></table></div>';
            logWrap.innerHTML = html;
        } );
    }

    // ── Email log + modal binding (re-runs on each tab visit) ────────────

    function openEmailModal( idx ) {
        const emailModal     = document.getElementById( 'csdt-email-modal' );
        const emailModalSubj = document.getElementById( 'csdt-email-modal-subject' );
        const emailModalMeta = document.getElementById( 'csdt-email-modal-meta' );
        const emailModalBody = document.getElementById( 'csdt-email-modal-body' );
        if ( ! emailModal ) return;
        emailModal.style.display = 'flex';
        if ( emailModalSubj ) emailModalSubj.textContent = 'Loading…';
        if ( emailModalMeta ) emailModalMeta.innerHTML  = '';
        if ( emailModalBody ) emailModalBody.innerHTML  = '<div style="padding:24px;color:#94a3b8;">Loading…</div>';

        post( 'csdt_devtools_smtp_log_view', { idx } ).then( res => {
            const mBody = document.getElementById( 'csdt-email-modal-body' );
            const mSubj = document.getElementById( 'csdt-email-modal-subject' );
            const mMeta = document.getElementById( 'csdt-email-modal-meta' );
            if ( ! res.success ) {
                if ( mBody ) mBody.innerHTML = '<div style="padding:24px;color:#c0392b;">Could not load email. It may have been logged before body capture was added, only emails sent after updating to v1.9.228 include the body.</div>';
                return;
            }
            const e = res.data;
            if ( mSubj ) mSubj.textContent = e.subject || '(no subject)';

            const monthNames = [ 'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec' ];
            function fmtTs( ts ) {
                const d = new Date( ts * 1000 );
                const pad = n => String( n ).padStart( 2, '0' );
                return monthNames[ d.getMonth() ] + ' ' + d.getDate() + ', ' + pad( d.getHours() ) + ':' + pad( d.getMinutes() ) + ':' + pad( d.getSeconds() );
            }
            if ( mMeta ) {
                mMeta.innerHTML =
                    '<span><strong>To:</strong> ' + ( e.to || '·' ) + '</span>' +
                    '<span><strong>Sent:</strong> ' + fmtTs( e.ts ) + '</span>' +
                    '<span><strong>Via:</strong> ' + ( e.via === 'smtp' ? 'SMTP' : 'PHP mail' ) + '</span>' +
                    '<span><strong>Status:</strong> ' + ( e.status === 'sent' ? '✓ Sent' : '✗ ' + ( e.error || 'Failed' ) ) + '</span>';
            }
            if ( mBody ) {
                if ( ! e.body ) {
                    mBody.innerHTML = '<div style="padding:24px;color:#94a3b8;">No body recorded for this email.</div>';
                } else if ( e.is_html ) {
                    const iframe = document.createElement( 'iframe' );
                    iframe.sandbox = 'allow-same-origin';
                    iframe.style.cssText = 'width:100%;height:100%;min-height:400px;border:none;display:block;';
                    mBody.appendChild( iframe );
                    iframe.contentDocument.open();
                    iframe.contentDocument.write( e.body );
                    iframe.contentDocument.close();
                } else {
                    const pre = document.createElement( 'pre' );
                    pre.style.cssText = 'margin:0;padding:20px;font-size:13px;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:#1e293b;';
                    pre.textContent = e.body;
                    mBody.appendChild( pre );
                }
            }
        } );
    }

    function closeEmailModal() {
        const m = document.getElementById( 'csdt-email-modal' );
        const b = document.getElementById( 'csdt-email-modal-body' );
        if ( m ) m.style.display = 'none';
        if ( b ) b.innerHTML = '';
    }

    function csdtSmtpLogInit() {
        initEmailLogToggle();
        const logRefreshBtn = document.getElementById( 'cs-log-refresh' );
        const logClearBtn   = document.getElementById( 'cs-log-clear' );
        const emailModal    = document.getElementById( 'csdt-email-modal' );
        const emailModalClose = document.getElementById( 'csdt-email-modal-close' );

        if ( logRefreshBtn ) logRefreshBtn.addEventListener( 'click', refreshLog );

        if ( logClearBtn ) {
            logClearBtn.addEventListener( 'click', () => {
                if ( ! confirm( 'Clear all email log entries?' ) ) return;
                logClearBtn.disabled = true;
                post( 'csdt_devtools_smtp_log_clear', {} ).then( res => {
                    logClearBtn.disabled = false;
                    if ( res.success ) refreshLog();
                } ).catch( () => { logClearBtn.disabled = false; } );
            } );
        }

        if ( emailModalClose ) emailModalClose.addEventListener( 'click', closeEmailModal );
        if ( emailModal ) emailModal.addEventListener( 'click', ev => { if ( ev.target === emailModal ) closeEmailModal(); } );
    }

    // Delegate View button clicks, document-level so it works after any DOM swap
    var _smtpViewDelegated = false;
    if ( ! _smtpViewDelegated ) {
        _smtpViewDelegated = true;
        document.addEventListener( 'click', e => {
            const btn = e.target.closest( '.csdt-email-view-btn' );
            if ( ! btn ) return;
            openEmailModal( btn.dataset.idx );
        } );
    }

    if ( document.readyState === 'loading' ) {
        document.addEventListener( 'DOMContentLoaded', csdtSmtpLogInit );
    } else {
        csdtSmtpLogInit();
    }
    document.addEventListener( 'csdt:tab-shown', function( e ) {
        if ( e.detail && e.detail.tab === 'mail' ) csdtSmtpLogInit();
    } );

} )();
