/* ═══════════════════════════════════════════════════════
   CHANGELOG — Mission Update Log Controller
   ═══════════════════════════════════════════════════════ */
(function () {
    'use strict';

    const root = document.getElementById('changelogRoot');
    if (!root) return;

    function esc(s) {
        const d = document.createElement('div');
        d.textContent = s || '';
        return d.innerHTML;
    }

    function formatDate(dateStr) {
        const d = new Date(dateStr + 'T00:00:00');
        const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
        return `${d.getDate().toString().padStart(2, '0')} ${months[d.getMonth()]} ${d.getFullYear()}`;
    }

    function render(data) {
        const entries = data.entries || [];
        const totalChanges = entries.reduce((sum, e) => sum + (e.changes ? e.changes.length : 0), 0);
        const latestVersion = entries.length > 0 ? entries[0].version : '0.0.0';

        let html = '';

        // Header
        html += `<div class="changelog-header">`;
        html += `<div class="changelog-title">MISSION UPDATE LOG</div>`;
        html += `<div class="changelog-subtitle">// SYSTEM CHANGELOG — ALL DEPLOYMENTS</div>`;
        html += `<div class="changelog-stats">`;
        html += `<span class="changelog-stat">CURRENT BUILD: <span class="changelog-stat-value">v${esc(latestVersion)}</span></span>`;
        html += `<span class="changelog-stat">UPDATES: <span class="changelog-stat-value">${entries.length}</span></span>`;
        html += `<span class="changelog-stat">TOTAL CHANGES: <span class="changelog-stat-value">${totalChanges}</span></span>`;
        html += `</div></div>`;

        // Timeline
        html += `<div class="changelog-timeline">`;

        for (const entry of entries) {
            const badge = entry.category || 'update';
            html += `<div class="changelog-entry">`;
            html += `<div class="changelog-entry-card">`;

            // Header row
            html += `<div class="changelog-entry-header">`;
            html += `<span class="changelog-version">v${esc(entry.version)}</span>`;
            html += `<span class="changelog-badge ${esc(badge)}">${esc(badge)}</span>`;
            html += `<span class="changelog-date">${formatDate(entry.date)}</span>`;
            html += `</div>`;

            // Title
            html += `<div class="changelog-entry-title">${esc(entry.title)}</div>`;

            // Changes
            if (entry.changes && entry.changes.length > 0) {
                html += `<ul class="changelog-changes">`;
                for (const change of entry.changes) {
                    html += `<li>${esc(change)}</li>`;
                }
                html += `</ul>`;
            }

            html += `</div></div>`;
        }

        html += `</div>`;
        root.innerHTML = html;
    }

    // Load data
    root.innerHTML = '<div class="changelog-loading">LOADING UPDATE LOG...</div>';

    fetch('/api/changelog')
        .then(res => {
            if (!res.ok) throw new Error('API ' + res.status);
            return res.json();
        })
        .then(data => render(data))
        .catch(err => {
            root.innerHTML = '<div class="changelog-loading">⚠ FAILED TO LOAD UPDATE LOG</div>';
            console.error('Changelog load error:', err);
        });
})();