"use client"; // app/dashboard/page.jsx
import React, { useEffect, useState } from "react";
import "tailwindcss/tailwind.css";
import "@fontsource/roboto";
import "bootstrap-icons/font/bootstrap-icons.css";

function Dashboard() {
  const apiUrl = process.env.NEXT_PUBLIC_API_BASE_URL;
  const [last20Messages, setLast20Messages] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Funktion zum Laden von Skripten
    const loadScript = (src) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement("script");
        script.src = `${apiUrl}/CPL?${src}`;
        script.async = true;
        script.onload = () => {
          resolve();
        };
        script.onerror = (error) => {
          reject(error);
        };
        document.head.appendChild(script);
      });
    };

    // Lade alle Skripte nacheinander und zeige die Daten an
    const loadAllScripts = async () => {
      try {
        // Lade nur das `last20Messages.acp` Skript, das alle Variablen enthält
        await loadScript("last20Messages.acp");

        // Warte eine kurze Zeit, um sicherzustellen, dass alle Daten verfügbar sind
        setTimeout(() => {
          // Prüfen, ob alle Variablen verfügbar sind und in die Konsole ausgeben
          if (window.last20Messages) {
            console.log("Systemvariablen geladen:", {
              // last20Messages.acp
              last20Messages: window.last20Messages,
              // System.acp Variablen
              deviceName: window.deviceName,
              mac1: window.mac1,
              mac2: window.mac2,
              ip: window.ip,
              subnet: window.subnet,
              gateway: window.gateway,
              datetime: window.datetime,
              // de.acp Variablen
              de: window.de,
              counter: window.counter,
              flutter: window.flutter,
              // kueConfig.acp Variablen
              kueOnline: window.kueOnline,
              kueID: window.kueID,
              kueIso: window.kueIso,
              // kuedetail.acp Variablen
              kueValid: window.kueValid,
              kueAlarm1: window.kueAlarm1,
              kueAlarm2: window.kueAlarm2,
              kueRes: window.kueRes,
              kueCableBreak: window.kueCableBreak,
              kueGroundFault: window.kueGroundFault,
              kueLimit1: window.kueLimit1,
              kueLimit2Low: window.kueLimit2Low,
              kueLimit2High: window.kueLimit2High,
              kueDelay1: window.kueDelay1,
              kueLoopInterval: window.kueLoopInterval,
              kueVersion: window.kueVersion,
              tdrAtten: window.tdrAtten,
              tdrPulse: window.tdrPulse,
              tdrSpeed: window.tdrSpeed,
              tdrAmp: window.tdrAmp,
              tdrTrigger: window.tdrTrigger,
              tdrLocation: window.tdrLocation,
              tdrActive: window.tdrActive,
              kueOverflow: window.kueOverflow,
              kue100V: window.kue100V,
              kueResidence: window.kueResidence,
              tdrLastMeasurement: window.tdrLastMeasurement,
              kueBooting: window.kueBooting,
            });

            // Letzte Meldungen analysieren und in den State setzen
            const parsedMessages = parseMessages(window.last20Messages);
            setLast20Messages(parsedMessages);
          } else {
            console.error("Konnte last20Messages nicht finden.");
            setError("Konnte last20Messages nicht finden.");
          }

          setLoading(false);
        }, 500); // 500 ms Verzögerung, um sicherzustellen, dass alle Daten geladen sind
      } catch (error) {
        console.error("Fehler beim Laden des Skripts:", error);
        setError(error);
        setLoading(false);
      }
    };

    loadAllScripts();

    // Nachrichten parsen
    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;
      });
    };
  }, [apiUrl]);

  return (
    <div className="bg-gray-100 flex flex-col min-h-screen p-8">
      {/* Navigation zu ACP-Seiten */}
      <div className="mb-4">
        <a
          href="/CPL?SYSTEM.ACP&OFF_1=1"
          target="_parent"
          className="text-gray-700 mr-4 hover:text-blue-500"
        >
          System
        </a>
        <a
          href="/CPL?DE.ACP&OFF_1=1"
          target="_parent"
          className="text-gray-700 mr-4 hover:text-blue-500"
        >
          Digitale Eingänge
        </a>
        <a
          href="/CPL?KUEconfig.ACP&OFF_1=1"
          target="_parent"
          className="text-gray-700 hover:text-blue-500"
        >
          Kabelüberwachungen
        </a>
      </div>

      {/* Letzte Meldungen */}
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-xl font-bold text-gray-700">
          Letzten 20 Meldungen
        </h1>
        <button className="text-red-500 hover:text-red-600">
          <i className="bi bi-trash"></i>
        </button>
      </div>

      <div className="flex flex-col lg:flex-row gap-8">
        {/* Meldungen Liste */}
        <div className="bg-white shadow-md rounded-lg p-4 w-full lg:w-2/3">
          <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-sm text-gray-600">
              {last20Messages.length > 0 ? (
                last20Messages.map((columns, index) => (
                  <tr
                    key={index}
                    className="border-b border-gray-200 hover:bg-gray-50"
                  >
                    <td className="py-3 px-4">{columns[0]}</td>
                    <td className="py-3 px-4">{columns[1]}</td>
                    <td className="py-3 px-4">{columns[2]}</td>
                    <td className="py-3 px-4 w-2/3">{columns[3]}</td>
                    <td className="py-3 px-4">{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="bg-white shadow-md rounded-lg p-4 w-full lg:w-1/3 flex flex-col gap-4">
          {/* 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>
            <p className="text-sm text-gray-600">
              <span className="font-bold">Applikationsversion: </span> 5.1.1.8
              C-24-KA
            </p>
            <p className="text-sm text-gray-600">
              <span className="font-bold">Webserverversion: </span> 5.3.4.1
            </p>
          </div>

          {/* Beispiel für Geräteanzeige */}
          <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">
              Geräte Status
            </h2>
            <p className="text-sm text-gray-600">Server: Online</p>
            <p className="text-sm text-gray-600">Access 1: Online</p>
          </div>
        </div>
      </div>

      {/* Footer Informationen */}
      <div className="flex justify-between items-center mt-8 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">192.168.10.147</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">255.255.255.0</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">192.168.10.1</p>
          </div>
        </div>
        <div className="flex items-center space-x-4">
          <img src="/images/IEC.svg" alt="IEC" className="w-6 h-6" />
          <div>
            <p className="text-xs text-gray-500">IEC-Adresse</p>
            <p className="text-sm font-medium text-gray-700">223</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Dashboard;