// /components/uiWidgets/AreaDropdown.js
import React, { useEffect, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";
import { setSelectedArea } from "@/redux/slices/selectedAreaSlice";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";

/**
 * Kleines Dropdown zur Auswahl der Station (Area_Name),
 * nutzt dieselbe Datenquelle wie das MapLayersControlPanel.
 */
const AreaDropdown = ({ onClose }) => {
  const dispatch = useDispatch();
  const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || {};
  const GisSystemStatic = useSelector(selectGisSystemStatic) || [];

  // Erlaubte Systeme: Allow === 1 und Map === 1
  const allowedSystems = useMemo(() => {
    return new Set(
      (Array.isArray(GisSystemStatic) ? GisSystemStatic : [])
        .filter(sys => sys.Allow === 1 && sys.Map === 1)
        .map(sys => sys.IdSystem)
    );
  }, [GisSystemStatic]);

  // Uniqe Areas basierend auf Allowed Systems
  const areaOptions = useMemo(() => {
    const points = GisStationsStaticDistrict?.Points || [];
    const seen = new Set();
    const filtered = points.filter(p => {
      if (!p?.Area_Name) return false;
      if (!allowedSystems.has(p.System)) return false;
      if (seen.has(p.Area_Name)) return false;
      seen.add(p.Area_Name);
      return true;
    });
    return filtered.map(p => ({ label: p.Area_Name, value: p.IdLD }));
  }, [GisStationsStaticDistrict, allowedSystems]);

  const handleChange = e => {
    const selectedIndex = e.target.options.selectedIndex;
    const label = e.target.options[selectedIndex].text;
    dispatch(setSelectedArea(label));
    onClose?.();
  };

  // Schließe mit ESC
  useEffect(() => {
    const onKey = e => {
      if (e.key === "Escape") onClose?.();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div className="absolute top-16 right-3 w-72 z-50 bg-white rounded-lg shadow-md">
      <div className="flex flex-col gap-4 p-4">
        <div className="text-sm font-semibold mb-2">Station wählen</div>
        <select
          onChange={handleChange}
          className="border p-2 rounded w-full"
          defaultValue="__default__"
        >
          <option value="__default__" disabled>
            Bitte wählen…
          </option>
          {areaOptions.map(opt => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

export default AreaDropdown;