document.addEventListener('DOMContentLoaded', function () {
    fetch('data.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            const devices = {};

            data.forEach(entry => {
                const mac = entry.device.mac;
                if (!devices[mac]) {
                    devices[mac] = {
                        temperatureData: [],
                        humidityData: [],
                        labels: [],
                        name: entry.device.name,
                        room: entry.device.room
                    };
                }
                devices[mac].labels.push(new Date(entry.data.timestamp));
                devices[mac].temperatureData.push(entry.data.temperature);
                devices[mac].humidityData.push(entry.data.humidity);
            });

            const chartsContainer = document.getElementById('chartsContainer');

            Object.keys(devices).forEach(mac => {
                const device = devices[mac];

                const chartContainer = document.createElement('div');
                chartContainer.className = 'chart-container';

                const canvas = document.createElement('canvas');
                canvas.id = `chart-${mac}`;

                const title = document.createElement('h3');
                title.textContent = `Device ${device.name} in ${device.room}`;

                chartContainer.appendChild(title);
                chartContainer.appendChild(canvas);
                chartsContainer.appendChild(chartContainer);

                const ctx = canvas.getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: device.labels,
                        datasets: [
                            {
                                label: 'Temperatur (°C)',
                                data: device.temperatureData,
                                borderColor: 'rgba(255, 99, 132, 1)',
                                backgroundColor: 'rgba(255, 99, 132, 0.2)',
                                borderWidth: 1,
                                yAxisID: 'y1'
                            },
                            {
                                label: 'Luftfeuchtigkeit (%)',
                                data: device.humidityData,
                                borderColor: 'rgba(54, 162, 235, 1)',
                                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                                borderWidth: 1,
                                yAxisID: 'y2'
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            x: {
                                type: 'time',
                                time: {
                                    unit: 'minute',
                                    tooltipFormat: 'll HH:mm'
                                }
                            },
                            y1: {
                                type: 'linear',
                                position: 'left',
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Temperatur (°C)'
                                }
                            },
                            y2: {
                                type: 'linear',
                                position: 'right',
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: 'Luftfeuchtigkeit (%)'
                                },
                                grid: {
                                    drawOnChartArea: false
                                }
                            }
                        }
                    }
                });
            });
        })
        .catch(error => console.error('Error loading JSON data:', error));
});