// components/MapComponent.js
import React, { useEffect, useRef, useState, useCallback } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";

import "leaflet-contextmenu";
import * as config from "../config/config.js";
import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
import DataSheet from "./DataSheet.js";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";

import AddPoiModalWindow from "./pois/AddPoiModalWindow.js";

import { InformationCircleIcon } from "@heroicons/react/20/solid";
import PoiUpdateModal from "./pois/PoiUpdateModal.js";

import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import plusRoundIcon from "./PlusRoundIcon.js";
import { createAndSetDevices } from "../utils/createAndSetDevices.js";
import { restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js";
import { fetchPoiData, fetchUserRights } from "../services/apiService.js";
import { APP_VERSION } from "../config/appVersion";
import * as layers from "../config/layers.js";
import { initializeMap } from "../utils/initializeMap.js";
import { addItemsToMapContextMenu } from "./useMapContextMenu.js";
import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook
import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js";
import useBereicheMarkersLayer from "../hooks/layers/useBereicheMarkersLayer.js";
import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js";
import { setupPolylines } from "../utils/setupPolylines.js";
import { setupPOIs } from "../utils/setupPOIs.js";
import VersionInfoModal from "./VersionInfoModal.js";
import useDrawLines from "../hooks/layers/useDrawLines";
import useFetchPoiData from "../hooks/useFetchPoiData";
import usePoiTypData from "../hooks/usePoiTypData";
import useLayerVisibility from "../hooks/useLayerVisibility";
import useLineData from "../hooks/useLineData.js";

//import { useCreateAndSetDevices } from "../hooks/useCreateAndSetDevices";
import { useMapComponentState } from "../hooks/useMapComponentState";
import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines";
import { updateLocation } from "../utils/updateBereichUtil";
import { initGeocoderFeature } from "../components/features/GeocoderFeature";
//--------------------------------------------
import { currentPoiState } from "../redux/slices/currentPoiSlice.js";
import { selectGisStationsStaticDistrict, setGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";
import { mapIdState, userIdState } from "../redux/slices/urlParameterSlice.js";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice.js";
import { selectedPoiState } from "../redux/slices/selectedPoiSlice.js";
import { poiReadFromDbTriggerAtom } from "../redux/slices/poiReadFromDbTriggerSlice";
import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice";
import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice";
import { mapLayersState } from "../redux/slices/mapLayersSlice";
import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
//import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import { incrementZoomTrigger, selectZoomTrigger } from "../redux/slices/zoomTriggerSlice.js";
import { polylineEventsDisabledState } from "../redux/slices/polylineEventsDisabledSlice";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice";
//--------------------------------------------
import { useSelector, useDispatch } from "react-redux";
import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
import { selectMapId, selectUserId, setMapId, setUserId } from "../redux/slices/urlParameterSlice";
import { setSelectedPoi } from "../redux/slices/selectedPoiSlice";

const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  const dispatch = useDispatch();
  const currentPoi = useSelector(selectCurrentPoi);
  //const setCurrentPoi = useSetRecoilState(currentPoiState);
  const polylineVisible = useRecoilValue(polylineLayerVisibleState);
  const [editMode, setEditMode] = useState(false); // editMode Zustand
  const { deviceName, setDeviceName } = useMapComponentState();
  const { poiTypData, isPoiTypLoaded } = usePoiTypData("/api/talas_v5_DB/poiTyp/readPoiTyp");
  //const [deviceName, setDeviceName] = useState("");
  const [locationDeviceData, setLocationDeviceData] = useState([]);
  const [priorityConfig, setPriorityConfig] = useState([]);
  const [menuItemAdded, setMenuItemAdded] = useState(false);
  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
  const [isRightsLoaded, setIsRightsLoaded] = useState(false);
  const [hasRights, setHasRights] = useState(false);
  //const [mapId, setMapId] = useRecoilState(mapIdState);
  //const [userId, setUserId] = useRecoilState(userIdState);
  const mapId = useSelector(selectMapId);
  const userId = useSelector(selectUserId);
  const [AddPoiModalWindowState, setAddPoiModalWindowState] = useState(false);
  const [userRights, setUserRights] = useState(null);
  //const setSelectedPoi = useSetRecoilState(selectedPoiState);
  dispatch(setSelectedPoi(poiData));
  const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
  const [currentPoiData, setCurrentPoiData] = useState(null);

  const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
  const zoomTrigger = useSelector(selectZoomTrigger);
  const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
  const [poiTypMap, setPoiTypMap] = useState(new Map());
  const [showPopup, setShowPopup] = useState(false);
  const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
  const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
  const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
  const [map, setMap] = useState(null); // Zustand der Karteninstanz
  const [oms, setOms] = useState(null); // State für OMS-Instanz
  //const [GisStationsStaticDistrict, setGisStationsStaticDistrict] = useRecoilState(gisStationsStaticDistrictState);
  const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
  const [GisStationsStatusDistrict, setGisStationsStatusDistrict] = useState([]); // Zustand für Statusdaten
  const [GisStationsMeasurements, setGisStationsMeasurements] = useState([]); // Zustand für Messdaten
  const [GisSystemStatic, setGisSystemStatic] = useRecoilState(gisSystemStaticState); // Zustand für Systemdaten
  // Konstanten für die URLs
  const mapGisStationsStaticDistrictUrl = config.mapGisStationsStaticDistrictUrl;
  const mapGisStationsStatusDistrictUrl = config.mapGisStationsStatusDistrictUrl;
  const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
  const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
  const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;
  //console.log("priorityConfig in MapComponent1: ", priorityConfig);

  const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11 alle sind untetschiedlich Nummern
  const [talasMarkers, setTalasMarkers] = useState([]);
  const [eciMarkers, setEciMarkers] = useState([]);
  const [gsmModemMarkers, setGsmModemMarkers] = useState([]);
  const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]);
  const [wagoMarkers, setWagoMarkers] = useState([]);
  const [siemensMarkers, setSiemensMarkers] = useState([]);
  const [otdrMarkers, setOtdrMarkers] = useState([]);
  const [wdmMarkers, setWdmMarkers] = useState([]);
  const [messstellenMarkers, setMessstellenMarkers] = useState([]);
  const [talasiclMarkers, setTalasiclMarkers] = useState([]);
  const [dauzMarkers, setDauzMarkers] = useState([]);
  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
  const [ulafMarkers, setUlafMarkers] = useState([]);
  const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
  const [tkComponentsMarkers, setTkComponentsMarkers] = useState([]);

  //const [lteModemMarkers, setLteModemMarkers] = useState([]);

  const [lineStatusData, setLineStatusData] = useState([]);
  const [linesData, setLinesData] = useState([]);
  const mapLayersVisibility = useRecoilValue(mapLayersState);
  const selectedArea = useRecoilValue(selectedAreaState);
  const poiData = useFetchPoiData("/api/talas_v5_DB/pois/poi-icons");
  const [linePositions, setLinePositions] = useState([]);
  const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData);
  const [polylines, setPolylines] = useState([]);
  const [markers, setMarkers] = useState([]);
  const closePopup = () => setShowPopup(false);
  const [newPoint, setNewPoint] = useState(null);
  const [newCoords, setNewCoords] = useState(null);
  const [tempMarker, setTempMarker] = useState(null);

  const [popupCoordinates, setPopupCoordinates] = useState({
    lat: 52.52,
    lng: 13.405,
  });

  const handleAddStation = (stationData) => {
    setAddPoiModalWindowState(false);
    closePopup(); // Schließt das Popup nach dem Hinzufügen
  };

  const openVersionInfoModal = () => {
    setShowVersionInfoModal(true);
  };

  const closeVersionInfoModal = () => {
    setShowVersionInfoModal(false);
  };

  const [currentZoom, setCurrentZoom] = useState(() => {
    const storedZoom = localStorage.getItem("mapZoom");
    return storedZoom ? parseInt(storedZoom, 10) : 12;
  });

  const [currentCenter, setCurrentCenter] = useState(() => {
    const storedCenter = localStorage.getItem("mapCenter");
    try {
      return storedCenter ? JSON.parse(storedCenter) : [53.111111, 8.4625];
    } catch (e) {
      console.error("Error parsing stored map center:", e);
      return [53.111111, 8.4625];
    }
  });
  const [polylineEventsDisabled, setPolylineEventsDisabled] = useRecoilState(polylineEventsDisabledState); // Recoil State

  //---------------------------------------------------------------############################################

  // Zustand aktualisieren
  useEffect(() => {
    const params = new URL(window.location.href).searchParams;

    const mapId = params.get("m");
    const userId = params.get("u");

    if (!mapId || !userId) {
      alert("Fehlende URL-Parameter: 'm' und 'u' sind erforderlich."); // Fehlermeldung anzeigen
      console.error("Fehlende Parameter: 'm' und/oder 'u'");
      return; // Abbrechen, wenn Parameter fehlen
    }

    // Werte setzen
    dispatch(setMapId(mapId));
    dispatch(setUserId(userId));
  }, [dispatch]);

  //---------------------------------------------------------------
  // Benutzerrechte abrufen und setzen
  useFetchUserRights(setUserRights, setIsRightsLoaded, setHasRights);

  //---------------------------------------------------------------

  useGmaMarkersLayer(
    map,
    gmaMarkers,
    GisStationsMeasurements,
    layers.MAP_LAYERS.GMA,
    oms,
    mapLayersVisibility.GMA // Übergebe die Sichtbarkeitsbedingung als Parameter
  );
  //---------------------------------------------------------------
  /*   useSmsfunkmodemMarkersLayer(
    map,
    oms,
    GisSystemStatic,
    priorityConfig,
    mapLayersVisibility.SMSFunkmodem // Sichtbarkeitsstatus aus dem State
  ); */
  //---------------------------------------------------------------
  useFetchWebServiceMap(
    dispatch,
    mapGisStationsStaticDistrictUrl,
    mapGisStationsStatusDistrictUrl,
    mapGisStationsMeasurementsUrl,
    mapGisSystemStaticUrl,
    setGisStationsStatusDistrict,
    setGisStationsMeasurements,
    setGisSystemStatic,
    setGisSystemStaticLoaded
  );

  //--------------------------------------------------------
  useDrawLines(setLinePositions); // Linien auf die Karte zeichnen
  //--------------------------------------------
  // POIs Popup Informationen anzeigen
  useEffect(() => {
    const fetchPoiTypData = async () => {
      try {
        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
        const data = await response.json();
        const map = new Map();
        data.forEach((item) => map.set(item.idPoiTyp, item.name));
        setPoiTypMap(map);
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp-Daten-1:", error);
      }
    };
    const fetchPoiData = async () => {
      try {
        const response = await fetch("/api/talas_v5_DB/pois/poi-icons");
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        const data = await response.json();
      } catch (error) {
        console.error("Fehler beim Abrufen der poiData-2:", error);
      }
    };

    fetchPoiTypData();
    fetchPoiData();
  }, []);
  //--------------------------------------------

  /*   useEffect(() => {
    if (map) {
      const dbLayer = new L.LayerGroup().addTo(map); // Define dbLayer here

      return () => {
        dbLayer.remove();
      };
    }
  }, [map]); */
  //--------------------------------------------
  // POIs auf die Karte zeichnen
  useEffect(() => {
    if (map && !poiLayerRef.current) {
      poiLayerRef.current = new L.LayerGroup().addTo(map);
    }

    return () => {
      if (map && poiLayerRef.current) {
        map.removeLayer(poiLayerRef.current);
        poiLayerRef.current = new L.LayerGroup().addTo(map);
      }
      locations.forEach((location) => {});
    };
    //console.log("trigger in MapComponent.js:", poiReadTrigger);
  }, [map, locations, poiReadTrigger]);

  //--------------------------------------------
  // POIs auf die Karte zeichnen
  useEffect(() => {
    if (poiData.length === 0) return;

    setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData, deviceName);
  }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]);

  //---------------------------------------------
  //console.log("priorityConfig in MapComponent2: ", priorityConfig);
  useEffect(() => {
    if (gisSystemStaticLoaded && map) {
    }
  }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);

  //useCreateAndSetDevices(1, talasMarkers, GisSystemStatic, priorityConfig);

  useLayerVisibility(map, talasMarkers, mapLayersVisibility, "TALAS", oms);
  useLayerVisibility(map, eciMarkers, mapLayersVisibility, "ECI", oms);
  useLayerVisibility(map, gsmModemMarkers, mapLayersVisibility, "GSMModem", oms);
  useLayerVisibility(map, ciscoRouterMarkers, mapLayersVisibility, "CiscoRouter", oms);
  //useLayerVisibility(map, lteModemMarkers, mapLayersVisibility, "LTEModem", oms);

  useLayerVisibility(map, wagoMarkers, mapLayersVisibility, "WAGO", oms);
  useLayerVisibility(map, siemensMarkers, mapLayersVisibility, "Siemens", oms);
  useLayerVisibility(map, otdrMarkers, mapLayersVisibility, "OTDR", oms);
  useLayerVisibility(map, wdmMarkers, mapLayersVisibility, "WDM", oms);
  useLayerVisibility(map, gmaMarkers, mapLayersVisibility, "GMA", oms);
  useLayerVisibility(map, sonstigeMarkers, mapLayersVisibility, "Sonstige", oms);
  useLayerVisibility(map, tkComponentsMarkers, mapLayersVisibility, "TKKomponenten", oms);
  useLayerVisibility(map, talasiclMarkers, mapLayersVisibility, "TALASICL", oms);
  useLayerVisibility(map, dauzMarkers, mapLayersVisibility, "DAUZ", oms);
  useLayerVisibility(map, smsfunkmodemMarkers, mapLayersVisibility, "SMSModem", oms);
  useLayerVisibility(map, messstellenMarkers, mapLayersVisibility, "Messstellen", oms);
  useLayerVisibility(map, ulafMarkers, mapLayersVisibility, "ULAF", oms);

  useEffect(() => {
    if (map) {
      var x = 51.41321407879154;
      var y = 7.739617925303934;
      var zoom = 7;

      if (map && map.flyTo) {
        map.flyTo([x, y], zoom);
      } else {
        console.error("Map object is not ready or does not have flyTo method");
      }
    }
  }, [map, zoomTrigger]);
  //--------------------------------------------
  const allMarkers = [
    ...talasMarkers,
    ...eciMarkers,
    ...gsmModemMarkers,
    ...ciscoRouterMarkers,
    ...wagoMarkers,
    ...siemensMarkers,
    ...otdrMarkers,
    ...wdmMarkers,
    ...gmaMarkers,
    ...messstellenMarkers,
    ...talasiclMarkers,
    ...dauzMarkers,
    ...smsfunkmodemMarkers,
    ...sonstigeMarkers,
    ...tkComponentsMarkers,
    ...ulafMarkers,
  ];

  useEffect(() => {
    if (map) {
      // Sammle alle Marker in einer einzigen Liste

      const editMode = localStorage.getItem("editMode") === "true"; // EditMode prüfen
      const visibility = mapLayersVisibility || {}; // Sichtbarkeitsstatus aus Recoil

      allMarkers.forEach((marker) => {
        const layerKey = marker.options?.layerKey; // Layer-Key aus den Marker-Optionen
        const isVisible = visibility[layerKey]; // Sichtbarkeitsstatus prüfen

        if (!layerKey || isVisible === undefined) return;

        if (editMode || !isVisible) {
          // Entferne Marker, wenn EditMode aktiv ist oder Layer unsichtbar
          if (map.hasLayer(marker)) map.removeLayer(marker);
        } else {
          // Füge Marker hinzu, wenn EditMode deaktiviert ist und Layer sichtbar
          if (!map.hasLayer(marker)) marker.addTo(map);
        }
      });

      // Überprüfe überlappende Marker und füge das "Plus"-Icon hinzu
      checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
    }
  }, [
    map,
    talasMarkers,
    eciMarkers,
    gsmModemMarkers,
    ciscoRouterMarkers,
    wagoMarkers,
    siemensMarkers,
    otdrMarkers,
    wdmMarkers,
    gmaMarkers,
    messstellenMarkers,
    talasiclMarkers,
    dauzMarkers,
    smsfunkmodemMarkers,
    sonstigeMarkers,
    tkComponentsMarkers,
    ulafMarkers,
    mapLayersVisibility,
  ]);

  //--------------------------------------------
  useFetchLineStatusData(webserviceGisLinesStatusUrl, setLineStatusData, setLinesData);
  //--------------------------------------------

  usePolylineTooltipLayer(map, markers, polylines, setMarkers, setPolylines, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, polylineVisible, newPoint, newCoords);
  //--------------------------------------------

  useEffect(() => {
    if (map) {
      restoreMapSettings(map);
    }
  }, [map]);

  useEffect(() => {
    if (map) {
      const handleMapMoveEnd = (event) => {
        const newCenter = map.getCenter();
        const newZoom = map.getZoom();

        setCurrentCenter([newCenter.lat, newCenter.lng]);
        setCurrentZoom(newZoom);

        localStorage.setItem("mapCenter", JSON.stringify([newCenter.lat, newCenter.lng]));
        localStorage.setItem("mapZoom", newZoom);
      };

      map.on("moveend", handleMapMoveEnd);
      map.on("zoomend", handleMapMoveEnd);

      return () => {
        map.off("moveend", handleMapMoveEnd);
        map.off("zoomend", handleMapMoveEnd);
      };
    }
  }, [map]);
  //--------------------------------------------

  useEffect(() => {
    if (selectedArea && map) {
      const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
      if (station) {
        map.flyTo([station.X, station.Y], 14);
      }
    }
  }, [selectedArea, map, GisStationsStaticDistrict]);

  useEffect(() => {
    if (zoomTrigger && map) {
      map.flyTo([51.41321407879154, 7.739617925303934], 7);
    }
  }, [zoomTrigger, map]);

  useEffect(() => {
    if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded && isRightsLoaded) {
      addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates);
    }
  }, [map, poiLayerRef, isPoiTypLoaded, menuItemAdded, hasRights, isRightsLoaded]);
  //--------------------------------------------
  // rote Marker ganz oben wenn überlappen sind
  useFetchPriorityConfig(setPriorityConfig);
  //--------------------------------------------
  useEffect(() => {
    if (mapRef.current && !map) {
      initializeMap(mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled);
    }
  }, [mapRef, map, hasRights, setPolylineEventsDisabled]);

  useEffect(() => {
    if (map) {
      if (polylineEventsDisabled) {
        disablePolylineEvents(window.polylines);
      } else {
        enablePolylineEvents(window.polylines, window.lineColors);
      }
    }
  }, [map, polylineEventsDisabled]);
  useEffect(() => {
    if (map) {
      console.log("6- Karteninstanz (map) wurde jetzt erfolgreich initialisiert");

      // Setze die Karteninstanz in den Recoil-Atom
    }
  }, [map]);
  //--------------------------------------------
  useEffect(() => {
    const initializeContextMenu = () => {
      if (map) {
        map.whenReady(() => {
          setTimeout(() => {
            if (map.contextmenu) {
              //console.log("Contextmenu ist vorhanden");
            } else {
              console.warn("Contextmenu ist nicht verfügbar.");
            }
          }, 500);
        });
      }
    };

    initializeContextMenu();
  }, [map]);
  //--------------------------------------------
  //Tooltip Werte aktualisieren
  useUpdateGmaData(map, setGisStationsMeasurements, mapGisStationsMeasurementsUrl, gmaMarkers, layers, oms);

  //---------------------------------

  const gmaLayerRef = useRef(null);
  const talasLayerRef = useRef(null);
  const eciMarkersLayerRef = useRef(null);
  const gsmModemMarkersLayerRef = useRef(null);
  const ciscoRouterMarkersLayerRef = useRef(null);
  const wagoMarkersLayerRef = useRef(null);
  const siemensMarkersLayerRef = useRef(null);
  const otdrMarkersLayerRef = useRef(null);
  const wdmMarkersLayerRef = useRef(null);
  const messstellenMarkersLayerRef = useRef(null);
  const talasiclMarkersLayerRef = useRef(null);
  const dauzMarkersLayerRef = useRef(null);
  const smsfunkmodemMarkersLayerRef = useRef(null);
  const ulafMarkersLayerRef = useRef(null);
  const sonstigeMarkersLayerRef = useRef(null);
  const tkComponentsMarkersRef = useRef(null);
  useEffect(() => {
    if (!gisSystemStaticLoaded || !map) return; // Sicherstellen, dass die Karte und Daten geladen sind

    const layerGroups = [
      { ref: gmaLayerRef, id: 11, setState: setGmaMarkers },
      { ref: talasLayerRef, id: 1, setState: setTalasMarkers },
      { ref: eciMarkersLayerRef, id: 2, setState: setEciMarkers },
      { ref: gsmModemMarkersLayerRef, id: 5, setState: setGsmModemMarkers },
      { ref: ciscoRouterMarkersLayerRef, id: 6, setState: setCiscoRouterMarkers },
      { ref: wagoMarkersLayerRef, id: 7, setState: setWagoMarkers },
      { ref: siemensMarkersLayerRef, id: 8, setState: setSiemensMarkers },
      { ref: otdrMarkersLayerRef, id: 9, setState: setOtdrMarkers },
      { ref: wdmMarkersLayerRef, id: 10, setState: setWdmMarkers },
      { ref: messstellenMarkersLayerRef, id: 13, setState: setMessstellenMarkers },
      { ref: talasiclMarkersLayerRef, id: 100, setState: setTalasiclMarkers },
      { ref: dauzMarkersLayerRef, id: 110, setState: setDauzMarkers },
      { ref: smsfunkmodemMarkersLayerRef, id: 111, setState: setSmsfunkmodemMarkers },
      { ref: ulafMarkersLayerRef, id: 0, setState: setUlafMarkers },
      { ref: sonstigeMarkersLayerRef, id: 200, setState: setSonstigeMarkers },
      { ref: tkComponentsMarkersRef, id: 30, setState: setTkComponentsMarkers },
    ];

    // Initialisiere LayerGroups nur einmal
    layerGroups.forEach(({ ref }) => {
      if (!ref.current) {
        ref.current = new L.LayerGroup().addTo(map);
      }
    });
    //--------------------------------------------

    //--------------------------------------------

    const updateMarkers = ({ ref, id, setState }) => {
      if (ref.current) {
        ref.current.clearLayers(); // Entferne alte Marker
      }

      // Erstelle und füge neue Marker hinzu
      createAndSetDevices(
        id,
        (newMarkers) => {
          setState(newMarkers); // Zustand aktualisieren
          newMarkers.forEach((marker) => ref.current.addLayer(marker)); // Marker zur LayerGroup hinzufügen

          // Überprüfe auf überlappende Marker und füge das Plus-Icon hinzu
          checkOverlappingMarkers(map, newMarkers, plusRoundIcon);
        },
        GisSystemStatic,
        priorityConfig
      );
    };

    // Aktualisiere alle Marker-Gruppen
    const updateAllMarkers = () => {
      layerGroups.forEach(updateMarkers);
    };

    // Initiales Update
    updateAllMarkers();

    // Setze ein Intervall für regelmäßige Updates
    /*     const intervalId = setInterval(() => {
      updateAllMarkers();
    }, 60000); // 20 Sekunden

    // Aufräumen bei Komponentenentladung
    return () => {
      clearInterval(intervalId); // Entferne Intervall

      // LayerGroups leeren
      layerGroups.forEach(({ ref }) => {
        if (ref.current) {
          ref.current.clearLayers();
        }
      });
    }; */
  }, [gisSystemStaticLoaded, map, GisSystemStatic, priorityConfig]);

  //---------------------------------------
  // Initialisiere Leaflet-Karte
  // Rufe useBereicheMarkersLayer direkt auf
  //const [bereichUrl, setBereichUrl] = useState(null);
  const urlParams = new URLSearchParams(window.location.search); // URL-Parameter parsen
  const mValue = urlParams.get("m"); // Wert von "m" holen
  const hostname = window.location.hostname; // Dynamischer Hostname
  const port = 3000; // Definiere den gewünschten Port
  const bereichUrl = `http://${hostname}:${port}/api/talas_v5_DB/bereich/readBereich?m=${mValue}`; // Dynamischer Hostname und Port

  // Bereichs-Marker basierend auf dynamischer URL laden
  const handleLocationUpdate = async (idLocation, idMap, newCoords) => {
    try {
      const result = await updateLocation(idLocation, idMap, newCoords); // Update-API
      console.log("Koordinaten erfolgreich aktualisiert:", result);
    } catch (error) {
      console.error("Fehler beim Aktualisieren der Location:", error);
    }
  };

  // Bereichs-Marker basierend auf dynamischer URL laden
  const bereicheMarkers = useBereicheMarkersLayer(map, oms, bereichUrl, handleLocationUpdate);
  //const bereicheMarkers = useBereicheMarkersLayer(map, oms, editMode ? `/api/talas_v5_DB/bereich/readBereich?editMode=true` : `/api/talas_v5_DB/bereich/readBereich`);
  //const bereicheMarkers = useBereicheMarkersLayer(map, oms, "/api/talas_v5_DB/bereich/readBereich?m=12");

  /*   useEffect(() => {
    if (map && oms) {
      // Wenn zusätzliche Initialisierung nötig ist, führe sie hier aus.
      console.log("Bereiche-Markierungen geladen:", bereicheMarkers);
    }
  }, [map, oms, bereicheMarkers]); */
  useEffect(() => {
    const editMode = localStorage.getItem("editMode") === "true";

    bereicheMarkers.forEach((marker) => {
      if (editMode) {
        marker.dragging.enable();
        marker.setZIndexOffset(1000); // Marker nach oben setzen
      } else {
        marker.dragging.disable();
        marker.setZIndexOffset(0); // Standard-Z-Index
      }
    });
  }, [bereicheMarkers]);

  //----------------------------------
  useEffect(() => {
    const handleVisibilityChange = () => {
      // Erneut die Marker-Überprüfung auslösen
      checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
    };

    window.addEventListener("visibilityChanged", handleVisibilityChange);

    return () => {
      window.removeEventListener("visibilityChanged", handleVisibilityChange);
    };
  }, [map, allMarkers]);

  //---------------------------------------
  useEffect(() => {
    if (map) {
      initGeocoderFeature(map); // Geocoder-Feature initialisieren
    }
  }, [map]);
  //--------------------------------------------

  return (
    <>
      <ToastContainer />
      <div>{showPoiUpdateModal && <PoiUpdateModal onClose={() => setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}</div>

      <div>
        {showPopup && (
          <div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={closePopup}>
            <div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
              <button onClick={closePopup} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
              <AddPoiModalWindow onClose={closePopup} onSubmit={handleAddStation} latlng={popupCoordinates} />
            </div>
          </div>
        )}
      </div>

      <DataSheet className="z-50" />

      <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>

      <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
        <div className="flex justify-between items-center">
          <div>
            <span className="text-black text-lg font-semibold"> TALAS.Map </span>
            <br />
            <span className="text-black text-lg">Version {APP_VERSION}</span>
          </div>
          <div>
            <button onClick={openVersionInfoModal}>
              <InformationCircleIcon className="text-blue-900 h-8 w-8 pr-1" title="Weitere Infos" />
            </button>
          </div>
        </div>
      </div>
      <VersionInfoModal showVersionInfoModal={showVersionInfoModal} closeVersionInfoModal={closeVersionInfoModal} APP_VERSION={APP_VERSION} />
    </>
  );
};

export default MapComponent;