ProductionGame/frontend/js/ui/production/sectorBar.js

// Production UI: Sector Toolbar and Executive Summaries
import { SECTORS } from '../../data/products.js';
import { fmtNum } from '../../core/formatters.js';

export function renderSectorBarHtml(selectedSector, engine) {
    const currentSectorObj = SECTORS.find(s => s.id === selectedSector);

    let html = `
        <div class="production-toolbar">
            <div class="sector-tabs-scroll">
                <button class="sector-pill ${selectedSector === 'all' ? 'active' : ''}" data-sector="all" title="All Sectors">
                    <iconify-icon icon="lucide:layout-grid"></iconify-icon>
                    <span class="sector-pill-rate font-mono" id="pill-rate-all">+$${fmtNum(engine?.cashRate || 0, 1)}/s</span>
                </button>
                ${SECTORS.map(s => {
                    const stats = engine?.sectorStats?.[s.id] || { revenueRate: 0 };
                    return `
                        <button class="sector-pill ${selectedSector === s.id ? 'active' : ''}" data-sector="${s.id}" title="${s.name}">
                            <iconify-icon icon="${s.icon}" style="color: ${s.color};"></iconify-icon>
                            <span class="sector-pill-rate font-mono" id="pill-rate-${s.id}">+$${fmtNum(stats.revenueRate, 1)}/s</span>
                        </button>
                    `;
                }).join('')}
            </div>
        </div>
    `;

    // 1. Single Sector Executive Summary Banner
    if (selectedSector !== 'all' && currentSectorObj) {
        const stats = engine?.sectorStats?.[selectedSector] || { revenueRate: 0, unitsRate: 0, activeLines: 0, totalProduced: 0 };
        html += `
            <div class="sector-summary-banner" style="border-left: 4px solid ${currentSectorObj.color};">
                <div class="sector-summary-main">
                    <div class="sector-summary-icon" style="background: ${currentSectorObj.color}15; color: ${currentSectorObj.color};">
                        <iconify-icon icon="${currentSectorObj.icon}" class="icon-lg"></iconify-icon>
                    </div>
                    <div>
                        <div class="sector-summary-badge" style="color: ${currentSectorObj.color};">INDUSTRY OUTPUT OVERVIEW</div>
                        <h2 class="sector-summary-title">${currentSectorObj.name}</h2>
                        <p class="sector-summary-desc">${currentSectorObj.description}</p>
                    </div>
                </div>
                <div class="sector-metrics-strip">
                    <div class="sector-metric-cell">
                        <span class="sec-metric-label">Wholesale Output Rate:</span>
                        <strong class="sec-metric-val font-mono text-profit" id="sec-sum-rev">+$${fmtNum(stats.revenueRate, 2)}/s</strong>
                    </div>
                    <div class="sector-metric-cell">
                        <span class="sec-metric-label">Production Velocity:</span>
                        <strong class="sec-metric-val font-mono" id="sec-sum-units">${fmtNum(stats.unitsRate, 1)} units/s</strong>
                    </div>
                    <div class="sector-metric-cell">
                        <span class="sec-metric-label">Operating Lines:</span>
                        <strong class="sec-metric-val font-mono" id="sec-sum-lines">${stats.activeLines} active</strong>
                    </div>
                    <div class="sector-metric-cell">
                        <span class="sec-metric-label">Lifetime Sector Output:</span>
                        <strong class="sec-metric-val font-mono" id="sec-sum-total">${fmtNum(stats.totalProduced, 0)} units</strong>
                    </div>
                </div>
            </div>
        `;
    }

    // 2. All Sectors Mini Summary Grid
    if (selectedSector === 'all') {
        html += `
            <div class="all-sectors-summary-grid">
                ${SECTORS.map(s => {
                    const stats = engine?.sectorStats?.[s.id] || { revenueRate: 0, unitsRate: 0, activeLines: 0 };
                    return `
                        <div class="sector-mini-card" data-sector="${s.id}" style="border-top: 3px solid ${s.color};">
                            <div class="mini-card-header">
                                <div class="mini-card-icon" style="background: ${s.color}15; color: ${s.color};">
                                    <iconify-icon icon="${s.icon}"></iconify-icon>
                                </div>
                                <div class="mini-card-title-wrap">
                                    <h4 class="mini-card-name">${s.name}</h4>
                                    <span class="mini-card-sub" id="all-sec-lines-${s.id}">${stats.activeLines} lines active</span>
                                </div>
                            </div>
                            <div class="mini-card-stats">
                                <div class="mini-stat-cell">
                                    <span class="mini-stat-label">Output Rate</span>
                                    <strong class="font-mono text-profit" id="all-sec-rev-${s.id}">+$${fmtNum(stats.revenueRate, 2)}/s</strong>
                                </div>
                                <div class="mini-stat-cell">
                                    <span class="mini-stat-label">Velocity</span>
                                    <strong class="font-mono" id="all-sec-units-${s.id}">${fmtNum(stats.unitsRate, 1)} u/s</strong>
                                </div>
                            </div>
                        </div>
                    `;
                }).join('')}
            </div>
        `;
    }

    return html;
}

