/**
 * GoingsOn - Contacts Render Module
 * Contact card rendering, detail modal rendering
 */

(function() {
    'use strict';
    const esc = GoingsOn.utils.escapeHtml;
    const escAttr = GoingsOn.utils.escapeAttr;

    // ============ Helpers ============

    /**
     * Extract up to 2 initials from a display name.
     * @param {string} name - Full display name
     * @returns {string} Uppercase initials (e.g. "JD")
     */
    function getInitials(name) {
        return name.split(/\s+/).filter(Boolean).map(w => w[0]).slice(0, 2).join('').toUpperCase();
    }

    // ============ Card Rendering ============

    /**
     * Render a contact card for the contacts grid.
     * @param {Object} c - Contact object
     * @returns {string} HTML string for the contact card
     */
    function renderCard(c) {
        const initials = c.initials || getInitials(c.displayName);
        const primaryEmail = c.primaryEmail || c.emails?.find(e => e.isPrimary)?.address || c.emails?.[0]?.address || '';
        const nickname = c.nickname ? `<span class="contact-nickname">"${esc(c.nickname)}"</span>` : '';
        const company = c.company ? `<span class="contact-company">${esc(c.company)}</span>` : '';
        const emailLine = primaryEmail ? `<span class="contact-email">${esc(primaryEmail)}</span>` : '';
        const tagPills = (c.tags || []).map(t =>
            `<span class="tag">${esc(t)}</span>`
        ).join('');

        return `
            <div class="card contact-card" onclick="GoingsOn.contacts.open('${escAttr(c.id)}')"
                 tabindex="0" role="button" aria-label="Open contact ${esc(c.displayName)}">
                <div class="card-header contact-card-header">
                    <input type="checkbox" class="bulk-checkbox contact-select-cb" data-id="${escAttr(c.id)}"
                           onclick="event.stopPropagation(); GoingsOn.contacts.toggleSelection('${escAttr(c.id)}', event)"
                           aria-label="Select ${esc(c.displayName)}">
                    <div class="avatar">${esc(initials)}</div>
                    <div class="contact-card-body">
                        <h3 class="card-title">${esc(c.displayName)}</h3>
                        ${nickname}
                        ${company}
                    </div>
                    <button class="btn btn-sm btn-secondary" onclick="event.stopPropagation(); GoingsOn.contacts.openEdit('${escAttr(c.id)}')" title="Edit">...</button>
                </div>
                ${emailLine ? `<p class="card-description">${emailLine}</p>` : ''}
                ${tagPills ? `<div class="card-meta">${tagPills}</div>` : ''}
            </div>
        `;
    }

    // ============ Detail Modal Rendering ============

    /**
     * Show the full contact detail modal with all sub-collections.
     * @param {Object} contact - Full contact object with emails, phones, socialHandles, customFields
     */
    function showDetailModal(contact) {
        const initials = contact.initials || getInitials(contact.displayName);

        // Build info section
        let info = '';
        if (contact.nickname) info += `<div class="detail-row"><strong>Nickname:</strong> ${esc(contact.nickname)}</div>`;
        if (contact.company) info += `<div class="detail-row"><strong>Company:</strong> ${esc(contact.company)}</div>`;
        if (contact.title) info += `<div class="detail-row"><strong>Title:</strong> ${esc(contact.title)}</div>`;
        if (contact.birthday) info += `<div class="detail-row"><strong>Birthday:</strong> ${esc(contact.birthday)}</div>`;
        if (contact.timezone) info += `<div class="detail-row"><strong>Timezone:</strong> ${esc(contact.timezone)}</div>`;

        // Tags
        const tagPills = (contact.tags || []).map(t =>
            `<span class="tag">${esc(t)}</span>`
        ).join(' ');

        // Emails
        const emailRows = (contact.emails || []).map(e => `
            <div class="sub-item">
                <span>${esc(e.address)} ${e.label ? `<small>(${esc(e.label)})</small>` : ''} ${e.isPrimary ? '<strong>Primary</strong>' : ''}</span>
                <button class="btn btn-sm btn-danger" onclick="GoingsOn.contacts.removeEmail('${escAttr(contact.id)}', '${escAttr(e.id)}')" title="Remove">x</button>
            </div>
        `).join('');

        // Phones
        const phoneRows = (contact.phones || []).map(p => `
            <div class="sub-item">
                <span>${esc(p.number)} ${p.label ? `<small>(${esc(p.label)})</small>` : ''} ${p.isPrimary ? '<strong>Primary</strong>' : ''}</span>
                <button class="btn btn-sm btn-danger" onclick="GoingsOn.contacts.removePhone('${escAttr(contact.id)}', '${escAttr(p.id)}')" title="Remove">x</button>
            </div>
        `).join('');

        // Social handles
        const socialRows = (contact.socialHandles || []).map(s => `
            <div class="sub-item">
                <span><strong>${esc(s.platform)}:</strong> ${s.url ? `<a href="${escAttr(s.url)}" target="_blank">${esc(s.handle)}</a>` : esc(s.handle)}</span>
                <button class="btn btn-sm btn-danger" onclick="GoingsOn.contacts.removeSocialHandle('${escAttr(contact.id)}', '${escAttr(s.id)}')" title="Remove">x</button>
            </div>
        `).join('');

        // Custom fields
        const customFieldRows = (contact.customFields || []).map(f => `
            <div class="sub-item">
                <span><strong>${esc(f.label)}:</strong> ${f.url ? `<a href="${escAttr(f.url)}" target="_blank">${esc(f.value)}</a>` : esc(f.value)}</span>
                <button class="btn btn-sm btn-danger" onclick="GoingsOn.contacts.removeCustomField('${escAttr(contact.id)}', '${escAttr(f.id)}')" title="Remove">x</button>
            </div>
        `).join('');

        const content = `
            <div class="contact-detail">
                <div class="contact-detail-header">
                    <div class="avatar avatar--lg">${esc(initials)}</div>
                    <div>
                        <h3 class="contact-detail-name">${esc(contact.displayName)}</h3>
                        ${contact.company ? `<div class="text-secondary">${esc(contact.company)}${contact.title ? ` - ${esc(contact.title)}` : ''}</div>` : ''}
                    </div>
                </div>

                ${info ? `<div class="card card--muted contact-info-section">${info}</div>` : ''}
                ${tagPills ? `<div class="contact-detail-tags">${tagPills}</div>` : ''}
                ${contact.notes ? `<div class="contact-notes"><strong>Notes:</strong><p>${esc(contact.notes)}</p></div>` : ''}

                <div class="sub-collection">
                    <div class="sub-collection-header">
                        <h4>Email Addresses</h4>
                        <button class="btn btn-sm btn-primary" onclick="GoingsOn.contacts.openAddEmail('${escAttr(contact.id)}')">+ Add</button>
                    </div>
                    ${emailRows || '<div class="sub-empty">No email addresses</div>'}
                </div>

                <div class="sub-collection">
                    <div class="sub-collection-header">
                        <h4>Phone Numbers</h4>
                        <button class="btn btn-sm btn-primary" onclick="GoingsOn.contacts.openAddPhone('${escAttr(contact.id)}')">+ Add</button>
                    </div>
                    ${phoneRows || '<div class="sub-empty">No phone numbers</div>'}
                </div>

                <div class="sub-collection">
                    <div class="sub-collection-header">
                        <h4>Social Handles</h4>
                        <button class="btn btn-sm btn-primary" onclick="GoingsOn.contacts.openAddSocial('${escAttr(contact.id)}')">+ Add</button>
                    </div>
                    ${socialRows || '<div class="sub-empty">No social handles</div>'}
                </div>

                <div class="sub-collection">
                    <div class="sub-collection-header">
                        <h4>Custom Fields</h4>
                        <button class="btn btn-sm btn-primary" onclick="GoingsOn.contacts.openAddCustomField('${escAttr(contact.id)}')">+ Add</button>
                    </div>
                    ${customFieldRows || '<div class="sub-empty">No custom fields</div>'}
                </div>

                <div class="form-actions form-actions--spaced">
                    <button class="btn btn-secondary" onclick="GoingsOn.contacts.openEdit('${escAttr(contact.id)}')">Edit Contact</button>
                </div>
            </div>
        `;

        GoingsOn.ui.openModal(contact.displayName, content);
    }

    // ============ Populate Namespace ============

    GoingsOn.contactsRender = {
        getInitials,
        renderCard,
        showDetailModal,
    };

})();