// pages/_app.tsx
import { useEffect, useState } from "react";
import { loadWindowVariables } from "../utils/loadWindowVariables";
import Header from "../components/Header";
import Navigation from "../components/Navigation";
import Footer from "../components/Footer";
import "../styles/globals.css";
import { Provider } from "react-redux";
import { setVariables } from "../store/variablesSlice";
import store from "../store/store";
import { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  const [sessionExpired, setSessionExpired] = useState(false);

  useEffect(() => {
    const loadAndStoreVariables = async () => {
      try {
        const variables = await loadWindowVariables();
        if (!variables) throw new Error("Sitzungsfehler"); // Fehler werfen, wenn keine Variablen geladen werden
        store.dispatch(setVariables(variables));
        setSessionExpired(false); // Sitzung ist aktiv
      } catch (error) {
        console.error("Fehler beim Laden der Sitzung:", error);
        setSessionExpired(true); // Sitzung ist abgelaufen oder fehlgeschlagen
      }
    };

    if (typeof window !== "undefined") {
      loadAndStoreVariables(); // Initiales Laden

      // Intervall zum Aktualisieren des Redux-Stores alle 10 Sekunden
      const intervalId = setInterval(loadAndStoreVariables, 10000);

      // Bereinigen des Intervalls, wenn die Komponente unmountet wird
      return () => clearInterval(intervalId);
    }
  }, []);

  return (
    <Provider store={store}>
      <div className="flex flex-col h-screen overflow-hidden">
        <Header />
        <div className="flex flex-grow w-full">
          <Navigation className="w-1/5" />
          <main className="w-full flex-grow">
            {sessionExpired && (
              <div className="bg-red-500 text-white p-4 text-center">
                Ihre Sitzung ist abgelaufen oder die Verbindung ist
                unterbrochen. Bitte laden Sie die Seite neu.
              </div>
            )}
            <Component {...pageProps} />
          </main>
        </div>
        <Footer />
      </div>
    </Provider>
  );
}

export default MyApp;