/* global Chart */

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 alertes = document.querySelector('.widget.alertes');

function setupHover(widget, colorNormal, colorHover) {
    widget.addEventListener('mouseenter', () => {
        widget.style.backgroundColor = colorHover;
    });
    widget.addEventListener('mouseleave', () => {
        widget.style.backgroundColor = colorNormal;
    });
}

setupHover(climat, '#ADD8E6', '#87CEEB');
setupHover(securite, '#D3D3D3', '#C0C0C0');
setupHover(energie, '#FFFACD', '#FAFAD2');
setupHover(lumiere, '#F5F5DC', '#FFF8DC');

function showAlert(widget) {
    widget.classList.add('alert');
}

showAlert(climat);
alertes.style.display = 'block';

let monGraphique = null;
const canvasTemp = document.getElementById('graph-temp');

function creerGraphique(labels, valeurs) {
    if (!canvasTemp) return;
    const ctx = canvasTemp.getContext('2d');

    monGraphique = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Température',
                data: valeurs,
                borderColor: 'blue',
                backgroundColor: 'rgba(173,216,230,0.2)',
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: true }
            },
            scales: {
                x: { display: true, title: { display: true, text: 'Temps' } },
                y: { display: true, title: { display: true, text: '°C' } }
            }
        }
    });
}

async function chargerDonnees() {
    try {
        const res = await fetch('api/get_data.php');
        const data = await res.json();

        if (data.status === 'success') {
            if (data.climate) {
                document.getElementById("temperature").textContent = data.climate.temperature + " °C";
                document.getElementById("humidity").textContent = data.climate.humidity + " %";
                document.getElementById("pressure").textContent = data.climate.pressure + " hPa";
                document.getElementById("luminosity").textContent = data.climate.luminosity + " lux";
            }

            if (data.security) {
                document.getElementById("event_type").textContent = data.security.event_type;
                document.getElementById("location").textContent = data.security.location;
            }

            if (data.graph && data.graph.length > 0) {
                const labels = data.graph.map(point => {
                    const date = new Date(point.timestamp);
                    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
                });
                const temperatures = data.graph.map(point => point.temperature);

                if (monGraphique) {
                    monGraphique.data.labels = labels;
                    monGraphique.data.datasets[0].data = temperatures;
                    monGraphique.update();
                } else {
                    creerGraphique(labels, temperatures);
                }
            }
        }
    } catch (error) {
        console.error("Erreur lors du chargement de l'API :", error);
    }
}

async function init() {
    await chargerDonnees();
    setInterval(chargerDonnees, 5000);
}

init();