/**
 * GoingsOn - Contact Dashboard Module
 *
 * Full-page dashboard for a contact, showing linked tasks, events, and emails
 * as a unified activity timeline. Modeled after the task overview page.
 */

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

    let currentContactId = null;

    /**
     * Open the contact dashboard for a given contact.
     * @param {string} contactId
     */
    async function open(contactId) {
        currentContactId = contactId;
        GoingsOn.navigation.switchView('contact-dashboard');

        const content = document.getElementById('contact-dashboard-content');
        const titleEl = document.getElementById('contact-dashboard-title');
        const actionsEl = document.getElementById('contact-dashboard-actions');

        try {
            const [contact, tasks, events, emails] = await Promise.all([
                GoingsOn.api.contacts.get(contactId),
                GoingsOn.api.contacts.listTasksForContact(contactId),
                GoingsOn.api.contacts.listEventsForContact(contactId),
                GoingsOn.api.contacts.listEmailsForContact(contactId),
            ]);

            titleEl.textContent = contact.displayName || contact.display_name;
            render(content, actionsEl, contact, tasks, events, emails);
        } catch (err) {
            content.innerHTML = `<p class="text-danger">Failed to load contact: ${esc(GoingsOn.utils.getErrorMessage(err))}</p>`;
        }
    }

    function close() {
        currentContactId = null;
        GoingsOn.navigation.switchView('contacts');
    }

    function render(container, actionsEl, contact, tasks, events, emails) {
        const name = contact.displayName || contact.display_name;
        const initials = contact.initials || name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();

        // Actions bar
        if (contact.isImplicit) {
            actionsEl.innerHTML = `
                <button class="btn btn-primary" onclick="GoingsOn.contactDashboard.promote('${escAttr(contact.id)}')">Save as Contact</button>
            `;
        } else {
            actionsEl.innerHTML = `
                <button class="btn btn-secondary" onclick="GoingsOn.contacts.openEdit('${escAttr(contact.id)}')">Edit</button>
                <button class="btn btn-secondary text-accent-red" onclick="GoingsOn.contacts.delete('${escAttr(contact.id)}')">Delete</button>
            `;
        }

        // Header card
        const company = contact.company ? `<span class="text-secondary">${esc(contact.company)}</span>` : '';
        const title = contact.title ? `<span class="text-secondary">${esc(contact.title)}</span>` : '';
        const companyTitle = [company, title].filter(Boolean).join(' &middot; ');

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

        let headerHtml = `
            <div class="contact-header-card">
                <div class="avatar avatar--lg">${esc(initials)}</div>
                <div class="contact-header-info">
                    <h3 style="margin: 0;">${esc(name)}</h3>
                    ${companyTitle ? `<div style="margin-top: 0.25rem;">${companyTitle}</div>` : ''}
                    ${tags ? `<div style="margin-top: 0.5rem;">${tags}</div>` : ''}
                </div>
            </div>
        `;

        // Contact info (email addresses, phones, social handles)
        let infoHtml = '';
        const infoItems = [];
        for (const e of contact.emails || []) {
            infoItems.push(`<span class="text-secondary">Email:</span> ${esc(e.address)}${e.label ? ' <span class="tag">' + esc(e.label) + '</span>' : ''}`);
        }
        for (const p of contact.phones || []) {
            infoItems.push(`<span class="text-secondary">Phone:</span> ${esc(p.number)}${p.label ? ' <span class="tag">' + esc(p.label) + '</span>' : ''}`);
        }
        for (const s of contact.socialHandles || contact.social_handles || []) {
            infoItems.push(`<span class="text-secondary">${esc(s.platform)}:</span> ${esc(s.handle)}`);
        }
        if (infoItems.length > 0) {
            infoHtml = `<div class="card card--muted contact-info-section">${infoItems.map(i => `<div class="contact-info-item">${i}</div>`).join('')}</div>`;
        }

        // Activity timeline — merge all entities, sort by date desc
        const timeline = [];
        for (const t of tasks) {
            timeline.push({
                type: 'task',
                date: new Date(t.createdAt || t.created_at),
                title: t.description,
                status: t.statusDisplay || t.status,
                id: t.id,
            });
        }
        for (const e of events) {
            timeline.push({
                type: 'event',
                date: new Date(e.startTime || e.start_time),
                title: e.displayTitle || e.title,
                id: e.id,
            });
        }
        for (const e of emails) {
            timeline.push({
                type: 'email',
                date: new Date(e.receivedAt || e.received_at),
                title: e.subject || '(no subject)',
                from: e.from,
                isOutgoing: e.isOutgoing || e.is_outgoing || false,
                id: e.id,
            });
        }
        timeline.sort((a, b) => b.date - a.date);

        const INITIAL_SHOW = 20;
        const totalCount = timeline.length;
        const visibleTimeline = timeline.slice(0, INITIAL_SHOW);

        let timelineHtml = '';
        if (totalCount === 0) {
            timelineHtml = '<p class="empty-italic">No interactions yet.</p>';
        } else {
            const items = visibleTimeline.map(item => {
                const dateStr = item.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
                const icon = item.type === 'task' ? '&#x2611;' : item.type === 'event' ? '&#x1F4C5;' : (item.isOutgoing ? '&#x2709;&#xFE0E;&rarr;' : '&larr;&#x2709;&#xFE0E;');
                const badge = item.type === 'task' && item.status ? `<span class="tag status-${(item.status || '').toLowerCase()}">${esc(item.status)}</span>` : '';

                let onclick = '';
                if (item.type === 'task') onclick = `GoingsOn.taskOverview.open('${escAttr(item.id)}')`;
                else if (item.type === 'event') onclick = `GoingsOn.events.open('${escAttr(item.id)}')`;
                else if (item.type === 'email') onclick = `GoingsOn.emails.open('${escAttr(item.id)}')`;

                return `
                    <div class="contact-timeline-item row-flex row-flex-3" onclick="${onclick}" role="button" tabindex="0">
                        <span class="contact-timeline-icon">${icon}</span>
                        <span class="contact-timeline-title">${esc(item.title)}</span>
                        ${badge}
                        <span class="contact-timeline-date">${dateStr}</span>
                    </div>
                `;
            }).join('');

            const showAllBtn = totalCount > INITIAL_SHOW
                ? `<button class="btn btn-secondary btn-sm" id="contact-timeline-show-all" onclick="GoingsOn.contactDashboard.showAllTimeline()">Show all ${totalCount} items</button>`
                : '';

            timelineHtml = `
                <div class="contact-timeline" id="contact-timeline">${items}</div>
                ${showAllBtn}
            `;
        }

        // Notes section
        const notesHtml = contact.notes
            ? `<div class="settings-section"><h3 class="settings-heading">Notes</h3><p style="white-space: pre-wrap;">${esc(contact.notes)}</p></div>`
            : '';

        // Linked entities summary
        const taskCount = tasks.length;
        const eventCount = events.length;
        const emailCount = emails.length;

        const summaryHtml = `
            <div class="contact-dashboard-summary">
                <div class="contact-summary-stat">
                    <span class="contact-summary-count">${taskCount}</span>
                    <span class="contact-summary-label">Tasks</span>
                </div>
                <div class="contact-summary-stat">
                    <span class="contact-summary-count">${eventCount}</span>
                    <span class="contact-summary-label">Events</span>
                </div>
                <div class="contact-summary-stat">
                    <span class="contact-summary-count">${emailCount}</span>
                    <span class="contact-summary-label">Emails</span>
                </div>
            </div>
        `;

        container.innerHTML = headerHtml + infoHtml + summaryHtml + `
            <div class="settings-section">
                <h3 class="settings-heading">Activity</h3>
                ${timelineHtml}
            </div>
        ` + notesHtml;

        // Store full timeline for "show all"
        container._fullTimeline = timeline;
    }

    function showAllTimeline() {
        const container = document.getElementById('contact-dashboard-content');
        const timeline = container?._fullTimeline;
        if (!timeline) return;

        const timelineEl = document.getElementById('contact-timeline');
        const showAllBtn = document.getElementById('contact-timeline-show-all');
        if (showAllBtn) showAllBtn.remove();

        // Re-render full timeline
        timelineEl.innerHTML = timeline.map(item => {
            const dateStr = item.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
            const icon = item.type === 'task' ? '&#x2611;' : item.type === 'event' ? '&#x1F4C5;' : (item.isOutgoing ? '&#x2709;&#xFE0E;&rarr;' : '&larr;&#x2709;&#xFE0E;');
            const badge = item.type === 'task' && item.status ? `<span class="tag status-${(item.status || '').toLowerCase()}">${esc(item.status)}</span>` : '';

            let onclick = '';
            if (item.type === 'task') onclick = `GoingsOn.taskOverview.open('${escAttr(item.id)}')`;
            else if (item.type === 'event') onclick = `GoingsOn.events.open('${escAttr(item.id)}')`;
            else if (item.type === 'email') onclick = `GoingsOn.emails.open('${escAttr(item.id)}')`;

            return `
                <div class="contact-timeline-item row-flex row-flex-3" onclick="${onclick}" role="button" tabindex="0">
                    <span class="contact-timeline-icon">${icon}</span>
                    <span class="contact-timeline-title">${esc(item.title)}</span>
                    ${badge}
                    <span class="contact-timeline-date">${dateStr}</span>
                </div>
            `;
        }).join('');
    }

    async function promote(contactId) {
        try {
            await GoingsOn.api.contacts.promoteContact(contactId);
            GoingsOn.cache.invalidate('contacts');
            GoingsOn.autocomplete.refresh();
            GoingsOn.ui.showToast('Contact saved!', 'success');
            open(contactId); // re-render
        } catch (err) {
            GoingsOn.ui.showToast(GoingsOn.utils.getErrorMessage(err, 'Failed to save contact'), 'error');
        }
    }

    GoingsOn.contactDashboard = { open, close, promote, showAllTimeline };
})();