// // ** React Imports
// import { useState, ReactNode } from 'react'

// // ** MUI Components
// import Typography from '@mui/material/Typography'
// import Box, { BoxProps } from '@mui/material/Box'
// import useMediaQuery from '@mui/material/useMediaQuery'
// import { styled, useTheme } from '@mui/material/styles'

// // ** Hooks
// import { useSettings } from 'src/@core/hooks/useSettings'

// import { AnimatePresence, motion } from 'motion/react'

// // ** Configs
// import themeConfig from 'src/configs/themeConfig'

// // ** Layout Import
// import BlankLayout from 'src/@core/layouts/BlankLayout'

// // ** Demo Imports
// import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2'
// import LoginForm from 'src/views/pages/auth/form/login'
// import VerifyUser from 'src/views/pages/auth/form/VerifyUser'

// // ** Styled Components
// const LoginIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   maxHeight: 680,
//   marginTop: theme.spacing(12),
//   marginBottom: theme.spacing(12),
//   [theme.breakpoints.down(1540)]: {
//     maxHeight: 550
//   },
//   [theme.breakpoints.down('lg')]: {
//     maxHeight: 500
//   }
// }))

// const TwoStepsIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   maxHeight: 650,
//   marginTop: theme.spacing(12),
//   marginBottom: theme.spacing(12),
//   [theme.breakpoints.down(1540)]: {
//     maxHeight: 550
//   },
//   [theme.breakpoints.down('lg')]: {
//     maxHeight: 500
//   }
// }))

// const RightWrapper = styled(Box)<BoxProps>(({ theme }) => ({
//   width: '100%',
//   [theme.breakpoints.up('md')]: {
//     maxWidth: 450
//   },
//   [theme.breakpoints.up('lg')]: {
//     maxWidth: 600
//   },
//   [theme.breakpoints.up('xl')]: {
//     maxWidth: 750
//   }
// }))

// interface UserDetails {
//   token: string
//   mobileNum: string
//   otp?: number
// }

// const slideVariants = {
//   hiddenLeft: { x: -400, opacity: 0 },
//   hiddenRight: { x: 400, opacity: 0 },
//   visible: { x: 0, opacity: 1 },
//   exitLeft: { x: -400, opacity: 0 },
//   exitRight: { x: 400, opacity: 0 }
// }

// const LoginPage = () => {
//   const [isVerify, setIsVerify] = useState<boolean>(false)
//   const [userDetails, setUserDetails] = useState<UserDetails>({
//     token: '12391728937198237891',
//     mobileNum: '88888888888'
//   })

//   // ** Hooks
//   const theme = useTheme()
//   const { settings } = useSettings()
//   const hidden = useMediaQuery(theme.breakpoints.down('md'))

//   // ** Vars
//   const { skin } = settings

//   const handleGetToken = (data: UserDetails): void => {
//     setUserDetails(data)
//     setIsVerify(true)
//   }

//   const imageSource = skin === 'bordered' ? 'auth-v2-login-illustration-bordered' : 'auth-v2-login-illustration'

//   return (
//     <Box className='content-right' sx={{ backgroundColor: 'background.paper' }}>
//       {!hidden ? (
//         <Box
//           sx={{
//             flex: 1,
//             display: 'flex',
//             position: 'relative',
//             alignItems: 'center',
//             borderRadius: '20px',
//             justifyContent: 'center',
//             backgroundColor: 'customColors.bodyBg',
//             margin: theme => theme.spacing(8, 0, 8, 8)
//           }}
//         >
//           <Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
//             <AnimatePresence mode='wait'>
//               <motion.div
//                 key={isVerify ? 'verify' : 'login'}
//                 initial={{ opacity: 0 }}
//                 animate={{ opacity: 1 }}
//                 exit={{ opacity: 0 }}
//                 transition={{ delay: 0.3, duration: 0.5, ease: 'easeInOut' }}
//                 style={{
//                   position: 'absolute',
//                   width: '100%',
//                   height: '100%',
//                   display: 'flex',
//                   justifyContent: 'center',
//                   alignItems: 'center'
//                 }}
//               >
//                 {isVerify ? (
//                   <TwoStepsIllustration
//                     alt='two-steps-illustration'
//                     src={`/images/pages/auth-v2-two-steps-illustration-${theme.palette.mode}.png`}
//                   />
//                 ) : (
//                   <LoginIllustration
//                     alt='login-illustration'
//                     src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
//                   />
//                 )}
//               </motion.div>
//             </AnimatePresence>
//           </Box>
//           <FooterIllustrationsV2 />
//         </Box>
//       ) : null}
//       <RightWrapper>
//         <Box
//           sx={{
//             p: [6, 12],
//             height: '100%',
//             display: 'flex',
//             alignItems: 'center',
//             justifyContent: 'center'
//           }}
//         >
//           <AnimatePresence mode='wait'>
//             {!isVerify ? (
//               <motion.div
//                 key='login'
//                 initial='hiddenLeft'
//                 animate='visible'
//                 exit='exitLeft'
//                 variants={slideVariants}
//                 transition={{ duration: 0.5 }}
//               >
//                 <Box sx={{ width: '100%', maxWidth: 400 }}>
//                   <Box sx={{ my: 6 }}>
//                     <Typography sx={{ mb: 1.5, fontWeight: 500, fontSize: '1.625rem', lineHeight: 1.385 }}>
//                       {`Welcome to ${themeConfig.templateName}! 👋🏻`}
//                     </Typography>
//                     <Typography sx={{ color: 'text.secondary' }}>
//                       Please sign-in to your account and start the adventure
//                     </Typography>
//                   </Box>

