/**
 * 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.escapeAttrValue;
    const escArg = GoingsOn.utils.escapeHandlerArg;

    let currentContactId = null;

    // How many activity rows the dashboard shows before the user expands "Show all".
    const INITIAL_ACTIVITY_LIMIT = 20;

    /**
     * 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, activity] = await Promise.all([
                GoingsOn.api.contacts.get(contactId),
                GoingsOn.api.contacts.getActivity(contactId, INITIAL_ACTIVITY_LIMIT),
            ]);

            titleEl.textContent = contact.displayName || contact.display_name;
            render(content, actionsEl, contact, activity);
        } 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');
    }

    /**
     * Render one pre-computed activity row. All fields (kind, title, date,
     * status, direction) are supplied by Rust — the JS only maps them to markup.
     * @param {{kind: string, id: string, title: string, dateFormatted: string, status: (string|null), isOutgoing: boolean}} item
     */
    function renderTimelineItem(item) {
        const icon = item.kind === 'task' ? '&#x2611;'
            : item.kind === 'event' ? '&#x1F4C5;'
            : (item.isOutgoing ? '&#x2709;&#xFE0E;&rarr;' : '&larr;&#x2709;&#xFE0E;');
        const badge = item.kind === 'task' && item.status
            ? `<span class="tag status-${(item.status || '').toLowerCase()}">${esc(item.status)}</span>`
            : '';

        let act = '';
        if (item.kind === 'task') act = 'taskOverview.open';
        else if (item.kind === 'event') act = 'events.open';
        else if (item.kind === 'email') act = 'emails.open';

        return `
            <div class="contact-timeline-item row-flex row-flex-3" ${act ? `data-act="${act}" data-a1="${escAttr(item.id)}"` : ''} 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">${esc(item.dateFormatted)}</span>
            </div>
        `;
    }

    function render(container, actionsEl, contact, activity) {
        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" data-act="contactDashboard.promote" data-a1="${escAttr(contact.id)}">Save as Contact</button>
            `;
        } else {
            actionsEl.innerHTML = `
                <button class="btn btn-secondary" data-act="contacts.openEdit" data-a1="${escAttr(contact.id)}">Edit</button>
                <button class="btn btn-secondary text-accent-red" data-act="contacts.delete" data-a1="${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 — Rust already merged, sorted (newest-first), capped,
        // and pre-formatted every row. JS just maps items to markup.
        const timelineItems = activity.items || [];

        const totalActivity = (activity.taskCount || 0) + (activity.eventCount || 0) + (activity.emailCount || 0);

        let timelineHtml = '';
        if (timelineItems.length === 0) {
            timelineHtml = '<p class="empty-italic">No interactions yet.</p>';
        } else {
            const items = timelineItems.map(renderTimelineItem).join('');
            // Rust caps the initial feed; offer to load the rest without a second round of client math.
            const showAll = totalActivity > timelineItems.length
                ? `<button class="btn btn-link" data-act="contactDashboard.showAllActivity">Show all ${totalActivity} interactions</button>`
                : '';
            timelineHtml = `<div class="contact-timeline" id="contact-timeline">${items}</div>${showAll}`;
        }

        // 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 — totals from Rust (may exceed the capped feed)
        const taskCount = activity.taskCount;
        const eventCount = activity.eventCount;
        const emailCount = activity.emailCount;

        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;
    }

    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');
        }
    }

    /**
     * Load and render the full activity feed (no server-side cap), replacing the
     * capped list and the "Show all" button in place. Rust still merges/sorts/formats.
     */
    async function showAllActivity() {
        if (!currentContactId) return;
        const timeline = document.getElementById('contact-timeline');
        if (!timeline) return;
        try {
            const activity = await GoingsOn.api.contacts.getActivity(currentContactId);
            const items = (activity.items || []).map(renderTimelineItem).join('');
            timeline.innerHTML = items;
            const btn = timeline.nextElementSibling;
            if (btn && btn.tagName === 'BUTTON') btn.remove();
        } catch (err) {
            GoingsOn.ui.showToast(GoingsOn.utils.getErrorMessage(err, 'Failed to load activity'), 'error');
        }
    }

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