import { FloatButton, Layout, notification, Spin } from "antd";
// import preval from "preval.macro";
import React, { lazy, Suspense, useContext, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link, Route, Routes } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import BreadCrumbs from "../../components/breadcrumbs/breadcrumbs.component";
import ChatAffixContainer from "../../components/chat-affix/chat-affix.container";
import ConflictComponent from "../../components/conflict/conflict.component";
import ErrorBoundary from "../../components/error-boundary/error-boundary.component";
//import FooterComponent from "../../components/footer/footer.component";
//Component Imports
import * as Sentry from "@sentry/react";
import TestComponent from "../../components/_test/test.page";
import HeaderContainer from "../../components/header/header.container";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import PartnerPingComponent from "../../components/partner-ping/partner-ping.component";
import PrintCenterModalContainer from "../../components/print-center-modal/print-center-modal.container";
import ShopSubStatusComponent from "../../components/shop-sub-status/shop-sub-status.component";
import { requestForToken } from "../../firebase/firebase.utils";
import SocketContext from "../../contexts/SocketIO/socketContext.jsx";
import { selectBodyshop, selectInstanceConflict } from "../../redux/user/user.selectors";
import UpdateAlert from "../../components/update-alert/update-alert.component";
import InstanceRenderManager from "../../utils/instanceRenderMgr.js";
import "./manage.page.styles.scss";
import WssStatusDisplayComponent from "../../components/wss-status-display/wss-status-display.component.jsx";
import { selectAlerts } from "../../redux/application/application.selectors.js";
import { addAlerts } from "../../redux/application/application.actions.js";

const JobsPage = lazy(() => import("../jobs/jobs.page"));

const CardPaymentModalContainer = lazy(
  () => import("../../components/card-payment-modal/card-payment-modal.container.")
);

const JobsDetailPage = lazy(() => import("../jobs-detail/jobs-detail.page.container"));
const InventoryListPage = lazy(() => import("../inventory/inventory.page"));
const ProfilePage = lazy(() => import("../profile/profile.container.page"));
const JobsAvailablePage = lazy(() => import("../jobs-available/jobs-available.page.container"));
const ScheduleContainer = lazy(() => import("../schedule/schedule.page.container"));
const VehiclesContainer = lazy(() => import("../vehicles/vehicles.page.container"));
const VehiclesDetailContainer = lazy(() => import("../vehicles-detail/vehicles-detail.page.container"));
const OwnersContainer = lazy(() => import("../owners/owners.page.container"));
const OwnersDetailContainer = lazy(() => import("../owners-detail/owners-detail.page.container"));
const ShopPage = lazy(() => import("../shop/shop.page.component"));
const ShopVendorPageContainer = lazy(() => import("../shop-vendor/shop-vendor.page.container"));
const EmailOverlayContainer = lazy(() => import("../../components/email-overlay/email-overlay.container.jsx"));
const JobsCreateContainerPage = lazy(() => import("../jobs-create/jobs-create.container"));
const CourtesyCarCreateContainer = lazy(() => import("../courtesy-car-create/courtesy-car-create.page.container"));
const CourtesyCarDetailContainer = lazy(() => import("../courtesy-car-detail/courtesy-car-detail.page.container"));
const CourtesyCarsPage = lazy(() => import("../courtesy-cars/courtesy-cars.page.container"));
const ContractCreatePage = lazy(() => import("../contract-create/contract-create.page.container"));
const ContractDetailPage = lazy(() => import("../contract-detail/contract-detail.page.container"));
const ContractsList = lazy(() => import("../contracts/contracts.page.container"));
const BillsListPage = lazy(() => import("../bills/bills.page.container"));

