// -------------------------------
// 1 - Sélection des widgets
// -------------------------------
const climat = document.querySelector('.widget.climat');
const securite = document.querySelector('.widget.securite');
const energie = document.querySelector('.widget.energie');
const lumiere = document.querySelector('.widget.lumiere');
const graphiques = document.querySelector('.widget.graphiques');
const alertes = document.querySelector('.widget.alertes');

// -------------------------------
// 2 - Hover dynamique sur les widgets
// -------------------------------
function setupHover(widget, colorNormal, colorHover) {
    widget.addEventListener('mouseenter', () => {
        widget.style.backgroundColor = colorHover;
    });
    widget.addEventListener('mouseleave', () => {
        widget.style.backgroundColor = colorNormal;
    });
}

// Appliquer le hover sur chaque widget
setupHover(climat, '#ADD8E6', '#87CEEB');
setupHover(securite, '#D3D3D3', '#C0C0C0');
setupHover(energie, '#FFFACD', '#FAFAD2');
setupHover(lumiere, '#F5F5DC', '#FFF8DC');

// -------------------------------
// 3 - Simulation d'alerte visuelle
// -------------------------------
function showAlert(widget) {
    widget.classList.add('alert'); // contour rouge
}

function hideAlert(widget) {
    widget.classList.remove('alert'); // retire le contour rouge
}

// Exemple : activer l'alerte sur climat
showAlert(climat);

// Le bloc Alertes reste visible
alertes.style.display = 'block';

// -------------------------------
// 4 - Préparer la zone graphique vide
// -------------------------------
const canvasTemp = document.getElementById('graph-temp');
if (canvasTemp) {
    const ctx = canvasTemp.getContext('2d');
    const myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [],   // vide pour l'instant
            datasets: [{
                label: 'Température',
                data: [],   // vide pour l'instant
                borderColor: 'blue',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                x: { display: false },
                y: { display: false }
            }
        }
    });
}

// -------------------------------
// 5 - Fonction de mise à jour future
// -------------------------------
function majWidget(widget, valeur) {
    // futur code pour mettre à jour le widget avec de vraies données
    // exemple : climat.querySelector('p').innerText = "Température : " + valeur + "°C";
}