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

import { useEffect, useState } from "react";
import { Provider } from "react-redux";

import { useAppDispatch } from "@/redux/store";
import { AppProps } from "next/app";

import Header from "@/components/header/Header";
import Navigation from "@/components/navigation/Navigation";
import Footer from "@/components/footer/Footer";
import { store } from "@/redux/store";
import Script from "next/script";
import DeviceEventsBridge from "@/components/common/DeviceEventsBridge";

// Thunks importieren
import { getKueDataThunk } from "@/redux/thunks/getKueDataThunk";
import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
import { getDigitalOutputsThunk } from "@/redux/thunks/getDigitalOutputsThunk";
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 { getAuthThunks } from "@/redux/thunks/getAuthThunks";
import { loadKvzData } from "@/redux/thunks/kvzThunks";
import Modal from "react-modal";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

if (typeof window !== "undefined") {
  Modal.setAppElement("#__next"); // oder "#root", je nach App-Struktur
}

import "@/styles/globals.css";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider } from "@mui/material/styles";
import { muiTheme, buildTheme } from "@/styles/muiTheme";

function MyApp({ Component, pageProps }: AppProps) {
  // Rebuild theme on client if dark mode toggles (simple example)
  const [theme, setTheme] = useState(muiTheme);
  useEffect(() => {
    const observer = new MutationObserver(() => setTheme(buildTheme()));
    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
    return () => observer.disconnect();
  }, []);
  return (
    <Provider store={store}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {process.env.NODE_ENV === "development" ? (
          <Script
            src="/api/cpl/kabelueberwachungAPIHandler"
            strategy="afterInteractive"
          />
        ) : (
          <Script src="/CPL/SERVICE/kueData.js" strategy="afterInteractive" />
        )}
        <AppContent Component={Component} pageProps={pageProps} />
        <DeviceEventsBridge />
      </ThemeProvider>
    </Provider>
  );
}

function AppContent({
  Component,
  pageProps,
}: {
  Component: AppProps["Component"];
  pageProps: AppProps["pageProps"];
}): JSX.Element {
  const dispatch = useAppDispatch();
  const [sessionExpired] = 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)
  const [pathname, setPathname] = useState(
    typeof window !== "undefined" ? window.location.pathname : ""
  );

  useEffect(() => {
    const handleRouteChange = () => {
      setPathname(window.location.pathname);
    };

    window.addEventListener("popstate", handleRouteChange);
    window.addEventListener("pushstate", handleRouteChange);

    return () => {
      window.removeEventListener("popstate", handleRouteChange);
      window.removeEventListener("pushstate", handleRouteChange);
    };
  }, []);

  useEffect(() => {
    let intervalId: NodeJS.Timeout;

    const loadAndDispatch = () => {
      dispatch(getAuthThunks());

      // KVZ-Daten beim Start laden
      dispatch(loadKvzData());

      if (pathname.includes("kabelueberwachung")) {
        dispatch(getKueDataThunk());
      } else if (pathname.includes("analogInputs")) {
        dispatch(getAnalogInputsThunk());
      } else if (pathname.includes("digitalOutputs")) {
        dispatch(getDigitalOutputsThunk());
      } else if (pathname.includes("analogHistory")) {
        dispatch(
          getAnalogInputsHistoryThunk({
            eingang: 1, // Beispielwert, ggf. dynamisch setzen
            zeitraum: "tag", // Beispielwert, ggf. dynamisch setzen
            vonDatum: new Date().toISOString().split("T")[0], // heutiges Datum
            bisDatum: new Date().toISOString().split("T")[0], // heutiges Datum
          })
        );
      } 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);
    }
  }, [pathname, dispatch]);

  return (
    <div className="flex flex-col h-screen overflow-hidden bg-[var(--color-background)] text-[var(--color-fg)]">
      <Header />
      <div className="flex flex-grow w-full">
        <Navigation className="w-56" />
        <main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-l border-[var(--color-border)]">
          {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} />
          <ToastContainer position="top-right" autoClose={3000} />
        </main>
      </div>
      <Footer />
    </div>
  );
}

export default MyApp;