let bgChart = null;

async function refreshBackground() {
    try {
        const [infoResp, specResp] = await Promise.all([
            fetch(`${API_BASE}/api/background`),
            fetch(`${API_BASE}/api/background/spectrum`)
        ]);

        if (!infoResp.ok || !specResp.ok) {
            document.getElementById('bg-stats').innerHTML = '<p style="color:#888">Background non disponible</p>';
            return;
        }

        const info = await infoResp.json();
        const spec = await specResp.json();

        // Stats
        document.getElementById('bg-stats').innerHTML = `
            <div class="bg-stat"><div class="bg-stat-value">${info.elapsed_hours.toFixed(1)}h</div><div class="bg-stat-label">Durée</div></div>
            <div class="bg-stat"><div class="bg-stat-value">${info.live_time_s.toFixed(0)}s</div><div class="bg-stat-label">Live time</div></div>
            <div class="bg-stat"><div class="bg-stat-value">${info.total_counts.toFixed(0)}</div><div class="bg-stat-label">Coups</div></div>
            <div class="bg-stat"><div class="bg-stat-value">${info.cps.toFixed(2)}</div><div class="bg-stat-label">CPS</div></div>
        `;

        // Chart
        updateBackgroundChart(spec);

        // Peaks table
        updatePeaksTable(info.top_peaks || []);
    } catch {}
}

function updateBackgroundChart(spec) {
    const ctx = document.getElementById('background-chart').getContext('2d');

    const chartData = {
        labels: spec.energy_kev,
        datasets: [{
            label: 'Background',
            data: spec.counts,
            borderColor: '#ff9800',
            backgroundColor: 'rgba(255, 152, 0, 0.1)',
            borderWidth: 1,
            pointRadius: 0,
            fill: true,
        }]
    };

    const options = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: { labels: { color: '#e0e0e0' } },
            tooltip: {
                callbacks: {
                    title: (items) => `${spec.energy_kev[items[0].dataIndex]} keV`,
                    label: (item) => `${item.raw.toFixed(1)} counts`
                }
            }
        },
        scales: {
            x: {
                type: 'linear',
                title: { display: true, text: 'Énergie (keV)', color: '#888' },
                ticks: { color: '#888', maxTicksLimit: 20 },
                grid: { color: '#333' },
            },
            y: {
                title: { display: true, text: 'Comptages', color: '#888' },
                ticks: { color: '#888' },
                grid: { color: '#333' },
            }
        }
    };

    if (bgChart) {
        bgChart.data = chartData;
        bgChart.options = options;
        bgChart.update();
    } else {
        bgChart = new Chart(ctx, { type: 'line', data: chartData, options });
    }
}

function updatePeaksTable(peaks) {
    const container = document.getElementById('peaks-table');
    if (!peaks || peaks.length === 0) {
        container.innerHTML = '<p style="color:#888;text-align:center;padding:8px;">Pas assez de données pour identifier les pics</p>';
        return;
    }

    let html = '<h3 style="margin-bottom:8px;color:#ff9800;">Pics détectés</h3>';
    peaks.forEach(p => {
        html += `<div class="peak-row">
            <span style="color:#4fc3f7">${p.energy_kev.toFixed(1)} keV</span>
            <span>${p.counts.toFixed(0)} cts</span>
        </div>`;
    });
    container.innerHTML = html;
}

document.querySelector('[data-tab="background"]').addEventListener('click', refreshBackground);