// /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";
import { fetchReferenceCurveBySlotThunk } from "../../../../../../redux/thunks/fetchReferenceCurveBySlotThunk"; // ⬅ import ergänzen

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 tdrDataById = useSelector(
    (state: RootState) => state.tdrDataById.dataById
  );
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const currentChartData = selectedId !== null ? tdrDataById[selectedId] : [];

  // 🔄 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 = () => {
    if (selectedSlot === null || !currentChartData?.length) return;

    localStorage.setItem(
      `ref-curve-slot${selectedSlot}`,
      JSON.stringify(currentChartData)
    );

    // 🔄 Redux updaten → Chart reagiert sofort!
    dispatch(fetchReferenceCurveBySlotThunk(selectedSlot));

    alert("Referenzkurve gesetzt!");
  };

  // 📥 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;