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

function Dashboard() {
  const [deviceData, setDeviceData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Funktion zum Abrufen der Gerätedaten von der Start.acp-Seite
    const fetchDeviceData = async () => {
      try {
        // Relativer Pfad zur Start.acp-Datei
        const response = await fetch("/CPL?Start.ACP", {
          mode: "no-cors", // CORS-Einschränkungen vermeiden
        });

        // Überprüfen, ob die Anfrage erfolgreich war
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        // Die Antwort als Text verarbeiten (da es sich um HTML handelt)
        const result = await response.text();

        // Daten in den Zustand setzen
        setDeviceData(result);
        setLoading(false);
      } catch (error) {
        console.error("Fehler beim Abrufen der Gerätedaten:", error);
        setError(error);
        setLoading(false);
      }
    };

    fetchDeviceData();
  }, []);

  return (
    <div className="bg-gray-100 flex flex-col min-h-screen">
      <div className="flex flex-grow w-full">
        {/* Hauptinhalt */}
        <main className="flex-1 bg-white p-8 ml-4 shadow rounded-lg overflow-hidden">
          <h1 className="text-2xl font-bold mb-4">Letzten 20 Meldungen:</h1>
          <div>
            <h1>Gerätedaten</h1>
            <DeviceData />
          </div>
          {loading && <p>Lade Gerätedaten...</p>}
          {error && <p className="text-red-500">Fehler: {error.message}</p>}
          {deviceData && (
            <div>
              <h2>Ersetzte Daten aus Start.acp:</h2>
              {/* Die gerenderten Daten mit dangerouslySetInnerHTML anzeigen */}
              <pre dangerouslySetInnerHTML={{ __html: deviceData }}></pre>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}

export default Dashboard;