/**
 * GoingsOn - Emails Render
 * Row markup for the email/thread list. Extracted from emails.js so the
 * controller stays focused on data flow. Consumes the shared selection manager
 * via GoingsOn.emails.selection (resolved lazily at render time).
 */

(function() {
'use strict';

const esc = GoingsOn.utils.escapeHtml;
const escAttr = GoingsOn.utils.escapeAttrValue;
const escArg = GoingsOn.utils.escapeHandlerArg;

/**
 * Render one thread row for the virtual scroller.
 * @param {Object} thread - Thread with mostRecentEmail + threadCount/hasUnread
 * @param {number} index - Row index (unused; kept for scroller signature parity)
 * @returns {string} HTML string
 */
function renderEmailItem(thread, index) {
    const e = thread.mostRecentEmail;
    // Use pre-computed field from backend (avoids JS date calculation)
    const isSnoozed = e.isSnoozed;
    const isSelected = GoingsOn.emails.selection.isSelected(e.id);
    const threadBadge = thread.threadCount > 1
        ? `<span class="thread-badge" title="${thread.threadCount} messages in thread">${thread.threadCount}</span>`
        : '';
    const labelBadges = (e.labels || []).map(l =>
        `<span class="badge badge--xs badge--filled" data-color="blue">${esc(l)}</span>`
    ).join('');

    return `
        <div class="email-item email-item-with-checkbox ${thread.hasUnread ? 'unread' : ''} ${isSnoozed ? 'email-snoozed' : ''}"
             data-id="${escAttr(e.id)}"
             data-contextmenu="contextMenus.showEmail" data-a1="@event" data-a2="${escAttr(e.id)}"
             data-email-archived="${e.isArchived}" data-email-read="${e.isRead}"
             data-email-snoozed="${isSnoozed}"
             tabindex="0" role="listitem" aria-label="Email from ${esc(e.from)}">
            <div class="email-checkbox-cell" data-act="ui.noop">
                <input type="checkbox" class="bulk-checkbox" data-id="${escAttr(e.id)}"
                       ${isSelected ? 'checked' : ''}
                       data-change="emails.toggleSelection" data-a1="${escAttr(e.id)}" data-a2="@el" data-a3="@event"
                       aria-label="Select email">
            </div>
            <div class="email-content" data-act="emails.open" data-a1="${escAttr(e.id)}" role="button">
                <div class="email-header">
                    <span class="email-from">${esc(e.from)}</span>
                    ${threadBadge}
                    ${isSnoozed ? `<span class="snooze-badge" title="Snoozed until ${escAttr(e.snoozedUntilFormatted || '')}" aria-label="Snoozed until ${escAttr(e.snoozedUntilFormatted || '')}">Snoozed</span>` : ''}
                    <span class="email-date">${e.receivedFormatted}</span>
                </div>
                <div class="email-subject">${esc(e.subject)}${labelBadges ? ' ' + labelBadges : ''}</div>
                <div class="email-preview">${esc(e.bodyPreview)}...</div>
            </div>
            <button class="btn-icon kebab-btn" data-act="contextMenus.showEmail" data-a1="@event" data-a2="${escAttr(e.id)}" title="Actions" aria-label="Email actions">&#x22EE;</button>
        </div>
    `;
}

GoingsOn.emailsRender = { renderEmailItem };

})();