async function loadHistory() {
    try {
        const resp = await fetch(`${API_BASE}/api/history`);
        if (!resp.ok) return;
        const reports = await resp.json();
        const container = document.getElementById('history-list');

        if (reports.length === 0) {
            container.innerHTML = '<p style="color:#888;text-align:center;padding:20px;">Aucun rapport disponible</p>';
            return;
        }

        let html = '';
        reports.forEach(r => {
            const isoText = r.isotopes.length > 0 ? r.isotopes.join(', ') : 'background uniquement';
            html += `<div class="history-item" onclick="toggleDetails(this)">
                <div class="history-header">
                    <span class="history-date">${r.date.split('T')[0]}</span>
                    <span class="history-cps">${r.cps_mean.toFixed(1)} CPS</span>
                    <span class="history-isotopes">${r.isotope_count} isotope(s)</span>
                </div>
                <div class="history-details">
                    <p>Live time: ${r.live_time_hours.toFixed(1)}h | Total: ${r.total_counts} coups</p>
                    <p>Isotopes: ${isoText}</p>
                    <p>Background: ${r.background_subtracted ? 'soustrait' : 'non soustrait'}</p>
                </div>
            </div>`;
        });
        container.innerHTML = html;
    } catch {}
}

function toggleDetails(el) {
    const details = el.querySelector('.history-details');
    details.classList.toggle('open');
}

// Load on tab switch
document.querySelector('[data-tab="history"]').addEventListener('click', loadHistory);