"use client"; // app/dashboard/page.jsx
import React, { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import "tailwindcss/tailwind.css";
import "@fontsource/roboto";
import "bootstrap-icons/font/bootstrap-icons.css";
import { loadWindowVariables } from "../utils/loadWindowVariables";
import CPLStatus from "../components/modulesStatus/CPLStatus";
import Access1Status from "../components/modulesStatus/Access1Status";
import Access2Status from "../components/modulesStatus/Access2Status";
import KabelModulStatus from "../components/modulesStatus/KabelModulStatus";
import XioPM1Status from "../components/modulesStatus/XioPM1Status";
import XioPM2Status from "../components/modulesStatus/XioPM2Status";
import { Icon } from "@iconify/react";

function Dashboard() {
  const [isClient, setIsClient] = useState(false);
  const router = useRouter(); // Router instanzieren
  const [last20Messages, setLast20Messages] = useState([]);
  const [kueOnline, setkueOnline] = useState([]);
  const [ip, setIp] = useState("");
  const [subnet, setSubnet] = useState("");
  const [gateway, setGateway] = useState("");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [kueCableBreak, setKueCableBreak] = useState([]);
  const [appVersion, setAppVersion] = useState("");

  useEffect(() => {
    if (typeof window !== "undefined") {
      loadWindowVariables()
        .then(() => {
          if (window.last20Messages) {
            const parsedMessages = parseMessages(window.last20Messages);
            setLast20Messages(parsedMessages);
            setIp(window.ip);
            setSubnet(window.subnet);
            setGateway(window.gateway);
            setAppVersion(window.appVersion);
          } else {
            console.error("Konnte last20Messages nicht finden.");
            setError("Konnte last20Messages nicht finden.");
          }
          setLoading(false);
        })
        .catch((error) => {
          console.error("Fehler beim Laden des Skripts:", error);
          setError(error);
          setLoading(false);
        });
    }
  }, []);
  useEffect(() => {
    loadWindowVariables()
      .then(() => {
        if (window.kueCableBreak && Array.isArray(window.kueCableBreak)) {
          // Prüfe, ob window.kueCableBreak ein Array ist
          const cableBreakArray = window.kueCableBreak.map(Number);
          setKueCableBreak(cableBreakArray); // Array für kueCableBreak
        } else if (typeof window.kueCableBreak === "string") {
          // Falls es ein String ist, splitte den String und mappe ihn in ein Array
          const cableBreakArray = window.kueCableBreak.split(",").map(Number);
          setKueCableBreak(cableBreakArray);
        } else {
          console.error(
            "Konnte kueCableBreak nicht finden oder es ist kein gültiges Array/String."
          );
          setError(
            "Konnte kueCableBreak nicht finden oder es ist kein gültiges Array/String."
          );
        }
        setLoading(false);
      })
      .catch((error) => {
        console.error("Fehler beim Laden des Skripts:", error);
        setError(error);
        setLoading(false);
      });
  }, []);

  const parseMessages = (messages) => {
    messages = messages
      .replace(/<tr>/g, "\n")
      .replace(/<\/?td>/g, "")
      .replace(/<\/tr>/g, "")
      .trim();

    const rows = messages.split("\n");
    return rows.map((row) => {
      const columns = [
        row.substring(0, 5), // ID
        row.substring(5, 10), // Wert (z.B. Modulnummer)
        row.substring(10, 29), // Zeitstempel, Millisekunden entfernt :000
        row.substring(33, row.length - 1), // Meldung (ohne letztes Zeichen)
        row.substring(row.length - 1), // Status (letztes Zeichen)
      ];
      return columns;
    });
  };
  useEffect(() => {
    loadWindowVariables()
      .then(() => {
        // console.log("kueOnline Data: ", window.kueOnline); // Debug: Ausgabe von kueOnline

        if (window.kueOnline) {
          if (Array.isArray(window.kueOnline)) {
            const versionArray = window.kueOnline.map(Number);
            setkueOnline(versionArray);
          } else {
            console.error("kueOnline ist kein Array:", window.kueOnline);
            setError("Konnte kueOnline nicht als Array verarbeiten.");
          }
        } else {
          console.error("Konnte kueOnline nicht finden.");
          setError("Konnte kueOnline nicht finden.");
        }
        setLoading(false);
      })
      .catch((error) => {
        console.error("Fehler beim Laden des Skripts:", error);
        setError(error);
        setLoading(false);
      });
  }, []);
  useEffect(() => {
    loadWindowVariables()
      .then(() => {
        // Debug-Ausgaben für kueAlarm1 und kueAlarm2
        //console.log("kueAlarm1 Data: ", window.kueAlarm1);
        //console.log("kueAlarm2 Data: ", window.kueAlarm2);

        if (window.kueAlarm1 && Array.isArray(window.kueAlarm1)) {
          //console.log("kueAlarm1 ist ein Array:", window.kueAlarm1);
        } else {
          console.error("kueAlarm1 ist kein Array oder nicht definiert.");
          setError(
            "Konnte kueAlarm1 nicht finden oder es ist kein gültiges Array."
          );
        }

        if (window.kueAlarm2 && Array.isArray(window.kueAlarm2)) {
          //console.log("kueAlarm2 ist ein Array:", window.kueAlarm2);
        } else {
          console.error("kueAlarm2 ist kein Array oder nicht definiert.");
          setError(
            "Konnte kueAlarm2 nicht finden oder es ist kein gültiges Array."
          );
        }
      })
      .catch((error) => {
        console.error("Fehler beim Laden des Skripts:", error);
        setError(error);
      });
  }, []);

  const handleModuleClick = (rackNumber) => {
    // Navigiere zu /kabelueberwachung und übermittle den rackNumber als Parameter
    router.push(`/kabelueberwachung?rack=${rackNumber}`);
  };

  const renderBaugruppentraeger = () => {
    const baugruppen = [];
    const numBaugruppen = Math.ceil(kueOnline.length / 8);

    for (let i = 0; i < numBaugruppen; i++) {
      const slots = kueOnline.slice(i * 8, (i + 1) * 8);

      baugruppen.push(
        <div key={i} className="flex bg-white shadow-md rounded-lg mb-4">
          <div className="flex gap-1">
            {slots.map((version, index) => {
              const slotNumber = i * 8 + index + 1;
              const moduleVersion = window.kueVersion
                ? window.kueVersion[slotNumber - 1]
                : version;

              const hasAlarm1 = kueAlarm1.includes(slotNumber);
              const hasAlarm2 = kueAlarm2.includes(slotNumber);
              const hasCableBreak = kueCableBreak.includes(slotNumber);
              const alarmClass =
                hasAlarm1 || hasAlarm2 || hasCableBreak
                  ? "bg-red-500"
                  : "bg-white";

              return (
                <div
                  key={slotNumber}
                  className={`cursor-pointer ${alarmClass}`} // Sicherstellen, dass cursor-pointer hier verwendet wird
                  onClick={() => handleModuleClick(i + 1)} // Bei Klick navigieren
                >
                  <KabelModulStatus
                    slot={slotNumber}
                    isOnline={version !== 0} // Prüfen, ob ein Modul online ist
                    moduleVersion={moduleVersion}
                    kueCableBreak={kueCableBreak}
                  />
                </div>
              );
            })}
          </div>
        </div>
      );
    }

    return baugruppen;
  };
  return (
    <div className="flex flex-col p-4">
      {/* Letzte Meldungen - Titel und Icon Bereich */}
      <div className="flex justify-between items-center w-full lg:w-2/3">
        <div className="flex justify-between gap-1">
          <Icon
            icon="ri:calendar-schedule-line"
            className="text-littwin-blue text-4xl"
          />
          <h1 className="text-xl font-bold text-gray-700">
            Letzten 20 Meldungen
          </h1>
        </div>
        {/* 
                <Icon
          icon="ph:trash"
          className="text-red-500 hover:text-red-600 mr-8 text-3xl cursor-pointer"
        />
        */}
      </div>

      <div className="flex flex-col lg:flex-row gap-1 overflow-hidden">
        {/* Meldungen Liste */}
        <div className="bg-white shadow-md rounded-lg w-full lg:w-2/3 overflow-auto flex flex-grow">
          <table className="min-w-full border border-gray-200 text-left">
            <thead className="bg-gray-100 border-b border-gray-300">
              <tr>
                <th className="py-3 px-4 text-gray-700 text-sm font-medium">
                  ID
                </th>
                <th className="py-3 px-4 text-gray-700 text-sm font-medium">
                  Modul
                </th>
                <th className="py-3 px-4 text-gray-700 text-sm font-medium">
                  Zeitstempel
                </th>
                <th className="py-3 px-4 text-gray-700 text-sm font-medium w-2/3">
                  Meldung
                </th>
                <th className="py-3 px-4 text-gray-700 text-sm font-medium">
                  Status
                </th>
              </tr>
            </thead>
            <tbody className="text-xs text-gray-600 flex-shrink-0">
              {last20Messages.length > 0 ? (
                last20Messages.map((columns, index) => (
                  <tr
                    key={index}
                    className="border-b border-gray-200 hover:bg-gray-50"
                  >
                    <td className="py-1 px-4 w-1/7">{columns[0]}</td>
                    <td className="py-1 px-4 w-1/7">{columns[1]}</td>
                    <td className="py-1 px-4 w-3/7 whitespace-nowrap">
                      <div className="flex flex-row space-x-2">
                        <span>{columns[2].split(" ")[0]}</span>
                        <span>{columns[2].split(" ")[1]}</span>
                      </div>
                    </td>
                    <td className="py-1 px-4 w-2/7">{columns[3]}</td>
                    <td className="py-1 px-4 w-1/7">{columns[4]}</td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td className="py-3 px-4 text-center" colSpan="5">
                    Keine Meldungen verfügbar.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        {/* Sidebar mit Informationen */}
        <div className="shadow-md rounded-lg lg:w-1/3 flex flex-col gap-2">
          {/* Versionsinformationen */}
          <div className="bg-gray-50 p-4 rounded-lg shadow-sm border border-gray-200">
            <h2 className="text-lg font-semibold text-gray-700 mb-2">
              Versionsinformationen
            </h2>
            <div className="flex flex-row p-2 space-x-2">
              <Icon icon="bx:code-block" className="text-xl text-blue-400" />
              <p className="text-sm text-gray-600">
                <span className="font-bold"></span> Applikationsversion:{" "}
                {appVersion}{" "}
              </p>
            </div>
            <div className="flex flex-row p-2 space-x-2">
              <Icon icon="mdi:web" className="text-xl text-blue-400" />
              <p className="text-sm text-gray-600">
                <span className="font-bold"> </span>Webserverversion: 1.0.0
              </p>
            </div>
          </div>

          {/* Beispiel für Geräteanzeige */}
          <div className="bg-gray-50  rounded-lg shadow-sm border border-gray-200 justify-between space-y-1">
            <div className="flex flex-row item-center justify-between  p-1">
              <CPLStatus />
              {/* 
               <Access1Status />
              <Access2Status />
                 */}
            </div>
            <div className="flex flex-col item-center justify-between gap-1">
              <div className="flex flex-row item-center justify-between space-y-0">
                <div className="flex flex-col gap-1 mt-2">
                  {loading ? (
                    <p>Lädt...</p>
                  ) : error ? (
                    <p className="text-red-500">{error.toString()}</p>
                  ) : (
                    renderBaugruppentraeger()
                  )}
                </div>
              </div>
            </div>
            {/* Die Box für XIOPM1 und XIOPM2, jeweils unter CPL und Access 1 */}

            <div className="grid grid-cols-3 gap-4 p-4">
              <div className="flex justify-start items-center">
                {/*  <XioPM1Status />*/} {/* Unter CPL */}
              </div>
              <div className="flex justify-center items-center">
                {/*<XioPM2Status />  */} {/* Unter Access 1 */}
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* IP, Subnet und Gateway Informationen */}
      <div className="flex-shrink-0 flex justify-between items-center mt-2 bg-white p-4 rounded-lg shadow-md border border-gray-200">
        <div className="flex items-center space-x-4">
          <img src="/images/IP-icon.svg" alt="IP Address" className="w-6 h-6" />
          <div>
            <p className="text-xs text-gray-500">IP-Adresse</p>
            <p className="text-sm font-medium text-gray-700">{ip}</p>
          </div>
        </div>
        <div className="flex items-center space-x-4">
          <img
            src="/images/subnet-mask.svg"
            alt="subnet mask"
            className="w-6 h-6"
          />
          <div>
            <p className="text-xs text-gray-500">Subnet-Maske</p>
            <p className="text-sm font-medium text-gray-700">{subnet}</p>
          </div>
        </div>
        <div className="flex items-center space-x-4">
          <img src="/images/gateway.svg" alt="gateway" className="w-6 h-6" />
          <div>
            <p className="text-xs text-gray-500">Gateway</p>
            <p className="text-sm font-medium text-gray-700">{gateway}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Dashboard;