// 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/polylineContextMenuSlice";
import { monitorContextMenu } from "./monitorContextMenu";
import { forceCloseContextMenu } from "../../redux/slices/polylineContextMenuSlice";

//--------------------------------------------
export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter, polylineVisible) => {
  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) => {
    //console.log("LineData:", lineData.idLD, lineData.idModul);

    // **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", () => {
          console.log("Marker wurde verschoben in setupPolylines.js");
          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}`] || "Standard-Tooltip-Inhalt setup 1", {
              permanent: false,
              direction: "auto",
            });

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

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

            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);
              });
          } else {
            toast.error("Benutzer hat keine Berechtigung zum Bearbeiten.", {
              position: "top-center",
              autoClose: 5000,
              hideProgressBar: false,
              closeOnClick: true,
              pauseOnHover: true,
              draggable: true,
              progress: undefined,
            });
          }
        });

        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) => {
            const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;

            const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/` : `${window.location.origin}/talas5/`;

            const link = `${baseUrl}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));
          },
        },
        */
        {
          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 = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/` : `${window.location.origin}/talas5/`;

            const link = `${baseUrl}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 = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/` : `${window.location.origin}/talas5/`;

      const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${lineData.idLD}`;

      // console.log("Link der Linie:", link);
    });
    // error TypeError: Cannot read properties of null (reading 'contextmenu') wenn der Mas auf die Linie bleibt
    polyline.on("mouseout", (e) => {
      polyline.setStyle({ weight: 3 });
      //console.log("🚀 Maus hat die Polyline verlassen - Warten auf Klick außerhalb des Menüs.");

      document.addEventListener("click", function handleOutsideClick(event) {
        if (!event.target.closest(".leaflet-contextmenu")) {
          //console.log("🛑 Klick außerhalb des Kontextmenüs erkannt - Schließe Menü.");

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