//                   {/* <Alert icon={false} sx={{ py: 3, mb: 6, ...bgColors.primaryLight }}>
//                     <Typography variant='body2' sx={{ mb: 2, color: 'primary.main' }}>
//                       Admin: <strong>admin@vuexy.com</strong> / Pass: <strong>admin</strong>
//                     </Typography>
//                     <Typography variant='body2' sx={{ color: 'primary.main' }}>
//                       Client: <strong>client@vuexy.com</strong> / Pass: <strong>client</strong>
//                     </Typography>
//                   </Alert> */}

//                   <LoginForm onVerify={handleGetToken} />

//                   {/* /forgot-password/ */}
//                 </Box>
//               </motion.div>
//             ) : (
//               <motion.div
//                 key='verify'
//                 initial='hiddenRight'
//                 animate='visible'
//                 exit='exitRight'
//                 variants={slideVariants}
//                 transition={{ duration: 0.5 }}
//               >
//                 <VerifyUser token={userDetails.token} mobile={userDetails.mobileNum} otp={userDetails.otp ?? 0} />
//               </motion.div>
//             )}
//           </AnimatePresence>
//         </Box>
//       </RightWrapper>
//     </Box>
//   )
// }

// LoginPage.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>

// LoginPage.guestGuard = true

// export default LoginPage



// ** React Imports
// import { useState, ReactNode } from 'react'

// // ** Next Import
// import Link from 'next/link'

// // ** MUI Components
// import Typography from '@mui/material/Typography'
// import Box, { BoxProps } from '@mui/material/Box'
// import useMediaQuery from '@mui/material/useMediaQuery'
// import { styled, useTheme } from '@mui/material/styles'

// // ** Hooks
// import { useSettings } from 'src/@core/hooks/useSettings'

// import { AnimatePresence, motion } from 'motion/react'

// // ** Configs
// import themeConfig from 'src/configs/themeConfig'

// // ** Layout Import
// import BlankLayout from 'src/@core/layouts/BlankLayout'

// // ** Demo Imports
// import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2'
// import LoginForm from 'src/views/pages/auth/form/login'
// import VerifyUser from 'src/views/pages/auth/form/VerifyUser'

// // ** Styled Components
// const LoginIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   maxHeight: 680,
//   marginTop: theme.spacing(12),
//   marginBottom: theme.spacing(12),
//   [theme.breakpoints.down(1540)]: {
//     maxHeight: 550
//   },
//   [theme.breakpoints.down('lg')]: {
//     maxHeight: 500
//   }
// }))

// const TwoStepsIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   maxHeight: 650,
//   marginTop: theme.spacing(12),
//   marginBottom: theme.spacing(12),
//   [theme.breakpoints.down(1540)]: {
//     maxHeight: 550
//   },
//   [theme.breakpoints.down('lg')]: {
//     maxHeight: 500
//   }
// }))

// const RightWrapper = styled(Box)<BoxProps>(({ theme }) => ({
//   width: '100%',
//   [theme.breakpoints.up('md')]: {
//     maxWidth: 450
//   },
//   [theme.breakpoints.up('lg')]: {
//     maxWidth: 600
//   },
//   [theme.breakpoints.up('xl')]: {
//     maxWidth: 750
//   }
// }))

// const LinkStyled = styled(Link)(({ theme }) => ({
//   fontSize: '1rem',
//   textDecoration: 'none',
//   color: theme.palette.primary.main,
//   cursor: 'pointer',
//   fontWeight: 500
// }))

// interface UserDetails {
//   token: string
//   mobileNum: string
//   otp?: number
// }

// const slideVariants = {
//   hiddenLeft: { x: -400, opacity: 0 },
//   hiddenRight: { x: 400, opacity: 0 },
//   visible: { x: 0, opacity: 1 },
//   exitLeft: { x: -400, opacity: 0 },
//   exitRight: { x: 400, opacity: 0 }
// }

// const LoginPage = () => {
//   const [isVerify, setIsVerify] = useState<boolean>(false)
//   const [userDetails, setUserDetails] = useState<UserDetails>({
//     token: '12391728937198237891',
//     mobileNum: '88888888888'
//   })

