nodeMap/utils/setupPOIs.js

// utils/setupPOIs.js
import { parsePoint } from "./geometryUtils";
import { handleEditPoi } from "./poiUtils";
import { updateLocationInDatabaseService } from "../services/database/updateLocationInDatabaseService";
import { setSelectedPoi, clearSelectedPoi } from "../redux/slices/selectedPoiSlice";

export const setupPOIs = async (
  map,
  pois,
  poiData, // enthält aktuell: idPoi + path
  poiTypMap,
  userRights,
  poiLayerRef,
  setSelectedPoi,
  setLocationDeviceData,
  setDeviceName,
  setCurrentPoi,
  poiLayerVisible,
  fetchPoiData,
  toast,
  setShowPoiUpdateModal,
  setCurrentPoiData,
  deviceName,
  dispatch
) => {
  const editMode = localStorage.getItem("editMode") === "true";
  userRights = editMode ? userRights : undefined;

  // ✅ Mapping vorbereiten: idPoi → icon path
  const iconMap = new Map();
  poiData.forEach((item) => {
    if (item.idPoi && item.path) {
      iconMap.set(item.idPoi, item.path);
    }
  });

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

    for (const poi of pois) {
      try {
        const { latitude, longitude } = parsePoint(poi.position);
        const poiTypName = poiTypMap.get(poi.idPoiTyp) || "Unbekannt";
        const canDrag = userRights ? userRights.some((r) => r.IdRight === 56) : false;

        // ✅ Icon korrekt über idPoi auflösen
        const iconPath = iconMap.get(poi.idPoi);
        const iconUrl = iconPath ? `/img/icons/pois/${iconPath}` : "/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: poi.idPoi,
          name: poi.name,
          description: poi.description,
          idLD: poi.idLD,
          idPoiTyp: poi.idPoiTyp,
          link: poi.link,
        });

        if (editMode) {
          marker.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">${poi.description || "Unbekannt"}</b><br>
            ${deviceName || "unbekannt"} <br>
            ${poiTypName}<br>
          </div>
        `);

        marker.on("mouseover", function () {
          dispatch(setSelectedPoi(poi));
          localStorage.setItem("lastElementType", "marker");
          localStorage.setItem("markerLink", this.options.link);
        });

        marker.on("mouseout", function () {
          dispatch(clearSelectedPoi());
          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;
            updateLocationInDatabaseService(markerId, newLat, newLng);
          } else {
            console.error("Drag operation not allowed");
          }
        });

        if (poiLayerVisible) {
          marker.addTo(poiLayerRef.current);
        }
      } catch (error) {
        console.error("❌ Fehler bei POI Marker:", error);
      }
    }
  }
};