export function updateSectorBarDom(selectedSector, engine) {
    const elPillRateAll = document.getElementById('pill-rate-all');
    if (elPillRateAll) {
        const text = `+$${fmtNum(engine?.cashRate || 0, 1)}/s`;
        if (elPillRateAll.textContent !== text) elPillRateAll.textContent = text;
    }

    for (const s of SECTORS) {
        const stats = engine?.sectorStats?.[s.id];
        if (stats) {
            const elPillRate = document.getElementById(`pill-rate-${s.id}`);
            if (elPillRate) {
                const text = `+$${fmtNum(stats.revenueRate, 1)}/s`;
                if (elPillRate.textContent !== text) elPillRate.textContent = text;
            }
            if (selectedSector === 'all') {
                const elMiniRev = document.getElementById(`all-sec-rev-${s.id}`);
                if (elMiniRev) {
                    const text = `+$${fmtNum(stats.revenueRate, 2)}/s`;
                    if (elMiniRev.textContent !== text) elMiniRev.textContent = text;
                }
                const elMiniUnits = document.getElementById(`all-sec-units-${s.id}`);
                if (elMiniUnits) {
                    const text = `${fmtNum(stats.unitsRate, 1)} u/s`;
                    if (elMiniUnits.textContent !== text) elMiniUnits.textContent = text;
                }
                const elMiniLines = document.getElementById(`all-sec-lines-${s.id}`);
                if (elMiniLines) {
                    const text = `${stats.activeLines} lines active`;
                    if (elMiniLines.textContent !== text) elMiniLines.textContent = text;
                }
            }
        }
    }

    if (selectedSector !== 'all') {
        const stats = engine?.sectorStats?.[selectedSector];
        if (stats) {
            const elRev = document.getElementById('sec-sum-rev');
            if (elRev) {
                const text = `+$${fmtNum(stats.revenueRate, 2)}/s`;
                if (elRev.textContent !== text) elRev.textContent = text;
            }
            const elUnits = document.getElementById('sec-sum-units');
            if (elUnits) {
                const text = `${fmtNum(stats.unitsRate, 1)} units/s`;
                if (elUnits.textContent !== text) elUnits.textContent = text;
            }
            const elLines = document.getElementById('sec-sum-lines');
            if (elLines) {
                const text = `${stats.activeLines} active`;
                if (elLines.textContent !== text) elLines.textContent = text;
            }
            const elTotal = document.getElementById('sec-sum-total');
            if (elTotal) {
                const text = `${fmtNum(stats.totalProduced, 0)} units`;
                if (elTotal.textContent !== text) elTotal.textContent = text;
            }
        }
    }
}