//   // ** Hooks
//   const theme = useTheme()
//   const { settings } = useSettings()
//   const hidden = useMediaQuery(theme.breakpoints.down('md'))

//   // ** Vars
//   const { skin } = settings

//   const handleGetToken = (data: UserDetails): void => {
//     setUserDetails(data)
//     setIsVerify(true)
//   }

//   const imageSource =
//     skin === 'bordered' ? 'auth-v2-login-illustration-bordered' : 'auth-v2-login-illustration'

//   return (
//     <Box className='content-right' sx={{ backgroundColor: 'background.paper' }}>
      
//       {!hidden ? (
//         <Box
//           sx={{
//             flex: 1,
//             display: 'flex',
//             position: 'relative',
//             alignItems: 'center',
//             borderRadius: '20px',
//             justifyContent: 'center',
//             backgroundColor: 'customColors.bodyBg',
//             margin: theme => theme.spacing(8, 0, 8, 8)
//           }}
//         >
//           <Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
//             <AnimatePresence mode='wait'>
//               <motion.div
//                 key={isVerify ? 'verify' : 'login'}
//                 initial={{ opacity: 0 }}
//                 animate={{ opacity: 1 }}
//                 exit={{ opacity: 0 }}
//                 transition={{ delay: 0.3, duration: 0.5, ease: 'easeInOut' }}
//                 style={{
//                   position: 'absolute',
//                   width: '100%',
//                   height: '100%',
//                   display: 'flex',
//                   justifyContent: 'center',
//                   alignItems: 'center'
//                 }}
//               >
//                 {isVerify ? (
//                   <TwoStepsIllustration
//                     alt='two-steps-illustration'
//                     src={`/images/pages/auth-v2-two-steps-illustration-${theme.palette.mode}.png`}
//                   />
//                 ) : (
//                   <LoginIllustration
//                     alt='login-illustration'
//                     src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
//                   />
//                 )}
//               </motion.div>
//             </AnimatePresence>
//           </Box>
//           <FooterIllustrationsV2 />
//         </Box>
//       ) : null}

//       <RightWrapper>
//         <Box
//           sx={{
//             p: [6, 12],
//             height: '100%',
//             display: 'flex',
//             alignItems: 'center',
//             justifyContent: 'center'
//           }}
//         >
//           <AnimatePresence mode='wait'>
//             {!isVerify ? (
//               <motion.div
//                 key='login'
//                 initial='hiddenLeft'
//                 animate='visible'
//                 exit='exitLeft'
//                 variants={slideVariants}
//                 transition={{ duration: 0.5 }}
//               >
//                  <Box sx={{ mb: 4, display: 'flex' }}>
//                     <img
//                       src='/images/website-logo/LockTrust-logo.png'
//                       alt='LockTrust Logo'
//                       style={{
//                         height: '60px',
//                         width: 'auto',
//                         objectFit: 'contain'
//                       }}
//                     />
//                   </Box>
//                 <Box sx={{ width: '100%', maxWidth: 400 }}>
//                   <Box sx={{ my: 6 }}>
//                     <Typography sx={{ mb: 1.5, fontWeight: 500, fontSize: '1.625rem', lineHeight: 1.385 }}>
//                       {`Welcome to ${themeConfig.templateName}! 👋🏻`}
//                     </Typography>
//                     <Typography sx={{ color: 'text.secondary' }}>
//                       Please sign-in to your account and start the adventure
//                     </Typography>
//                   </Box>

//                   <LoginForm onVerify={handleGetToken} />

//                   {/* ✅ SIGNUP SECTION ADDED */}
//                   <Box
//                     sx={{
//                       display: 'flex',
//                       alignItems: 'center',
//                       flexWrap: 'wrap',
//                       justifyContent: 'center',
//                       mt: 4
//                     }}
//                   >
//                     <Typography sx={{ color: 'text.secondary', mr: 2 }}>
//                       New on our platform?
//                     </Typography>
//                     <Typography variant='body2'>
//                       <LinkStyled href='/register'>
//                         Create an account
//                       </LinkStyled>
//                     </Typography>
//                   </Box>
//                 </Box>
//               </motion.div>
//             ) : (
//               <motion.div
//                 key='verify'
//                 initial='hiddenRight'
//                 animate='visible'
//                 exit='exitRight'
//                 variants={slideVariants}
//                 transition={{ duration: 0.5 }}
//               >
//                 <VerifyUser
//                   token={userDetails.token}
//                   mobile={userDetails.mobileNum}
//                   otp={userDetails.otp ?? 0}
//                 />
//               </motion.div>
//             )}
//           </AnimatePresence>
//         </Box>
//       </RightWrapper>
//     </Box>
//   )
// }

// LoginPage.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>

// LoginPage.guestGuard = true

// export default LoginPage

/////////////////////////////// new ///////////////////////////////////////////////

// import { useState, ReactNode } from 'react'

// // ** Next Import
// import Link from 'next/link'
// import { useRouter } from 'next/router'

