"use client"; // components/modules/kue705FO/Kue705FO.tsx
import React, { useState, useEffect, useRef, useMemo } from "react";
import { useSelector } from "react-redux";
import KueModal from "./modals/SettingsModalWrapper";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { Kue705FOProps } from "../../../../types/Kue705FOProps";
import ChartSwitcher from "./Charts/ChartSwitcher";
//-------Redux Toolkit--------
import { RootState } from "../../../../redux/store";
import { useDispatch } from "react-redux";
//-------hooks----------------
import useChartPlugin from "./hooks/useChartPlugin";
import useAlarmStatus from "./hooks/useAlarmStatus";
import useKueVersion from "./hooks/useKueVersion";
import useIsoDisplay from "./hooks/useIsoDisplay";
import useLoopDisplay from "./hooks/useLoopDisplay";
import useModulName from "./hooks/useModulName";
import useChartData from "./hooks/useChartData";
import useTDRChart from "./hooks/useTDRChart";
//--------handlers----------------
import handleButtonClick from "./kue705FO-Funktionen/handleButtonClick";
import handleOpenModal from "./handlers/handleOpenModal";
import handleCloseModal from "./handlers/handleCloseModal";
import handleOpenChartModal from "./handlers/handleOpenChartModal";
import handleCloseChartModal from "./handlers/handleCloseChartModal";
import handleRefreshClick from "./handlers/handleRefreshClick";

