// /utils/createAndSetDevices.js
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import { saveLineData, redrawPolyline } from "./mapUtils";
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { toast } from "react-toastify";
import * as config from "../config/config.js";
import { disablePolylineEvents, enablePolylineEvents } from "./setupPolylines";
import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState";
import { store } from "../redux/store";
import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";

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

export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
  try {
    const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
    const jsonResponse = await response1.json();
    const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
    const statusResponse = await response2.json();

    if (!jsonResponse.Points || !statusResponse.Statis) {
      console.error("❌ Fehlende Daten in API-Response!");
      return;
    }

    console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden.");

    // Erstelle eine Map für Statusinformationen
    const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));

    // Speichere `idLD` und `Active` Werte in Redux
    const allLines = jsonResponse.Points.filter((station) => station.System === systemId).map((station) => {
      console.log("------------------------");
      console.log("station.IdLD: ", station.IdLD);
      console.log("station.Active: ", station.Active);
      console.log("------------------------");

      // Redux: Aktualisiere `idLD` und `Active` Werte
      store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));

      return {
        idLD: station.IdLD,
        active: station.Active,
      };
    });

    console.log("🔄 Alle Linien gespeichert:", allLines);

    // Filtere nur aktive Stationen für Marker
    const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1);
    console.log("🔍 Gefilterte aktive Stationen:", activeStations);

    let markersData = activeStations.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, priorityConfig);
      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,
      });

      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">
            ${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("")}
          </div>
        </div>
      `);

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

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

      marker.on("contextmenu", function (event) {
        if (event && event.preventDefault) event.preventDefault();
        this.openPopup();
      });

      document.addEventListener("mouseout", function (event) {
        if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
          enablePolylineEvents(window.polylines, window.lineColors);
        }
      });

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

      return marker;
    });

    console.log("📌 Marker erstellt:", markersData.length, markersData);

    setMarkersFunction(markersData);
  } catch (error) {
    console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
  }
};