/**
 * GoingsOn - Monthly Review Render Module
 * Pure rendering functions for the Month view.
 */

(function() {
'use strict';

const esc = GoingsOn.utils.escapeHtml;
const escAttr = GoingsOn.utils.escapeAttr;

/**
 * Truncate a string with an ellipsis.
 * @param {string} str - String to truncate
 * @param {number} len - Maximum length
 * @returns {string} Truncated string
 */
function truncate(str, len) {
    if (!str) return '';
    return str.length > len ? str.substring(0, len) + '...' : str;
}

// ============ Heat Map Calendar ============

/**
 * Render the month heat-map calendar grid.
 * @param {Object} r - Monthly review data with days, firstDayOffset
 * @returns {string} HTML string
 */
function renderHeatMap(r) {
    const dayHeaders = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    let html = '<div class="month-heatmap">';
    html += '<div class="month-heatmap-header">';
    for (const d of dayHeaders) {
        html += `<div class="month-heatmap-day-header">${d}</div>`;
    }
    html += '</div>';
    html += '<div class="month-heatmap-grid">';

    // Empty cells before the 1st
    for (let i = 0; i < r.firstDayOffset; i++) {
        html += '<div class="month-heatmap-cell empty"></div>';
    }

    for (const day of r.days) {
        const classes = ['month-heatmap-cell'];
        if (day.isToday) classes.push('today');
        if (day.isPast) classes.push('past');
        if (day.isVacation) classes.push('vacation');
        classes.push(`intensity-${day.intensity}`);

        html += `<div class="${classes.join(' ')}" onclick="GoingsOn.monthlyReview.showDaySummary('${escAttr(day.date)}')" title="${day.completedCount} completed, ${day.eventCount} events" tabindex="0" role="button">`;
        html += `<span class="month-heatmap-day-number">${day.dayNumber}</span>`;
        if (day.completedCount > 0 || day.eventCount > 0) {
            html += '<div class="month-heatmap-dots">';
            if (day.completedCount > 0) html += `<span class="month-dot completed">${day.completedCount}</span>`;
            if (day.eventCount > 0) html += `<span class="month-dot event">${day.eventCount}</span>`;
            html += '</div>';
        }
        html += '</div>';
    }

    // Empty cells after the last day
    const totalCells = r.firstDayOffset + r.days.length;
    const remainder = totalCells % 7;
    if (remainder > 0) {
        for (let i = 0; i < 7 - remainder; i++) {
            html += '<div class="month-heatmap-cell empty"></div>';
        }
    }

    html += '</div></div>';
    return html;
}

// ============ Accomplished ============

/**
 * Render the Accomplished card with a sample of completed tasks for the month.
 * @param {Object} r - Monthly review data
 * @returns {string} HTML string
 */
function renderAccomplished(r) {
    const count = r.tasksCompletedCount || 0;
    const top = r.tasksCompletedTop || [];

    if (count === 0) return '';

    const items = top.map(t => `
        <li class="task-item completed">
            <span class="task-checkbox checked">&#x2713;</span>
            <span class="task-text">${esc(t.description)}</span>
            ${t.projectName ? `<span class="task-project">${esc(t.projectName)}</span>` : ''}
        </li>
    `).join('');

    return `
        <div class="card card--static review-card month-accomplished-card">
            <div class="card-header">
                <span class="card-title">Accomplished</span>
                <span class="card-badge card-badge--success">
                    ${count} completed
                </span>
            </div>
            <ul class="task-list">${items}</ul>
            ${count > top.length ? `<p class="review-more-line">&hellip; and ${count - top.length} more</p>` : ''}
        </div>
    `;
}

// ============ Month in Numbers ============

/**
 * Render the "Month in Numbers" stats card.
 * @param {Object} r - Monthly review data
 * @returns {string} HTML string
 */
function renderStats(r) {
    let html = '<div class="card card--static review-card month-stats-card">';
    html += '<h3 class="review-card-title">Month in Numbers</h3>';
    html += '<div class="month-stats-grid">';
    html += renderStatItem('Tasks Completed', r.tasksCompletedCount, 'completed');
    html += renderStatItem('Tasks Created', r.tasksCreatedCount, 'created');
    html += renderStatItem('Events', r.eventsCount, 'events');
    html += renderStatItem('Best Streak', r.completionStreak + 'd', 'streak');
    html += '</div>';

    if (r.busiestDay || r.quietestDay) {
        html += '<div class="month-stats-highlights">';
        if (r.busiestDay) html += `<span class="stat-highlight">Busiest: ${formatDateShort(r.busiestDay)}</span>`;
        if (r.quietestDay) html += `<span class="stat-highlight">Quietest: ${formatDateShort(r.quietestDay)}</span>`;
        html += '</div>';
    }

    html += '</div>';
    return html;
}

function renderStatItem(label, value, type) {
    return `<div class="month-stat-item ${type}"><span class="month-stat-value">${value}</span><span class="month-stat-label">${label}</span></div>`;
}

function formatDateShort(dateStr) {
    if (!dateStr) return '';
    const d = new Date(dateStr + 'T12:00:00');
    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
}

// ============ Project Health ============

/**
 * Render the Project Health card showing per-project activity direction.
 * @param {Object} r - Monthly review data with projectPulse array
 * @returns {string} HTML string
 */
function renderProjectPulse(r) {
    if (!r.projectPulse || r.projectPulse.length === 0) return '';

    let html = '<div class="card card--static review-card month-pulse-card">';
    html += '<h3 class="review-card-title">Project Health</h3>';
    html += '<div class="month-pulse-list">';

    for (const p of r.projectPulse) {
        const dirClass = p.direction === 'shrinking' ? 'positive' : p.direction === 'growing' ? 'negative' : 'neutral';
        const arrow = p.direction === 'shrinking' ? '&#x2193;' : p.direction === 'growing' ? '&#x2191;' : '&#x2194;';
        html += `<div class="month-pulse-item ${dirClass}">`;
        html += `<span class="pulse-name">${esc(truncate(p.name, 24))}</span>`;
        html += `<span class="pulse-stats">+${p.completed} done / +${p.created} new</span>`;
        html += `<span class="pulse-arrow">${arrow}</span>`;
        html += '</div>';
    }

    html += '</div></div>';
    return html;
}

// ============ Monthly Goals ============

/**
 * Render the Monthly Goals card with 3 goal slots.
 * @param {Object} r - Monthly review data with goals array
 * @returns {string} HTML string
 */
function renderGoals(r) {
    let html = '<div class="card card--static review-card month-goals-card scope-card full-width">';
    html += '<div class="card-header">';
    html += '<span class="card-title">Monthly Goals</span>';
    html += '<span class="card-badge card-badge--warning">Set up to 3 goals</span>';
    html += '</div>';
    html += '<div class="scope-slots month-goals-list">';

    for (let pos = 1; pos <= 3; pos++) {
        const goal = r.goals.find(g => g.position === pos);
        if (goal) {
            html += renderGoalItem(goal, pos);
        } else {
            html += renderEmptyGoalSlot(r.month, pos);
        }
    }

    html += '</div></div>';
    return html;
}

function renderGoalItem(goal, position) {
    const statusIcons = { active: '&#x25CB;', done: '&#x2713;', abandoned: '&#x2717;' };
    const icon = statusIcons[goal.status] || '&#x25CB;';

    let html = `<div class="scope-slot month-goal-item filled ${goal.status}">`;
    html += `<span class="scope-slot-label">Goal #${position}</span>`;
    html += `<div class="month-goal-body">`;
    html += `<button class="btn-icon month-goal-status-btn" onclick="GoingsOn.monthlyReview.cycleGoalStatus('${escAttr(goal.id)}')" title="Cycle status">${icon}</button>`;
    html += `<span class="scope-slot-title month-goal-text">${esc(goal.text)}</span>`;
    html += `<button class="btn-icon month-goal-delete-btn" onclick="GoingsOn.monthlyReview.deleteGoal('${escAttr(goal.id)}')" title="Delete goal">&#x2715;</button>`;
    html += `</div>`;
    html += '</div>';
    return html;
}

function renderEmptyGoalSlot(month, position) {
    return `<div class="scope-slot month-goal-item empty"
        onclick="GoingsOn.monthlyReview.addGoal('${escAttr(month)}', ${position})"
        tabindex="0" role="button">
        <span class="scope-slot-label">Goal #${position}</span>
        <span class="scope-slot-empty">+ Add goal</span>
    </div>`;
}

// ============ Reflection ============

/**
 * Render the reflection card using the shared helper.
 * @param {Object} r - Monthly review data with reflection object
 * @returns {string} HTML string
 */
function renderReflection(r) {
    return GoingsOn.planReviewToggle.renderReflection({
        idPrefix: 'monthly',
        prompts: [
            { key: 'highlight', label: 'What was the highlight of this month?', placeholder: "Something you're proud of...", value: r.reflection?.highlightText || '' },
            { key: 'change', label: 'What would you change?', placeholder: 'Something to improve next month...', value: r.reflection?.changeText || '' },
        ],
    });
}

// ============ Patterns ============

/**
 * Render the Patterns card with observed behavioral patterns.
 * @param {Object} r - Monthly review data with patterns array
 * @returns {string} HTML string
 */
function renderPatterns(r) {
    if (!r.patterns || r.patterns.length === 0) return '';

    let html = '<div class="card card--static review-card month-patterns-card">';
    html += '<h3 class="review-card-title">Patterns</h3>';
    html += '<ul class="month-patterns-list">';
    for (const p of r.patterns) {
        html += `<li class="month-pattern-item">${esc(p)}</li>`;
    }
    html += '</ul></div>';
    return html;
}

// ============ Exports ============

GoingsOn.monthlyReviewRender = {
    renderHeatMap,
    renderAccomplished,
    renderStats,
    renderProjectPulse,
    renderGoals,
    renderReflection,
    renderPatterns,
};

})();