"use client";
// pages/_app.tsx

import { useEffect, useState } from "react";
import { Provider } from "react-redux";
import store, { useAppDispatch } from "../redux/store";
import { AppProps } from "next/app";
import { loadWindowVariables } from "../utils/loadWindowVariables";

import Header from "../components/header/Header";
import Navigation from "../components/navigation/Navigation";
import Footer from "../components/footer/Footer";

// Thunks importieren
import { fetchKueDataThunk } from "../redux/thunks/fetchKueDataThunk";
import { fetchDigitalOutputsThunk } from "../redux/thunks/fetchDigitalOutputsThunk";
import { fetchAnalogeEingaengeThunk } from "../redux/thunks/fetchAnalogeEingaengeThunk";
import { fetchAnalogInputsHistoryThunk } from "../redux/thunks/fetchAnalogInputsHistoryThunk";
import { fetchLast20MessagesThunk } from "../redux/thunks/fetchLast20MessagesThunk";
import { fetchOpcUaSettingsThunk } from "../redux/thunks/fetchOpcUaSettingsThunk";
import { fetchSystemSettingsThunk } from "../redux/thunks/fetchSystemSettingsThunk";
import { fetchSystemVoltTempThunk } from "../redux/thunks/fetchSystemVoltTempThunk";
import { fetchReferenceCurveBySlotThunk } from "../redux/thunks/fetchReferenceCurveBySlotThunk";
import { fetchAllTDRReferenceChartThunk } from "../redux/thunks/fetchAllTDRReferenceChartThunk";
import { fetchTDRChartDataByIdThunk } from "../redux/thunks/fetchTDRChartDataByIdThunk";
import { fetchLoopChartDataThunk } from "../redux/thunks/fetchLoopChartDataThunk";

import "../styles/globals.css";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <AppContent Component={Component} pageProps={pageProps} />
    </Provider>
  );
}

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

  useEffect(() => {
    let intervalId: NodeJS.Timeout;
    const pathname = window.location.pathname;

    const loadAndDispatch = () => {
      if (pathname.includes("kabelueberwachung")) {
        dispatch(fetchKueDataThunk());
      } else if (pathname.includes("digitalOutputs")) {
        dispatch(fetchDigitalOutputsThunk());
      } else if (pathname.includes("digitalInputs")) {
        dispatch(fetchDigitalOutputsThunk()); // 🟠 evtl. anpassen
      } else if (pathname.includes("analogeEingaenge")) {
        dispatch(fetchAnalogeEingaengeThunk());
      } else if (pathname.includes("analogHistory")) {
        dispatch(fetchAnalogInputsHistoryThunk());
      } else if (pathname.includes("dashboard")) {
        dispatch(fetchLast20MessagesThunk());
      } else if (pathname.includes("einstellungen")) {
        dispatch(fetchOpcUaSettingsThunk());
      } else if (pathname.includes("systemvolt")) {
        dispatch(fetchSystemVoltTempThunk());
      } else if (pathname.includes("system")) {
        dispatch(fetchSystemSettingsThunk());
      } else if (pathname.includes("tdrRef")) {
        dispatch(fetchAllTDRReferenceChartThunk());
      } else if (pathname.includes("tdrSlot")) {
        dispatch(fetchReferenceCurveBySlotThunk());
      } else if (pathname.includes("tdrId")) {
        dispatch(fetchTDRChartDataByIdThunk());
      } else if (pathname.includes("loopChart")) {
        dispatch(fetchLoopChartDataThunk());
      }
    };

    if (typeof window !== "undefined") {
      loadAndDispatch();
      intervalId = setInterval(loadAndDispatch, 10000);
      return () => clearInterval(intervalId);
    }
  }, []);

  return (
    <div className="flex flex-col h-screen overflow-hidden">
      <Header />
      <div className="flex flex-grow w-full">
        <Navigation className="w-56" />
        <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>
  );
}

export default MyApp;