// /utils/polylines/setupPolylines.js
import { findClosestPoints } from "../geometryUtils";
import { insertNewPOI, removePOI } from "../poiUtils";
import circleIcon from "../../components/gisPolylines/icons/CircleIcon";
import startIcon from "../../components/gisPolylines/icons/StartIcon";
import endIcon from "../../components/gisPolylines/icons/EndIcon";
import { redrawPolyline } from "./redrawPolyline";
import { toast } from "react-toastify";
import { store } from "../../redux/store"; // Importiere den Store
import {
  openPolylineContextMenu,
  closePolylineContextMenu,
} from "../../redux/slices/database/polylines/polylineContextMenuSlice";
import { monitorContextMenu } from "./monitorContextMenu";
import { forceCloseContextMenu } from "../../redux/slices/database/polylines/polylineContextMenuSlice";
import { updatePolylineCoordinatesThunk } from "../../redux/thunks/database/polylines/updatePolylineCoordinatesThunk";
import { openInNewTab } from "../../utils/openInNewTab";

//--------------------------------------------
export const setupPolylines = (
  map,
  linePositions,
  lineColors,
  tooltipContents,
  setNewCoords,
  tempMarker,
  currentZoom,
  currentCenter,
  polylineVisible
) => {
  const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
  const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
  if (!polylineVisible) {
    //console.warn("Polylines deaktiviert - keine Zeichnung");
    return { markers: [], polylines: [] };
  }

  if (!polylineVisible) {
    // Entferne alle Polylinien, wenn sie ausgeblendet werden sollen
    if (window.polylines) {
      window.polylines.forEach(polyline => {
        if (map.hasLayer(polyline)) {
          map.removeLayer(polyline);
        }
      });
    }
    return { markers: [], polylines: [] };
  }
  const markers = [];
  const polylines = [];
  const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist

  linePositions.forEach((lineData, lineIndex) => {
    // **Fix: Sicherstellen, dass activeLines definiert ist und idLD existiert**

    const lineMarkers = [];

    lineData.coordinates.forEach((coord, index) => {
      let icon = circleIcon;
      if (index === 0) {
        icon = startIcon;
      } else if (index === lineData.coordinates.length - 1) {
        icon = endIcon;
      }

      // Nur Marker mit circleIcon ausblenden, wenn Bearbeitungsmodus deaktiviert ist
      if (icon !== circleIcon || editMode) {
        const marker = L.marker(coord, {
          icon: icon,
          draggable: editMode, // Nur verschiebbar, wenn Bearbeitungsmodus aktiv ist
          contextmenu: true,
          contextmenuInheritItems: false,
          contextmenuItems: [],
        }).addTo(map);

        marker.on("dragend", () => {
          if (editMode) {
            const newCoords = marker.getLatLng();
            setNewCoords(newCoords);

            const newCoordinates = [...lineData.coordinates];
            newCoordinates[index] = [newCoords.lat, newCoords.lng];

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

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

            updatedPolyline.on("mouseover", () => updatedPolyline.setStyle({ weight: 20 }));
            updatedPolyline.on("mouseout", () => updatedPolyline.setStyle({ weight: 3 }));

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

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

            store
              .dispatch(updatePolylineCoordinatesThunk(requestData))
              .unwrap()
              .then(data => {
                if (process.env.NEXT_PUBLIC_DEBUG_LOG === "true") {
                  console.log("Koordinaten erfolgreich aktualisiert:", data);
                }
              })
              .catch(error => {
                console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
              });
          } else {
            toast.error("Bearbeitung nicht erlaubt", { position: "top-center", autoClose: 4000 });
          }
        });

        marker.on("mouseover", function () {
          if (editMode) {
            this.bindContextMenu({
              contextmenuItems: [
                {
                  text: "Stützpunkt entfernen",
                  icon: "/img/icons/gisLines/remove-support-point.svg",
                  callback: () => {
                    const newCoords = marker.getLatLng();
                    const newCoordinates = [...lineData.coordinates];
                    newCoordinates[index] = [newCoords.lat, newCoords.lng];

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

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

        lineMarkers.push(marker);
      }
    });

    const polyline = L.polyline(lineData.coordinates, {
      color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
      weight: 3,
      contextmenu: true,
      contextmenuInheritItems: false, // Standard-Kontextmenü deaktivieren
      contextmenuItems: [],
    }).addTo(map);

    // Füge "Stützpunkt hinzufügen" nur hinzu, wenn editMode aktiv ist
    if (editMode) {
      polyline.options.contextmenuItems.push(
        {
          text: "Station öffnen (Tab)",
          icon: "/img/screen_new.png",
          callback: e => openInNewTab(e, lineData),
        },
        { separator: true },

        {
          text: "Koordinaten anzeigen",
          icon: "/img/not_listed_location.png",
          callback: e => {
            alert(
              "Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)
            );
          },
        },
        { separator: true },
        {
          text: "Reinzoomen",
          icon: "/img/zoom_in.png",
          callback: e => map.zoomIn(),
        },
        {
          text: "Rauszoomen",
          icon: "/img/zoom_out.png",
          callback: e => map.zoomOut(),
        },
        {
          text: "Hier zentrieren",
          icon: "/img/center_focus.png",
          callback: e => map.panTo(e.latlng),
        },
        { separator: true },
        /*        {
          text: "POI hinzufügen",
          icon: "/img/add_station.png",
          callback: (e) => {
            store.dispatch(openAddPoiOnPolylineModal(e.latlng));
          },
        },
        */
        {
          text: "Stützpunkt hinzufügen",
          icon: "/img/icons/gisLines/add-support-point.svg",
          callback: e => {
            if (tempMarker) {
              tempMarker.remove();
            }
            const newPoint = e.latlng;
            const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
            insertNewPOI(closestPoints, newPoint, lineData, map);
            redrawPolyline(lineData, lineColors, tooltipContents, map);
            window.location.reload();
          },
        }
      );
    } else {
      polyline.options.contextmenuItems.push(
        {
          text: "Station öffnen (Tab)",
          icon: "/img/screen_new.png",
          callback: e => {
            const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;

            const baseUrl = `${window.location.protocol}//${window.location.hostname}:80${basePath}/`;
            const link = `${baseUrl}devices/cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;

            window.open(link, "_blank");
          },
        },
        { separator: true },

        {
          text: "Koordinaten anzeigen",
          icon: "/img/not_listed_location.png",
          callback: e => {
            alert(
              "Breitengrad: " + e.latlng.lat.toFixed(5) + "\nLängengrad: " + e.latlng.lng.toFixed(5)
            );
          },
        },
        { separator: true },
        {
          text: "Reinzoomen",
          icon: "/img/zoom_in.png",
          callback: e => map.zoomIn(),
        },
        {
          text: "Rauszoomen",
          icon: "/img/zoom_out.png",
          callback: e => map.zoomOut(),
        },

        {
          text: "Hier zentrieren",
          icon: "/img/center_focus.png",
          callback: e => map.panTo(e.latlng),
        },
        { separator: true }
        /*         {
          text: "POI hinzufügen",
          icon: "/img/add_station.png",
          callback: (e) => {
            store.dispatch(openAddPoiOnPolylineModal(e.latlng));
          },
        } */
      );
    }

    // Hier wird der Tooltip hinzugefügt
    polyline.bindTooltip(
      tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt setup",
      {
        permanent: false,
        direction: "auto",
      }
    );

    polyline.on("mouseover", e => {
      const startTime = Date.now(); // Startzeit erfassen

      polyline.setStyle({ weight: 14 });
      const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;

      const baseUrl = `${window.location.protocol}//${window.location.hostname}:80${basePath}/`;
      const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;
    });
    // error TypeError: Cannot read properties of null (reading 'contextmenu') wenn der Mas auf die Linie bleibt
    polyline.on("mouseout", e => {
      polyline.setStyle({ weight: 3 });

      document.addEventListener("click", function handleOutsideClick(event) {
        if (!event.target.closest(".leaflet-contextmenu")) {
          try {
            store.dispatch(closePolylineContextMenu());
            store.dispatch(forceCloseContextMenu());

            if (window.map?.contextmenu) {
              window.map.contextmenu.hide();
            }
          } catch (error) {
            console.error("❌ Fehler beim Schließen des Kontextmenüs:", error);
            // **Seite NICHT sofort neuladen, sondern global unterdrücken lassen**
          }

          document.removeEventListener("click", handleOutsideClick);
        }
      });
    });
    polyline.on("contextmenu", e => {
      store.dispatch(
        openPolylineContextMenu({
          position: { lat: e.latlng.lat, lng: e.latlng.lng },
          polylineId: polyline.options.idLD,
        })
      );
    });

    polylines.push(polyline);
    markers.push(...lineMarkers);
  });

  // Speichere Polylines und LineColors global für den Zugriff in anderen Funktionen
  window.polylines = polylines;
  window.lineColors = lineColors;
  monitorContextMenu(map);
  return { markers, polylines };
};