// /hooks/layers/useAreaMarkersLayer.js
import { useEffect, useState, useRef } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import { useDispatch } from "react-redux";
import { updateAreaThunk } from "../../redux/thunks/database/area/updateAreaThunk";

const customIcon = new L.Icon({
  iconUrl: "/img/bereich.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowUrl: "/img/marker-shadow.png",
  shadowSize: [41, 41],
});

const useAreaMarkersLayer = (map, oms, apiUrl, onUpdateSuccess) => {
  const dispatch = useDispatch();
  const [areaMarkers, setAreaMarkers] = useState([]);
  const prevVisibility = useRef(null);

  const updateMarkersVisibility = () => {
    if (!map || areaMarkers.length === 0) return;

    const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};
    const areAllLayersInvisible = Object.values(mapLayersVisibility).every((v) => !v);

    if (areAllLayersInvisible === prevVisibility.current) return;
    prevVisibility.current = areAllLayersInvisible;

    areaMarkers.forEach((marker) => {
      if (areAllLayersInvisible) {
        marker.addTo(map);
        if (oms) oms.addMarker(marker);
      } else {
        map.removeLayer(marker);
      }
    });
  };

  useEffect(() => {
    updateMarkersVisibility();

    const handleStorageChange = (event) => {
      if (event.key === "mapLayersVisibility") {
        updateMarkersVisibility();
      }
    };

    window.addEventListener("storage", handleStorageChange);
    const intervalId = setInterval(updateMarkersVisibility, 500);

    return () => {
      window.removeEventListener("storage", handleStorageChange);
      clearInterval(intervalId);
    };
  }, [map, areaMarkers, oms]);

  useEffect(() => {
    const fetchArea = async () => {
      try {
        const response = await fetch(apiUrl);
        if (!response.ok) throw new Error(`API-Fehler: ${response.status} ${response.statusText}`);

        const data = await response.json();

        const markers = data.map((item) => {
          const marker = L.marker([item.x, item.y], {
            icon: customIcon,
            draggable: true,
          });

          marker.bindTooltip(
            `<strong>Bereich:</strong> ${item.location_name} <br />
             <strong>Standort:</strong> ${item.area_name}`,
            {
              permanent: false,
              direction: "top",
              offset: [0, -20],
            }
          );

          marker.on("dragend", async (e) => {
            const { lat, lng } = e.target.getLatLng();
            try {
              await dispatch(
                updateAreaThunk({
                  idLocation: item.idLocation,
                  idMap: item.idMaps,
                  newCoords: { x: lat, y: lng },
                })
              ).unwrap();
              console.log("✔️ Koordinaten erfolgreich aktualisiert:", { lat, lng });
              onUpdateSuccess?.(); // optionaler Callback
            } catch (error) {
              console.error("❌ Fehler beim Aktualisieren der Koordinaten:", error);
            }
          });

          return marker;
        });

        setAreaMarkers(markers);
      } catch (error) {
        console.error("Fehler beim Laden der Bereiche:", error.message);
        setAreaMarkers([]);
      }
    };

    fetchArea();
  }, [apiUrl, dispatch]);

  useEffect(() => {
    if (map) {
      areaMarkers.forEach((marker) => marker.addTo(map));
    }

    return () => {
      if (map) {
        areaMarkers.forEach((marker) => map.removeLayer(marker));
      }
    };
  }, [map, areaMarkers]);

  return areaMarkers;
};

export default useAreaMarkersLayer;