"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 [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Funktion zum Abrufen der ersetzten Platzhalterdaten vom Server
    const fetchData = async () => {
      try {
        // Abrufen des Inhalts der Datei mit Platzhalterersetzung
        const response = await fetch(
          "http://localhost:3000/api/server?path=main.js",
          {
            mode: "cors", // stellt sicher, dass eine CORS-Anfrage gesendet wird
          }
        );

        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        const result = await response.text(); // Beachte, dass dies `text()` statt `json()` ist, da wir den JS-Inhalt bekommen wollen
        setData(result);
        setLoading(false);
      } catch (error) {
        console.error("Error fetching data:", error);
        setError(error);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  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>
          {loading && <p>Loading data...</p>}
          {error && <p className="text-red-500">Error: {error.message}</p>}
          {data && (
            <div>
              <h2>Ersetzte Datei-Inhalte:</h2>
              {/* Verwenden von dangerouslySetInnerHTML um den JS-Inhalt einzubinden */}
              <pre dangerouslySetInnerHTML={{ __html: data }}></pre>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}

export default Dashboard;