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

function Dashboard() {
  const [deviceData, setDeviceData] = useState(null);
  const [digitalInputs, setDigitalInputs] = useState(null);
  const [cableMonitoring, setCableMonitoring] = useState(null);
  const [cableDetails, setCableDetails] = useState(null);
  const [startData, setStartData] = useState(null);
  const [last20Messages, setLast20Messages] = useState(null); // State für die Meldungen
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Abrufen der last20Messages aus localStorage
    const messages = localStorage.getItem("last20Messages");
    if (messages) {
      setLast20Messages(messages);
    }

    // Andere Daten laden (falls benötigt)
    // Hier kannst du deine ACP-Dateien laden, wie in deinem bestehenden Code gezeigt
  }, []);

  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"
          style={{ fontFamily: "arial", marginRight: "10px" }}
        >
          System
        </a>
        <a
          href="/CPL?DE.ACP&OFF_1=1"
          target="_parent"
          style={{ fontFamily: "arial", marginRight: "10px" }}
        >
          Digitale Eingänge
        </a>
        <a
          href="/CPL?KUEconfig.ACP&OFF_1=1"
          target="_parent"
          style={{ fontFamily: "arial", marginRight: "10px" }}
        >
          Kabelüberwachungen
        </a>
      </div>

      {/* Letzte Meldungen */}
      <div className="flex justify-between items-center mb-4">
        <h1 className="text-xl font-bold">Letzten 20 Meldungen</h1>
        <button className="text-red-500">
          <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 rounded-lg p-4 w-full lg:w-2/3">
          <table className="min-w-full text-left">
            <thead className="bg-gray-200 text-sm font-semibold">
              <tr>
                <th className="py-2 px-4">ID</th>
                <th className="py-2 px-4">Zeitstempel</th>
                <th className="py-2 px-4">Modul</th>
                <th className="py-2 px-4">Meldung</th>
                <th className="py-2 px-4">Status</th>
              </tr>
            </thead>
            <tbody className="text-sm">
              {last20Messages ? (
                // Aufteilung der Nachrichten und Mapping zu Zeilen
                last20Messages
                  .split("<tr>")
                  .slice(1)
                  .map((row, index) => {
                    const columns = row
                      .replace("</tr>", "")
                      .split("<td>")
                      .slice(1)
                      .map((col) => col.replace("</td>", ""));
                    return (
                      <tr key={index}>
                        <td className="py-2 px-4">{columns[0]}</td>
                        <td className="py-2 px-4">{columns[1]}</td>
                        <td className="py-2 px-4">{columns[2]}</td>
                        <td className="py-2 px-4">{columns[3]}</td>
                        <td className="py-2 px-4">{columns[4]}</td>
                      </tr>
                    );
                  })
              ) : (
                <tr>
                  <td className="py-2 px-4" colSpan="5">
                    Keine Meldungen verfügbar.
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        {/* Sidebar mit Informationen */}
        <div className="bg-white shadow 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">
            <h2 className="text-lg font-semibold mb-2">
              Versionsinformationen
            </h2>
            <p className="text-sm">
              <span className="font-bold">Applikationsversion: </span> 5.1.1.8
              C-24-KA
            </p>
            <p className="text-sm">
              <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">
            <h2 className="text-lg font-semibold mb-2">Geräte Status</h2>
            {/* Hier könntest du die Daten von "deviceData" verwenden */}
            <p className="text-sm">Server: Online</p>
            <p className="text-sm">Access 1: Online</p>
            {/* Weitere Geräteinformationen */}
          </div>
        </div>
      </div>

      {/* Footer Informationen */}
      <div className="flex justify-between items-center mt-8 bg-white p-4 rounded-lg shadow">
        <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">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">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">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">223</p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Dashboard;