/**
 * @fileoverview Time tracking summary panel for the Day view.
 *
 * Collapsible section showing:
 * - Today's total tracked time
 * - This week's per-project breakdown (CSS bar chart, no library)
 */
(function() {
'use strict';

const esc = (s) => GoingsOn.utils.escapeHtml(s);

/**
 * Format a minute count as a human-readable duration.
 * @param {number} mins - Minutes to format
 * @returns {string} Formatted string (e.g., "2h 15m", "45m", "3h")
 */
function formatMinutes(mins) {
    if (mins < 60) return `${mins}m`;
    const h = Math.floor(mins / 60);
    const m = mins % 60;
    return m > 0 ? `${h}h ${m}m` : `${h}h`;
}

// ============ Render ============

/**
 * Render the time tracking summary panel (today's total + weekly per-project bars).
 * @param {HTMLElement} container - DOM element to render into
 */
async function render(container) {
    if (!container) return;

    // Rust computes the week window, aggregates by project, sorts, and rolls up
    // the percentages (see get_time_summary_panel). The JS only renders.
    let panel;
    try {
        panel = await GoingsOn.api.timeTracking.getSummaryPanel();
    } catch (err) {
        console.error('Failed to load time summary:', err);
        return;
    }

    const projects = panel.projects || [];

    let html = `
        <div class="time-summary-section">
            <button class="time-summary-toggle" aria-expanded="true">
                <span class="time-summary-toggle-icon">&#9660;</span>
                Time Tracked
            </button>
            <div class="time-summary-body">
                <div class="time-summary-today">
                    <span class="time-summary-today-label">Today</span>
                    <span class="time-summary-today-value">${esc(formatMinutes(panel.todayMinutes))}</span>
                </div>`;

    if (projects.length > 0) {
        html += `<div class="time-summary-week-header">This Week</div>`;
        for (const p of projects) {
            html += `
                <div class="time-summary-project">
                    <div class="time-summary-project-info">
                        <span class="time-summary-project-name">${esc(p.name)}</span>
                        <span class="time-summary-project-time">${esc(formatMinutes(p.totalMinutes))}</span>
                    </div>
                    <div class="time-summary-bar">
                        <div class="time-summary-bar-fill" style="width: ${p.barPercent}%"></div>
                    </div>
                </div>`;
        }
    }

    html += `</div></div>`;
    container.innerHTML = html;

    // Toggle collapse
    const toggle = container.querySelector('.time-summary-toggle');
    const body = container.querySelector('.time-summary-body');
    if (toggle && body) {
        toggle.addEventListener('click', () => {
            const expanded = toggle.getAttribute('aria-expanded') === 'true';
            toggle.setAttribute('aria-expanded', String(!expanded));
            body.classList.toggle('collapsed', expanded);
            toggle.querySelector('.time-summary-toggle-icon').textContent = expanded ? '\u25B6' : '\u25BC';
        });
    }
}

// ============ Namespace ============

GoingsOn.timeSummary = {
    render,
    formatMinutes,
};

})();