"use client"; // app/kabelueberwachung/page.jsx
import React, { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Kue705FO from "../components/modules/Kue705FO";
import { useDispatch, useSelector } from "react-redux";
import { setVariables } from "../store/variablesSlice";
//import { loadWindowVariables } from "../utils/loadWindowVariables";

function Kabelueberwachung() {
  const router = useRouter();
  const dispatch = useDispatch();
  const [activeRack, setActiveRack] = useState(1); // Aktives Rack
  const [alarmStatus, setAlarmStatus] = useState([]); // Alarmstatus

  // Redux-Variablen aus dem Store abrufen
  const {
    kueOnline,
    kueID,
    kueIso,
    kueAlarm1,
    kueAlarm2,
    kueRes,
    kueCableBreak,
    kueGroundFault,
  } = useSelector((state) => state.variables);

  // URL-Parameter 'rack' abfragen und setzen
  useEffect(() => {
    const query = new URLSearchParams(window.location.search);
    const rackParam = query.get("rack");
    if (rackParam) {
      setActiveRack(parseInt(rackParam));
    }
  }, [router.query]);

  // Laden der `window`-Variablen und Speichern in Redux
  /*   useEffect(() => {
    const fetchData = async () => {
      const variables = await loadWindowVariables();
      dispatch(setVariables(variables));
    };
    fetchData();
  }, [dispatch]);
 */
  // Alarmstatus basierend auf Redux-Variablen berechnen
  const updateAlarmStatus = () => {
    const updatedAlarmStatus = kueIso.map((_, index) => {
      return (
        (kueAlarm1 && kueAlarm1[index]) ||
        (kueAlarm2 && kueAlarm2[index]) ||
        (kueCableBreak && kueCableBreak[index]) ||
        (kueGroundFault && kueGroundFault[index])
      );
    });
    setAlarmStatus(updatedAlarmStatus);
  };

  // Alarmstatus initial berechnen und alle 10 Sekunden aktualisieren
  useEffect(() => {
    updateAlarmStatus();
    const interval = setInterval(updateAlarmStatus, 10000);
    return () => clearInterval(interval);
  }, [kueIso, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);

  // Modul- und Rack-Daten aufbereiten
  const allModules = kueIso.map((iso, index) => ({
    isolationswert: iso,
    schleifenwiderstand: kueRes[index],
    modulName: kueID[index] || "Unknown",
    kueOnlineStatus: kueOnline[index],
    alarmStatus: alarmStatus[index],
  }));

  const racks = {
    rack1: allModules.slice(0, 8),
    rack2: allModules.slice(8, 16),
    rack3: allModules.slice(16, 24),
    rack4: allModules.slice(24, 32),
  };

  // Funktion zum Wechseln des Racks
  const changeRack = (rack) => setActiveRack(rack);

  return (
    <div className="bg-gray-100 flex-1 p-6 text-black">
      <h1 className="text-2xl mb-4">Kabelüberwachung</h1>

      <div className="mb-4">
        {[1, 2, 3, 4].map((rack) => (
          <button
            key={rack}
            onClick={() => changeRack(rack)}
            className={`mr-2 ${
              activeRack === rack
                ? "bg-littwin-blue text-white p-1 rounded-sm"
                : "bg-gray-300 p-1 text-sm"
            }`}
          >
            Rack {rack}
          </button>
        ))}
      </div>

      <div className="flex flex-row space-x-4 scale-110 ml-[5%] mt-[5%]">
        {racks[`rack${activeRack}`].map((slot, index) => {
          const slotIndex = index + (activeRack - 1) * 8;
          return (
            <div key={index} className="flex">
              <Kue705FO
                isolationswert={slot.isolationswert}
                schleifenwiderstand={slot.schleifenwiderstand}
                modulName={slot.modulName}
                kueOnline={slot.kueOnlineStatus}
                alarmStatus={slot.alarmStatus}
                slotIndex={slotIndex}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default Kabelueberwachung;