// components/pois/poiUpdateModal.js

import React, { useState, useEffect } from "react";
import Select from "react-select"; // Importiere react-select
import { useRecoilState } from "recoil";
import { selectedPoiState } from "../../store/atoms/poiState";
import { currentPoiState } from "../../store/atoms/currentPoiState";
import { mapLayersState } from "../../store/atoms/mapLayersState";

const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
  const currentPoi = useRecoilState(currentPoiState);
  const selectedPoi = useRecoilState(selectedPoiState);
  const [mapLayersVisibility] = useRecoilState(mapLayersState);

  const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
  const [name, setName] = useState(poiData ? poiData.name : "");
  const [poiTypData, setPoiTypData] = useState([]);
  const [poiTypeId, setPoiTypeId] = useState("");
  const [locationDeviceData, setLocationDeviceData] = useState([]);
  const [filteredDevices, setFilteredDevices] = useState([]);
  const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : null); // Verwende null für react-select
  const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");

  const [description, setDescription] = useState(poiData ? poiData.description : "");

  // Map von Systemnamen zu IDs (wie zuvor)
  const systemNameToIdMap = {
    TALAS: 1,
    ECI: 2,
    ULAF: 3,
    GSMModem: 5,
    CiscoRouter: 6,
    WAGO: 7,
    Siemens: 8,
    OTDR: 9,
    WDM: 10,
    GMA: 11,
    Messdatensammler: 12,
    Messstellen: 13,
    TALASICL: 100,
    DAUZ: 110,
    SMSFunkmodem: 111,
    Basisgerät: 200,
  };

  useEffect(() => {
    if (poiData) {
      //console.log("Initial poiData:", poiData);
      setPoiId(poiData.idPoi);
      setName(poiData.name);
      setPoiTypeId(poiData.idPoiTyp);
      setIdLD(poiData.idLD);
      setDescription(poiData.description);
      setDeviceName(poiData.idLD);
      //console.log("Loaded POI Data for editing:", poiData);
    }
  }, [poiData]);

  useEffect(() => {
    const fetchDeviceId = async () => {
      if (poiData && poiData.idLD) {
        try {
          const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`);
          const data = await response.json();
          if (data) setDeviceName(data.name);
        } catch (error) {
          console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
        }
      }
    };

    fetchDeviceId();
  }, [poiData]);

  const handleDeletePoi = async () => {
    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
      try {
        const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
          method: "DELETE",
        });
        if (response.ok) {
          alert("POI wurde erfolgreich gelöscht.");
          onClose();
          window.location.reload();
        } else {
          throw new Error("Fehler beim Löschen des POI.");
        }
      } catch (error) {
        console.error("Fehler beim Löschen des POI 2:", error);
        alert("Fehler beim Löschen des POI.");
      }
    }
  };

  useEffect(() => {
    const fetchPoiTypData = async () => {
      try {
        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
        const data = await response.json();
        setPoiTypData(data);
        if (selectedPoi && data) {
          const matchingType = data.find((pt) => pt.name === selectedPoi.typ);
          if (matchingType) {
            setPoiTypeId(matchingType.idPoiTyp);
          }
        }
      } catch (error) {
        console.error("Fehler beim Abrufen der poiTyp Daten:", error);
      }
    };
    fetchPoiTypData();
  }, [selectedPoi]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device"
        const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
        const data = await response.json();
        setLocationDeviceData(data);
        filterDevices(data);

        if (poiData && poiData.idLD) {
          const selectedDevice = data.find((device) => device.id === poiData.idLD);
          setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
          //console.log("Selected Device in poiUpdate:", selectedDevice);
        }
      } catch (error) {
        console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
      }
    };
    fetchData();
  }, []);

  useEffect(() => {
    fetch("/api/talas_v5_DB/locationDevice/locationDevices")
      .then((response) => response.json())
      .then((data) => {
        setLocationDeviceData(data);
        const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
        if (currentDevice) {
          setDeviceName(currentDevice.name);
          //console.log("Current Device name in poiUpdate:", currentDevice.name);
        }
      })
      .catch((error) => {
        console.error("Fehler beim Abrufen der Gerätedaten:", error);
        setLocationDeviceData([]);
      });
  }, [poiData?.idLD, currentPoi]);

  // Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
  const filterDevices = (devices) => {
    const activeSystems = Object.keys(mapLayersVisibility).filter((system) => mapLayersVisibility[system]);

    // Mappe aktive Systeme auf ihre ids
    const activeSystemIds = activeSystems.map((system) => systemNameToIdMap[system]).filter((id) => id !== undefined);

    // Filtere die Geräte nach aktiven Systemen basierend auf idsystem_typ
    const filtered = devices.filter((device) => activeSystemIds.includes(device.idsystem_typ));
    setFilteredDevices(filtered);
  };

  const handleSubmit = async (event) => {
    event.preventDefault();
    const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
    const idLDData = await idLDResponse.json();
    const idLD = idLDData.idLD;
    try {
      const response = await fetch("/api/talas_v5_DB/pois/updatePoi", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          idPoi: poiId,
          name: name,
          description: description,
          idPoiTyp: poiTypeId,
          idLD: idLD,
        }),
      });

      if (response.ok) {
        onClose();
        window.location.reload();
      } else {
        const errorResponse = await response.json();
        throw new Error(errorResponse.error || "Fehler beim Aktualisieren des POI.");
      }
    } catch (error) {
      console.error("Fehler beim Aktualisieren des POI:", error);
      alert("Fehler beim Aktualisieren des POI.");
    }
  };

  const handleDeletePoi = async () => {
    if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
      try {
        const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
          method: "DELETE",
        });
        if (response.ok) {
          onClose();
          window.location.reload(); // Aktualisiert die Seite nach dem Löschen
        } else {
          throw new Error("Fehler beim Löschen des POI.");
        }
      } catch (error) {
        console.error("Fehler beim Löschen des POI:", error);
        alert("Fehler beim Löschen des POI.");
      }
    }
  };

  // Erstelle Optionen für react-select
  const poiTypeOptions = poiTypData.map((poiTyp) => ({
    value: poiTyp.idPoiTyp,
    label: poiTyp.name,
  }));

  const deviceOptions = filteredDevices.map((device) => ({
    value: device.name,
    label: device.name,
  }));

  // Custom styles for react-select
  const customStyles = {
    control: (provided) => ({
      ...provided,
      width: "100%",
      minWidth: "300px", // Minimum width for the dropdown
      maxWidth: "100%", // Maximum width (you can adjust this if needed)
    }),
    menu: (provided) => ({
      ...provided,
      width: "100%",
      minWidth: "300px", // Ensure the dropdown menu stays at the minimum width
    }),
  };

  return (
    <div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={onClose}>
      <div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
        <button onClick={onClose} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
          <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
        <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
          <div className="flex items-center mb-4">
            <label htmlFor="description" className="block mr-2 flex-none">
              Beschreibung:
            </label>
            <input type="text" id="description" name="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Beschreibung der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
          </div>

          <div className="flex items-center mb-4">
            <label htmlFor="deviceName" className="block mr-2 flex-none">
              Gerät:
            </label>
            <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
              {locationDeviceData.map((device, index) => (
                <option key={index} value={device.id}>
                  {device.name}
                </option>
              ))}
            </select>
          </div>

          <div className="flex items-center mb-4">
            <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
              Typ:
            </label>
            <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
              {poiTypData.map((poiTyp, index) => (
                <option key={index} value={poiTyp.idPoiTyp}>
                  {poiTyp.name}
                </option>
              ))}
            </select>
          </div>

          <button type="button" onClick={handleDeletePoi} className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4">
            POI löschen
          </button>

          <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
            POI aktualisieren
          </button>
        </form>
      </div>
    </div>
  );
};

export default PoiUpdateModal;