// // ** MUI Components
// import Typography from '@mui/material/Typography'
// import Box, { BoxProps } from '@mui/material/Box'
// import useMediaQuery from '@mui/material/useMediaQuery'
// import { styled, useTheme } from '@mui/material/styles'

// // ** Hooks
// import { useSettings } from 'src/@core/hooks/useSettings'

// import { AnimatePresence, motion } from 'motion/react'

// // ** Configs
// import themeConfig from 'src/configs/themeConfig'

// // ** Layout Import
// import BlankLayout from 'src/@core/layouts/BlankLayout'

// // ** Demo Imports
// import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2'
// import LoginForm from 'src/views/pages/auth/form/login'
// import VerifyUser from 'src/views/pages/auth/form/VerifyUser'

// // ** Styled Components
// const LoginIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   maxHeight: 680,
//   marginTop: theme.spacing(12),
//   marginBottom: theme.spacing(12),
//   [theme.breakpoints.down(1540)]: {
//     maxHeight: 550
//   },
//   [theme.breakpoints.down('lg')]: {
//     maxHeight: 500
//   }
// }))

// const TwoStepsIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   maxHeight: 650,
//   marginTop: theme.spacing(12),
//   marginBottom: theme.spacing(12),
//   [theme.breakpoints.down(1540)]: {
//     maxHeight: 550
//   },
//   [theme.breakpoints.down('lg')]: {
//     maxHeight: 500
//   }
// }))

// const RightWrapper = styled(Box)<BoxProps>(({ theme }) => ({
//   width: '100%',
//   [theme.breakpoints.up('md')]: {
//     maxWidth: 450
//   },
//   [theme.breakpoints.up('lg')]: {
//     maxWidth: 600
//   },
//   [theme.breakpoints.up('xl')]: {
//     maxWidth: 750
//   }
// }))

// const LinkStyled = styled(Link)(({ theme }) => ({
//   fontSize: '1rem',
//   textDecoration: 'none',
//   color: theme.palette.primary.main,
//   cursor: 'pointer',
//   fontWeight: 500
// }))

// interface UserDetails {
//   token: string
//   mobileNo: string
//   twoFA: boolean
//   passwardCreated: boolean
//   message: string
//   defaultPassword: boolean
//   email: string
// }

// const slideVariants = {
//   hiddenLeft: { x: -400, opacity: 0 },
//   hiddenRight: { x: 400, opacity: 0 },
//   visible: { x: 0, opacity: 1 },
//   exitLeft: { x: -400, opacity: 0 },
//   exitRight: { x: 400, opacity: 0 }
// }

// const LoginPage = () => {
//   const [isVerify, setIsVerify] = useState<boolean>(false)
//   const [userDetails, setUserDetails] = useState<UserDetails>({
//     token: '',
//     mobileNo: '',
//     twoFA: false,
//     passwardCreated: false,
//     message: '',
//     defaultPassword: false,
//     email: ''
//   })

//   // ** Hooks
//   const theme = useTheme()
//   const router = useRouter()
//   const { settings } = useSettings()
//   const hidden = useMediaQuery(theme.breakpoints.down('md'))

//   // ** Vars
//   const { skin } = settings

//   const handleGetToken = (data: UserDetails): void => {
//     setUserDetails(data)
    
//     // Store token and email in session storage
//     sessionStorage.setItem('authToken', data.token)
//     sessionStorage.setItem('userEmail', data.email)
//     sessionStorage.setItem('userMobile', data.mobileNo)
    
//     // Check TwoFA flag from response
//     if (data.twoFA === true) {
//       // If TwoFA is true, show OTP verification
//       setIsVerify(true)
//     } else {
//       // If TwoFA is false, redirect to Setup2FA page
//       router.push('/setup-2fa')
//     }
//   }

//   const imageSource =
//     skin === 'bordered' ? 'auth-v2-login-illustration-bordered' : 'auth-v2-login-illustration'

//   return (
//     <Box className='content-right' sx={{ backgroundColor: 'background.paper' }}>
      
//       {!hidden ? (
//         <Box
//           sx={{
//             flex: 1,
//             display: 'flex',
//             position: 'relative',
//             alignItems: 'center',
//             borderRadius: '20px',
//             justifyContent: 'center',
//             backgroundColor: 'customColors.bodyBg',
//             margin: theme => theme.spacing(8, 0, 8, 8)
//           }}
//         >
//           <Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
//             <AnimatePresence mode='wait'>
//               <motion.div
//                 key={isVerify ? 'verify' : 'login'}
//                 initial={{ opacity: 0 }}
//                 animate={{ opacity: 1 }}
//                 exit={{ opacity: 0 }}
//                 transition={{ delay: 0.3, duration: 0.5, ease: 'easeInOut' }}
//                 style={{
//                   position: 'absolute',
//                   width: '100%',
//                   height: '100%',
//                   display: 'flex',
//                   justifyContent: 'center',
//                   alignItems: 'center'
//                 }}
//               >
//                 {isVerify ? (
//                   <TwoStepsIllustration
//                     alt='two-steps-illustration'
//                     src={`/images/pages/auth-v2-two-steps-illustration-${theme.palette.mode}.png`}
//                   />
//                 ) : (
//                   <LoginIllustration
//                     alt='login-illustration'
//                     src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
//                   />
//                 )}
//               </motion.div>
//             </AnimatePresence>
//           </Box>
//           <FooterIllustrationsV2 />
//         </Box>
//       ) : null}

