import { useEffect, useState } from "react";
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import Chart from 'chart.js/auto';

function App() {
  const [data, setData] = useState({
    geoData: [{ latitude: 45.4, longitude: -71.9, name: "Position 1" }], // Sherbrooke, Québec par défaut
    statsData: { labels: [], datasets: [] },
    alerts: []
  });

  useEffect(() => {
    // Simulation de données en temps réel (à remplacer par une connexion réelle)
    const interval = setInterval(() => {
      setData(prevData => ({
        ...prevData,
        geoData: prevData.geoData.map(point => ({
          ...point,
          latitude: point.latitude + (Math.random() - 0.5) * 0.1, // Mouvement aléatoire sur la carte
          longitude: point.longitude + (Math.random() - 0.5) * 0.1
        })),
        statsData: {
          labels: ["Red", "Blue", "Green"],
          datasets: [{
            label: 'Dataset 1',
            data: [Math.random() * 100, Math.random() * 100, Math.random() * 100],
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
          }]
        },
        alerts: [...prevData.alerts, `Alerte ${Math.floor(Math.random() * 100)}`] 
      }));
    }, 2000); // Mettre à jour les données toutes les 2 secondes

    return () => clearInterval(interval);
  }, []);

  function updateMap(geoData) {
    return (
      <MapContainer center={[45.4, -71.9]} zoom={5} style={{ height: '400px' }}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {geoData.map(point => (
          <Marker key={point.name} position={[point.latitude, point.longitude]}>
            <Popup>
              {point.name}
            </Popup>
          </Marker>
        ))}
      </MapContainer>
    );
  }

  useEffect(() => {
    if (data.statsData.datasets.length > 0) {
      const ctx = document.getElementById('myChart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: data.statsData,
      });
    }
  }, [data.statsData]);

  function updateAlerts(alerts) {
    return (
      <div>
        <h3>Alertes:</h3>
        <ul>
          {alerts.map((alert, index) => (
            <li key={index}>{alert}</li>
          ))}
        </ul>
      </div>
    );
  }

  return (
    <div>
      <h1>Tableau de Bord Démonstrateur</h1>
      {updateMap(data.geoData)}
      <canvas id="myChart"></canvas>
      {updateAlerts(data.alerts)}
    </div>
  );
}

export default App;