const JobCostingModal = lazy(() => import("../../components/job-costing-modal/job-costing-modal.container"));
const ReportCenterModal = lazy(() => import("../../components/report-center-modal/report-center-modal.container"));
const BillEnterModalContainer = lazy(() => import("../../components/bill-enter-modal/bill-enter-modal.container"));
const TimeTicketModalContainer = lazy(() => import("../../components/time-ticket-modal/time-ticket-modal.container"));
const TimeTicketModalTask = lazy(
  () => import("../../components/time-ticket-task-modal/time-ticket-task-modal.container")
);
const PaymentModalContainer = lazy(() => import("../../components/payment-modal/payment-modal.container"));
const ProductionListPage = lazy(() => import("../production-list/production-list.container"));
const ProductionBoardPage = lazy(() => import("../production-board/production-board.container"));
// const ShopTemplates = lazy(() =>
//   import("../shop-templates/shop-templates.container")
// );
const JobIntake = lazy(() => import("../jobs-intake/jobs-intake.page.container"));
const JobChecklistView = lazy(() => import("../jobs-checklist-view/jobs-checklist-view.page"));
const JobDeliver = lazy(() => import("../jobs-deliver/jobs-delivery.page.container"));
const AccountingQboCallback = lazy(() => import("../accounting-qbo/accounting-qbo.page"));
const AccountingReceivables = lazy(() => import("../accounting-receivables/accounting-receivables.container"));
const AccountingPayables = lazy(() => import("../accounting-payables/accounting-payables.container"));
const AccountingPayments = lazy(() => import("../accounting-payments/accounting-payments.container"));
const AllJobs = lazy(() => import("../jobs-all/jobs-all.container"));
const ReadyJobs = lazy(() => import("../jobs-ready/jobs-ready.page"));
const JobsClose = lazy(() => import("../jobs-close/jobs-close.container"));
const JobsAdmin = lazy(() => import("../jobs-admin/jobs-admin.page"));
const TempDocs = lazy(() => import("../temporary-docs/temporary-docs.container"));

const ShopCsiPageContainer = lazy(() => import("../shop-csi/shop-csi.container.page"));
const PaymentsAll = lazy(() => import("../payments-all/payments-all.container.page"));
const ShiftClock = lazy(() => import("../shift-clock/shift-clock.page"));
const Scoreboard = lazy(() => import("../scoreboard/scoreboard.page.container"));
const TimeTicketsAll = lazy(() => import("../time-tickets/time-tickets.container"));
const Help = lazy(() => import("../help/help.page"));
const PartsQueue = lazy(() => import("../parts-queue/parts-queue.page.container"));
const ExportLogs = lazy(() => import("../export-logs/export-logs.page.container"));
const Phonebook = lazy(() => import("../phonebook/phonebook.page.container"));

const EmailTest = lazy(() => import("../../components/email-test/email-test-component"));
const Dashboard = lazy(() => import("../dashboard/dashboard.container"));
const Dms = lazy(() => import("../dms/dms.container"));
const DmsPayables = lazy(() => import("../dms-payables/dms-payables.container"));
const ManageRootPage = lazy(() => import("../manage-root/manage-root.page.container"));
const TtApprovals = lazy(() => import("../tt-approvals/tt-approvals.page.container"));
const MyTasksPage = lazy(() => import("../tasks/myTasksPageContainer.jsx"));
const AllTasksPage = lazy(() => import("../tasks/allTasksPageContainer.jsx"));

const TaskUpsertModalContainer = lazy(() => import("../../components/task-upsert-modal/task-upsert-modal.container"));
const { Content, Footer } = Layout;

const mapStateToProps = createStructuredSelector({
  conflict: selectInstanceConflict,
  bodyshop: selectBodyshop,
  alerts: selectAlerts
});

const ALERT_FILE_URL = InstanceRenderManager({
  imex: "https://images.imex.online/alerts/alerts-imex.json",
  rome: "https://images.imex.online/alerts/alerts-rome.json"
});

const mapDispatchToProps = (dispatch) => ({
  setAlerts: (alerts) => dispatch(addAlerts(alerts))
});

