/**
 * GoingsOn - Projects Render Module
 * Project dashboard rendering: tasks, events, emails, milestones
 */

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

    /**
     * Empty state for a dashboard column. Same canonical primitive as the rest
     * of the app, with the compact `--dashboard` modifier and an optional
     * action button.
     * @param {string} message
     * @param {string} iconKey - EMPTY_STATE_ICONS key
     * @param {{label: string, onClick: string}} [action]
     */
    function renderDashboardEmpty(message, iconKey, action) {
        let html = `<div class="empty-state empty-state--dashboard">${GoingsOn.ui.emptyStateIcon(iconKey)}`
            + `<p class="empty-state-text">${esc(message)}</p>`;
        if (action && action.label && action.onClick) {
            html += `<button class="btn btn-sm btn-primary empty-state-action" onclick="${escAttr(action.onClick)}">${esc(action.label)}</button>`;
        }
        return html + `</div>`;
    }

    // ============ Dashboard Rendering ============

    /**
     * Render the project dashboard: tasks, events, emails, milestones, and attachments.
     * @param {string} projectId - Project ID to render dashboard for
     */
    async function renderDashboard(projectId) {
        const tasksEl = document.getElementById('project-tasks-list');
        const eventsEl = document.getElementById('project-events-list');
        const emailsEl = document.getElementById('project-emails-list');
        const attachmentsEl = document.getElementById('project-attachments-list');

        // Wire up attach button
        const attachBtn = document.getElementById('project-attach-btn');
        if (attachBtn) {
            attachBtn.onclick = () => GoingsOn.attachments.pickAndAttach(null, projectId);
        }

        // Load all data in parallel
        try {
            const [tasks, events, emails, milestones, attachments] = await Promise.all([
                GoingsOn.api.tasks.listByProject(projectId),
                GoingsOn.api.events.listByProject(projectId),
                GoingsOn.api.emails.listByProject(projectId),
                GoingsOn.api.milestones.list(projectId),
                GoingsOn.api.attachments.list(null, projectId),
            ]);

            // Render milestones
            renderMilestones(milestones, projectId);

            // Render tasks (pre-sorted by urgency DESC from backend)
            if (tasks.length === 0) {
                tasksEl.innerHTML = renderDashboardEmpty('No tasks linked yet.', 'tasks');
            } else if (tasks.every(t => t.status === 'Completed')) {
                tasksEl.innerHTML = '<div class="empty-state empty-state--compact"><p class="empty-state-text">All tasks complete.</p></div>';
            } else {
                tasksEl.innerHTML = tasks.map(t => {
                    const progress = t.subtaskProgress ?? 0;

                    return `
                    <div class="card card--list-item" onclick="GoingsOn.tasks.openSubtasks('${escAttr(t.id)}')"
                         tabindex="0" role="button" aria-label="Open task ${esc(t.description)}">
                        <div class="dashboard-item-title">
                            ${esc(t.description)}
                            ${GoingsOn.tasks.renderTaskBadges(t)}
                        </div>
                        ${t.subtaskCount > 0 ? `
                            <div class="progress-bar-container" style="margin: 0.5rem 0;" title="${t.subtaskCompleted}/${t.subtaskCount} subtasks"
                                 role="progressbar" aria-valuenow="${progress}" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar" style="width: ${progress}%"></div>
                            </div>
                        ` : ''}
                        <div class="dashboard-item-meta">
                            <span class="priority-${t.priority.toLowerCase()}" aria-label="Priority ${t.priority}">${t.priority}</span>
                            ${t.dueFormatted ? `&bull; ${t.dueFormatted}` : ''}
                        </div>
                    </div>
                `}).join('');
            }

            // Render events (pre-sorted by start_time ASC from backend)
            if (events.length === 0) {
                eventsEl.innerHTML = renderDashboardEmpty('No events linked yet.', 'events');
            } else {
                eventsEl.innerHTML = events.map(e => `
                    <div class="card card--list-item" onclick="GoingsOn.events.open('${escAttr(e.id)}')"
                         tabindex="0" role="button" aria-label="Open event ${esc(e.title)}">
                        <div class="dashboard-item-title">${esc(e.title)}</div>
                        <div class="dashboard-item-meta">
                            ${e.dateFormatted} &bull; ${e.timeFormatted}
                        </div>
                    </div>
                `).join('');
            }

            // Render emails
            if (emails.length === 0) {
                emailsEl.innerHTML = renderDashboardEmpty('No emails linked yet.', 'emails');
            } else {
                emailsEl.innerHTML = emails.map(e => `
                    <div class="card card--list-item ${e.is_read ? '' : 'unread'}" onclick="GoingsOn.emails.open('${escAttr(e.id)}')"
                         tabindex="0" role="button" aria-label="Open email ${esc(e.subject)}">
                        <div class="dashboard-item-title">${esc(e.subject)}</div>
                        <div class="dashboard-item-meta">
                            ${esc(e.from)} &bull; ${e.receivedFormatted}
                        </div>
                    </div>
                `).join('');
            }

            // Render attachments
            if (attachmentsEl) {
                if (attachments.length === 0) {
                    attachmentsEl.innerHTML = renderDashboardEmpty(
                        'No attachments yet.',
                        'attachments',
                        { label: 'Attach File', onClick: `GoingsOn.attachments.pickAndAttach(null, '${escAttr(projectId)}')` },
                    );
                } else {
                    attachmentsEl.innerHTML = attachments.map(a => `
                        <div class="card card--list-item" onclick="GoingsOn.attachments.openPanel(null, '${escAttr(projectId)}')"
                             tabindex="0" role="button" aria-label="View attachment ${esc(a.filename)}">
                            <div class="dashboard-item-title">${esc(a.filename)}</div>
                            <div class="dashboard-item-meta">${esc(a.fileSizeFormatted)}</div>
                        </div>
                    `).join('');
                }
            }
        } catch (err) {
            tasksEl.innerHTML = `<div class="empty-state empty-state--dashboard empty-state--error">Error: ${esc(err.message)}</div>`;
        }
    }

    // ============ Milestones Rendering ============

    // Track completed milestones collapse state (ephemeral UI state)
    let showCompletedMilestones = false;

    function toggleCompletedMilestones() {
        showCompletedMilestones = !showCompletedMilestones;
        const projectId = GoingsOn.state.currentProjectId;
        if (projectId) {
            GoingsOn.projects.loadDashboard(projectId);
        }
    }

    /**
     * Render the milestones section of the project dashboard.
     * @param {Array<Object>} milestones - Milestone objects from the backend
     * @param {string} projectId - Parent project ID
     */
    function renderMilestones(milestones, projectId) {
        const section = document.getElementById('project-milestones-section');
        if (!section) return;

        if (!milestones || milestones.length === 0) {
            section.innerHTML = `
                <div class="milestones-header">
                    <h3>Milestones</h3>
                    <button class="btn btn-sm btn-primary" onclick="GoingsOn.projects.openNewMilestone()">+ Add</button>
                </div>
                <p class="milestones-empty">No milestones yet</p>
            `;
            return;
        }

        const openMilestones = milestones.filter(m => m.status !== 'completed');
        const completedMilestones = milestones.filter(m => m.status === 'completed');

        let html = `
            <div class="milestones-header">
                <h3>Milestones</h3>
                <button class="btn btn-sm btn-primary" onclick="GoingsOn.projects.openNewMilestone()">+ Add</button>
            </div>
            <div class="milestones-list">
                ${openMilestones.map((m, idx) => `
                    <div class="milestone-card">
                        <div class="milestone-info">
                            <span class="milestone-name">${esc(m.name)}</span>
                            ${m.targetDate ? `<span class="milestone-date">${esc(m.targetDate)}</span>` : ''}
                        </div>
                        <div class="milestone-progress">
                            <div class="progress-bar-container" title="${m.completedCount}/${m.taskCount} tasks">
                                <div class="progress-bar" style="width: ${m.progress}%"></div>
                            </div>
                            <span class="milestone-progress-text">${m.completedCount}/${m.taskCount}</span>
                        </div>
                        <div class="milestone-actions">
                            ${idx > 0 ? `<button class="btn btn-sm btn-icon milestone-reorder-btn" onclick="event.stopPropagation(); GoingsOn.projects.moveMilestone('${escAttr(m.id)}', -1)" title="Move up">\u25B2</button>` : '<span class="btn btn-sm btn-icon milestone-reorder-btn" style="visibility:hidden">\u25B2</span>'}
                            ${idx < openMilestones.length - 1 ? `<button class="btn btn-sm btn-icon milestone-reorder-btn" onclick="event.stopPropagation(); GoingsOn.projects.moveMilestone('${escAttr(m.id)}', 1)" title="Move down">\u25BC</button>` : '<span class="btn btn-sm btn-icon milestone-reorder-btn" style="visibility:hidden">\u25BC</span>'}
                            <button class="btn btn-sm btn-secondary" onclick="GoingsOn.projects.openEditMilestone('${escAttr(m.id)}')">Edit</button>
                            <button class="btn btn-sm btn-secondary" onclick="GoingsOn.projects.deleteMilestone('${escAttr(m.id)}')">Delete</button>
                        </div>
                    </div>
                `).join('')}
            </div>`;

        // Completed milestones section (collapsed by default)
        if (completedMilestones.length > 0) {
            html += `
                <div class="milestones-completed-section">
                    <button class="btn btn-link milestones-completed-toggle" onclick="GoingsOn.projects.toggleCompletedMilestones()">
                        ${showCompletedMilestones ? 'Hide' : 'Show'} ${completedMilestones.length} completed
                    </button>
                    <div class="milestones-completed-list" style="display: ${showCompletedMilestones ? 'block' : 'none'};">
                        ${completedMilestones.map(m => `
                            <div class="milestone-card completed milestone-card-summary">
                                <div class="milestone-info">
                                    <span class="milestone-name">${esc(m.name)}</span>
                                    <span class="milestone-complete-badge">Complete</span>
                                </div>
                                <div class="milestone-actions">
                                    <button class="btn btn-sm btn-secondary" onclick="GoingsOn.projects.openEditMilestone('${escAttr(m.id)}')">Edit</button>
                                    <button class="btn btn-sm btn-secondary" onclick="GoingsOn.projects.deleteMilestone('${escAttr(m.id)}')">Delete</button>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>`;
        }

        section.innerHTML = html;
    }

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

    GoingsOn.projectsRender = {
        renderDashboard,
        renderMilestones,
        toggleCompletedMilestones,
    };

})();