nodeMap/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

// /components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
import React, { useEffect, useState } from "react";
import { setSelectedArea } from "@/redux/slices/selectedAreaSlice";
import EditModeToggle from "@/components/uiWidgets/mapLayersControlPanel/EditModeToggle";
import { useSelector, useDispatch } from "react-redux";
import {
  selectPolylineVisible,
  setPolylineVisible,
  initializePolylineFromLocalStorageThunk,
} from "@/redux/slices/database/polylines/polylineLayerVisibleSlice";
import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
import { selectMapLayersState, setLayerVisibility } from "@/redux/slices/mapLayersSlice";
import { setVisible } from "@/redux/slices/database/pois/poiLayerVisibleSlice";
import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";

function MapLayersControlPanel() {
  // Dummy state to force re-render after checkbox click (workaround for Redux/localStorage sync)
  const [forceUpdate, setForceUpdate] = useState(0);
  const [editMode, setEditMode] = useState(false); // Zustand für editMode
  const [localStorageLoaded, setLocalStorageLoaded] = useState(false); // Tracking ob localStorage geladen wurde
  const kabelstreckenVisible = useSelector(selectPolylineVisible); // Redux State für Kabelstrecken
  const poiVisible = useSelector(state => state.poiLayerVisible.visible);
  const setPoiVisible = value => dispatch(setVisible(value));
  const dispatch = useDispatch();
  const mapLayersVisibility = useSelector(selectMapLayersState);
  const [stationListing, setStationListing] = useState([]);
  const [systemListing, setSystemListing] = useState([]);
  const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
  const GisSystemStatic = useSelector(selectGisSystemStatic) || [];

  // Debug: Kabelstrecken state verfolgen
  useEffect(() => {
    console.log("🎯 kabelstreckenVisible state changed to:", kabelstreckenVisible);
  }, [kabelstreckenVisible]);

  // Prüfen, ob TALAS (IdSystem 1) erlaubt & sichtbar auf Karte (Allow + Map)
  const isTalasAllowed = Array.isArray(GisSystemStatic)
    ? GisSystemStatic.some(
        system => system.IdSystem === 1 && system.Allow === 1 && system.Map === 1
      )
    : false;

  const handlePolylineCheckboxChange = event => {
    const checked = event.target.checked;
    dispatch(setPolylineVisible(checked));
    // Synchronisiere Redux nach localStorage-Update
    setTimeout(() => {
      dispatch(initializePolylineFromLocalStorageThunk());
      setForceUpdate(f => f + 1); // Force re-render
      const event = new Event("polylineVisibilityChanged");
      window.dispatchEvent(event);
    }, 100);
    // Wenn aktiviert, TALAS aktivieren
    if (checked) {
      const talasKey = "system-1";
      dispatch(setLayerVisibility({ layer: talasKey, visibility: true }));
      const mapId = localStorage.getItem("currentMapId");
      const userId = localStorage.getItem("currentUserId");
      const mapStorageKey =
        mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
      const updatedVisibility = { ...mapLayersVisibility, [talasKey]: true };
      localStorage.setItem(mapStorageKey, JSON.stringify(updatedVisibility));
    }
  };

  // Initialisiere Redux-State für Kabelstrecken-Checkbox bei Kartenwechsel (mapId/userId)
  useEffect(() => {
    // LocalStorage Werte beim ersten Laden der Komponente oder bei Kartenwechsel wiederherstellen
    const storedPoiVisible = localStorage.getItem("poiVisible");
    if (storedPoiVisible !== null) {
      setPoiVisible(storedPoiVisible === "true");
    }

    // Kartenabhängige Sichtbarkeit für Kabelstrecken initialisieren
    const mapId = localStorage.getItem("currentMapId");
    const userId = localStorage.getItem("currentUserId");
    const mapStorageKey =
      mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";

    // Kabelstrecken-Checkbox initialisieren: Redux übernimmt map/user-spezifisch, keine Manipulation von 'polylineVisible' oder 'kabelstreckenVisible' hier mehr!

    // mapLayersVisibility initialisieren
    const storedMapLayersVisibility = localStorage.getItem(mapStorageKey);
    if (storedMapLayersVisibility) {
      const parsedVisibility = JSON.parse(storedMapLayersVisibility);
      Object.keys(parsedVisibility).forEach(key => {
        dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
      });
    } else {
      if (Array.isArray(GisSystemStatic)) {
        const initialVisibility = {};
        GisSystemStatic.forEach(system => {
          const systemKey = `system-${system.IdSystem}`;
          const visibility = system.Allow === 1 && system.Map === 1;
          if (visibility) {
            initialVisibility[systemKey] = visibility;
            dispatch(setLayerVisibility({ layer: systemKey, visibility }));
          }
        });
        localStorage.setItem(mapStorageKey, JSON.stringify(initialVisibility));
      }
    }

    const storedEditMode = localStorage.getItem("editMode");
    setEditMode(storedEditMode === "true");

    setLocalStorageLoaded(true);
  }, [localStorage.getItem("currentMapId"), localStorage.getItem("currentUserId")]);

  const handleAreaChange = event => {
    const selectedIndex = event.target.options.selectedIndex;
    const areaName = event.target.options[selectedIndex].text;
    dispatch(setSelectedArea(areaName));
  };

  useEffect(() => {
    // Allowed systems jetzt nach Allow && Map filtern
    const allowedSystems = Array.isArray(GisSystemStatic)
      ? new Set(
          GisSystemStatic.filter(system => system.Allow === 1 && system.Map === 1).map(
            system => system.IdSystem
          )
        )
      : new Set();

    const seenNames = new Set();
    const filteredAreas = GisStationsStaticDistrict?.Points?.length
      ? GisStationsStaticDistrict.Points.filter(item => {
          const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
          if (isUnique) {
            seenNames.add(item.Area_Name);
          }
          return isUnique;
        })
      : [];

    setStationListing(
      filteredAreas.map((area, index) => ({
        id: index + 1,
        name: area.Area_Name,
      }))
    );

    const seenSystemNames = new Set();
    const filteredSystems = Array.isArray(GisSystemStatic)
      ? GisSystemStatic.filter(item => {
          const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1 && item.Map === 1; // <— Map Bedingung hinzugefügt
          if (isUnique) {
            seenSystemNames.add(item.Name);
          }
          return isUnique;
        })
      : [];

    setSystemListing(
      filteredSystems.map((system, index) => ({
        id: index + 1,
        name: system.Name, // Anzeige
        key: `system-${system.IdSystem}`, // interner Schlüssel
      }))
    );
  }, [GisStationsStaticDistrict, GisSystemStatic]);

  const handleCheckboxChange = (key, event) => {
    if (editMode) return;
    const { checked } = event.target;
    dispatch(setLayerVisibility({ layer: key, visibility: checked }));
    const mapId = localStorage.getItem("currentMapId");
    const userId = localStorage.getItem("currentUserId");
    const mapStorageKey =
      mapId && userId ? `mapLayersVisibility_m${mapId}_u${userId}` : "mapLayersVisibility";
    localStorage.setItem(mapStorageKey, JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
    // Wenn TALAS (system-1) deaktiviert wird, Kabelstrecken deaktivieren
    if (key === "system-1" && !checked) {
      setKabelstreckenVisible(false);
      // entfernt: keine Manipulation von 'kabelstreckenVisible' oder 'polylineVisible' mehr
      dispatch(setPolylineVisible(false));
      setTimeout(() => {
        const polylineEvent = new Event("polylineVisibilityChanged");
        window.dispatchEvent(polylineEvent);
      }, 50);
    }
    setTimeout(() => {
      const event = new Event("visibilityChanged");
      window.dispatchEvent(event);
    }, 0);
  };

  const handlePoiCheckboxChange = event => {
    const { checked } = event.target;
    setPoiVisible(checked);
    localStorage.setItem("poiVisible", checked.toString()); // Store POI visibility in localStorage
  };

  const handleIconClick = () => {
    setSelectedArea("Station wählen");
    dispatch(incrementZoomTrigger());
  };

  //------------------------------
  useEffect(() => {
    if (process.env.NEXT_PUBLIC_DEBUG_LOG === "true") {
      window.__debug = window.__debug || {};
      window.__debug.gisStations = GisStationsStaticDistrict;
    }

    if (!GisStationsStaticDistrict) {
      console.warn("⚠️ GisStationsStaticDistrict ist `null` oder nicht geladen.");
      return;
    }

    if (typeof GisStationsStaticDistrict !== "object") {
      console.warn("⚠️ GisStationsStaticDistrict ist kein Objekt:", GisStationsStaticDistrict);
      return;
    }

    if (!GisStationsStaticDistrict.Points || !Array.isArray(GisStationsStaticDistrict.Points)) {
      console.warn(
        "⚠️ GisStationsStaticDistrict.Points ist nicht vorhanden oder kein Array.",
        GisStationsStaticDistrict
      );
      return;
    }

    const seenNames = new Set();
    const filteredAreas = GisStationsStaticDistrict.Points.filter(item => {
      if (!item.Area_Name) return false; // Sicherstellen, dass Area_Name existiert
      const isUnique = !seenNames.has(item.Area_Name);
      if (isUnique) {
        seenNames.add(item.Area_Name);
      }
      return isUnique;
    });
    if (process.env.NEXT_PUBLIC_DEBUG_LOG === "true") {
      console.log("📌 stationListing aktualisiert:", filteredAreas);
    }
  }, [GisStationsStaticDistrict, GisSystemStatic]);
  //---------------------------
  useEffect(() => {
    const next = (GisStationsStaticDistrict.Points || []).map(p => p.Area_Name).join("|");
    const current = stationListing.map(s => s.name).join("|");
    if (next !== current) {
      setStationListing(
        GisStationsStaticDistrict.Points.map((area, index) => ({
          id: index + 1,
          name: area.Area_Name,
        }))
      );
    }
  }, [GisStationsStaticDistrict]);
  //---------------------------

  //---------------------------
  return (
    <div
      id="mainDataSheet"
      className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg"
    >
      <div className="flex flex-col gap-4 p-4">
        <div className="flex items-center justify-between space-x-2">
          <select
            onChange={handleAreaChange}
            id="stationListing"
            className="border-solid-1 p-2 rounded ml-1 font-semibold"
            style={{ minWidth: "150px", maxWidth: "200px" }}
          >
            <option value="Station wählen">Station wählen</option>
            {/*
              ...new Map(
                (GisStationsStaticDistrict.Points || [])
                  .filter(p => !!p.Area_Name)
                  .map(p => [p.Area_Name, p])
              ).values(),
            */}
            {[
              ...new Map(
                (GisStationsStaticDistrict.Points || [])
                  .filter(p => !!p.Area_Name)
                  .map(p => [p.Area_Name, p])
              ).values(),
            ].map(item => (
              <option key={item.Area_Name} value={item.IdLD}>
                {item.Area_Name}
              </option>
            ))}
          </select>
          <div className="flex items-center space-x-2">
            <EditModeToggle />
            <img
              src="/img/expand-icon.svg"
              alt="Expand"
              className="h-6 w-6 cursor-pointer"
              onClick={handleIconClick}
            />
          </div>
        </div>

        {/* Checkboxen mit Untermenüs */}
        <div className="flex flex-col gap-2">
          {systemListing.map(system => (
            <div key={system.id} className="flex flex-col">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  checked={mapLayersVisibility[system.key] || false}
                  onChange={e => handleCheckboxChange(system.key, e)}
                  id={`system-${system.id}`}
                  disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
                />
                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
                  {system.name}
                </label>
              </div>

              {/* Untermenü für TALAS */}
              {system.name === "TALAS" && (
                <div className="ml-6 flex flex-col gap-1">
                  <div className="flex items-center">
                    <input
                      type="checkbox"
                      checked={kabelstreckenVisible} // Redux State
                      onChange={handlePolylineCheckboxChange}
                      id="polyline-checkbox"
                      disabled={!isTalasAllowed || editMode}
                    />
                    <label htmlFor="polyline-checkbox" className="text-sm ml-2">
                      Kabelstrecken
                    </label>
                  </div>
                </div>
              )}
            </div>
          ))}

          <div className="flex items-center">
            <input
              type="checkbox"
              checked={poiVisible}
              onChange={handlePoiCheckboxChange}
              id="poi-checkbox"
            />
            <label htmlFor="poi-checkbox" className="text-sm ml-2">
              POIs
            </label>
          </div>
        </div>
      </div>
    </div>
  );
}

export default MapLayersControlPanel;