"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 { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";
import { getDigitalOutputsThunk } from "@/redux/thunks/getDigitalOutputsThunk";
import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
import { getAnalogInputsHistoryThunk } from "@/redux/thunks/getAnalogInputsHistoryThunk";
import { getLast20MessagesThunk } from "@/redux/thunks/getLast20MessagesThunk";
import { getOpcUaSettingsThunk } from "@/redux/thunks/getOpcUaSettingsThunk";
import { getSystemSettingsThunk } from "@/redux/thunks/getSystemSettingsThunk";
import { getSystemVoltTempThunk } from "@/redux/thunks/getSystemVoltTempThunk";
import { getReferenceCurveBySlotThunk } from "@/redux/thunks/getReferenceCurveBySlotThunk";
import { getAllTDRReferenceChartThunk } from "@/redux/thunks/getAllTDRReferenceChartThunk";
import { getTDRChartDataByIdThunk } from "@/redux/thunks/getTDRChartDataByIdThunk";
import { getLoopChartDataThunk } from "@/redux/thunks/getLoopChartDataThunk";

import "@/styles/globals.css";

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

function AppContent({
  Component,
  pageProps,
}: {
  Component: AppProps["Component"];
  pageProps: AppProps["pageProps"];
}): JSX.Element {
  const dispatch = useAppDispatch();
  const [sessionExpired, setSessionExpired] = useState(false);
  const mode = "DIA0"; // oder aus Router oder Session
  const type = 0; // Beispiel: 0 für "loop", 1 für "iso" (bitte ggf. anpassen)
  useEffect(() => {
    let intervalId: NodeJS.Timeout;
    const pathname = window.location.pathname;

    const loadAndDispatch = () => {
      if (pathname.includes("kabelueberwachung")) {
        dispatch(getKueDataThunk());
      } else if (pathname.includes("digitalOutputs")) {
        dispatch(getDigitalOutputsThunk());
      } else if (pathname.includes("digitalInputs")) {
        dispatch(getDigitalOutputsThunk()); // 🟠 evtl. anpassen
      } else if (pathname.includes("analogInputs")) {
        dispatch(getAnalogInputsThunk());
      } else if (pathname.includes("analogHistory")) {
        dispatch(getAnalogInputsHistoryThunk());
      } else if (pathname.includes("dashboard")) {
        dispatch(getLast20MessagesThunk());
      } else if (pathname.includes("einstellungen")) {
        dispatch(getOpcUaSettingsThunk());
      } else if (pathname.includes("systemvolt")) {
        dispatch(getSystemVoltTempThunk());
      } else if (pathname.includes("system")) {
        dispatch(getSystemSettingsThunk());
      } else if (pathname.includes("tdrRef")) {
        dispatch(getAllTDRReferenceChartThunk());
      } else if (pathname.includes("tdrSlot")) {
        dispatch(getReferenceCurveBySlotThunk(1));
      } else if (pathname.includes("tdrId")) {
        dispatch(getTDRChartDataByIdThunk(1));
      } else if (pathname.includes("loopChart")) {
        dispatch(
          getLoopChartDataThunk({
            mode,
            type,
            slotNumber: 1, // Beispielwert, ggf. anpassen
            vonDatum: new Date().toISOString().split("T")[0], // Beispiel: heutiges Datum
            bisDatum: new Date().toISOString().split("T")[0], // Beispiel: heutiges Datum
          })
        );
      }
    };

    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;