// /hooks/useMapComponentState.js
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchPoiTypThunk } from "../redux/thunks/database/pois/fetchPoiTypThunk";
import { selectPoiTypData, selectPoiTypStatus } from "../redux/slices/database/pois/poiTypSlice";
import { selectPoiLayerVisible } from "../redux/slices/database/pois/poiLayerVisibleSlice";

export const useMapComponentState = () => {
  const dispatch = useDispatch();

  // Redux: POI-Typen
  const poiTypData = useSelector(selectPoiTypData);
  const poiTypStatus = useSelector(selectPoiTypStatus);

  // Redux: Sichtbarkeit des POI-Layers
  const poiLayerVisible = useSelector((state) => state.poiLayerVisible.visible);

  // Lokaler State: Geräte und Kontextmenü
  const [deviceName, setDeviceName] = useState("");
  const [locationDeviceData, setLocationDeviceData] = useState([]);
  const [priorityConfig, setPriorityConfig] = useState([]); // TODO: Redux
  const [menuItemAdded, setMenuItemAdded] = useState(false);

  // Optional: Nur im Mock-Modus POI-Typen lokal setzen
  useEffect(() => {
    if (process.env.NEXT_PUBLIC_USE_MOCK_API === "true") {
      const mockData = [
        { idPoiTyp: 1, name: "Mock Zähleranschlusskasten", icon: 4, onlySystemTyp: 0 },
        { idPoiTyp: 2, name: "Mock Geräteschrank", icon: 2, onlySystemTyp: 0 },
        { idPoiTyp: 4, name: "Mock Parkplatz", icon: 3, onlySystemTyp: 0 },
        { idPoiTyp: 6, name: "Mock Zufahrt", icon: 4, onlySystemTyp: 0 },
        { idPoiTyp: 20, name: "Mock Zählgerät", icon: 5, onlySystemTyp: 110 },
        { idPoiTyp: 21, name: "Mock Messschleife", icon: 6, onlySystemTyp: 110 },
        { idPoiTyp: 25, name: "Mock Sonstige", icon: 0, onlySystemTyp: 0 },
        { idPoiTyp: 33, name: "Mock Autobahnauffahrt", icon: 4, onlySystemTyp: null },
      ];
      // Du kannst das Redux-Mock-Datenhandling später noch global regeln
      console.warn("⚠️ POI-Typen im Mock-Modus geladen.");
    } else if (poiTypStatus === "idle") {
      dispatch(fetchPoiTypThunk());
    }
  }, [dispatch, poiTypStatus]);

  // Geräte-Daten lokal laden (kann später durch fetchLocationDevicesThunk ersetzt werden)
  useEffect(() => {
    const fetchDeviceData = async () => {
      try {
        const protocol = window.location.protocol;
        const host = window.location.hostname;
        const apiBaseUrl = `${protocol}//${host}/talas5/ClientData/WebServiceMap.asmx`;

        const params = new URLSearchParams(window.location.search);
        const idMap = params.get("m");

        const url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`;
        console.log("🌐 Geräte-API:", url);

        const response = await fetch(url);
        const data = await response.json();

        setLocationDeviceData(data.Points || []);
        if (data.Points && data.Points.length > 0) {
          setDeviceName(data.Points[0].LD_Name);
        }
      } catch (error) {
        console.error("❌ Fehler beim Abrufen der Gerätedaten:", error);
      }
    };

    fetchDeviceData();
  }, []);

  return {
    poiTypData,
    isPoiTypLoaded: poiTypStatus === "succeeded",
    deviceName,
    setDeviceName,
    locationDeviceData,
    setLocationDeviceData,
    priorityConfig,
    setPriorityConfig,
    menuItemAdded,
    setMenuItemAdded,
    poiLayerVisible,
  };
};