if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
    navigator.serviceWorker.register('{% static "sw.js" %}').then(function(reg) {
        console.log('Service worker registered.', reg);
    }).catch(function(err) {
        console.warn('Service worker registration failed:', err);
    });
    });
}

const couleursOrange = ['#b35400', '#ff9f1c', '#ffc107', '#ffb84d', '#ffcc80'];
const departementLabels = {{ departement_labels|safe }};
const departementCounts = {{ departement_counts|safe }};
const sexeLabels = {{ sexe_labels|safe }};
const sexeCounts = {{ sexe_counts|safe }};
const projetLabels = {{ projet_labels|safe }};
const projetCounts = {{ projet_counts|safe }};
const ticketsLabels = ["Traités", "Non traités"];
const ticketsCounts = [{{ tickets_traite }}, {{ tickets_non_traite }}];
const domaineLabels = {{ domaine_labels|safe }};
const domaineCounts = {{ domaine_counts|safe }};

new Chart(document.getElementById("chartDepartement"), {
    type: 'pie',
    plugins: [ChartDataLabels],
    data: {
        labels: departementLabels,
        datasets: [{ data: departementCounts, backgroundColor: couleursOrange }]
    },
    options: {
        plugins: {
            legend: { position: 'bottom' },
            datalabels: { color: '#fff', font: { weight: 'bold', size: 14 }, formatter: v => v }
        }
    }
});

new Chart(document.getElementById("chartSexe"), {
    type: 'doughnut',
    plugins: [ChartDataLabels],
    data: {
        labels: sexeLabels,
        datasets: [{ data: sexeCounts, backgroundColor: couleursOrange }]
    },
    options: {
        plugins: {
            legend: { position: 'bottom' },
            datalabels: { color: '#fff', font: { weight: 'bold', size: 14 }, formatter: v => v }
        }
    }
});

new Chart(document.getElementById("chartProjets"), {
    type: 'bar',
    plugins: [ChartDataLabels],
    data: {
        labels: projetLabels,
        datasets: [{ label:'Nombre de projets', data: projetCounts, backgroundColor: couleursOrange }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            datalabels: { anchor:'end', align:'top', color:'#000', font:{ weight:'bold', size:16 }, formatter:v => v }
        },
        scales: {
            y: { beginAtZero:true, ticks:{ stepSize:1, precision:0 }, title:{ display:true, text:'Nombre de projets' } },
            x: { title:{ display:true, text:'' } }
        }
    }
});

new Chart(document.getElementById("chartDomaine"), {
    type: 'bar',
    plugins: [ChartDataLabels],
    data: {
        labels: domaineLabels,
        datasets: [{ label:'Nombre de projets', data: domaineCounts, backgroundColor: couleursOrange }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            datalabels: { anchor:'end', align:'top', color:'#000', font:{ weight:'bold', size:14 }, formatter:v => v }
        },
        scales: {
            y: { beginAtZero:true, title:{ display:true, text:'Nombre de projets' }, ticks:{ precision:0, stepSize:1 } },
            x: {
                ticks:{ autoSkip:false, maxRotation:100, minRotation:30, callback: function(value){ return this.getLabelForValue(value); } }
            }
        }
    }
});

document.getElementById('btnVoirRapport').addEventListener('click', function() {
    const projetId = document.getElementById('projetId').value;
    if(!projetId) return alert("Veuillez sélectionner un projet.");
    fetch(`/rapports/projet/${projetId}/`)
        .then(resp => { if(!resp.ok) throw new Error("Projet non trouvé"); return resp.text(); })
        .then(html => { document.getElementById('contenuRapportProjet').innerHTML = html; })
        .catch(err => { document.getElementById('contenuRapportProjet').innerHTML = "<p class='text-danger'>Erreur lors du chargement.</p>"; console.error(err); });
});