//       <RightWrapper>
//         <Box
//           sx={{
//             p: [6, 12],
//             height: '100%',
//             display: 'flex',
//             alignItems: 'center',
//             justifyContent: 'center'
//           }}
//         >
//           <AnimatePresence mode='wait'>
//             {!isVerify ? (
//               <motion.div
//                 key='login'
//                 initial='hiddenLeft'
//                 animate='visible'
//                 exit='exitLeft'
//                 variants={slideVariants}
//                 transition={{ duration: 0.5 }}
//               >
//                 <Box sx={{ mb: 4, display: 'flex' }}>
//                   <img
//                     src='/images/website-logo/LockTrust-logo.png'
//                     alt='LockTrust Logo'
//                     style={{
//                       height: '60px',
//                       width: 'auto',
//                       objectFit: 'contain'
//                     }}
//                   />
//                 </Box>
//                 <Box sx={{ width: '100%', maxWidth: 400 }}>
//                   <Box sx={{ my: 6 }}>
//                     <Typography sx={{ mb: 1.5, fontWeight: 500, fontSize: '1.625rem', lineHeight: 1.385 }}>
//                       {`Welcome to ${themeConfig.templateName}! 👋🏻`}
//                     </Typography>
//                     <Typography sx={{ color: 'text.secondary' }}>
//                       Please sign-in to your account and start the adventure
//                     </Typography>
//                   </Box>

//                   <LoginForm onVerify={handleGetToken} />

//                   <Box
//                     sx={{
//                       display: 'flex',
//                       alignItems: 'center',
//                       flexWrap: 'wrap',
//                       justifyContent: 'center',
//                       mt: 4
//                     }}
//                   >
//                     <Typography sx={{ color: 'text.secondary', mr: 2 }}>
//                       New on our platform?
//                     </Typography>
//                     <Typography variant='body2'>
//                       <LinkStyled href='/register'>
//                         Create an account
//                       </LinkStyled>
//                     </Typography>
//                   </Box>
//                 </Box>
//               </motion.div>
//             ) : (
//               <motion.div
//                 key='verify'
//                 initial='hiddenRight'
//                 animate='visible'
//                 exit='exitRight'
//                 variants={slideVariants}
//                 transition={{ duration: 0.5 }}
//               >
//                 <VerifyUser
//                   token={userDetails.token}
//                   mobile={userDetails.mobileNo}
//                   email={userDetails.email}
//                 />
//               </motion.div>
//             )}
//           </AnimatePresence>
//         </Box>
//       </RightWrapper>
//     </Box>
//   )
// }

// LoginPage.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>
// LoginPage.guestGuard = true

// export default LoginPage


// flow changes //////////////////////////////////////////////////
// import { useState, ReactNode } from 'react'

// // ** Next Import
// import Link from 'next/link'
// import { useRouter } from 'next/router'

// // ** MUI Components
// import Typography from '@mui/material/Typography'
// import Box, { BoxProps } from '@mui/material/Box'
// import useMediaQuery from '@mui/material/useMediaQuery'
// import { styled, useTheme } from '@mui/material/styles'

// // ** Hooks
// import { useSettings } from 'src/@core/hooks/useSettings'

// import { AnimatePresence, motion } from 'motion/react'

// // ** Configs
// import themeConfig from 'src/configs/themeConfig'

// // ** Layout Import
// import BlankLayout from 'src/@core/layouts/BlankLayout'

// // ** Demo Imports
// import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2'
// import LoginForm from 'src/views/pages/auth/form/login'
// import VerifyUser from 'src/views/pages/auth/form/VerifyUser'

// // ** Styled Components
// const LoginIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   maxHeight: 680,
//   marginTop: theme.spacing(12),
//   marginBottom: theme.spacing(12),
//   [theme.breakpoints.down(1540)]: {
//     maxHeight: 550
//   },
//   [theme.breakpoints.down('lg')]: {
//     maxHeight: 500
//   }
// }))

// const TwoStepsIllustration = styled('img')(({ theme }) => ({
//   zIndex: 2,
//   maxHeight: 650,
//   marginTop: theme.spacing(12),
//   marginBottom: theme.spacing(12),
//   [theme.breakpoints.down(1540)]: {
//     maxHeight: 550
//   },
//   [theme.breakpoints.down('lg')]: {
//     maxHeight: 500
//   }
// }))