const Kue705FO: React.FC<Kue705FOProps> = ({
  isolationswert,
  schleifenwiderstand,
  modulName,
  kueOnline,
  slotIndex,
  tdrLocation,
}) => {
  /*   console.log(
    `Rendering Kue705FO - SlotIndex: ${slotIndex}, ModulName: ${modulName}`
  ); */
  const selectedChartData = useSelector(
    (state: RootState) => state.selectedChartDataSlice.selectedChartData
  );

  const dispatch = useDispatch();
  const { kueName } = useSelector((state: RootState) => state.kueDataSlice);

  const chartRef = useRef(null);

  const [activeButton, setActiveButton] = useState<"Schleife" | "TDR">(
    "Schleife"
  );

  const [loopTitleText, setloopTitleText] = useState(
    "Schleifenwiderstand [kOhm]"
  );
  const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
  const [groundFaultDisplayText, setGroundFaultDisplayText] =
    useState("Erdschluss");
  const [loopFaultDisplayText, setLoopFaultDisplayText] =
    useState("Schleifenfehler");
  const [isoFaultDisplayText, setIsoFaultDisplayText] =
    useState("Isolationsfehler");
  const [isoGreaterThan200, setIsoGreaterThan200] = useState(">200 MOhm");

  const [loading, setLoading] = useState(false);

  const [showModal, setShowModal] = useState(false);
  const [showChartModal, setShowChartModal] = useState(false);
  const [loopMeasurementCurveChartData, setLoopMeasurementCurveChartData] =
    useState(null);

  //------- Redux-Variablen abrufen--------------------------------
  const {
    kueVersion: reduxKueVersion,
    tdrActive,
    kueCableBreak: kueCableBreakRaw,
    kueGroundFault: kueGroundFaultRaw,
    kueAlarm1: kueAlarm1Raw,
    kueAlarm2: kueAlarm2Raw,
    kueOverflow: kueOverflowRaw,
    kuePSTmMinus96V, // <- richtig, weil so im State vorhanden
  } = useSelector((state: RootState) => state.kueDataSlice);

  //---------------------------------------------
  const kueCableBreak = useMemo(
    () => kueCableBreakRaw?.map(Number) ?? [],
    [kueCableBreakRaw]
  );
  const kueGroundFault = useMemo(
    () => kueGroundFaultRaw?.map(Number) ?? [],
    [kueGroundFaultRaw]
  );
  const kueAlarm1 = useMemo(
    () => kueAlarm1Raw?.map(Number) ?? [],
    [kueAlarm1Raw]
  );
  const kueAlarm2 = useMemo(
    () => kueAlarm2Raw?.map(Number) ?? [],
    [kueAlarm2Raw]
  );
  const kueOverflow = useMemo(
    () => kueOverflowRaw?.map(Number) ?? [],
    [kueOverflowRaw]
  );
  //-------------------------handlers-------------------------
  const openModal = () => handleOpenModal(setShowModal);
  const closeModal = () => handleCloseModal(setShowModal);
  const openChartModal = () =>
    handleOpenChartModal(setShowChartModal, dispatch, slotIndex, activeButton);
  const refreshClick = () =>
    handleRefreshClick(activeButton, slotIndex, setLoading);
  const closeChartModal = () =>
    handleCloseChartModal(setShowChartModal, chartInstance);
  //----------------------------------
  //hooks einbinden
  const kueVersion = useKueVersion(slotIndex, reduxKueVersion);
  const currentAlarmStatus = useAlarmStatus(
    slotIndex,
    kueAlarm1,
    kueAlarm2,
    kueCableBreak,
    kueGroundFault
  );
  const isoDisplayValue = useIsoDisplay(
    slotIndex,
    kuePSTmMinus96V,
    kueCableBreak,
    kueGroundFault,
    kueAlarm1,
    kueAlarm2,
    kueOverflow,
    isolationswert,
    isoDisplayText,
    groundFaultDisplayText,
    isoFaultDisplayText,
    loopFaultDisplayText,
    isoGreaterThan200
  );
  const { currentModulName, setCurrentModulName } = useModulName(
    slotIndex,
    modulName
  );
  //---------------------------------
  //---------------------------------
  const tdmChartData = useSelector(
    (state: RootState) => state.tdmChartSlice.data
  );
  const latestTdrDistanceMeters =
    Array.isArray(tdmChartData?.[slotIndex]) &&
    tdmChartData[slotIndex].length > 0 &&
    typeof tdmChartData[slotIndex][0].d === "number"
      ? tdmChartData[slotIndex][0].d
      : 0;

  const latestTdrDistance = Number((latestTdrDistanceMeters / 1000).toFixed(3));
  //setLoopDisplayValue(latestTdrDistance);

  //---------------------------------

  const loopValue =
    activeButton === "TDR"
      ? latestTdrDistance
      : typeof schleifenwiderstand === "number"
      ? schleifenwiderstand
      : Number(schleifenwiderstand);

  const { loopDisplayValue, setLoopDisplayValue } = useLoopDisplay(
    loopValue,
    activeButton
  );
  const zoomPlugin = useChartPlugin();
  useChartData(loopMeasurementCurveChartData);
  const { chartInstance } = useTDRChart(selectedChartData);

  //---------------------------------

  return (
    <div
      className="relative bg-gray-300 w-[7.25rem] h-[24.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0
             scale-100 sm:scale-95 md:scale-100 lg:scale-105 xl:scale-90 2xl:scale-125 top-3 qhd:scale-150 qhd:-translate-y-0 
          
             "
    >
      {kueOnline === 1 ? (
        <>
          <div className="relative w-[7.075rem] h-[15.156rem] bg-littwin-blue border-[0.094rem] border-gray-400 z-0">
            <div className="flex items-start justify-between h-[1.875rem]">
              <div className="relative w-[1.25rem] h-[1.25rem] bg-gray-800 flex items-center justify-center">
                <span className="text-white text-[0.625rem]">
                  {slotIndex + 1}
                </span>
              </div>

              <h3 className="text-white font-bold text-[0.563rem] mr-[1rem]">
                KÜ705-FO
              </h3>

              <button
                onClick={openModal}
                className="w-[0.938rem] h-[0.938rem] bg-gray-400 flex items-center justify-center"
              >
                <span className="text-white text-[1.25rem]">⚙</span>
              </button>
            </div>
            {}
            {showModal && (
              <KueModal
                key={`${slotIndex}-${Date.now()}`} // ← immer neuer Schlüssel → erzwingt Remount
                showModal={showModal}
                onClose={closeModal}
                slot={slotIndex}
                onModulNameChange={setCurrentModulName}
              />
            )}

            <div className="flex flex-col mt-[0.625rem] ml-[0.625rem]">
              <div className="flex items-center space-x-[0.25rem] mt-[0.625rem]">
                <div className="flex flex-col items-start space-y-[0.063rem] mr-[0.063rem]">
                  <span className="text-white text-[0.625rem]">Betrieb</span>
                  <span className="text-white text-[0.625rem]">Alarm</span>
                </div>
                <div className="flex flex-col items-center space-y-[0.188rem]">
                  <div className="w-[0.625rem] h-[0.625rem] bg-green-500 rounded-full"></div>
                  <div
                    className={`w-[0.625rem] h-[0.625rem] rounded-full ${
                      currentAlarmStatus ? "bg-red-500" : "bg-gray-300"
                    }`}
                  ></div>
                </div>
              </div>
            </div>

            {/* Anzeige des Isolation */}
            <div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.25rem] h-[2.5rem] flex items-center justify-center text-[1.125rem] z-10">
              <div className="text-center">
                <span
                  className={
                    Number(kuePSTmMinus96V?.[slotIndex]) === 1 ||
                    Number(kueCableBreak?.[slotIndex]) === 1 ||
                    Number(kueGroundFault?.[slotIndex]) === 1 ||
                    Number(kueAlarm1?.[slotIndex]) === 1 ||
                    Number(kueAlarm2?.[slotIndex]) === 1
                      ? "text-red-500 text-[0.875rem]"
                      : Number(kueOverflow?.[slotIndex]) === 1
                      ? "text-white text-[0.875rem]"
                      : ""
                  }
                >
                  {isoDisplayValue}
                </span>

                {Number(kuePSTmMinus96V?.[slotIndex]) !== 1 &&
                  Number(kueCableBreak?.[slotIndex]) !== 1 &&
                  Number(kueGroundFault?.[slotIndex]) !== 1 &&
                  Number(kueAlarm1?.[slotIndex]) !== 1 &&
                  Number(kueAlarm2?.[slotIndex]) !== 1 &&
                  Number(kueOverflow?.[slotIndex]) !== 1 && (
                    <div className="text-[0.5rem]">ISO MOhm</div>
                  )}
              </div>
            </div>

            <div className="absolute top-0 left-[4.688rem] w-[0.188rem] h-full bg-white z-0"></div>
            <div className="absolute top-[2.5rem] left-[4.688rem] w-[2.5rem] h-[0.188rem] bg-white z-0"></div>

            <div className="absolute bottom-[1.25rem] left-0 right-0 text-black text-[0.625rem] bg-gray-300 p-[0.063rem] text-center">
              {kueName?.[slotIndex] || `Modul ${slotIndex + 1}`}
            </div>

            <div className="absolute bottom-[0.063rem] right-[0.063rem] text-black text-[0.5rem]">
              {kueVersion}
            </div>
          </div>
          <div className="flex mt-3 space-x-[0.063rem] ">
            <button
              onClick={() =>
                handleButtonClick(
                  "Schleife",
                  setActiveButton,
                  setloopTitleText,
                  (value) =>
                    setLoopDisplayValue(
                      typeof value === "number" ? value : Number(value)
                    ), // Hier sicherstellen, dass nur number übergeben wird
                  Number(schleifenwiderstand), // <- Stelle sicher, dass es eine Zahl ist
                  tdrLocation,
                  slotIndex,
                  dispatch
                )
              }
              className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
                activeButton === "Schleife" ? "bg-littwin-blue" : "bg-gray-400"
              }`}
            >
              Schleife
            </button>
            <button
              onClick={() => {
                setActiveButton("TDR");
                setloopTitleText("Entfernung [Km]");

                const latestTdrDistanceMeters =
                  Array.isArray(tdmChartData?.[slotIndex]) &&
                  tdmChartData[slotIndex].length > 0 &&
                  typeof tdmChartData[slotIndex][0].d === "number"
                    ? tdmChartData[slotIndex][0].d
                    : 0;

                const latestTdrDistance = Number(
                  (latestTdrDistanceMeters / 1000).toFixed(3)
                );
                setLoopDisplayValue(latestTdrDistance);
              }}
              className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
                Array.isArray(tdrActive) && tdrActive[slotIndex] === 0
                  ? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
                  : activeButton === "TDR"
                  ? "bg-littwin-blue" // Aktiviert: Littwin Blau
                  : "bg-gray-400" // Nicht geklickt: Dunkelgrau
              }`}
              disabled={Array.isArray(tdrActive) && tdrActive[slotIndex] === 0} // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
            >
              TDR
            </button>
          </div>

          {/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */}
          <div className="absolute bottom-[0.063rem] left-[0.068rem] w-[7.074rem] h-[6.1rem] bg-gray-300 border-[0.094rem] border-gray-400 p-[0.063rem]">
            <span className="text-black text-[0.438rem] absolute top-[0.125rem] left-[0.063rem] mt-1">
              {loopTitleText}
            </span>

            <div className="relative w-full h-[2.813rem]  bg-gray-100 border border-gray-400 flex items-center justify-center mt-4">
              <button
                onClick={refreshClick} // Dynamische Funktion basierend auf aktivem Button
                className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
                disabled={loading} // Disable button while loading
              >
                <span className="text-white text-[1.125rem]">⟳</span>
              </button>

              <div className="absolute bottom-[0.313rem] left-1/2 transform -translate-x-1/2 w-[6.25rem] flex justify-center items-center">
                <div className="text-center text-black text-[0.625rem]">
                  <p>
                    {loopDisplayValue +
                      (activeButton === "Schleife" ? " KOhm" : " Km")}
                  </p>
                </div>
              </div>
            </div>

            <button
              onClick={openChartModal} // Öffnet das Chart-Modal
              className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center mt-[0.063rem]"
            >
              Messkurve
            </button>
          </div>

          {/* Modal für Messkurve */}
          {showChartModal && (
            <ChartSwitcher
              isOpen={showChartModal}
              onClose={closeChartModal}
              slotIndex={slotIndex}
            />
          )}
        </>
      ) : (
        <div className="flex items-center justify-center h-full text-gray-500">
          {/* Das soll rausgenommen werden 
          <p>Kein Modul im Slot {slotIndex + 0}</p>
         */}
        </div>
      )}
    </div>
  );
};

export default Kue705FO;