// components/layout/BackstoryLayout.tsx
import React, { ReactElement, useEffect, useState } from 'react';
import { Outlet, useLocation, Routes, Route } from "react-router-dom";
import { Box, Container, Paper } from '@mui/material';
import { useNavigate } from "react-router-dom";
import { SxProps, Theme } from '@mui/material';

import { Header } from 'components/layout/Header';
import { Scrollable } from 'components/Scrollable';
import { Footer } from 'components/layout/Footer';
import { Snack, SetSnackType } from 'components/Snack';
import { User } from 'types/types';
import { LoadingComponent } from "components/LoadingComponent";
import { AuthProvider, useAuth, ProtectedRoute } from 'hooks/AuthContext';
import { useAppState, useSelectedCandidate } from 'hooks/GlobalContext';
import {
  getMainNavigationItems,
  getAllRoutes,
} from 'config/navigationConfig';
import { NavigationItem } from 'types/navigation';

// Legacy type for backward compatibility
export type NavigationLinkType = {
  label: ReactElement<any> | string;
  path: string;
  icon?: ReactElement<any>;
};

interface BackstoryPageContainerProps {
  children?: React.ReactNode;
  sx?: SxProps<Theme>;
}

const BackstoryPageContainer = (props: BackstoryPageContainerProps) => {
  const { children, sx } = props;
  return (
    <Container
      className="BackstoryPageContainer"
      sx={{
        display: "flex",
        flexDirection: "row",
        flexGrow: 1,
        p: "0 !important",
        m: "0 auto !important",
        maxWidth: '1024px',
        height: "100%",
        minHeight: 0,
        ...sx
      }}>
      <Box sx={{
        display: "flex",
        p: { xs: 0, sm: 0.5 },
        flexGrow: 1,
        minHeight: "min-content",
      }}>
        <Paper
          elevation={2}
          sx={{
            display: "flex",
            flexGrow: 1,
            m: 0,
            p: 0.5,
            minHeight: "min-content",
            backgroundColor: 'background.paper',
            borderRadius: 0.5,
            maxWidth: '100%',
            flexDirection: "column",
          }}>
          {children}
        </Paper>
      </Box>
    </Container>
  );
};

interface BackstoryLayoutProps {
  page: string;
  chatRef: React.Ref<any>;
}

const BackstoryLayout: React.FC<BackstoryLayoutProps> = (props: BackstoryLayoutProps) => {
  const { page, chatRef } = props;
  const { setSnack } = useAppState();
  const navigate = useNavigate();
  const location = useLocation();
  const { guest, user } = useAuth();
  const { selectedCandidate } = useSelectedCandidate();
  const [navigationItems, setNavigationItems] = useState<NavigationItem[]>([]);

  useEffect(() => {
    const userType = user?.userType || null;
    setNavigationItems(getMainNavigationItems(userType, user?.isAdmin ? true : false));
  }, [user]);

  // Generate dynamic routes from navigation config
  const generateRoutes = () => {
    if (!guest) return null;

    const userType = user?.userType || null;
    const isAdmin = user?.isAdmin ? true : false;

    // Get all routes from navigation config
    const routes = getAllRoutes(userType, isAdmin);

    return routes.map((route, index) => {
      if (!route.path || !route.component) return null;

      // Clone the component and pass necessary props if it's a page component
      const componentWithProps = React.cloneElement(route.component as ReactElement, {
        ...(route.id === 'chat' && { ref: chatRef }),
        ...(route.component.props || {}),
      });

      return (
        <Route
          key={`${route.id}-${index}`}
          path={route.path}
          element={componentWithProps}
        />
      );
    }).filter(Boolean);
  };

  return (
    <Box sx={{
      height: "100%",
      maxHeight: "100%",
      minHeight: "100%",
      flexDirection: "column"
    }}>
      <Header
        setSnack={setSnack}
        currentPath={page}
        navigate={navigate}
        navigationItems={navigationItems}
      />
      <Box sx={{
        display: "flex",
        width: "100%",
        maxHeight: "100%",
        minHeight: "100%",
        flex: 1,
        m: 0,
        p: 0,
        flexDirection: "column",
        backgroundColor: "#D3CDBF", /* Warm Gray */
      }}>
        <Scrollable
          className="BackstoryPageScrollable"
          sx={{
            m: 0,
            p: 0,
            mt: "72px", /* Needs to be kept in sync with the height of Header */
            display: "flex",
            flexDirection: "column",
            backgroundColor: "background.default",
            height: "100%",
            maxHeight: "100%",
            minHeight: "100%",
            minWidth: "min-content",
          }}
        >
          <BackstoryPageContainer>
            {!guest && (
              <Box>
                <LoadingComponent
                  loadingText="Creating session..."
                  loaderType="linear"
                  withFade={true}
                  fadeDuration={1200}
                />
              </Box>
            )}
            {guest && (
              <>
                <Outlet />
                <Routes>
                  {generateRoutes()}
                </Routes>
              </>
            )}
            {location.pathname === "/" && <Footer />}
          </BackstoryPageContainer>
        </Scrollable>
      </Box>
    </Box>
  );
};

export {
  BackstoryLayout
};