// const RightWrapper = styled(Box)<BoxProps>(({ theme }) => ({
//   width: '100%',
//   [theme.breakpoints.up('md')]: {
//     maxWidth: 450
//   },
//   [theme.breakpoints.up('lg')]: {
//     maxWidth: 600
//   },
//   [theme.breakpoints.up('xl')]: {
//     maxWidth: 750
//   }
// }))

// const LinkStyled = styled(Link)(({ theme }) => ({
//   fontSize: '1rem',
//   textDecoration: 'none',
//   color: theme.palette.primary.main,
//   cursor: 'pointer',
//   fontWeight: 500
// }))

// interface UserDetails {
//   token: string
//   mobileNo: string
//   twoFA: boolean
//   passwardCreated: boolean
//   message: string
//   defaultPassword: boolean
//   email: string
// }

// const slideVariants = {
//   hiddenLeft: { x: -400, opacity: 0 },
//   hiddenRight: { x: 400, opacity: 0 },
//   visible: { x: 0, opacity: 1 },
//   exitLeft: { x: -400, opacity: 0 },
//   exitRight: { x: 400, opacity: 0 }
// }

// const LoginPage = () => {
//   const [isVerify, setIsVerify] = useState<boolean>(false)
//   const [userDetails, setUserDetails] = useState<UserDetails>({
//     token: '',
//     mobileNo: '',
//     twoFA: false,
//     passwardCreated: false,
//     message: '',
//     defaultPassword: false,
//     email: ''
//   })

//   // ** Hooks
//   const theme = useTheme()
//   const router = useRouter()
//   const { settings } = useSettings()
//   const hidden = useMediaQuery(theme.breakpoints.down('md'))

//   // ** Vars
//   const { skin } = settings

//   const handleGetToken = (data: UserDetails): void => {
//     setUserDetails(data)
    
//     // Store token and email in session storage
//     sessionStorage.setItem('authToken', data.token)
//     sessionStorage.setItem('userEmail', data.email)
//     sessionStorage.setItem('userMobile', data.mobileNo)
    
//     // For both true and false, show verify page
//     // The VerifyUser component will handle different UI and API endpoints based on twoFA flag
//     setIsVerify(true)
//   }

//   const imageSource =
//     skin === 'bordered' ? 'auth-v2-login-illustration-bordered' : 'auth-v2-login-illustration'

//   return (
//     <Box className='content-right' sx={{ backgroundColor: 'background.paper' }}>
      
//       {!hidden ? (
//         <Box
//           sx={{
//             flex: 1,
//             display: 'flex',
//             position: 'relative',
//             alignItems: 'center',
//             borderRadius: '20px',
//             justifyContent: 'center',
//             backgroundColor: 'customColors.bodyBg',
//             margin: theme => theme.spacing(8, 0, 8, 8)
//           }}
//         >
//           <Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
//             <AnimatePresence mode='wait'>
//               <motion.div
//                 key={isVerify ? 'verify' : 'login'}
//                 initial={{ opacity: 0 }}
//                 animate={{ opacity: 1 }}
//                 exit={{ opacity: 0 }}
//                 transition={{ delay: 0.3, duration: 0.5, ease: 'easeInOut' }}
//                 style={{
//                   position: 'absolute',
//                   width: '100%',
//                   height: '100%',
//                   display: 'flex',
//                   justifyContent: 'center',
//                   alignItems: 'center'
//                 }}
//               >
//                 {isVerify ? (
//                   <TwoStepsIllustration
//                     alt='two-steps-illustration'
//                     src={`/images/pages/auth-v2-two-steps-illustration-${theme.palette.mode}.png`}
//                   />
//                 ) : (
//                   <LoginIllustration
//                     alt='login-illustration'
//                     src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
//                   />
//                 )}
//               </motion.div>
//             </AnimatePresence>
//           </Box>
//           <FooterIllustrationsV2 />
//         </Box>
//       ) : null}

//       <RightWrapper>
//         <Box
//           sx={{
//             p: [6, 12],
//             height: '100%',
//             display: 'flex',
//             alignItems: 'center',
//             justifyContent: 'center'
//           }}
//         >
//           <AnimatePresence mode='wait'>
//             {!isVerify ? (
//               <motion.div
//                 key='login'
//                 initial='hiddenLeft'
//                 animate='visible'
//                 exit='exitLeft'
//                 variants={slideVariants}
//                 transition={{ duration: 0.5 }}
//               >
//                 <Box sx={{ mb: 4, display: 'flex' }}>
//                   <img
//                     src='/images/website-logo/LockTrust-logo.png'
//                     alt='LockTrust Logo'
//                     style={{
//                       height: '60px',
//                       width: 'auto',
//                       objectFit: 'contain'
//                     }}
//                   />
//                 </Box>
//                 <Box sx={{ width: '100%', maxWidth: 400 }}>
//                   <Box sx={{ my: 6 }}>
//                     <Typography sx={{ mb: 1.5, fontWeight: 500, fontSize: '1.625rem', lineHeight: 1.385 }}>
//                       {`Welcome to ${themeConfig.templateName}! 👋🏻`}
//                     </Typography>
//                     <Typography sx={{ color: 'text.secondary' }}>
//                       Please sign-in to your account and start the adventure
//                     </Typography>
//                   </Box>

