import { useEffect, lazy, Suspense } from 'react';
import { Routes, Route } from 'react-router-dom';
import { useSelector } from 'react-redux';
import ProtectedRoutes from './ProtectedRoutes';
import SelfBooking from './Pages/SelfBooking/SelfBooking.jsx';
import { isMobile, isIOS } from 'react-device-detect';
import { routesConfig } from './routesConfig';
import { GlobalItemCard } from './Features/BookingScreen/BookingData/BookingData.js';
import { clearSession, getSession } from './Services/Others.js';
import devtools from 'devtools-detect';
const KisokSelBooking = lazy(
  () => import('./Pages/SelfBooking/KisokSelBooking')
);

const IndividualBooking = lazy(
  () => import('./Pages/SelfBooking/IndividualBooking')
);
const commonSubDir = import.meta.env.ENV_COMMON_BASE_URL;
const subDirectory = import.meta.env.ENV_BASE_URL;
import '../ownLib/my-ui-lib.css';
import CustomerMenuPage from './Pages/Reports/MenuQRCode/CustomerMenuPage.jsx';
import WeightScaleApp from './Pages/BookingScreen/WeightscaleApp.jsx';
import useSubscriptionManager from './useSubscriptionManager.js';
import useSessionManager from './useSessionManager.js';
import ExtendSubscriptionModal from './Pages/ExtentedModal/ExtendSubscriptionModal.jsx';

const AppRoutes = () => {
  const ItemCard = useSelector(GlobalItemCard);
  // const { sessionData, logout } = useSessionManager(ItemCard);
  const { remainingDays, handleCancel, handlePay, freeExtend, extendModel } = useSubscriptionManager(sessionData, logout);

  useEffect(() => {
    const handlePopState = () => {
      const SessionId = getSession('SessionId');
      if (!SessionId) {
        alert(
          'Session invalid and Unauthorized action detected. Redirecting to login...'
        );
        clearSession();
        window.location.replace(`${commonSubDir}`);
      } else {
        window.history.go(1);
      }
    };

    // Add event listener on mount
    window.addEventListener('popstate', handlePopState);

    // Clean up the event listener on unmount
    return () => {
      window.removeEventListener('popstate', handlePopState);
    };
  }, []);

  useEffect(() => {
    if (isMobile || isIOS) return;
    const timer = setInterval(() => {
      if (devtools.isOpen) {
        document.body.innerHTML =
          "<h1 style='color:red;text-align:center'>Close Inspect to continue</h1>";
      }
    }, 1000);

    return () => clearInterval(timer);
  }, []);


  if (extendModel) {
    return (
      <ExtendSubscriptionModal
        onClose={handleCancel}
        onPayNow={handlePay}
        onContinueWithCredits={freeExtend}
      />
    );
  }
  return (
    <Suspense fallback={<div>Loading…</div>}>
      <Routes>
        <Route
          path={`${subDirectory}selfBooking/:SelfBookingId`}
          element={<SelfBooking />}
        />
        <Route
          path={`${subDirectory}MenuQRCode`}
          element={<CustomerMenuPage />}
        />
        <Route
          path={`${subDirectory}weightscaleapp`}
          element={<WeightScaleApp />}
        />
        <Route
          path={`${subDirectory}kioskSelfBooking`}
          element={<KisokSelBooking />}
        />

        <Route
          path={`${subDirectory}kiosk-individual-self-booking`}
          element={<IndividualBooking />}
        />
        <Route
          path="/*"
          element={<ProtectedRoutes routesConfig={routesConfig} />}
        />
      </Routes>
    </Suspense>
  );
};

export default AppRoutes;