// components/MapComponent.js

import React, { useEffect, useRef, useState, useCallback } from "react";
import { MapContainer, TileLayer, LayerGroup } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import "leaflet-contextmenu";
import dynamic from "next/dynamic";
import "leaflet.smooth_marker_bouncing";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import PoiUpdateModal from "./PoiUpdateModal";
import ShowAddStationPopup from "./ShowAddStationPopup";
import DataSheet from "./DataSheet";
import {
  fetchGisStatusStations,
  fetchPriorityConfig,
  fetchPoiData,
  updateLocationInDatabase,
  checkInternet,
  fetchUserRights,
  fetchDeviceNameById,
} from "../services/apiService";
import {
  selectedPoiState,
  currentPoiState,
  poiTypState,
  poiReadFromDbTriggerAtom,
  gisStationsStaticDistrictState,
  gisSystemStaticState,
  mapLayersState,
  selectedAreaState,
  zoomTriggerState,
  mapIdState,
  userIdState,
  poiLayerVisibleState,
} from "../store/atoms";
import { parsePoint, findClosestPoints } from "../utils/geometryUtils";
import {
  insertNewMarker,
  removeMarker,
} from "../utils/markerUtils";
import {
  saveLineData,
  redrawPolyline,
  restoreMapSettings,
  checkOverlappingMarkers,
} from "../utils/mapUtils";
import {
  addContextMenuToMarker,
  openInNewTab,
} from "../utils/contextMenuUtils";
import { MAP_VERSION } from "../config/settings";
import * as layers from "../config/layers";
import { urls, config } from "../config";
import circleIcon from "./CircleIcon";
import startIcon from "./StartIcon";
import endIcon from "./EndIcon";
import useMapContextMenu from "./useMapContextMenu";
import { openInSameWindow } from "../utils/openInSameWindow";
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils";
import plusRoundIcon from "./PlusRoundIcon";

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);
      console.log("Benutzerrechte in useEffect in MapComponent:", userRights);
    });
  }, [urls.SERVER_URL]); // 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) => {
    setShowAddStationPopup(false);
    closePopup(); // Schließt das Popup nach dem Hinzufügen
  };

  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

  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);
  };

  const zoomInCallback = (e, map) => {
    zoomIn(e, map);
  };

  const zoomOutCallback = (map) => {
    zoomOut(map);
  };

  const centerHereCallback = (e, map) => {
    centerHere(e, map);
  };

  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();
  };

  const addStationCallback = useCallback(
    (event) => {
      console.log(
        "Überprüfung der Berechtigung in addStationCallback: ",
        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]
  );

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

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

      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 });

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

      setMenuItemAdded(true);
    }
  };

  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 = [];

  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([]);
  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 [gmaMarkers, setGmaMarkers] = useState([]);
  const [messstellenMarkers, setMessstellenMarkers] = useState([]);
  const [talasiclMarkers, setTalasiclMarkers] = useState([]);
  const [dauzMarkers, setDauzMarkers] = useState([]);
  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);
  const [sonstigeMarkers, setSonstigeMarkers] = useState([]);
  const [ulafMarkers, setUlafMarkers] = useState([]);

  const determinePriority = (iconPath) => {
    for (let priority of priorityConfig) {
      if (iconPath.includes(priority.name.toLowerCase())) {
        return priority.level;
      }
    }
    return 5;
  };

  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])
      );

      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);

          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,
            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 handleEditPoi = (marker) => {
    if (!userRights || !userRights.includes(56)) {
      toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
        position: "top-center",
        autoClose: 5000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      });
      console.log("Benutzer hat keine Berechtigung zum Bearbeiten.");
      return;
    }

    console.log("Selected Marker Description:", marker.options.description);
    console.log("Selected Marker :", marker);

    setCurrentPoiData({
      idPoi: marker.options.id,
      name: marker.options.name,
      description: marker.options.description,
    });

    fetchPoiData(marker.options.id);

    setShowPoiUpdateModal(true);
  };

  const selectedArea = useRecoilValue(selectedAreaState);

  const allMarkers = [
    ...talasMarkers,
    ...eciMarkers,
    ...gsmModemMarkers,
    ...ciscoRouterMarkers,
    ...wagoMarkers,
    ...siemensMarkers,
    ...otdrMarkers,
    ...wdmMarkers,
    ...gmaMarkers,
    ...messstellenMarkers,
    ...talasiclMarkers,
    ...dauzMarkers,
    ...smsfunkmodemMarkers,
    ...sonstigeMarkers,
    ...ulafMarkers,
  ];

  const findMyMarker = (areaName) => {
    return allMarkers.find((marker) => marker.options.areaName === areaName);
  };

  useEffect(() => {
    const params = new URL(window.location.href).searchParams;
    setMapId(params.get("m"));
    setUserId(params.get("u"));
  }, [setMapId, setUserId]);

  useEffect(() => {
    fetchUserRights().then(() => {
      setIsRightsLoaded(true);
      console.log("Benutzerrechte in useEffect in MapComponent:", userRights);
    });
  }, [urls.SERVER_URL]);

  const url = new URL(window.location.href);
  const serverURL = urls.SERVER_URL;

  useEffect(() => {
    if (userRights !== 56) {
      setShowPoiUpdateModal(false);
      setShowAddStationPopup(false);
    }
  }, [userRights]);

  useEffect(() => {
    console.log("useEffect current Data:", currentPoiData);
  }, [currentPoiData]);

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

        if (jsonResponse && jsonResponse.Points) {
          setGisStationsStaticDistrict(jsonResponse.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();
  }, []);

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

        if (jsonResponse && jsonResponse.Points) {
          setGisStationsStaticDistrict(jsonResponse.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();
  }, []);

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

        if (jsonResponse && jsonResponse.Statis) {
          setGisStationsStatusDistrict(jsonResponse.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();
  }, []);

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

        if (jsonResponse && jsonResponse.Statis) {
          setGisStationsMeasurements(jsonResponse.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();
  }, []);

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

        if (jsonResponse && jsonResponse.Systems) {
          setGisSystemStatic(jsonResponse.Systems);
          setGisSystemStaticLoaded(true);
        } 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);
    }
  }, []);

  useEffect(() => {
    if (mapRef.current && !map) {
      initMap = L.map(mapRef.current, {
        center: currentCenter,
        zoom: currentZoom,
        layers: [
          TALAS,
          ECI,
          ULAF,
          GSMModem,
          CiscoRouter,
          WAGO,
          Siemens,
          OTDR,
          WDM,
          GMA,
          Sonstige,
          TALASICL,
        ],
        minZoom: 5,
        maxZoom: 15,
        zoomControl: false,
        contextmenu: true,
        contextmenuItems: [
          {
            text: "Station öffnen (Tab)",
            icon: "/img/screen_new.png",
            callback: (e) => {
              const clickedMarker = e.relatedTarget;
              openInNewTab(e, clickedMarker);
            },
          },
        ],
      });

      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 () {
        if (initMap.getZoom() > 15) {
          initMap.setZoom(15);
        } else if (initMap.getZoom() < 5) {
          initMap.setZoom(5);
        }
      });

      initMap.whenReady(() => {
        console.log("Karte ist jetzt bereit und initialisiert.");
      });
    }
    console.log("trigger in MapComponent.js:", poiReadTrigger);
  }, [mapRef, map, poiReadTrigger, contextMenuItems]);

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

  useEffect(() => {
    console.log("poiTypData aktualisiert:", poiTypData);
  }, [poiTypData]);

  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);
        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) {
      dbLayer = new L.LayerGroup().addTo(map);

      return () => {
        dbLayer.remove();
      };
    }
  }, [map]);

  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]);

  function editPoi(marker) {
    const markerId = marker.options.id;
    console.log("Bearbeiten des POI mit ID:", markerId);
  }

  useEffect(() => {
    if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {
      addItemsToMapContextMenu();
    }
  }, [
    map,
    poiLayerRef,
    isPoiTypLoaded,
    menuItemAdded,
  ]);

  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);

            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,
                      userRights,
                      setCurrentPoiData,
                      setShowPoiUpdateModal,
                      fetchPoiData,
                      toast
                    ),
                },
              ],
            });

            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,
  ]);

  useEffect(() => {
    if (gisSystemStaticLoaded && map) {
      createAndSetMarkers(1, setTalasMarkers);
      createAndSetMarkers(2, setEciMarkers);
      createAndSetMarkers(5, setGsmModemMarkers);
      createAndSetMarkers(6, setCiscoRouterMarkers);
      createAndSetMarkers(7, setWagoMarkers);
      createAndSetMarkers(8, setSiemensMarkers);
      createAndSetMarkers(9, setOtdrMarkers);
      createAndSetMarkers(10, setWdmMarkers);
      createAndSetMarkers(11, setGmaMarkers);
      createAndSetMarkers(13, setMessstellenMarkers);
      createAndSetMarkers(100, setTalasiclMarkers);
      createAndSetMarkers(110, setDauzMarkers);
      createAndSetMarkers(111, setSmsfunkmodemMarkers);
      createAndSetMarkers(200, setSonstigeMarkers);
      createAndSetMarkers(0, setUlafMarkers);
    }
  }, [gisSystemStaticLoaded, map]);

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

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

        addContextMenuToMarker(marker);
      });
      map.addLayer(TALAS);

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

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

      checkOverlappingMarkers(oms, map, plusRoundIcon);
    }
  }, [map, talasMarkers]);

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

        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(ECI);
    }
  }, [map, eciMarkers]);

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

        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(GSMModem);
    }
  }, [map, gsmModemMarkers]);

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

        marker.on("mouseover", function () {
          this.openPopup();
        });