//                   <LoginForm onVerify={handleGetToken} />

//                   <Box
//                     sx={{
//                       display: 'flex',
//                       alignItems: 'center',
//                       flexWrap: 'wrap',
//                       justifyContent: 'center',
//                       mt: 4
//                     }}
//                   >
//                     <Typography sx={{ color: 'text.secondary', mr: 2 }}>
//                       New on our platform?
//                     </Typography>
//                     <Typography variant='body2'>
//                       <LinkStyled href='/register'>
//                         Create an account
//                       </LinkStyled>
//                     </Typography>
//                   </Box>
//                 </Box>
//               </motion.div>
//             ) : (
//               <motion.div
//                 key='verify'
//                 initial='hiddenRight'
//                 animate='visible'
//                 exit='exitRight'
//                 variants={slideVariants}
//                 transition={{ duration: 0.5 }}
//               >
//                 <VerifyUser
//                   token={userDetails.token}
//                   mobile={userDetails.mobileNo}
//                   email={userDetails.email}
//                   twoFA={userDetails.twoFA}
//                 />
//               </motion.div>
//             )}
//           </AnimatePresence>
//         </Box>
//       </RightWrapper>
//     </Box>
//   )
// }

// LoginPage.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>
// LoginPage.guestGuard = true

// export default LoginPage


// new chnages 
import { useState, ReactNode } from 'react'

// ** Next Import
import Link from 'next/link'
import { useRouter } from 'next/router'

// ** MUI Components
import Typography from '@mui/material/Typography'
import Box, { BoxProps } from '@mui/material/Box'
import useMediaQuery from '@mui/material/useMediaQuery'
import { styled, useTheme } from '@mui/material/styles'

// ** Hooks
import { useSettings } from 'src/@core/hooks/useSettings'

import { AnimatePresence, motion } from 'motion/react'

// ** Configs
import themeConfig from 'src/configs/themeConfig'

// ** Layout Import
import BlankLayout from 'src/@core/layouts/BlankLayout'

// ** Demo Imports
import FooterIllustrationsV2 from 'src/views/pages/auth/FooterIllustrationsV2'
import LoginForm from 'src/views/pages/auth/form/login'
import VerifyUser from 'src/views/pages/auth/form/VerifyUser'

// ** Styled Components
const LoginIllustration = styled('img')(({ theme }) => ({
  zIndex: 2,
  maxHeight: 680,
  marginTop: theme.spacing(12),
  marginBottom: theme.spacing(12),
  [theme.breakpoints.down(1540)]: {
    maxHeight: 550
  },
  [theme.breakpoints.down('lg')]: {
    maxHeight: 500
  }
}))

const TwoStepsIllustration = styled('img')(({ theme }) => ({
  zIndex: 2,
  maxHeight: 650,
  marginTop: theme.spacing(12),
  marginBottom: theme.spacing(12),
  [theme.breakpoints.down(1540)]: {
    maxHeight: 550
  },
  [theme.breakpoints.down('lg')]: {
    maxHeight: 500
  }
}))

const RightWrapper = styled(Box)<BoxProps>(({ theme }) => ({
  width: '100%',
  [theme.breakpoints.up('md')]: {
    maxWidth: 450
  },
  [theme.breakpoints.up('lg')]: {
    maxWidth: 600
  },
  [theme.breakpoints.up('xl')]: {
    maxWidth: 750
  }
}))

const LinkStyled = styled(Link)(({ theme }) => ({
  fontSize: '1rem',
  textDecoration: 'none',
  color: theme.palette.primary.main,
  cursor: 'pointer',
  fontWeight: 500
}))

interface UserDetails {
  token: string
  mobileNo: string
  twoFA: boolean
  passwardCreated: boolean
  message: string
  defaultPassword: boolean
  email: string
  mobileVerified?: boolean
  manualDocVerified?: boolean
  businessType?: string
}

const slideVariants = {
  hiddenLeft: { x: -400, opacity: 0 },
  hiddenRight: { x: 400, opacity: 0 },
  visible: { x: 0, opacity: 1 },
  exitLeft: { x: -400, opacity: 0 },
  exitRight: { x: 400, opacity: 0 }
}

