// /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useAppDispatch } from "../../../../../../redux/store";

import { RootState } from "../../../../../../redux/store";
import { fetchTDRChartDataById } from "../../../../../../services/fetchTDRChartDataById";
import {
  setTDRChartDataById,
  setSelectedTDRId,
} from "../../../../../../redux/slices/tdrDataByIdSlice";
import { fetchTDMDataBySlotThunk } from "../../../../../../redux/thunks/fetchTDMDataBySlotThunk";

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

  const tdmChartData = useSelector((state: RootState) => state.tdmChart.data);
  const selectedSlot = useSelector(
    (state: RootState) => state.kueChartMode.selectedSlot
  );

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

  const [selectedId, setSelectedId] = useState<number | null>(null);
  //-------------------------------
  const handleSelectChange = async (
    e: React.ChangeEvent<HTMLSelectElement>
  ) => {
    const id = parseInt(e.target.value);
    setSelectedId(id);

    const data = await fetchTDRChartDataById(id);
    if (!data) return;

    dispatch(setTDRChartDataById({ id, data }));
    dispatch(setSelectedTDRId(id));
  };
  //-------------------------------
  const handleReset = () => {
    setSelectedId(null);
    dispatch(setSelectedTDRId(-1)); // z. B. -1 als „Reset“-Kennzeichnung
  };
  //-------------------------------
  const handleSetReference = async () => {
    if (selectedId === null || selectedSlot === null) return;

    const url = `${window.location.origin}/CPL?seite.ACP&KTR${selectedSlot}=${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.");
    }
  };
  //-------------------------------
  useEffect(() => {
    if (selectedSlot !== null) {
      dispatch(fetchTDMDataBySlotThunk(selectedSlot));
    }
  }, [selectedSlot]);
  //--------------------------------
  return (
    <div className="flex justify-between items-center p-2 bg-gray-100 rounded-lg space-x-4">
      {/* Ausgewählte Slot Nummer anzeigen */}
      <div className="text-sm font-semibold">
        {selectedSlot !== null
          ? `Slot ${selectedSlot + 1}`
          : "Kein Slot gewählt"}
      </div>

      {/* 🔵 Linke Seite: Reset-Button */}
      <button
        className="border border-gray-300 bg-white rounded px-3 py-1 text-sm hover:bg-gray-200"
        onClick={handleReset}
      >
        Letzte Messung
      </button>
      {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>
      )}

      {/* 🔵 Rechte Seite: Dropdown */}
      <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;