/* ============================================
   HANDOFF / SYNTHESE
   ============================================ */
function renderHandoff() {
    renderHandoffStats();
    renderHandoffModules();
    renderCoverageMatrix();
    renderProgressIndicator();
}

function renderHandoffStats() {
    const container = document.getElementById('handoffStats');
    if (!container) return;

    const totalUCs = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.useCases || []).length, 0);
    const totalBRs = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.businessRules || []).length, 0);
    const totalEnts = data.modules.reduce((sum, m) => sum + (data.moduleSpecs[m.code]?.entities || []).length, 0);
    const totalStakeholders = data.cadrage.stakeholders.length;

    container.innerHTML = `
        <div class="stat-card"><div class="stat-value">${data.modules.length}</div><div class="stat-label">Domaines fonctionnels</div></div>
        <div class="stat-card"><div class="stat-value">${totalUCs}</div><div class="stat-label">Cas d'utilisation</div></div>
        <div class="stat-card"><div class="stat-value">${totalBRs}</div><div class="stat-label">Règles métier</div></div>
        <div class="stat-card"><div class="stat-value">${totalEnts}</div><div class="stat-label">Types de données</div></div>
        <div class="stat-card"><div class="stat-value">${totalStakeholders}</div><div class="stat-label">Profils utilisateurs</div></div>
        <div class="stat-card"><div class="stat-value">${data.dependencies.length}</div><div class="stat-label">Dépendances</div></div>
        <div class="stat-card"><div class="stat-value">${data.consolidation.e2eFlows.length}</div><div class="stat-label">Parcours bout en bout</div></div>
    `;
}

function renderHandoffModules() {
    const container = document.getElementById('handoffModuleList');
    if (!container) return;

    const layers = computeTopologicalLayers();
    const order = layers ? layers.flat() : data.modules.map(m => m.code);

    container.innerHTML = order.map((code, i) => {
        const m = data.modules.find(mod => mod.code === code);
        if (!m) return '';
        const spec = data.moduleSpecs[code] || {};
        return `
            <div class="card" style="margin-bottom:0.75rem;">
                <div style="display:flex;align-items:center;gap:0.75rem;">
                    <div style="width:28px;height:28px;border-radius:50%;background:var(--primary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.75rem;font-weight:700;flex-shrink:0;">${i + 1}</div>
                    <div style="flex:1;">
                        <div style="font-weight:600;color:var(--text-bright);">${escapeHtml(m.name)}</div>
                        <div style="font-size:0.8rem;color:var(--text-muted);">${escapeHtml(m.description || '')}</div>
                    </div>
                    <div style="display:flex;gap:1rem;font-size:0.75rem;color:var(--text-muted);">
                        <span>${(spec.useCases || []).length} cas d'utilisation</span>
                        <span>${(spec.businessRules || []).length} règles</span>
                        <span>${(spec.entities || []).length} données</span>
                    </div>
                </div>
            </div>`;
    }).join('');
}

function renderCoverageMatrix() {
    const container = document.getElementById('coverageMatrix');
    if (!container) return;

    const allScope = (data.cadrage.scope.inscope || []).map(item => ({ ...item, priority: 'inscope' }));

    if (allScope.length === 0) {
        container.innerHTML = '<p style="color:var(--text-muted);font-style:italic;">Aucun élément de périmètre défini dans le cadrage.</p>';
        return;
    }

    container.innerHTML = `
        <table class="mock-table" style="background:var(--bg-card);border-radius:8px;overflow:hidden;">
            <thead><tr><th>Besoin</th><th>Périmètre</th><th>Domaine</th><th>Couvert</th></tr></thead>
            <tbody>
                ${allScope.map(item => {
                    const moduleName = item.module
                        ? (data.modules.find(m => m.code === item.module)?.name || item.module)
                        : (data.modules.length > 0 ? data.modules.map(m => m.name).join(', ') : 'À définir');
                    return `
                        <tr>
                            <td>${escapeHtml(item.name)}</td>
                            <td><span class="priority priority-${item.priority}">${formatPriority(item.priority)}</span></td>
                            <td style="color:var(--text-muted);">${escapeHtml(moduleName)}</td>
                            <td style="text-align:center;color:var(--success);">&#10003;</td>
                        </tr>`;
                }).join('')}
            </tbody>
        </table>`;
}

function renderProgressIndicator() {
    var container = document.getElementById('progressIndicator');
    if (!container) return;
    var p = computeProgress();
    var html = '<div class="progress-bar-container">';
    html += '<div class="progress-bar-fill" style="width:' + p.pct + '%;"></div>';
    html += '</div>';
    html += '<div class="progress-label">' + p.pct + '% complet — ' + p.doneCount + '/' + p.total + ' critères</div>';
    html += '<div class="progress-checks">';
    p.checks.forEach(function(c) {
        html += '<div class="progress-check ' + (c.done ? 'done' : '') + '">';
        html += '<span class="progress-check-icon">' + (c.done ? '&#10003;' : '&#9675;') + '</span> ';
        html += escapeHtml(c.label);
        html += '</div>';
    });
    html += '</div>';
    container.innerHTML = html;
}