const LoginPage = () => {
  const [isVerify, setIsVerify] = useState<boolean>(false)
  const [userDetails, setUserDetails] = useState<UserDetails>({
    token: '',
    mobileNo: '',
    twoFA: false,
    passwardCreated: false,
    message: '',
    defaultPassword: false,
    email: '',
    mobileVerified: false,
    manualDocVerified: false,
    businessType: ''
  })

  // ** Hooks
  const theme = useTheme()
  const router = useRouter()
  const { settings } = useSettings()
  const hidden = useMediaQuery(theme.breakpoints.down('md'))

  // ** Vars
  const { skin } = settings

  const handleGetToken = (data: UserDetails): void => {
    setUserDetails(data)
    
    // Store token and email in session storage
    sessionStorage.setItem('authToken', data.token)
    sessionStorage.setItem('userEmail', data.email)
    sessionStorage.setItem('userMobile', data.mobileNo)
    
    // Check for mobile verification
    if (data.mobileVerified === false) {
      // Navigate to email verification page with token
      const encodedToken = encodeURIComponent(data.token)
      router.push(`/Emailverify/${encodedToken}/`)
      return
    }
    
    // Check for document verification
    if (data.manualDocVerified === false) {
      // Navigate to document verification page with token and business type
      const encodedToken = encodeURIComponent(data.token)
      const businessType = data.businessType || 'Individual'
      router.push(`/document-verify/?token=${encodedToken}&businessType=${businessType}`)
      return
    }
    
    // If both verifications are done, show verify page (OTP or 2FA)
    // The VerifyUser component will handle different UI and API endpoints based on twoFA flag
    setIsVerify(true)
  }

  const imageSource =
    skin === 'bordered' ? 'auth-v2-login-illustration-bordered' : 'auth-v2-login-illustration'

  return (
    <Box className='content-right' sx={{ backgroundColor: 'background.paper' }}>
      
      {!hidden ? (
        <Box
          sx={{
            flex: 1,
            display: 'flex',
            position: 'relative',
            alignItems: 'center',
            borderRadius: '20px',
            justifyContent: 'center',
            backgroundColor: 'customColors.bodyBg',
            margin: theme => theme.spacing(8, 0, 8, 8)
          }}
        >
          <Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
            <AnimatePresence mode='wait'>
              <motion.div
                key={isVerify ? 'verify' : 'login'}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ delay: 0.3, duration: 0.5, ease: 'easeInOut' }}
                style={{
                  position: 'absolute',
                  width: '100%',
                  height: '100%',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center'
                }}
              >
                {isVerify ? (
                  <TwoStepsIllustration
                    alt='two-steps-illustration'
                    src={`/images/pages/auth-v2-two-steps-illustration-${theme.palette.mode}.png`}
                  />
                ) : (
                  <LoginIllustration
                    alt='login-illustration'
                    src={`/images/pages/${imageSource}-${theme.palette.mode}.png`}
                  />
                )}
              </motion.div>
            </AnimatePresence>
          </Box>
          <FooterIllustrationsV2 />
        </Box>
      ) : null}

      <RightWrapper>
        <Box
          sx={{
            p: [6, 12],
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <AnimatePresence mode='wait'>
            {!isVerify ? (
              <motion.div
                key='login'
                initial='hiddenLeft'
                animate='visible'
                exit='exitLeft'
                variants={slideVariants}
                transition={{ duration: 0.5 }}
              >
                <Box sx={{ mb: 4, display: 'flex' }}>
                  <img
                    src='/images/website-logo/locktrust-logo.png'
                    alt='LockTrust Logo'
                    style={{
                      height: '60px',
                      width: 'auto',
                      objectFit: 'contain'
                    }}
                  />
                </Box>
                <Box sx={{ width: '100%', maxWidth: 400 }}>
                  <Box sx={{ my: 6 }}>
                    <Typography sx={{ mb: 1.5, fontWeight: 500, fontSize: '1.625rem', lineHeight: 1.385 }}>
                      {`Welcome to ${themeConfig.templateName}! 👋🏻`}
                    </Typography>
                    <Typography sx={{ color: 'text.secondary' }}>
                      Please sign-in to your account and start the adventure
                    </Typography>
                  </Box>

                  <LoginForm onVerify={handleGetToken} />

                  <Box
                    sx={{
                      display: 'flex',
                      alignItems: 'center',
                      flexWrap: 'wrap',
                      justifyContent: 'center',
                      mt: 4
                    }}
                  >
                    <Typography sx={{ color: 'text.secondary', mr: 2 }}>
                      New on our platform?
                    </Typography>
                    <Typography variant='body2'>
                      <LinkStyled href='/register'>
                        Create an account
                      </LinkStyled>
                    </Typography>
                  </Box>
                </Box>
              </motion.div>
            ) : (
              <motion.div
                key='verify'
                initial='hiddenRight'
                animate='visible'
                exit='exitRight'
                variants={slideVariants}
                transition={{ duration: 0.5 }}
              >
                <VerifyUser
                  token={userDetails.token}
                  mobile={userDetails.mobileNo}
                  email={userDetails.email}
                  twoFA={userDetails.twoFA}
                />
              </motion.div>
            )}
          </AnimatePresence>
        </Box>
      </RightWrapper>
    </Box>
  )
}

LoginPage.getLayout = (page: ReactNode) => <BlankLayout>{page}</BlankLayout>
LoginPage.guestGuard = true

export default LoginPage