export function Manage({ conflict, bodyshop, alerts, setAlerts }) {
  const { t } = useTranslation();
  const [chatVisible] = useState(false);
  const { socket, clientId } = useContext(SocketContext);

  // State to track displayed alerts
  const [displayedAlertIds, setDisplayedAlertIds] = useState([]);

  // Fetch displayed alerts from localStorage on mount
  useEffect(() => {
    const displayedAlerts = JSON.parse(localStorage.getItem("displayedAlerts") || "[]");
    setDisplayedAlertIds(displayedAlerts);
  }, []);

  // Fetch alerts from the JSON file and dispatch to Redux store
  useEffect(() => {
    const fetchAlerts = async () => {
      try {
        const response = await fetch(ALERT_FILE_URL);
        const fetchedAlerts = await response.json();
        setAlerts(fetchedAlerts);
      } catch (error) {
        console.error("Error fetching alerts:", error);
      }
    };

    fetchAlerts();
  }, []);

  // Use useEffect to watch for new alerts
  useEffect(() => {
    if (alerts && Object.keys(alerts).length > 0) {
      // Convert the alerts object into an array
      const alertArray = Object.values(alerts);

      // Filter out alerts that have already been dismissed
      const newAlerts = alertArray.filter((alert) => !displayedAlertIds.includes(alert.id));

      newAlerts.forEach((alert) => {
        // Display the notification
        notification.open({
          key: "notification-alerts-" + alert.id,
          message: alert.message,
          description: alert.description,
          type: alert.type || "info",
          duration: 0,
          placement: "bottomRight",
          closable: true,
          onClose: () => {
            // When the notification is closed, update displayed alerts state and localStorage
            setDisplayedAlertIds((prevIds) => {
              const updatedIds = [...prevIds, alert.id];
              localStorage.setItem("displayedAlerts", JSON.stringify(updatedIds));
              return updatedIds;
            });
          }
        });
      });
    }
  }, [alerts, displayedAlertIds]);

  useEffect(() => {
    const widgetId = InstanceRenderManager({
      imex: "IABVNO4scRKY11XBQkNr",
      rome: "mQdqARMzkZRUVugJ6TdS"
    });
    window.noticeable.render("widget", widgetId);
    requestForToken().catch((error) => {
      console.error(`Unable to request for token.`, error);
    });
  }, []);

  useEffect(() => {
    document.title = InstanceRenderManager({
      imex: t("titles.imexonline"),
      rome: t("titles.romeonline"),
      promanager: t("titles.promanager")
    });
  }, [t]);

  const AppRouteTable = (
    <Suspense
      fallback={
        <LoadingSpinner
          message={t("general.labels.loadingapp", {
            app: InstanceRenderManager({
              imex: "$t(titles.imexonline)",
              rome: "$t(titles.romeonline)",
              promanager: "$t(titles.promanager)"
            })
          })}
        />
      }
    >
      <PaymentModalContainer />
      <CardPaymentModalContainer />
      <TaskUpsertModalContainer />
      <BreadCrumbs />
      <BillEnterModalContainer />
      <JobCostingModal />
      <ReportCenterModal />
      <EmailOverlayContainer />
      <TimeTicketModalContainer />
      <TimeTicketModalTask />
      <PrintCenterModalContainer />
      <Routes>
        <Route path="/_test" element={<TestComponent />} />
        <Route path="/" element={<ManageRootPage />} />
        <Route
          path="/jobs"
          element={
            <Suspense fallback={<Spin />}>
              <JobsPage />
            </Suspense>
          }
        />
        <Route
          path="/jobs/:jobId/intake"
          element={
            <Suspense fallback={<Spin />}>
              <JobIntake />
            </Suspense>
          }
        />
        <Route
          path="/jobs/:jobId/deliver"
          element={
            <Suspense fallback={<Spin />}>
              <JobDeliver />
            </Suspense>
          }
        />
        <Route
          path="/jobs/:jobId/checklist"
          element={
            <Suspense fallback={<Spin />}>
              <JobChecklistView />
            </Suspense>
          }
        />
        <Route
          path="/jobs/:jobId/close"
          element={
            <Suspense fallback={<Spin />}>
              <JobsClose />
            </Suspense>
          }
        />
        <Route
          path="/jobs/:jobId/admin"
          element={
            <Suspense fallback={<Spin />}>
              <JobsAdmin />
            </Suspense>
          }
        />
        <Route
          path="/jobs/all"
          element={
            <Suspense fallback={<Spin />}>
              <AllJobs />
            </Suspense>
          }
        />
        <Route
          path="/jobs/ready"
          element={
            <Suspense fallback={<Spin />}>
              <ReadyJobs />
            </Suspense>
          }
        />
        <Route
          path="/jobs/new"
          element={
            <Suspense fallback={<Spin />}>
              <JobsCreateContainerPage />
            </Suspense>
          }
        />
        <Route
          path="/jobs/:jobId"
          element={
            <Suspense fallback={<Spin />}>
              <JobsDetailPage />
            </Suspense>
          }
        />
        <Route
          path="/temporarydocs/"
          element={
            <Suspense fallback={<Spin />}>
              <TempDocs />
            </Suspense>
          }
        />
        <Route
          path="/tasks/mytasks"
          element={
            <Suspense fallback={<Spin />}>
              <MyTasksPage />
            </Suspense>
          }
        />
        <Route
          path="/tasks/alltasks"
          element={
            <Suspense fallback={<Spin />}>
              <AllTasksPage />
            </Suspense>
          }
        />
        <Route
          path="/inventory/"
          element={
            <Suspense fallback={<Spin />}>
              <InventoryListPage />
            </Suspense>
          }
        />
        <Route
          path="/courtesycars/"
          element={
            <Suspense fallback={<Spin />}>
              <CourtesyCarsPage />
            </Suspense>
          }
        />
        <Route
          path="/courtesycars/new"
          element={
            <Suspense fallback={<Spin />}>
              <CourtesyCarCreateContainer />
            </Suspense>
          }
        />
        <Route
          path="/courtesycars/contracts"
          element={
            <Suspense fallback={<Spin />}>
              <ContractsList />
            </Suspense>
          }
        />
        <Route
          path="/courtesycars/contracts/new"
          element={
            <Suspense fallback={<Spin />}>
              <ContractCreatePage />
            </Suspense>
          }
        />
        <Route
          path="/courtesycars/contracts/:contractId"
          element={
            <Suspense fallback={<Spin />}>
              <ContractDetailPage />
            </Suspense>
          }
        />
        <Route
          path="/courtesycars/:ccId"
          element={
            <Suspense fallback={<Spin />}>
              <CourtesyCarDetailContainer />
            </Suspense>
          }
        />
        <Route
          path="/profile"
          element={
            <Suspense fallback={<Spin />}>
              <ProfilePage />
            </Suspense>
          }
        />
        <Route
          path="/vehicles"
          element={
            <Suspense fallback={<Spin />}>
              <VehiclesContainer />
            </Suspense>
          }
        />
        <Route
          path="/production/list"
          element={
            <Suspense fallback={<Spin />}>
              <ProductionListPage />
            </Suspense>
          }
        />
        <Route
          path="/production/board"
          element={
            <Suspense fallback={<Spin />}>
              <ProductionBoardPage />
            </Suspense>
          }
        />
        <Route
          path="/vehicles/:vehId"
          element={
            <Suspense fallback={<Spin />}>
              <VehiclesDetailContainer />
            </Suspense>
          }
        />
        <Route
          path="/bills"
          element={
            <Suspense fallback={<Spin />}>
              <BillsListPage />
            </Suspense>
          }
        />
        <Route
          path="/owners"
          element={
            <Suspense fallback={<Spin />}>
              <OwnersContainer />
            </Suspense>
          }
        />
        <Route
          path="/owners/:ownerId"
          element={
            <Suspense fallback={<Spin />}>
              <OwnersDetailContainer />
            </Suspense>
          }
        />
        <Route
          path="/schedule"
          element={
            <Suspense fallback={<Spin />}>
              <ScheduleContainer />
            </Suspense>
          }
        />
        <Route
          path="/available"
          element={
            <Suspense fallback={<Spin />}>
              <JobsAvailablePage />
            </Suspense>
          }
        />
        <Route
          path="/shop"
          element={
            <Suspense fallback={<Spin />}>
              <ShopPage />
            </Suspense>
          }
        />
        {
          //   <Route
          // path='/shop/templates'
          // element={<ShopTemplates />}
          //   />
        }
        <Route
          path="/shop/vendors"
          element={
            <Suspense fallback={<Spin />}>
              <ShopVendorPageContainer />
            </Suspense>
          }
        />
        <Route
          path="/shop/csi"
          element={
            <Suspense fallback={<Spin />}>
              <ShopCsiPageContainer />
            </Suspense>
          }
        />

        <Route
          path="/accounting/qbo"
          element={
            <Suspense fallback={<Spin />}>
              <AccountingQboCallback />
            </Suspense>
          }
        />

        <Route
          path="/accounting/receivables"
          element={
            <Suspense fallback={<Spin />}>
              <AccountingReceivables />
            </Suspense>
          }
        />
        <Route
          path="/accounting/payables"
          element={
            <Suspense fallback={<Spin />}>
              <AccountingPayables />
            </Suspense>
          }
        />
        <Route
          path="/accounting/payments"
          element={
            <Suspense fallback={<Spin />}>
              <AccountingPayments />
            </Suspense>
          }
        />
        <Route
          path="/accounting/exportlogs"
          element={
            <Suspense fallback={<Spin />}>
              <ExportLogs />
            </Suspense>
          }
        />
        <Route
          path="/ttapprovals"
          element={
            <Suspense fallback={<Spin />}>
              <TtApprovals />
            </Suspense>
          }
        />
        <Route
          path="/partsqueue"
          element={
            <Suspense fallback={<Spin />}>
              <PartsQueue />
            </Suspense>
          }
        />
        <Route
          path="/phonebook"
          element={
            <Suspense fallback={<Spin />}>
              <Phonebook />
            </Suspense>
          }
        />

        <Route
          path="/payments"
          element={
            <Suspense fallback={<Spin />}>
              <PaymentsAll />
            </Suspense>
          }
        />
        <Route
          path="/shiftclock"
          element={
            <Suspense fallback={<Spin />}>
              <ShiftClock />
            </Suspense>
          }
        />
        <Route
          path="/scoreboard"
          element={
            <Suspense fallback={<Spin />}>
              <Scoreboard />
            </Suspense>
          }
        />
        <Route
          path="/timetickets"
          element={
            <Suspense fallback={<Spin />}>
              <TimeTicketsAll />
            </Suspense>
          }
        />
        <Route
          path="/help"
          element={
            <Suspense fallback={<Spin />}>
              <Help />
            </Suspense>
          }
        />
        <Route path="/emailtest" element={<EmailTest />} />
        <Route
          path="/dashboard"
          element={
            <Suspense fallback={<Spin />}>
              <Dashboard />
            </Suspense>
          }
        />
        <Route
          path="/dms"
          element={
            <Suspense fallback={<Spin />}>
              <Dms />
            </Suspense>
          }
        />
        <Route
          path="/dmsap"
          element={
            <Suspense fallback={<Spin />}>
              <DmsPayables />
            </Suspense>
          }
        />
      </Routes>
    </Suspense>
  );

  let PageContent;

  if (conflict) PageContent = <ConflictComponent />;
  else if (bodyshop && bodyshop.sub_status !== "active") PageContent = <ShopSubStatusComponent />;
  else PageContent = AppRouteTable;

  const broadcastMessage = () => {
    if (socket && bodyshop && bodyshop.id) {
      console.log(`Broadcasting message to bodyshop ${bodyshop.id}:`);
      socket.emit("broadcast-to-bodyshop", bodyshop.id, `Hello from ${clientId}`);
    }
  };

  return (
    <>
      {import.meta.env.PROD && <ChatAffixContainer bodyshop={bodyshop} chatVisible={chatVisible} />}
      <Layout style={{ minHeight: "100vh" }} className="layout-container">
        <UpdateAlert />
        <HeaderContainer />
        <Content className="content-container">
          <PartnerPingComponent />
          <Sentry.ErrorBoundary fallback={<ErrorBoundary />} showDialog>
            {PageContent}
          </Sentry.ErrorBoundary>

          <FloatButton.BackTop style={{ right: 100, bottom: 25 }} />
        </Content>
        <Footer>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              margin: "1rem 0rem"
            }}
          >
            <div style={{ display: "flex" }}>
              <WssStatusDisplayComponent />
              <div onClick={broadcastMessage}>
                {`${InstanceRenderManager({
                  imex: t("titles.imexonline"),
                  rome: t("titles.romeonline"),
                  promanager: t("titles.promanager")
                })} - ${import.meta.env.VITE_APP_GIT_SHA_DATE}`}
              </div>
              <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
            </div>
            <Link to="/disclaimer" target="_blank" style={{ color: "#ccc" }}>
              Disclaimer & Notices
            </Link>
          </div>
        </Footer>
      </Layout>
    </>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Manage);