// /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx

import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { useAppDispatch } from "../../../../../../redux/store";
import { RootState } from "../../../../../../redux/store";
import { fetchTDMDataBySlotThunk } from "../../../../../../redux/thunks/fetchTDMListBySlotThunk";
import { fetchTDRChartDataByIdThunk } from "../../../../../../redux/thunks/fetchTDRChartDataByIdThunk";

const TDRChartActionBar: React.FC = () => {
  const dispatch = useAppDispatch();

  // ✅ Redux: selectedSlot aus kueChartMode (0-basiert)
  const selectedSlot = useSelector(
    (state: RootState) => state.kueChartMode.selectedSlot
  );

  const tdmChartData = useSelector(
    (state: RootState) => state.tdmSingleChart.data
  );

  const idsForSlot =
    selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : [];

  const [selectedId, setSelectedId] = useState<number | null>(null);

  // 🔄 Dropdown-Auswahl: neue Messung laden
  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const id = parseInt(e.target.value);
    setSelectedId(id);
    dispatch(fetchTDRChartDataByIdThunk(id));
  };

  // 📌 Referenz setzen (nutzt Slotnummer + 1 für die API)
  const handleSetReference = async () => {
    if (selectedId === null || selectedSlot === null) return;

    const apiSlot = selectedSlot + 1;
    const url = `${window.location.origin}/CPL?seite.ACP&KTR${apiSlot}=${selectedId}`;
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error("Fehler beim Setzen der Referenzkurve");
      alert("✅ Referenzkurve erfolgreich gesetzt.");
    } catch (error) {
      console.error("❌ Fehler:", error);
      alert("❌ Referenzkurve konnte nicht gesetzt werden.");
    }
  };

  // 📥 Beim Slot-Wechsel TDM-Liste + letzte ID laden
  useEffect(() => {
    if (selectedSlot !== null) {
      dispatch(fetchTDMDataBySlotThunk(selectedSlot)).then((action: any) => {
        const slotData = action.payload?.data;
        if (slotData?.length > 0) {
          const lastId = slotData[0].id;
          setSelectedId(lastId);
          dispatch(fetchTDRChartDataByIdThunk(lastId));
        }
      });
    }
  }, [selectedSlot, dispatch]);

  return (
    <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
      {/* 🧩 Slot-Anzeige (1-basiert für Benutzer) */}
      <div className="text-sm font-semibold">
        {selectedSlot !== null
          ? `Slot ${selectedSlot + 1}`
          : "Kein Slot gewählt"}
      </div>

      {/* ✅ Referenz setzen */}
      {selectedId !== null && (
        <button
          onClick={handleSetReference}
          className="border border-blue-500 text-blue-600 bg-white rounded px-3 py-1 text-sm hover:bg-blue-100"
        >
          Als Referenzkurve setzen
        </button>
      )}

      {/* 🔽 Dropdown für Messungen */}
      <div className="flex items-center space-x-2">
        <label htmlFor="tdrIdSelect" className="text-sm font-semibold">
          Messung ID
        </label>
        <select
          id="tdrIdSelect"
          value={selectedId ?? ""}
          onChange={handleSelectChange}
          className="border rounded px-2 py-1 text-sm"
          disabled={idsForSlot.length === 0}
        >
          <option value="">-- Wähle Messung --</option>
          {idsForSlot.map((entry) => (
            <option key={entry.id} value={entry.id}>
              ID {entry.id} – {entry.t}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

export default TDRChartActionBar;