import React from "react";
import { Route, Routes, useNavigate, useLocation } from "react-router-dom";
import JitsiSettings from "../components/settings/JitsiSettings";
import SettingsContent from "../components/settings/SettingsContent";
import ZoomSettings from "../components/settings/ZoomSettings";
import "../scss/settings/settings.scss";
import WebexSettings from "../components/settings/WebexSettings";
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer, toast } from 'react-toastify';
import { MhubAdminProvider, useMhubAdmin } from "./MhubAdminContext";
import GetProModal from "../components/common/GetProModal";
import GoogleMeetSettings from "../components/settings/GoogleMeetSettings";
import MsTeamsSettings from "../components/settings/MsTeamsSettings";
import MhubNotice from "../components/common/MhubNotice";


function SettingsApp() {
  const { connectionStatuses, prepStatuses, dismissedNotices } = useMhubAdmin();
  const location = useLocation();

  // Dynamic Notice Calculation
  const dynamicNotices = React.useMemo(() => {
    const list = [];
    const currentTime = Date.now() / 1000;

    const isDismissed = (id) => {
      if (dismissedNotices && dismissedNotices[id]) {
        const expiry = dismissedNotices[id];
        return expiry === -1 || expiry > currentTime;
      }
      return false;
    };

    // Platform configurations logic
    const configs = [
      { id: 'zoom_oauth', platform: 'zoom_oauth', prepKey: 'zoom_oauth' },
      { id: 'zoom_sdk', platform: 'zoom_sdk', prepKey: 'zoom_sdk' },
      { id: 'webex', platform: 'webex', prepKey: 'webex' },
      { id: 'msteams', platform: 'msteams', prepKey: 'msteams' },
      { id: 'google', platform: 'google_meet', prepKey: 'google' },
    ];

    configs.forEach(config => {
      if (isDismissed(config.id)) return;

      if (!prepStatuses[config.prepKey]) {
        list.push({ id: config.id, type: 'warning', state: 'unprepared' });
      } else if (connectionStatuses[config.platform] !== 'connected') {
        list.push({ id: config.id, type: 'info', state: 'unconnected' });
      }
    });

    // Special case: legacy_redirect (global)
    if (!isDismissed('legacy_redirect')) {
      const phpNotices = mhubMeetingsData.noticeData || [];
      if (phpNotices.find(n => n.id === 'legacy_redirect')) {
        list.push({ id: 'legacy_redirect', type: 'warning', state: 'unprepared' });
      }
    }

    return list;
  }, [connectionStatuses, prepStatuses, dismissedNotices]);

  // Filter notices based on the current route
  const filteredNotices = dynamicNotices.filter(notice => {
    const path = location.pathname.replace('/', '');

    // Map notice IDs to their respective routes
    const routeMapping = {
      'zoom': ['zoom_oauth', 'zoom_sdk'],
      'webex': ['webex'],
      'google_meet': ['google'],
      'msteams': ['msteams'],
      'jitsi': ['jitsi']
    };

    // If we're on a specific route, show only notices for that route
    if (path && routeMapping[path]) {
      return routeMapping[path].includes(notice.id) || notice.id === 'legacy_redirect';
    }

    // If we're on the main settings page (path is empty), 
    // show global notices only (as requested by moving platform-specific ones)
    if (!path) {
      return notice.id === 'legacy_redirect';
    }

    return false;
  });

  return (

    <>
      <MhubAdminProvider>
        <div className="mhub-admin-settings-container" style={{ padding: '0 20px' }}>
          <MhubNotice notices={filteredNotices} />
          <Routes>
            <Route path="/" element={<SettingsContent />} />
            <Route path="jitsi" element={<JitsiSettings />} />
            <Route path="zoom" element={<ZoomSettings />} />
            <Route path="webex" element={<WebexSettings />} />
            <Route path="google_meet" element={<GoogleMeetSettings />} />
            <Route path="msteams" element={<MsTeamsSettings />} />
          </Routes>
        </div>
        <GetProModal />
      </MhubAdminProvider>

      <ToastContainer
        position="top-right"
        autoClose={3000}
        hideProgressBar={false}
        newestOnTop={false}
        closeOnClick
        rtl={false}
        pauseOnFocusLoss
        draggable
        pauseOnHover
        theme="light"
        style={{ marginTop: '30px' }}
      />
    </>
  );
}

export default SettingsApp;