// components/MapComponent.js
// test für Jenkins
import React, {
  useEffect,
  useRef,
  useState,
  useMemo,
  useCallback,
  use,
} from "react";
import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";

import L, { marker } 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 * as urls from "../config/urls.js";
import dynamic from "next/dynamic";
import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
import DataSheet from "./DataSheet.js";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js";
import { gisSystemStaticState } from "../store/atoms/gisSystemState.js";
import { mapLayersState } from "../store/atoms/mapLayersState.js";
import { selectedAreaState } from "../store/atoms/selectedAreaState.js";
import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
import { poiTypState } from "../store/atoms/poiTypState.js";
import ShowAddStationPopup from "./ShowAddStationPopup.js";
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js";
import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
import PoiUpdateModal from "./PoiUpdateModal.js";
import { selectedPoiState } from "../store/atoms/poiState.js";
import { currentPoiState } from "../store/atoms/currentPoiState.js";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js";
import { set } from "lodash";
import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible.js";
import { data } from "autoprefixer";
import plusRoundIcon from "./PlusRoundIcon.js";
/* import {
  parsePoint,
  handleEditPoi,
  insertNewMarker,
  redrawPolyline,
  saveLineData,
} from "../utils/utils.js"; */
import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js";
import {
  handleEditPoi,
  insertNewMarker,
  removeMarker,
} from "../utils/markerUtils.js";
import {
  saveLineData,
  redrawPolyline,
  restoreMapSettings,
  checkOverlappingMarkers,
} from "../utils/mapUtils.js";
import circleIcon from "./CircleIcon";
import startIcon from "./StartIcon";
import endIcon from "./EndIcon";
import {
  fetchGisStatusStations,
  fetchPriorityConfig,
  fetchPoiData,
  updateLocationInDatabase,
  checkInternet,
  fetchUserRights,
  fetchDeviceNameById,
} from "../services/apiService.js";
import {
  addContextMenuToMarker,
  openInNewTab,
} from "../utils/contextMenuUtils.js";
import { MAP_VERSION } from "../config/settings";
import * as layers from "../config/layers.js";
import useMapContextMenu from "./useMapContextMenu.js";
import { openInSameWindow } from "../utils/openInSameWindow";
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js";
//---------------------------------------------------------------------
//-------------------- MapComponent -----------------------------------
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
  const [loading, setLoading] = useState(true); // Ladezustand hinzufügen
  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 [priorityConfig, setPriorityConfig] = useState([]);

  useEffect(() => {
    fetchPriorityConfig();
  }, []);

  useEffect(() => {
    console.log("Aktualisierte Prioritätskonfiguration:", priorityConfig);
  }, [priorityConfig]);
  //---------------------------------------------------------------------

  useEffect(() => {
    fetchGisStatusStations(12, 484); // Beispielaufruf mit idMap = 10 und idUser = 484
  }, []);

  //---------------------------------------------------------------------
  const [menuItemAdded, setMenuItemAdded] = useState(false);

  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);

  const [contextMenuItems, setContextMenuItems] = useState([]);
  const [isRightsLoaded, setIsRightsLoaded] = useState(false);
  const [hasRights, setHasRights] = useState(false);
  const [mapId, setMapId] = useRecoilState(mapIdState);
  const [userId, setUserId] = useRecoilState(userIdState);

  const [showAddStationPopup, setShowAddStationPopup] = useState(false);
  const [userRights, setUserRights] = useState(null);
  const setSelectedPoi = useSetRecoilState(selectedPoiState);
  const openPoiUpdateModal = () => setShowPoiUpdateModal(true);
  const closePoiUpdateModal = () => setShowPoiUpdateModal(false);
  const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
  const [currentPoiData, setCurrentPoiData] = useState(null);
  const setCurrentPoi = useSetRecoilState(currentPoiState);
  const currentPoi = useRecoilValue(currentPoiState);
  const handlePoiSelect = (poiData) => {
    setSelectedPoi(poiData); // poiData should be the data of the selected POI
    // Open the modal or any other logic
  };

  useEffect(() => {
    const params = new URL(window.location.href).searchParams;
    setMapId(params.get("m"));
    setUserId(params.get("u"));
  }, [setMapId, setUserId]);
  useEffect(() => {
    fetchUserRights().then(() => {
      setIsRightsLoaded(true);
    });
  }, []); // Lade die Berechtigungen beim Initialisieren der Komponente

  const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
  const zoomTrigger = useRecoilValue(zoomTriggerState);
  const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
  const onlineTileLayer = urls.ONLINE_TILE_LAYER; //Talas_v5 Server

  // Create map layers
  const TALAS = layers.MAP_LAYERS.TALAS;
  const ECI = layers.MAP_LAYERS.ECI;
  const ULAF = layers.MAP_LAYERS.ULAF;
  const GSMModem = layers.MAP_LAYERS.GSMModem;
  const CiscoRouter = layers.MAP_LAYERS.CiscoRouter;
  const WAGO = layers.MAP_LAYERS.WAGO;
  const Siemens = layers.MAP_LAYERS.Siemens;
  const OTDR = layers.MAP_LAYERS.OTDR;
  const WDM = layers.MAP_LAYERS.WDM;
  const GMA = layers.MAP_LAYERS.GMA;
  const Sonstige = layers.MAP_LAYERS.Sonstige;
  const TALASICL = layers.MAP_LAYERS.TALASICL;
  const lineLayer = layers.MAP_LAYERS.lineLayer;

  const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);

  const baseUrl = urls.BASE_URL; // für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame

  const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
  const [poiTypMap, setPoiTypMap] = useState(new Map());
  const [showPopup, setShowPopup] = useState(false);
  const [popupCoordinates, setPopupCoordinates] = useState({
    lat: 52.52,
    lng: 13.405,
  }); // Beispielkoordinaten
  const openPopup = () => setShowPopup(true);
  const closePopup = () => setShowPopup(false);

  const handleAddStation = (stationData) => {
    // Station-Daten speichern oder API-Aufruf durchführen
    //console.log("Neue Station:", userRights.includes(56));

    //console.log("Neue Station:", stationData);
    setShowAddStationPopup(false);
    closePopup(); // Schließt das Popup nach dem Hinzufügen
  };
  // Beispiel zum Öffnen des Popups mit bestimmten Koordinaten
  const openAddStationPopupWithCoordinates = (lat, lng) => {
    setPopupCoordinates({ lat, lng });
    setShowPopup(true);
  };

  const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
  const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden
  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 [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
  const [GisStationsStaticDistrict, setGisStationsStaticDistrict] =
    useRecoilState(gisStationsStaticDistrictState);
  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
  const [DataIcons, setDataIcons] = useState([]); // Zustand für Icon-Daten

  // Konstanten für die URLs
  const mapGisStationsStaticDistrictUrl =
    config.mapGisStationsStaticDistrictUrl;
  const mapGisStationsStatusDistrictUrl =
    config.mapGisStationsStatusDistrictUrl;
  const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
  const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
  const mapDataIconUrl = config.mapDataIconUrl;
  const webserviceGisLinesStatusUrl = config.webserviceGisLinesStatusUrl;

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

  const closeVersionInfoModal = () => {
    setShowVersionInfoModal(false);
  };
  //----------------------------------------------------
  //----------------------------------------------------
  // Kontextmenü Callback für "Reinzoomen"
  const zoomInCallback = (e, map) => {
    zoomIn(e, map);
  };

  // Kontextmenü Callback für "Rauszoomen"
  const zoomOutCallback = (map) => {
    zoomOut(map);
  };

  // Kontextmenü Callback für "Hier zentrieren"
  const centerHereCallback = (e, map) => {
    centerHere(e, map);
  };
  //----------------------------------------------------
  //-----Kontextmenu----------------
  // Funktion zum Anzeigen der Koordinaten
  const showCoordinates = (e) => {
    alert(
      "Breitengrad: " +
        e.latlng.lat.toFixed(5) +
        "\nLängengrad: " +
        e.latlng.lng.toFixed(5)
    );
  };
  const showData = (e) => {};
  const showTalas = (e) => {
    map.addLayer(TALAS);
    loadData();
  };
  const hideTalas = (e) => {
    map.removeLayer(TALAS);
    loadData();
  };
  const showGSM = (e) => {
    map.addLayer(GMA);
    loadData();
  };
  const hideGSM = (e) => {
    map.removeLayer(GMA);
    loadData();
  };

  // Kontextmenü Callback für "POI hinzufügen"
  const addStationCallback = useCallback(
    (event) => {
      //console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
      if (hasRights) {
        setPopupCoordinates(event.latlng);
        setShowPopup(true);
      } else {
        toast.error("Benutzer hat keine Berechtigung zum Hinzufügen.", {
          position: "top-center",
          autoClose: 5000,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
        });
        console.error("Benutzer hat keine Berechtigung zum Hinzufügen.");
      }
    },
    [hasRights]
  ); // Abhängigkeit zu hasRights hinzufügen

  //-----Kontextmenu----ende------------

  const addItemsToMapContextMenu = () => {
    if (!menuItemAdded) {
      map.contextmenu.addItem({
        text: "Koordinaten anzeigen",
        icon: "img/not_listed_location.png",
        callback: showCoordinates,
      });

      map.contextmenu.addItem({ separator: true }); // Divider

      map.contextmenu.addItem({
        text: "Reinzoomen",
        icon: "img/zoom_in.png",
        callback: (e) => zoomInCallback(e, map),
      });

      map.contextmenu.addItem({
        text: "Rauszoomen",
        icon: "img/zoom_out.png",
        callback: () => zoomOutCallback(map),
      });

      map.contextmenu.addItem({
        text: "Hier zentrieren",
        icon: "img/center_focus.png",
        callback: (e) => centerHereCallback(e, map),
      });

      map.contextmenu.addItem({ separator: true }); // Another Divider

      map.contextmenu.addItem({
        text: "POI hinzufügen",
        icon: "img/add_station.png",
        className: "background-red",
        callback: (event) => addStationCallback(event, hasRights),
      });

      setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
    }
  };

  //------------------------------------------ */
  const layerNames = {
    "GSM Modem": "GSMMODEM",
    "Cisco Router": "CiscoRouter",
    "TALAS ICL": "TALASICL",
    "SMS-Funkmodem": "GSMModem",
  };
  //------------------------------------------ */
  function fly(stationValue) {
    var x = 51.41321407879154;
    var y = 7.739617925303934;
    var zoom = 7;

    initMap.flyTo([x, y], zoom);
  }
  //------------------------------------------
  //------------------------------------------
  let initMap = [];
  //-----------------------------------------------------------------
  //         TALAS  Marker hinzufügen
  //-----------------------------------------------------------------
  // Reihenfolge nach API sortiert mit der Attribute "System"
  const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
  const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
  const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
  const [ciscoRouterVisible, setCiscoRouterVisible] =
    useRecoilState(mapLayersState);
  const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
  const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
  const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
  const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
  const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
  const [messstellenVisible, setMessstellenVisible] =
    useRecoilState(mapLayersState);
  const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
  const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
  const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
    useRecoilState(mapLayersState);
  const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
  const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);

  const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
  const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
  const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
  const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
  const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
  const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
  const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
  const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
  const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
  const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
  const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
  const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
  const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
  const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
  //--------------------------------------------------------------------------------
  const determinePriority = (iconPath) => {
    for (let priority of priorityConfig) {
      if (iconPath.includes(priority.name.toLowerCase())) {
        return priority.level;
      }
    }
    return 5; // Default priority (lowest)
  };

  // Daten von einer externen Quelle laden
  const createAndSetMarkers = async (systemId, setMarkersFunction) => {
    try {
      const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
      const jsonResponse = await response1.json();
      const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
      const statusResponse = await response2.json();

      const getIdSystemAndAllowValueMap = new Map(
        GisSystemStatic.map((system) => [system.IdSystem, system.Allow])
      );
      //console.log("getIdSystemAndAllowValueMap:", getIdSystemAndAllowValueMap);

      if (jsonResponse.Points && statusResponse.Statis) {
        const statisMap = new Map(
          statusResponse.Statis.map((s) => [s.IdLD, s])
        );
        let markersData = jsonResponse.Points.filter(
          (station) =>
            station.System === systemId &&
            getIdSystemAndAllowValueMap.get(station.System) === 1
        ).map((station) => {
          const statis = statisMap.get(station.IdLD);
          const iconPath = statis
            ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
            : `img/icons/marker-icon-${station.Icon}.png`;

          const priority = determinePriority(iconPath);
          const zIndexOffset = 100 * (5 - priority); // Adjusted for simplicity and positive values

          /* console.log(
              `Icon Path: ${iconPath}, Priority: ${priority}, zIndexOffset: ${zIndexOffset}`
            ); */

          const marker = L.marker([station.X, station.Y], {
            icon: L.icon({
              iconUrl: iconPath,
              iconSize: [25, 41],
              iconAnchor: [12, 41],
              popupAnchor: [1, -34],
            }),
            areaName: station.Area_Name, // Stelle sicher, dass dieser Bereich gesetzt wird
            link: station.Link,
            zIndexOffset: zIndexOffset,
            bounceOnAdd: !!statis,
          });

          if (statis) {
            marker.on("add", () => marker.bounce(3));
          }

          const statusInfo = statusResponse.Statis.filter(
            (status) => status.IdLD === station.IdLD
          )
            .reverse()
            .map(
              (status) => `
                <div class="flex items-center my-1">
                  <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
                  ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
                </div>
              `
            )
            .join("");

          marker.bindPopup(`
              <div class=" bg-white rounded-lg ">
                <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
                <span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
                <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
                <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
                <div class="mt-2">${statusInfo}</div>
              </div>
            `);
          return marker;
        });

        setMarkersFunction(markersData);
      }
    } catch (error) {
      console.error("Error fetching data: ", error);
    }
  };
  //--------------------------------------------------------------------------------

  const mapLayersVisibility = useRecoilValue(mapLayersState);

  //------------------------------------------
  //------------------------------------------ */
  const selectedArea = useRecoilValue(selectedAreaState);

  // Combine all markers into a single array
  const allMarkers = [
    ...talasMarkers,
    ...eciMarkers,
    ...gsmModemMarkers,
    ...ciscoRouterMarkers,
    ...wagoMarkers,
    ...siemensMarkers,
    ...otdrMarkers,
    ...wdmMarkers,
    ...gmaMarkers,
    ...messstellenMarkers,
    ...talasiclMarkers,
    ...dauzMarkers,
    ...smsfunkmodemMarkers,
    ...sonstigeMarkers,
    ...ulafMarkers,
  ];

  // Function to find a marker by areaName across all groups
  const findMyMarker = (areaName) => {
    return allMarkers.find((marker) => marker.options.areaName === areaName);
  };
  //--------------------------------------------------------------
  //---------------------------------------------------------
  /*   const handleMarkerClick = (markerData) => {
    // Setze die aktuellen Daten im State, um sie im Formular vorzubelegen
    setCurrentMarkerData(markerData);
    setShowEditModal(true);
  }; */
  // In der Marker-Erstellungsfunktion
  //---------------------------------------------------------
  //-----------------------------------------------------------
  // Funktion um die Benutzerrechte zu überprüfen
  // serverIP 10.10.0.13 idMap=10 idUser=485

  const url = new URL(window.location.href);
  //const hostname = url.hostname; // Gibt den Hostnamen (IP oder Domain) zurück
  //const port = url.port; // Gibt den Port zurück, leer wenn Standardport verwendet wird
  //const protocol = url.protocol; // "http:" oder "https:"

  const serverURL = urls.SERVER_URL; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) für GisSystemStatic für die Benutzerrechte

  const params = new URL(window.location.href).searchParams;

  const c = params.get("m"); // Beispielwert für idMap
  const user = params.get("u"); // Beispielwert für idUser
  //console.log("serverURL:", serverURL);
  useEffect(() => {
    //console.log("Aktualisierter Status von hasRights: ", hasRights);
  }, [hasRights]); // Dieser Effekt läuft jedes Mal, wenn sich `hasRights` ändert.

  // Überprüfen der Benutzerrechte beim Initialisieren der Komponente
  /*   useEffect(() => {
    fetchUserRights();
  }, []); */
  useEffect(() => {
    if (serverURL) {
      fetchUserRights(serverURL).then((rights) => {
        setUserRights(rights);
        setIsRightsLoaded(true);
        setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat
      });
    }
  }, [serverURL]); // Läuft, wenn serverURL sich ändert

  // Anzeigen von Modals basierend auf Benutzerrechten
  useEffect(() => {
    if (userRights !== 56) {
      setShowPoiUpdateModal(false);
      setShowAddStationPopup(false);
    }
  }, [userRights]);
  //-----------------------------------------------------------
  //---------------------------------------------------------
  useEffect(() => {
    //console.log("useEffect current Data:", currentPoiData);
  }, [currentPoiData]);
  //---------------------------------------------------------
  //------------------------------------------
  // API-Daten laden für GisStationsStaticDistrict
  //http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict?idMap=10&idUser=485
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(mapGisStationsStaticDistrictUrl);
        const jsonResponse = await response.json();

        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
        if (jsonResponse && jsonResponse.Points) {
          setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
        } else {
          console.error(
            'Erwartete Daten im "Points"-Array nicht gefunden',
            jsonResponse
          );
          setGisStationsStaticDistrict([]);
        }
      } catch (error) {
        console.error("Fehler beim Laden der Daten 1: ", error);
        setGisStationsStaticDistrict([]);
      }
    };

    fetchData();
  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen

  //GisStationsStaticDistrict Daten laden
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(mapGisStationsStaticDistrictUrl);
        const jsonResponse = await response.json();

        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
        if (jsonResponse && jsonResponse.Points) {
          setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points'
        } else {
          console.error(
            'Erwartete Daten im "Points"-Array nicht gefunden',
            jsonResponse
          );
          setGisStationsStaticDistrict([]);
        }
      } catch (error) {
        console.error("Fehler beim Laden der Daten 1: ", error);
        setGisStationsStaticDistrict([]);
      }
    };

    fetchData();
  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
  //------------------------------------------
  //GisStationsStatusDistrict Daten laden
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(mapGisStationsStatusDistrictUrl);
        const jsonResponse = await response.json();

        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
        if (jsonResponse && jsonResponse.Statis) {
          setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
        } else {
          console.error(
            'Erwartete Daten im "Statis"-Array nicht gefunden',
            jsonResponse
          );
          setGisStationsStatusDistrict([]);
        }
      } catch (error) {
        console.error("Fehler beim Laden der Daten 2: ", error);
        setGisStationsStatusDistrict([]);
      }
    };

    fetchData();
  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
  //------------------------------------------
  //GisStationsMeasurements Daten laden

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(mapGisStationsMeasurementsUrl);
        const jsonResponse = await response.json();

        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
        if (jsonResponse && jsonResponse.Statis) {
          setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis'
        } else {
          console.error(
            'Erwartete Daten im "Statis"-Array nicht gefunden',

            jsonResponse
          );
          setGisStationsMeasurements([]);
        }
      } catch (error) {
        console.error("Fehler beim Laden der Daten 3: ", error);
        setGisStationsMeasurements([]);
      }
    };

    fetchData();
  }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
  //------------------------------------------

  //GisSystemStatic Daten laden
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(mapGisSystemStaticUrl);
        const jsonResponse = await response.json();

        if (jsonResponse && jsonResponse.Systems) {
          setGisSystemStatic(jsonResponse.Systems);
          setGisSystemStaticLoaded(true); // Setze den Zustand auf geladen
        } else {
          console.error(
            'Erwartete Daten im "Systems"-Array nicht gefunden',
            jsonResponse
          );
          setGisSystemStatic([]);
        }
      } catch (error) {
        console.error("Fehler beim Laden der Daten 4: ", error);
        setGisSystemStatic([]);
      }
    };

    fetchData();
  }, []);
  //------------------------------------------

  useEffect(() => {
    if (typeof window !== "undefined") {
      //console.log("Window height from config:", config.windowHeight);
    }
  }, []);

  // Initialisierung der karte und hinzuügen der Layers
  useEffect(() => {
    if (mapRef.current && !map) {
      initMap = L.map(mapRef.current, {
        //center: [53.111111, 8.4625],
        center: currentCenter,
        //zoom: 8,
        zoom: currentZoom,
        layers: [
          TALAS,
          ECI,
          ULAF,
          GSMModem,
          CiscoRouter,
          WAGO,
          Siemens,
          OTDR,
          WDM,
          GMA,
          Sonstige,
          TALASICL,
        ],
        minZoom: 5, // Minimale Zoomstufe
        maxZoom: 15, // Maximale Zoomstufe
        zoomControl: false,
        contextmenu: true,
        contextmenuItems: [
          {
            text: "Station öffnen (Tab)",
            icon: "/img/screen_new.png",
            callback: (e) => {
              const clickedMarker = e.relatedTarget; // Zugriff auf den Marker, der das Event ausgelöst hat
              openInNewTab(e, clickedMarker);
            },
          },
          "-", // Divider
          /*  
          {
            text: "Koordinaten anzeigen",
            icon: "img/not_listed_location.png",
            callback: showCoordinates,
          },
          "-", // Divider
          { text: "Reinzoomen", icon: "img/zoom_in.png", callback: zoomIn },
          {
            text: "Rauszoomen",
            icon: "img/zoom_out.png",
            callback: () => zoomOutCallback(map),
          },
          {
            text: "Hier zentrieren",
            icon: "img/center_focus.png",
            callback: (e) => centerHere(e, map),
          },
          "-", // Divider */
        ],
      });

      L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(initMap);

      const overlappingMarkerSpiderfier =
        new window.OverlappingMarkerSpiderfier(initMap, {
          nearbyDistance: 20,
        });

      setMap(initMap);
      setOms(overlappingMarkerSpiderfier);

      initMap.on("zoomend", function () {
        // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
        if (initMap.getZoom() > 15) {
          initMap.setZoom(15);
        } else if (initMap.getZoom() < 5) {
          initMap.setZoom(5);
        }
      });

      // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
      initMap.whenReady(() => {
        console.log("Karte ist jetzt bereit und initialisiert.");
        // Rufe hier Funktionen auf, die eine initialisierte Karte benötigen.
      });
    }
    //console.log("trigger in MapComponent.js:", poiReadTrigger);
  }, [mapRef, map, poiReadTrigger, contextMenuItems]); // Prüfe die Abhängigkeiten sorgfältig

  /*   const zoomIn = (e) => {
    initMap.flyTo(e.latlng, 12);
    //console.log("ZoomIn koordinaten in MapComponent", e.latlng);
  };

  const zoomOut = (e) => {
    fly();
  };
  const centerHere = (e) => {
    initMap.panTo(e.latlng);
  }; */

  /*   useEffect(() => {
    if (map) {
      map.on("contextmenu", (e) => {
        const contextMenuItems = [
          {
            text: "Reinzoomen",
            icon: "img/zoom_in.png",
            callback: (e) => zoomIn(e, map),
          },
          {
            text: "Rauszoomen",
            icon: "img/zoom_out.png",
            callback: () => zoomOut(map),
          },
          {
            text: "Hier zentrieren",
            icon: "img/center_focus.png",
            callback: (e) => centerHere(e, map),
          },
          "-",
        ];
        L.DomEvent.stopPropagation(e);
        const contextMenu = L.popup()
          .setLatLng(e.latlng)
          .setContent(
            '<div class="leaflet-popup-content-wrapper leaflet-popup-content"><div class="leaflet-popup-content" style="max-width: 300px;">' +
              contextMenuItems
                .map(
                  (item) =>
                    `<a href="#" onclick="(${item.callback.toString()})()">${item.text}</a>`
                )
                .join("<br>") +
              "</div></div>"
          )
          .openOn(map);
      });
    }
  }, [map]); */

  //          poiTyp Daten hinzufügen
  //------------------------------------------
  // Funktion zum Abrufen der poiTyp Daten

  useEffect(() => {
    const fetchPoiTypData = async () => {
      try {
        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
        const data = await response.json();
        setPoiTypData(data); // Daten im Recoil State speichern
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
      }
    };
    /*    console.log(
      "trigger in MapComponent.js in fetchPoiTypData:",
      poiReadTrigger
    ); */
    fetchPoiTypData();
  }, []);

  // Effekt zum Loggen der poiTypData, wenn sie sich ändern
  useEffect(() => {
    //console.log("poiTypData aktualisiert:", poiTypData);
  }, [poiTypData]);

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

  // Funktion, um die name und idPoiTyp von `poiTyp` MySQL DB Tabelle in einer Map zu speichern
  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);
        setIsPoiTypLoaded(true); // Daten wurden erfolgreich geladen
        //console.log("poiTypMap:", map);
        const poiTypName = poiTypMap.get(0) || "Unbekannt";
        //console.log("poiTypName:", poiTypName);
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp-Daten:", error);
      }
    };

    fetchPoiTypData();
  }, []);
  //------------------------------------------
  let dbLayer = null;
  useEffect(() => {
    if (map) {
      // Schicht für Datenbank-Marker, sicherstellen, dass map nicht null ist
      dbLayer = new L.LayerGroup().addTo(map);

      // Fügen Sie Ihre Marker hier innerhalb dieser useEffect hinzu, da map nicht null ist

      return () => {
        // Bereinigung, entfernt dbLayer, wenn die Komponente unmountet
        dbLayer.remove();
      };
    }
  }, [map]);

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

  useEffect(() => {
    // Initialisierung der dbLayer, wenn die Karte verfügbar ist
    if (map && !poiLayerRef.current) {
      poiLayerRef.current = new L.LayerGroup().addTo(map);
    }

    return () => {
      if (map && poiLayerRef.current) {
        // Entfernen der dbLayer bei Unmount
        map.removeLayer(poiLayerRef.current);
        poiLayerRef.current = new L.LayerGroup().addTo(map);
      }
      locations.forEach((location) => {
        // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren
      });
    };
    //console.log("trigger in MapComponent.js:", poiReadTrigger);
  }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
  //------------------------------------------
  function editPoi(marker) {
    // Zugriff auf die Markerdaten
    const markerId = marker.options.id;
    //console.log("Bearbeiten des POI mit ID:", markerId);

    // Hier könnte ein Modal mit Formular geöffnet werden
    // Beispiel: openEditModal(markerId);
  }

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

  /*   const addItemsToMapContextMenu = () => {
    if (!menuItemAdded) {
      //console.log("contextMenuItems hasRights:", hasRights);

      map.contextmenu.addItem({
        text: "POI hinzufügen",
        icon: "img/add_station.png",
        className: "background-red",
        callback: (event) => addStationCallback(event, hasRights),
      });

      setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
    }
  }; */

  useEffect(() => {
    if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {
      addItemsToMapContextMenu();
    }
  }, [
    map,
    poiLayerRef,
    isPoiTypLoaded,
    menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
  ]);
  //------------------------------------------

  //          poiLayerRef(poiDbLayer)  POI   hinzufügen
  //--------------------------------------------
  const [poiData, setPoiData] = useState([]);

  useEffect(() => {
    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();
        setPoiData(data);
        //console.log("poiData data:", data);
        //console.log("poiData icons:", poiData);
      } catch (error) {
        console.error("Fehler beim Abrufen der poiData:", error);
      }
    };

    fetchPoiData();
  }, []);
  //--------------------------------------------
  useEffect(() => {
    if (poiData.length === 0) return;

    try {
      if (map && poiLayerRef.current && isPoiTypLoaded) {
        map.removeLayer(poiLayerRef.current);
        poiLayerRef.current = new L.LayerGroup().addTo(map);

        locations.forEach(async (location) => {
          try {
            const { latitude, longitude } = parsePoint(location.position);
            const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
            const deviceName = await fetchDeviceNameById(location.idLD);
            //console.log("deviceName:", deviceName); // Das ist in  Modal POI hinzufügen

            const canDrag = userRights ? userRights.includes(56) : false;
            const matchingIcon = poiData.find(
              (poi) => poi.idPoi === location.idPoi
            );
            const iconUrl = matchingIcon
              ? `/img/icons/pois/${matchingIcon.path}`
              : "/img/icons/pois/default-icon.png";

            const marker = L.marker([latitude, longitude], {
              icon: L.icon({
                iconUrl: iconUrl,
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
              }),
              draggable: canDrag,
              id: location.idPoi,
            }).bindContextMenu({
              contextmenu: true,
              contextmenuWidth: 140,
              contextmenuItems: [
                {
                  text: "POI Bearbeiten",
                  icon: "/img/poi-edit.png",
                  callback: () => handleEditPoi(marker),
                },
              ],
            });

            marker.bindPopup(`
              <div>
                <b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
                ${deviceName}<br>
                ${poiTypName}<br>
              </div>
            `);

            marker.on("mouseover", function () {
              this.openPopup();
              handlePoiSelect({
                id: location.idPoi,
                deviceId: location.idLD,
                typ: poiTypName,
                description: location.description,
              });
              setCurrentPoi(location);
            });

            marker.on("mouseout", function () {
              this.closePopup();
            });

            marker.on("dragend", (e) => {
              if (canDrag) {
                const newLat = e.target.getLatLng().lat;
                const newLng = e.target.getLatLng().lng;
                const markerId = e.target.options.id;
                updateLocationInDatabase(markerId, newLat, newLng).then(() => {
                  onLocationUpdate(markerId, newLat, newLng);
                });
              } else {
                console.error("Drag operation not allowed");
              }
            });

            if (poiLayerVisible) {
              marker.addTo(poiLayerRef.current);
            }
          } catch (innerError) {
            console.error("Error processing a location:", innerError);
          }
        });
      }
    } catch (error) {
      console.error("Error in useEffect:", error);
    }
  }, [
    map,
    locations,
    onLocationUpdate,
    poiReadTrigger,
    isPoiTypLoaded,
    userRights,
    poiLayerVisible,
    poiData, // Add poiData as a dependency
  ]);

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

  //-------------------------------------------------------------------------------
  useEffect(() => {
    if (gisSystemStaticLoaded && map) {
      createAndSetMarkers(1, setTalasMarkers); // TALAS-System
      createAndSetMarkers(2, setEciMarkers); // ECI-System
      createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
      createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
      createAndSetMarkers(7, setWagoMarkers); // WAGO-System
      createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
      createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
      createAndSetMarkers(10, setWdmMarkers); // WDM-System
      createAndSetMarkers(11, setGmaMarkers); // GMA-System
      createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
      createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
      createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
      createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
      createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
      createAndSetMarkers(0, setUlafMarkers); // ULAF-System
    }
  }, [gisSystemStaticLoaded, map]);
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && talasMarkers.length) {
      talasMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });

        addContextMenuToMarker(marker);
      });
      map.addLayer(TALAS);
      //console.log("map", map);
      //console.log("oms", oms);
      //disable map contextmenu
      map.options.contextmenu = false;
      map.options.contextmenuItems = [];

      oms.map.options.contextmenu = false;
      oms.map.options.contextmenuItems = [];

      // Call the function here
      checkOverlappingMarkers(oms, map, plusRoundIcon);
    }
  }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && eciMarkers.length) {
      eciMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(ECI);
    }
  }, [map, eciMarkers]);

  //console.log("eciMarkers", eciMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && gsmModemMarkers.length) {
      gsmModemMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(GSMModem);
    }
  }, [map, gsmModemMarkers]);

  //console.log("gsmModemMarkers", gsmModemMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && ciscoRouterMarkers.length) {
      ciscoRouterMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(CiscoRouter);
    }
  }, [map, ciscoRouterMarkers]);

  //console.log("ciscoRouterMarkers", ciscoRouterMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && wagoMarkers.length) {
      wagoMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(WAGO);

      //toggleLayer(mapLayersVisibility.WAGO);
    }
    // }, [map, wagoMarkers, mapLayersVisibility.WAGO]);
  }, [map, wagoMarkers]);
  //console.log("wagoMarkers", wagoMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && siemensMarkers.length) {
      siemensMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(Siemens);
    }
  }, [map, siemensMarkers]);

  //console.log("siemensMarkers", siemensMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && otdrMarkers.length) {
      otdrMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(OTDR);
    }
  }, [map, otdrMarkers]);

  //console.log("otdrMarkers", otdrMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && wdmMarkers.length) {
      wdmMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(WDM);
    }
  }, [map, wdmMarkers]);

  //console.log("wdmMarkers", wdmMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && gmaMarkers.length) {
      // Filtern des Arrays um nur "GMA" Messungen zu erhalten
      const gmaMeasurements = GisStationsMeasurements.filter(
        (m) => m.Gr === "GMA"
      );
      let area_name = "";
      let measurements = {};

      gmaMeasurements.forEach((m) => {
        //console.log(`Messung: ${m.Area_Name}, Na: ${m.Na}, Wert: ${m.Val}`);
        area_name = m.Area_Name; // Dies überschreibt area_name mit dem letzten Area_Name im Array
        measurements[m.Na] = m.Val; // Speichert den Wert von Val unter dem Code Na in einem Objekt
      });

      // Zugriff auf die Werte über die Codes
      let measurementLT = measurements["LT"];
      let measurementFTP = measurements["FTP"];
      let measurementGT = measurements["GT"];
      let measurementRLF = measurements["RLF"];

      gmaMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Tooltip beim Überfahren mit der Maus anzeigen
        marker.bindTooltip(
          `
            <div class="p-0 rounded-lg bg-white bg-opacity-90">
              <div class="font-bold text-sm text-black">
                <span>${area_name}</span> 
              </div>
              <div class="font-bold text-xxs text-blue-700">
                <span>LT : ${measurements.LT} °C</span> 
              </div>
              <div class="font-bold text-xxs text-red-700">
                <span>FBT : ${measurements.FBT} °C</span> 
              </div>
              <div class="font-bold text-xxs text-yellow-500">
                <span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span> 
              </div>
              <div class="font-bold text-xxs text-green-700">
                <span>RLF : ${measurements.RLF} %</span> 
              </div>
            </div>
          `,
          {
            permanent: true, // Tooltip wird ständig angezeigt
            direction: "auto", // Automatische Ausrichtung
            offset: [20, 0], // Offset-Werte
          }
        );

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(GMA);
    }
  }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken

  //console.log("gmaMarkers", gmaMarkers);

  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && messstellenMarkers.length) {
      messstellenMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(GMA);
    }
  }, [map, messstellenMarkers]);

  //console.log("messstellenMarkers", messstellenMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && talasiclMarkers.length) {
      talasiclMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(TALASICL);
    }
  }, [map, talasiclMarkers]);

  //console.log("talasiclMarkers", talasiclMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && dauzMarkers.length) {
      dauzMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
    }
  }, [map, dauzMarkers]);

  //console.log("dauzMarkers", dauzMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && smsfunkmodemMarkers.length) {
      smsfunkmodemMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
    }
  }, [map, smsfunkmodemMarkers]);

  //console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && ulafMarkers.length) {
      ulafMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
    }
  }, [map, ulafMarkers]);

  //console.log("ulafMarkers", ulafMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
    if (map && sonstigeMarkers.length) {
      sonstigeMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
    }
  }, [map, sonstigeMarkers]);

  //console.log("sonstige", sonstigeMarkers);
  //-------------------------------------------

  // Funktion zum Ein- und Ausblenden der TALAS-Marker basierend auf dem Zustand von mapLayersVisibility.TALAS

  useEffect(() => {
    if (!map || !talasMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };

    // Apply visibility state to the TALAS layer
    toggleLayer(mapLayersVisibility.TALAS);
  }, [map, talasMarkers, mapLayersVisibility.TALAS]);

  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der ECI-Marker basierend auf dem Zustand von mapLayersVisibility.ECI

  useEffect(() => {
    if (!map || !eciMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        eciMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        eciMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility state to the ECI layer
    toggleLayer(mapLayersVisibility.ECI);
  }, [map, eciMarkers, mapLayersVisibility.ECI]);

  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der ULAF-Marker basierend auf dem Zustand von mapLayersVisibility.ULAF

  useEffect(() => {
    if (!map || !ulafMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        ulafMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        ulafMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.ULAF);
  }, [map, ulafMarkers, mapLayersVisibility.ULAF]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der GSMModem-Marker basierend auf dem Zustand von mapLayersVisibility.GSMModem

  useEffect(() => {
    if (!map || !gsmModemMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        gsmModemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        gsmModemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.GSMModem);
  }, [map, gsmModemMarkers, mapLayersVisibility.GSMModem]);

  //------------------------------------------ */

  // Funktion zum Ein- und Ausblenden der CiscoRouter-Marker basierend auf dem Zustand von mapLayersVisibility.CiscoRouter

  useEffect(() => {
    if (!map || !ciscoRouterMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        ciscoRouterMarkers.forEach((marker) => marker.addTo(map));
      } else {
        ciscoRouterMarkers.forEach((marker) => map.removeLayer(marker));
      }
    };
    // Nutzt die Map, um den internen Namen zu bekommen
    const internalName = layerNames["Cisco Router"] || "CiscoRouter";
    toggleLayer(mapLayersVisibility[internalName]);
    //console.log("internalName Cisco Router: ", internalName);
  }, [map, ciscoRouterMarkers, mapLayersVisibility]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der WAGO-Marker basierend auf dem Zustand von mapLayersVisibility.WAGO

  useEffect(() => {
    if (!map || !wagoMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        wagoMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        wagoMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.WAGO);
  }, [map, wagoMarkers, mapLayersVisibility.WAGO]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der Siemens-Marker basierend auf dem Zustand von mapLayersVisibility.Siemens

  useEffect(() => {
    if (!map || !siemensMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        siemensMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        siemensMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.Siemens);
  }, [map, siemensMarkers, mapLayersVisibility.Siemens]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der OTDR-Marker basierend auf dem Zustand von mapLayersVisibility.OTDR

  useEffect(() => {
    if (!map || !otdrMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        otdrMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        otdrMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.OTDR);
  }, [map, otdrMarkers, mapLayersVisibility.OTDR]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der WDM-Marker basierend auf dem Zustand von mapLayersVisibility.WDM

  useEffect(() => {
    if (!map || !wdmMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        wdmMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        wdmMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.WDM);
  }, [map, wdmMarkers, mapLayersVisibility.WDM]);

  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der GMA-Marker basierend auf dem Zustand von mapLayersVisibility.GMA

  useEffect(() => {
    if (!map || !gmaMarkers) return;

    const toggleLayer = (isVisible) => {
      if (isVisible) {
        gmaMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        gmaMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };

    // Apply visibility
    toggleLayer(mapLayersVisibility.GMA);
  }, [map, gmaMarkers, mapLayersVisibility.GMA]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der Sonstige-Marker basierend auf dem Zustand von mapLayersVisibility.Sonstige

  useEffect(() => {
    if (!map || !sonstigeMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        sonstigeMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        sonstigeMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.Sonstige);
  }, [map, sonstigeMarkers, mapLayersVisibility.Sonstige]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der TALASICL-Marker basierend auf dem Zustand von mapLayersVisibility.TALASICL

  useEffect(() => {
    if (!map || !talasiclMarkers) return;
    //console.log("talasiclMarkers", talasiclMarkers);
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        talasiclMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        talasiclMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };

    // Verwendung der Map, um den internen Namen zu bekommen, und Fallback auf "TALASICL", falls nicht gefunden
    const internalName =
      layerNames["TALAS ICL"] || "TALASICL || talasiclMarkers ";
    toggleLayer(mapLayersVisibility[internalName]);
    //console.log("internalName for TALAS ICL in MapComponent: ", internalName);
  }, [map, talasiclMarkers, mapLayersVisibility]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der DAUZ-Marker basierend auf dem Zustand von mapLayersVisibility.DAUZ

  useEffect(() => {
    if (!map || !dauzMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        dauzMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        dauzMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.DAUZ);
  }, [map, dauzMarkers, mapLayersVisibility.DAUZ]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der SMSFunkmodem-Marker basierend auf dem Zustand von mapLayersVisibility.SMSFunkmodem

  useEffect(() => {
    if (!map || !smsfunkmodemMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        smsfunkmodemMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        smsfunkmodemMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.SMSFunkmodem);
  }, [map, smsfunkmodemMarkers, mapLayersVisibility.SMSFunkmodem]);

  //------------------------------------------ */
  //------------------------------------------ */
  // Funktion zum Ein- und Ausblenden der Messstellen-Marker basierend auf dem Zustand von mapLayersVisibility.Messstellen

  useEffect(() => {
    if (!map || !messstellenMarkers) return;
    const toggleLayer = (isVisible) => {
      if (isVisible) {
        messstellenMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
      } else {
        messstellenMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
      }
    };
    // Apply visibility
    toggleLayer(mapLayersVisibility.Messstellen);
  }, [map, messstellenMarkers, mapLayersVisibility.Messstellen]);

  //------------------------------------------ */

  // Effect to handle navigation to selected area
  /*   useEffect(() => {
    if (selectedArea && map) {
      const marker = findMyMarker(selectedArea);
      if (marker) {
        map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
      }
    }
  }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies */

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

  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");
      } // Ihre bereits existierende Funktion, die Zoom-Out ausführt
    }
  }, [map, zoomTrigger]);

  //---------------------------------------------------------
  useEffect(() => {
    if (map) {
      // Combine all markers from different layers
      const allMarkers = [
        ...talasMarkers,
        ...eciMarkers,
        ...gsmModemMarkers,
        ...ciscoRouterMarkers,
        ...wagoMarkers,
        ...siemensMarkers,
        ...otdrMarkers,
        ...wdmMarkers,
        ...gmaMarkers,
        ...messstellenMarkers,
        ...talasiclMarkers,
        ...dauzMarkers,
        ...smsfunkmodemMarkers,
        ...sonstigeMarkers,
        ...ulafMarkers,
      ];

      // Call the function to check for overlaps and add plus icons
      checkOverlappingMarkers(map, allMarkers, plusRoundIcon);
    }
  }, [
    map,
    talasMarkers,
    eciMarkers,
    gsmModemMarkers,
    ciscoRouterMarkers,
    wagoMarkers,
    siemensMarkers,
    otdrMarkers,
    wdmMarkers,
    gmaMarkers,
    messstellenMarkers,
    talasiclMarkers,
    dauzMarkers,
    smsfunkmodemMarkers,
    sonstigeMarkers,
    ulafMarkers,
  ]);
  //---------------------------------------------------------
  //LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
  const [linePositions, setLinePositions] = useState([]);
  // ------------Linien zeichnen----------------
  useEffect(() => {
    const endpoint = "/api/talas_v5_DB/gisLines/readGisLines";
    fetch(endpoint)
      .then((response) => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then((data) => {
        const newLinePositions = data.map((item) => {
          if (item.points && Array.isArray(item.points)) {
            return {
              coordinates: item.points.map((point) => [point.x, point.y]),
              idModul: item.idModul,
              idLD: item.idLD,
            };
          } else {
            throw new Error("Points missing or not an array");
          }
        });
        setLinePositions(newLinePositions);
      })
      .catch((error) => {
        console.error("Error fetching data:", error.message);
      });
  }, []);
  //--------------------------- Linien färben ------------------------------
  const [lineColors, setLineColors] = useState({});
  const [tooltipContents, setTooltipContents] = useState({});
  const [polylines, setPolylines] = useState([]);
  const [markers, setMarkers] = useState([]);

  // API-Aufruf, um Farben der Linien abzurufen

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response1 = await fetch(webserviceGisLinesStatusUrl);
        const data1 = await response1.json();
        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
        const data2 = await response2.json();

        const colorsByModule = {};
        const newTooltipContents = {};

        data1.Statis.forEach((stat) => {
          const matchingLine = data2.find(
            (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
          );
          if (matchingLine) {
            colorsByModule[matchingLine.idModul] = stat.PrioColor;
            newTooltipContents[matchingLine.idModul] = `
            <div class="bg-white rounded-lg m-0 p-2 w-[210px]">
                <span class="text-lg font-semibold text-gray-900">${stat.ModulName || "Unknown"}</span>
                <br>
                <span class="text-md font-bold text-gray-800">${stat.ModulTyp || "N/A"}</span>
                <br>
                <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
                    <span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${stat.PrioColor || "#000000"};"></span>
                    <span class="inline-block text-gray-800">${stat.Message || "N/A"}</span>
                </div>
                <span class="text-gray-800" style="color: ${stat.PrioColor || "#000000"};">(${stat.PrioName || "N/A"})</span>
                <br>
            </div>
            `;
          }
        });

        setLineColors(colorsByModule);
        setTooltipContents(newTooltipContents);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  // Überwachen des lineColors Zustandes
  useEffect(() => {
    //console.log("Aktualisierte lineColors", lineColors);
  }, [lineColors]);

  //---------------------------------------------------------
  //----------------------- Update lines----------------------------------
  const [lineStatusData, setLineStatusData] = useState([]);
  const [linesData, setLinesData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response1 = await fetch(webserviceGisLinesStatusUrl);
        const data1 = await response1.json();
        setLineStatusData(data1.Statis);

        const response2 = await fetch("/api/talas_v5_DB/gisLines/readGisLines");
        const data2 = await response2.json();

        const colorsByModule = {};
        data1.Statis.forEach((stat) => {
          const matchingLine = data2.find(
            (item) => item.idLD === stat.IdLD && item.idModul === stat.Modul
          );
          if (matchingLine) {
            colorsByModule[matchingLine.idModul] = stat.PrioColor;
            console.log("Übereinstimmung gefunden für: ", stat);
            setLinesData(matchingLine);
          }
        });

        setLineColors(colorsByModule);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };
    fetchData();
  }, []);
  //---------------------------------------------------------
  useEffect(() => {
    console.log("lineStatusData", lineStatusData);
    console.log("lineData:", linesData);
  }, [lineStatusData, linesData]);
  //---------------------------------------------------------
  const [newPoint, setNewPoint] = useState(null);
  const [newCoords, setNewCoords] = useState(null);
  const [tempMarker, setTempMarker] = useState(null);

  useEffect(() => {
    if (!map) return;

    // Entfernen alter Marker und Polylines
    markers.forEach((marker) => marker.remove());
    polylines.forEach((polyline) => polyline.remove());

    const newMarkers = [];
    const newPolylines = [];

    linePositions.forEach((lineData, lineIndex) => {
      const lineMarkers = [];
      lineData.coordinates.forEach((coord, index) => {
        let icon = circleIcon; // Standard-Icon für mittlere Punkte
        if (index === 0) {
          icon = startIcon; // Start-Icon für den ersten Punkt
        } else if (index === lineData.coordinates.length - 1) {
          icon = endIcon; // End-Icon für den letzten Punkt
        }

        const marker = L.marker(coord, {
          icon: icon,
          draggable: true,
          contextmenu: true,
          contextmenuInheritItems: false,
          contextmenuItems: [], // Starte mit einem leeren Menü
        }).addTo(map);

        marker.on("dragend", () => {
          const newCoords = marker.getLatLng();
          setNewCoords(newCoords); // Aktualisieren Sie den Zustand
          const newCoordinates = [...lineData.coordinates];
          newCoordinates[index] = [newCoords.lat, newCoords.lng];

          const updatedPolyline = L.polyline(newCoordinates, {
            color: lineColors[lineData.idModul] || "#000000",
          }).addTo(map);

          updatedPolyline.bindTooltip(
            tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
            {
              permanent: false,
              direction: "auto",
            }
          );

          updatedPolyline.on("mouseover", () => {
            updatedPolyline.setStyle({ weight: 10 });
            updatedPolyline.bringToFront();
          });
          updatedPolyline.on("mouseout", () => {
            updatedPolyline.setStyle({ weight: 3 });
            console.log("Mouse out");
          });

          newPolylines[lineIndex].remove();
          newPolylines[lineIndex] = updatedPolyline;
          lineData.coordinates = newCoordinates;

          const requestData = {
            idModul: lineData.idModul,
            idLD: lineData.idLD,
            newCoordinates,
          };

          console.log("Sending to API:", requestData);
          // API-Aufruf, um die neuen Koordinaten zu speichern
          fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(requestData),
          })
            .then((response) => {
              if (!response.ok) {
                return response.json().then((data) => {
                  throw new Error(data.error || "Unbekannter Fehler");
                });
              }
              return response.json();
            })
            .then((data) => {
              console.log("Koordinaten erfolgreich aktualisiert:", data);
            })
            .catch((error) => {
              console.error(
                "Fehler beim Aktualisieren der Koordinaten:",
                error.message
              );
            });
        });

        // Füge die Option zum Entfernen nur hinzu, wenn der Benutzer mit der Maus über dem Marker ist
        marker.on("mouseover", function () {
          this.bindContextMenu({
            contextmenuItems: [
              {
                text: "Marker entfernen",
                callback: () => {
                  const newCoords = marker.getLatLng();
                  const newCoordinates = [...lineData.coordinates];
                  newCoordinates[index] = [newCoords.lat, newCoords.lng];

                  removeMarker(marker, lineData, currentZoom, currentCenter);
                  newPolylines[lineIndex].remove();
                  lineData.coordinates = newCoordinates;
                },
              },
            ],
          });
        });

        // Entferne die Option, wenn der Benutzer den Mausbereich des Markers verlässt
        marker.on("mouseout", function () {
          this.unbindContextMenu();
        });

        lineMarkers.push(marker);
      });

      const polyline = L.polyline(lineData.coordinates, {
        color: lineColors[lineData.idModul] || "#000000",
        contextmenu: true,
        contextmenuItems: [
          {
            text: "Marker hier hinzufügen",
            callback: (e) => {
              if (tempMarker) {
                tempMarker.remove(); // Entfernen des Platzhalter-Icons
              }
              //------------
              const newPoint = e.latlng;
              setNewPoint(newPoint); // Aktualisieren Sie den Zustand
              const closestPoints = findClosestPoints(
                lineData.coordinates,
                newPoint
              );
              insertNewMarker(closestPoints, newPoint, lineData, map);
              redrawPolyline(lineData);
              //Browser aktualisieren
              window.location.reload();
            },
          },
        ],
      }).addTo(map);

      polyline.on("mouseover", (e) => {
        // Optional: Visualisiere, dass die Linie interaktiv ist
        //polyline.setStyle({ color: "blue", weight: 10 });
        polyline.setStyle({ weight: 10 });
      });

      polyline.on("mouseout", (e) => {
        //polyline.setStyle({ color: "blue", weight: 3 });
        polyline.setStyle({ weight: 3 });

        // Setze die ursprüngliche Farbe zurück
        polyline.setStyle({ color: lineColors[lineData.idModul] || "#000000" });
      });

      polyline.bindTooltip(
        tooltipContents[lineData.idModul] || "Standard-Tooltip-Inhalt",
        {
          permanent: false,
          direction: "auto",
        }
      );

      newPolylines.push(polyline);
      newMarkers.push(...lineMarkers);
    });

    setMarkers(newMarkers);
    setPolylines(newPolylines);
  }, [
    map,
    linePositions,
    lineColors,
    tooltipContents,
    newPoint,
    newCoords,
    tempMarker,
  ]);

  //---------------------------------------------------------
  //-------------------------Funktionen--------------------------------

  // Call restoreMapSettings when the map is initialized
  useEffect(() => {
    if (map) {
      restoreMapSettings(map);
    }
  }, [map]);

  function findClosestPoints(coordinates, newPoint) {
    let minDist = Infinity;
    let closestPair = [];
    for (let i = 1; i < coordinates.length; i++) {
      const dist = L.LineUtil.pointToSegmentDistance(
        map.latLngToLayerPoint(newPoint),
        map.latLngToLayerPoint(coordinates[i - 1]),
        map.latLngToLayerPoint(coordinates[i])
      );
      if (dist < minDist) {
        minDist = dist;
        closestPair = [coordinates[i - 1], coordinates[i], i];
      }
    }
    return closestPair;
  }
  //---------------------------------------------------------
  useEffect(() => {
    if (map) {
      const handleMapMoveEnd = (event) => {
        const newCenter = map.getCenter();
        const newZoom = map.getZoom();

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

        // Save to localStorage
        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]);

  //------------------------------------------ */hier ist das Bug

  // Effect to handle navigation to selected area
  /*   useEffect(() => {
    if (selectedArea && map) {
      const marker = findMyMarker(selectedArea);
      if (marker) {
        map.flyTo(marker.getLatLng(), 14); // Adjust zoom level as needed
      }
    }
  }, [selectedArea, map, allMarkers]); // Include allMarkers in the dependencies */

  //------------------------------------------
  //--------------------------------------------------------- Kein Bug
  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]);
  //---------------------------------------------------------
  //---------------------------------------------------------zoomen in kontextmenü

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

  return (
    <>
      <ToastContainer />
      <div>
        {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
        {showPoiUpdateModal && (
          <div
            className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
            onClick={closePoiUpdateModal} // Schließt das Popup bei einem Klick außerhalb
          >
            <div
              className="relative bg-white p-6 rounded-lg shadow-lg"
              onClick={(e) => e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
            >
              {/* Schließen-Button oben rechts */}
              <button
                onClick={closePoiUpdateModal}
                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>

              {/* Formular-Komponente zum Hinzufügen einer Station */}
              <PoiUpdateModal
                onClose={() => setShowPoiUpdateModal(false)}
                poiData={currentPoiData}
                onSubmit={handleAddStation}
                latlng={popupCoordinates}
              />
            </div>
          </div>
        )}
      </div>

      {/* Rest of your component */}
      <div>
        {/* Zeigt das Popup-Fenster nur, wenn `showPopup` wahr ist */}
        {showPopup && (
          <div
            className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
            onClick={closePopup} // Schließt das Popup bei einem Klick außerhalb
          >
            <div
              className="relative bg-white p-6 rounded-lg shadow-lg"
              onClick={(e) => e.stopPropagation()} // Verhindert das Schließen innerhalb des Fensters
            >
              {/* Schließen-Button oben rechts */}
              <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>

              {/* Formular-Komponente zum Hinzufügen einer Station */}
              <ShowAddStationPopup
                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 {MAP_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>
      {showVersionInfoModal && (
        <div className="fixed inset-0 flex items-center justify-center z-50">
          <div
            className="fixed inset-0 bg-black bg-opacity-50"
            onClick={closeVersionInfoModal}
          ></div>
          <div className="bg-white p-6 rounded-lg shadow-lg z-60 max-w-lg mx-auto">
            <img
              src="img/Logo_TALAS.png"
              alt="TALAS V5 Logo"
              className="w-1/2 mx-auto my-4"
            />
            <div className="bg-white border p-6 rounded-lg shadow-lg z-60 max-w-lg mx-auto">
              <h2 className="text-xl font-bold mb-6 text-start leading-tight">
                Littwin Systemtechnik GmbH & Co. KG
              </h2>
              <h4 className="text-lg font-bold mb-2 text-start leading-tight">
                Bürgermeister-Brötje Str. 28
              </h4>
              <h4 className="text-lg font-bold mb-2 text-start leading-tight">
                D-26180 Rastede
              </h4>
              <h5 className="text-md mb-2 text-start leading-snug">
                T: +49 4402 9725 77-0
              </h5>
              <h5 className="text-md mb-2 text-start leading-snug">
                E: kontakt@littwin-systemtechnik.de
              </h5>
            </div>
            <p className="text-gray-700 text-center font-bold mt-4 leading-relaxed">
              TALAS.Map Version {MAP_VERSION}
            </p>
            <button
              onClick={closeVersionInfoModal}
              className="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 mx-auto block"
            >
              Schließen
            </button>
          </div>
        </div>
      )}
    </>
  );
};

export default MapComponent;