"use client"; // components/modules/Kue705FO.jsx
import React, { useState, useEffect } from "react";
import ReactModal from "react-modal";
import Chart from "chart.js/auto";
import KueModal from "../modales/KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons

function Kue705FO({
  isolationswert,
  schleifenwiderstand,
  modulName,
  kueVersion = "V4.19",
  kueOnline,
  slotIndex,
  tdrLocation,
  alarmStatus,
}) {
  const [currentAlarmStatus, setCurrentAlarmStatus] = useState(false);
  const [currentModulName, setCurrentModulName] = useState(modulName);
  const [activeButton, setActiveButton] = useState("Schleife");
  const [loopDisplayText, setloopDisplayText] = useState(
    "Schleifenwiderstand [kOhm]"
  );
  const [isoDisplayText, setIsoDisplayText] = useState("Aderbruch");
  const [groundFaultDisplayText, setGroundFaultDisplayText] =
    useState("Erdschluss");
  const [loopFaultDisplayText, setLoopFaultDisplayText] =
    useState("Schleifenfehler");
  const [isoFaultDisplayText, setIsoFaultDisplayText] =
    useState("Isolationsfehler");

  const [loading, setLoading] = useState(false);
  const [currentDisplayValue, setCurrentDisplayValue] = useState(
    schleifenwiderstand || "0"
  );
  const [showModal, setShowModal] = useState(false);
  const [showChartModal, setShowChartModal] = useState(false); // Modal für die Messkurve
  const [chartData, setChartData] = useState(null); // State für die geladene Chart-Daten

  const handleOpenModal = () => {
    setShowModal(true);
  };

  const handleCloseModal = () => {
    setShowModal(false);
  };

  // Funktion zum Anzeigen des Chart-Modals
  const handleOpenChartModal = () => {
    setShowChartModal(true);
    if (activeButton === "TDR") {
      loadTDRChartData(); // Lade TDR-Daten, wenn der TDR-Button aktiv ist
    } else {
      loadLoopChartData(); // Andernfalls lade die Schleifenmessdaten
    }
  };

  const handleCloseChartModal = () => {
    setShowChartModal(false);
  };
  const environment = process.env.NODE_ENV || "production";
  let fileData;
  // Daten laden und den TDR-Chart erstellen
  const loadTDRChartData = () => {
    const slot = slotIndex;
    //const fileData = `../cpl?lastTDR/slot${slot}.json`; // TDR-Daten je nach Slot laden
    if (environment === "production") {
      fileData = `/CPL?/CPL/lastTDR/slot${slot}.json`; // Produktions-Pfad
    } else {
      fileData = `/CPLmockData/lastTDR/slot${slot}.json`; // Mock-Daten-Pfad für Entwicklung
    }

    fetch(fileData)
      .then((response) => response.json())
      .then((data) => {
        setChartData(data); // Daten setzen
        createTDRChart(data); // Chart für TDR-Messung erstellen
      })
      .catch((error) => {
        console.error("Fehler beim Laden der TDR-Messkurvendaten:", error);
      });
  };

  // Daten laden und den Schleifenmessungs-Chart erstellen
  const loadLoopChartData = () => {
    const slot = slotIndex;
    //const fileData = `../cpl?4000values/slot${slot}.json`; // Schleifenmessdaten je nach Slot laden
    if (environment === "production") {
      fileData = `/CPL?/CPL/4000values/slot${slot}.json`; // Produktions-Pfad
    } else {
      fileData = `/CPLmockData/4000values/slot${slot}.json`; // Mock-Daten-Pfad für Entwicklung
    }

    fetch(fileData)
      .then((response) => response.json())
      .then((data) => {
        setChartData(data); // Daten setzen
        createChart(data, "Schleifenmesskurve"); // Chart für Schleifenmessung erstellen
      })
      .catch((error) => {
        console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error);
      });
  };

  // Funktion zum Erstellen des Charts
  // Funktion zum Erstellen des Charts
  const createChart = (data) => {
    const ctx = document.getElementById("myChart").getContext("2d");

    // Funktion zur Umwandlung des Datums in das deutsche Format
    const formatToGermanDate = (timestamp) => {
      const date = new Date(timestamp);
      return new Intl.DateTimeFormat("de-DE", {
        day: "2-digit",
        month: "2-digit",
        year: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      }).format(date);
    };
    // Ausgabe der Chart-Daten in der Konsole mit Slot-Informationen
    console.log(`Chart-Daten für Slot ${slotIndex + 1}:`, data);
    new Chart(ctx, {
      type: "line",
      data: {
        labels: data.map((row) => formatToGermanDate(row.t)).reverse(), // Zeitwerte ins deutsche Format umwandeln und umkehren
        datasets: [
          {
            label: "Isolationswiderstand (MOhm)", // Einheit hinzugefügt
            data: data.map((row) => row.m).reverse(),
            borderColor: "#00AEEF",
            fill: false,
            yAxisID: "y",
          },
          {
            label: "Schleifenwiderstand (kOhm)", // Einheit hinzugefügt
            data: data.map((row) => row.n).reverse(),
            borderColor: "black",
            fill: false,
            yAxisID: "y1",
          },
        ],
      },
      options: {
        scales: {
          y: {
            type: "linear",
            position: "left",
            title: {
              display: true,
              text: "MOhm", // Einheit für linke Achse hinzugefügt
            },
          },
          y1: {
            type: "linear",
            position: "right",
            title: {
              display: true,
              text: "kOhm", // Einheit für rechte Achse hinzugefügt
            },
          },
        },
      },
    });
  };

  // Funktion zum Erstellen des TDR-Charts
  const createTDRChart = (dataTDR) => {
    const ctx = document.getElementById("myChart").getContext("2d");
    console.log(`TDR-Daten für Slot ${slotIndex + 1}:`, dataTDR);
    new Chart(ctx, {
      type: "line",
      data: {
        labels: dataTDR.map((row) => row.t), // Entfernung oder Zeit auf der x-Achse
        datasets: [
          {
            label: "Pegel",
            data: dataTDR.map((row) => row.m), // Nur Pegel auf der y-Achse
            borderColor: "#00AEEF",
            borderWidth: 1,
            pointBorderWidth: 0,
            pointStyle: false,
            fill: false,
          },
        ],
      },
      options: {
        scales: {
          y: {
            type: "linear",
            position: "left",
          },
        },
      },
    });
  };

  // Funktion für die TDR-Messung
  const goTDR = () => {
    //-------------------------------------------------
    /*     const [isClient, setIsClient] = useState(false);

    useEffect(() => {
      // This will only run in the client/browser, not on the server
      setIsClient(true);
    }, []);

    if (!isClient) {
      return null; // or a loading spinner
    } */
    //-------------------------------------------------
    let slot = slotIndex;

    if (slot >= 32) {
      return;
    }

    let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;

    setLoading(true);
    alert(`TDR wird für Slot ${slot} gestartet...`);
    fetch(`/CPL?Service/KUEdetailTDR.ACP&KTT${slotFormat}=1&slot=${slot}`, {
      method: "GET",
    })
      .then((response) => {
        if (response.ok) {
          alert(`TDR erfolgreich gestartet für Slot ${slot}`);
          console.log("TDR erfolgreich gestartet für Slot", slot);
        } else {
          console.error("Fehler beim Senden der TDR-Anfrage");
        }
      })
      .catch((error) => {
        console.error("Fehler:", error);
      })
      .finally(() => setLoading(false));
  };

  // Funktion für die Schleifenmessung
  const goLoop = () => {
    let slot = slotIndex;

    if (slot >= 32) {
      return;
    }

    let slotFormat = slot < 10 ? `0${slot}` : `${slot}`;

    setLoading(true); // Setze den Ladezustand auf true
    alert(`Schleifenmessung wird für Slot ${slot} gestartet...`);

    fetch(`/CPL?Service/KUEdetail.HTML&KS_${slotFormat}=1&slot=${slot}`, {
      method: "GET",
    })
      .then((response) => {
        if (response.ok) {
          alert(`Schleifenmessung erfolgreich gestartet für Slot ${slot}`);
          console.log("Schleifenmessung erfolgreich gestartet für Slot", slot);
        } else {
          alert("Fehler beim Starten der Schleifenmessung.");
          console.error("Fehler beim Senden der Schleifen-Anfrage");
        }
      })
      .catch((error) => {
        alert("Ein Fehler ist aufgetreten.");
        console.error("Fehler:", error);
      })
      .finally(() => setLoading(false)); // Ladezustand zurücksetzen
  };

  const handleModulNameChange = (newName) => {
    setCurrentModulName(newName);
  };

  // Überprüfe, ob ein Modul im Slot vorhanden ist
  const isModulPresent = kueOnline === 1; // Since you're passing the status directly now

  const handleButtonClick = (button) => {
    if (button === "Schleife") {
      setActiveButton("Schleife");
      setloopDisplayText("Schleifenwiderstand [kOhm]");
      setCurrentDisplayValue(schleifenwiderstand || "0");
    } else if (button === "TDR") {
      setActiveButton("TDR");
      setloopDisplayText("Entfernung [Km]");
      setCurrentDisplayValue(tdrLocation || "0");
    }
  };

  // Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
  const handleRefreshClick = () => {
    if (activeButton === "Schleife") {
      goLoop(); // Wenn Schleife aktiv ist, starte goLoop
    } else if (activeButton === "TDR") {
      goTDR(); // Wenn TDR aktiv ist, starte goTDR
    }
  };
  useEffect(() => {
    setCurrentModulName(modulName);
  }, [modulName]);

  useEffect(() => {
    setCurrentDisplayValue(schleifenwiderstand);
  }, [schleifenwiderstand]);
  useEffect(() => {
    const updateAlarmStatus = () => {
      const alarmStatus =
        (window.kueAlarm1 && window.kueAlarm1[slotIndex]) ||
        (window.kueAlarm2 && window.kueAlarm2[slotIndex]) ||
        (window.kueCableBreak && window.kueCableBreak[slotIndex]) ||
        (window.kueGroundFault && window.kueGroundFault[slotIndex]);

      setCurrentAlarmStatus(alarmStatus); // Aktualisiere den Alarmstatus
    };

    // Aktualisierung sofort und alle 5 Sekunden
    updateAlarmStatus();
    const interval = setInterval(updateAlarmStatus, 5000);

    return () => clearInterval(interval); // Bereinigung bei Entladen der Komponente
  }, [slotIndex]);

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

  // Intervall für den Wechsel der Anzeige zwischen "Aderbruch" und ">200 MOhm"
  useEffect(() => {
    if (window.kueCableBreak[slotIndex] === 1) {
      const intervalId = setInterval(() => {
        setIsoDisplayText((prevText) =>
          prevText === "Aderbruch" ? (
            <i
              className="bi bi-exclamation-triangle"
              style={{ fontSize: "24px" }}
            ></i>
          ) : (
            "Aderbruch"
          )
        );
      }, 2000);

      return () => clearInterval(intervalId);
    } else {
      setIsoDisplayText(isolationswert || ">200");
    }
  }, [slotIndex, isolationswert]);

  //-------------------------------------------------
  useEffect(() => {
    if (window.kueGroundFault[slotIndex] === 1) {
      const intervalId = setInterval(() => {
        setGroundFaultDisplayText((prevText) =>
          prevText === "Erdschluss" ? (
            <i
              className="bi bi-exclamation-triangle"
              style={{ fontSize: "24px" }}
            ></i>
          ) : (
            "Erdschluss"
          )
        );
      }, 2000); // Wechsel alle 2 Sekunden

      return () => clearInterval(intervalId);
    } else {
      setGroundFaultDisplayText(isolationswert || ">200"); // Standardwert, wenn kein Erdschluss vorliegt
    }
  }, [slotIndex, isolationswert]);

  // Intervall für den Wechsel der Anzeige zwischen "Schleifenfehler" und dem Icon
  useEffect(() => {
    if (window.kueAlarm2[slotIndex] === 1) {
      const intervalId = setInterval(() => {
        setLoopFaultDisplayText((prevText) =>
          prevText === "Schleifenfehler" ? (
            <i
              className="bi bi-exclamation-triangle"
              style={{ fontSize: "24px" }}
            ></i>
          ) : (
            "Schleifenfehler"
          )
        );
      }, 2000);

      return () => clearInterval(intervalId);
    } else {
      setLoopFaultDisplayText(isolationswert || ">200");
    }
  }, [slotIndex, isolationswert]);

  // Intervall für den Wechsel der Anzeige zwischen "Isolationsfehler" und dem Icon
  useEffect(() => {
    if (window.kueAlarm1[slotIndex] === 1) {
      const intervalId = setInterval(() => {
        setIsoFaultDisplayText((prevText) =>
          prevText === "Isolationsfehler" ? (
            <i
              className="bi bi-exclamation-triangle"
              style={{ fontSize: "24px" }}
            ></i>
          ) : (
            "Isolationsfehler"
          )
        );
      }, 2000);

      return () => clearInterval(intervalId);
    } else {
      setIsoFaultDisplayText(isolationswert || ">200");
    }
  }, [slotIndex, isolationswert]);
  //------------------------------------------------

  return (
    <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
      {isModulPresent ? (
        <>
          <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
            <div className="flex items-start justify-between h-[30px]">
              <div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
                <span className="text-white text-[10px]">{slotIndex + 1}</span>
              </div>

              <h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>

              <button
                onClick={handleOpenModal}
                className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
              >
                <span className="text-white text-[20px]">⚙</span>
              </button>
            </div>

            <KueModal
              showModal={showModal}
              onClose={handleCloseModal}
              slot={slotIndex}
              onModulNameChange={handleModulNameChange}
            />
            {/*
          Bei Kabelbruch (cableBreak), Erdschluss (groundFault), Isolationsfehler (measure1Alarm) oder Schleifenfehler (measure2Alarm) 
          */}
            <div className="flex flex-col mt-[10px] ml-[10px]">
              <div className="flex items-center">
                <div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div>
                <span className="text-white text-[10px]">Betrieb</span>
              </div>
              <div className="flex items-center mt-1">
                <div
                  className={`w-[10px] h-[10px] rounded-full mr-2 ${
                    alarmStatus ? "bg-red-500" : "bg-gray-300"
                  }`}
                ></div>
                <span className="text-white text-[10px]">Alarm</span>
              </div>
            </div>
            {/* Anzeige für Isolationsfehler, Aderbruch, Erdschluss oder Schleifenfehler */}
            <div className="relative mt-[50px] mx-auto bg-black text-white w-[100px] h-[40px] flex items-center justify-center text-[18px] z-10">
              <div className="text-center">
                <span
                  className={
                    window.kueCableBreak[slotIndex] === 1 ||
                    window.kueGroundFault[slotIndex] === 1 ||
                    window.kueAlarm1[slotIndex] === 1 ||
                    window.kueAlarm2[slotIndex] === 1
                      ? "text-red-500 text-[14px]" // Rot und kleinere Schrift für Alarme
                      : ""
                  }
                >
                  {/* Zeigt den entsprechenden Fehler oder den Isolationswert */}
                  {window.kueCableBreak[slotIndex] === 1
                    ? isoDisplayText // Aderbruch-Anzeige
                    : window.kueGroundFault[slotIndex] === 1
                    ? groundFaultDisplayText // Erdschluss-Anzeige
                    : window.kueAlarm1[slotIndex] === 1
                    ? isoFaultDisplayText // Isolationsfehler-Anzeige mit Icon
                    : window.kueAlarm2[slotIndex] === 1
                    ? loopFaultDisplayText // Schleifenfehler-Anzeige mit Icon
                    : isolationswert || ">200"}{" "}
                </span>
                {window.kueCableBreak[slotIndex] !== 1 &&
                  window.kueGroundFault[slotIndex] !== 1 &&
                  window.kueAlarm1[slotIndex] !== 1 &&
                  window.kueAlarm2[slotIndex] !== 1 && (
                    <div className="text-[8px]">ISO MOhm</div>
                  )}
              </div>
            </div>

            <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
            <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>

            <div className="absolute bottom-[20px] left-0 right-0 text-black text-[10px] bg-gray-300 p-1 text-center">
              {currentModulName || "Test1"}
            </div>

            <div className="absolute bottom-1 right-1 text-black text-[8px]">
              {kueVersion}
            </div>
          </div>
          {/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */}
          <div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
            <span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
              {loopDisplayText}
            </span>

            <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
              <button
                onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
                className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
                disabled={loading} // Disable button while loading
              >
                <span className="text-white text-[18px]">⟳</span>
              </button>

              <div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2 w-[100px] flex justify-center items-center">
                <div className="text-center text-black text-[10px]">
                  <p>{currentDisplayValue + " KOhm"}</p>
                </div>
              </div>
            </div>

            <div className="flex mt-2 space-x-1">
              <button
                onClick={() => handleButtonClick("Schleife")}
                className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
                  activeButton === "Schleife"
                    ? "bg-littwin-blue"
                    : "bg-gray-400"
                }`}
              >
                Schleife
              </button>
              <button
                onClick={() => handleButtonClick("TDR")}
                className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
                  window.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={window.tdrActive[slotIndex] === 0} // Button deaktiviert, wenn TDR für diesen Slot nicht aktiv ist
              >
                TDR
              </button>
            </div>

            <button
              onClick={handleOpenChartModal} // Öffnet das Chart-Modal
              className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
            >
              Messkurve
            </button>
          </div>

          {/* Modal für Messkurve */}
          {showChartModal && (
            <ReactModal
              isOpen={showChartModal}
              onRequestClose={handleCloseChartModal}
              ariaHideApp={false}
              style={{
                overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
                content: {
                  top: "50%",
                  left: "50%",
                  right: "auto",
                  bottom: "auto",
                  marginRight: "-50%",
                  transform: "translate(-50%, -50%)",
                  width: "95%",
                  maxWidth: "1200px",
                  height: "650px",
                  padding: "10px",
                },
              }}
            >
              <button
                onClick={handleCloseChartModal}
                style={{
                  position: "absolute",
                  top: "10px",
                  right: "10px",
                  background: "transparent",
                  border: "none",
                  fontSize: "24px",
                  cursor: "pointer",
                }}
              >
                <i className="bi bi-x-circle-fill"></i>{" "}
                {/* Bootstrap Icon "X" */}
              </button>
              <h2>Messkurve Slot {slotIndex + 1}</h2>
              <canvas
                id="myChart"
                style={{ width: "100%", height: "600px" }}
              ></canvas>
            </ReactModal>
          )}
        </>
      ) : (
        <div className="flex items-center justify-center h-full text-gray-500">
          <p>Kein Modul im Slot {slotIndex + 1}</p>
        </div>
      )}
    </div>
  );
}

export default Kue705FO;