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

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

// // ** MUI Imports
// import Box from '@mui/material/Box'
// import Menu from '@mui/material/Menu'
// import Badge from '@mui/material/Badge'
// import Avatar from '@mui/material/Avatar'
// import Divider from '@mui/material/Divider'
// import { styled } from '@mui/material/styles'
// import Typography from '@mui/material/Typography'
// import MenuItem, { MenuItemProps } from '@mui/material/MenuItem'

// // ** Icon Imports
// import Icon from 'src/@core/components/icon'

// // ** Context
// import { useAuth } from 'src/hooks/useAuth'

// // ** Type Imports
// import { Settings } from 'src/@core/context/settingsContext'

// interface Props {
//   settings: Settings
// }

// // ** Styled Components
// const BadgeContentSpan = styled('span')(({ theme }) => ({
//   width: 8,
//   height: 8,
//   borderRadius: '50%',
//   backgroundColor: theme.palette.success.main,
//   boxShadow: `0 0 0 2px ${theme.palette.background.paper}`
// }))

// const MenuItemStyled = styled(MenuItem)<MenuItemProps>(({ theme }) => ({
//   '&:hover .MuiBox-root, &:hover .MuiBox-root svg': {
//     color: theme.palette.primary.main
//   }
// }))

// const UserDropdown = (props: Props) => {
//   // ** Props
//   const { settings } = props

//   // ** States
//   const [anchorEl, setAnchorEl] = useState<Element | null>(null)

//   // ** Hooks
//   const router = useRouter()
//   const { logout } = useAuth()

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

//   const handleDropdownOpen = (event: SyntheticEvent) => {
//     setAnchorEl(event.currentTarget)
//   }

//   const handleDropdownClose = (url?: string) => {
//     if (url) {
//       router.push(url)
//     }
//     setAnchorEl(null)
//   }

//   const styles = {
//     px: 4,
//     py: 1.75,
//     width: '100%',
//     display: 'flex',
//     alignItems: 'center',
//     color: 'text.primary',
//     textDecoration: 'none',
//     '& svg': {
//       mr: 2.5,
//       color: 'text.primary'
//     }
//   }

//   const handleLogout = () => {
//     logout()
//     handleDropdownClose()
//   }

//   return (
//     <Fragment>
//       <Badge
//         overlap='circular'
//         onClick={handleDropdownOpen}
//         sx={{ ml: 2, cursor: 'pointer' }}
//         badgeContent={<BadgeContentSpan />}
//         anchorOrigin={{
//           vertical: 'bottom',
//           horizontal: 'right'
//         }}
//       >
//         <Avatar
//           alt='rohit Doe'
//           onClick={handleDropdownOpen}
//           sx={{ width: 40, height: 40 }}
//           src='/images/avatars/1.png'
//         />
//       </Badge>
//       <Menu
//         anchorEl={anchorEl}
//         open={Boolean(anchorEl)}
//         onClose={() => handleDropdownClose()}
//         sx={{ '& .MuiMenu-paper': { width: 230, mt: 4.5 } }}
//         anchorOrigin={{ vertical: 'bottom', horizontal: direction === 'ltr' ? 'right' : 'left' }}
//         transformOrigin={{ vertical: 'top', horizontal: direction === 'ltr' ? 'right' : 'left' }}
//       >
//         <Box sx={{ py: 1.75, px: 6 }}>
//           <Box sx={{ display: 'flex', alignItems: 'center' }}>
//             <Badge
//               overlap='circular'
//               badgeContent={<BadgeContentSpan />}
//               anchorOrigin={{
//                 vertical: 'bottom',
//                 horizontal: 'right'
//               }}
//             >
//               <Avatar alt='John Doe' src='/images/avatars/1.png' sx={{ width: '2.5rem', height: '2.5rem' }} />
//             </Badge>
//             <Box sx={{ display: 'flex', ml: 2.5, alignItems: 'flex-start', flexDirection: 'column' }}>
//               <Typography sx={{ fontWeight: 500 }}>Rohit Doe</Typography>
//               <Typography variant='body2'>Admin</Typography>
//             </Box>
//           </Box>
//         </Box>
//         <Divider sx={{ my: theme => `${theme.spacing(2)} !important` }} />
//         <MenuItemStyled sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/user-profile/profile')}>
//           <Box sx={styles}>
//             <Icon icon='tabler:user-check' />
//             My Profile
//           </Box>
//         </MenuItemStyled>
//         {/* <MenuItemStyled sx={{ p: 0 }} onClick={() => handleDropdownClose('/apps/email')}>
//           <Box sx={styles}>
//             <Icon icon='tabler:mail' />
//             Inbox
//           </Box>
//         </MenuItemStyled>
//         <MenuItemStyled sx={{ p: 0 }} onClick={() => handleDropdownClose('/apps/chat')}>
//           <Box sx={styles}>
//             <Icon icon='tabler:message-2' />
//             Chat
//           </Box>
//         </MenuItemStyled>
//         <Divider sx={{ my: theme => `${theme.spacing(2)} !important` }} />
//         <MenuItemStyled sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/account-settings/account')}>
//           <Box sx={styles}>
//             <Icon icon='tabler:settings' />
//             Settings
//           </Box>
//         </MenuItemStyled>
//         <MenuItemStyled sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/pricing')}>
//           <Box sx={styles}>
//             <Icon icon='tabler:currency-dollar' />
//             Pricing
//           </Box>
//         </MenuItemStyled> */}
//         <MenuItemStyled sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/faq')}>
//           <Box sx={styles}>
//             <Icon icon='tabler:help' />
//             FAQ
//           </Box>
//         </MenuItemStyled>
//         <Divider sx={{ my: theme => `${theme.spacing(2)} !important` }} />
//         <MenuItemStyled onClick={handleLogout} sx={{ py: 2, '& svg': { mr: 2, fontSize: '1.375rem' } }}>
//           <Icon icon='tabler:logout' />
//           Logout
//         </MenuItemStyled>
//       </Menu>
//     </Fragment>
//   )
// }

// export default UserDropdown


// getting data ///////////////////////////////////////////////////
// ** React Imports
import { useState, SyntheticEvent, Fragment, useEffect } from 'react'

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

// ** MUI Imports
import Box from '@mui/material/Box'
import Menu from '@mui/material/Menu'
import Badge from '@mui/material/Badge'
import Avatar from '@mui/material/Avatar'
import Divider from '@mui/material/Divider'
import { styled } from '@mui/material/styles'
import Typography from '@mui/material/Typography'
import MenuItem, { MenuItemProps } from '@mui/material/MenuItem'

// ** Icon Imports
import Icon from 'src/@core/components/icon'

// ** Context
import { useAuth } from 'src/hooks/useAuth'

// ** Type Imports
import { Settings } from 'src/@core/context/settingsContext'

interface Props {
  settings: Settings
}

interface UserData {
  id?: string
  fullName?: string
  firstName?: string
  lastName?: string
  role?: string
  email?: string
  mobileNum?: string
  isSubUser?: boolean
  allPermissions?: any[]
}

// ** Styled Components
const BadgeContentSpan = styled('span')(({ theme }) => ({
  width: 8,
  height: 8,
  borderRadius: '50%',
  backgroundColor: theme.palette.success.main,
  boxShadow: `0 0 0 2px ${theme.palette.background.paper}`
}))

const MenuItemStyled = styled(MenuItem)<MenuItemProps>(({ theme }) => ({
  '&:hover .MuiBox-root, &:hover .MuiBox-root svg': {
    color: theme.palette.primary.main
  }
}))

const UserDropdown = (props: Props) => {
  // ** Props
  const { settings } = props

  // ** States
  const [anchorEl, setAnchorEl] = useState<Element | null>(null)
  const [userData, setUserData] = useState<UserData | null>(null)

  // ** Hooks
  const router = useRouter()
  const { logout } = useAuth()

  // ** Vars
  const { direction } = settings

  // Load user data from localStorage/sessionStorage
  useEffect(() => {
    const loadUserData = () => {
      try {
        // Try to get from localStorage first
        let userDataFromStorage = localStorage.getItem('userData')
        
        // If not in localStorage, try sessionStorage
        if (!userDataFromStorage) {
          userDataFromStorage = sessionStorage.getItem('userData')
        }
        
        if (userDataFromStorage) {
          const parsedData = JSON.parse(userDataFromStorage)
          console.log('UserDropdown - Loaded User Data:', parsedData)
          setUserData(parsedData)
        } else {
          console.log('UserDropdown - No user data found in storage')
        }
      } catch (error) {
        console.error('Error loading user data:', error)
      }
    }
    
    loadUserData()
  }, [])

  const handleDropdownOpen = (event: SyntheticEvent) => {
    setAnchorEl(event.currentTarget)
  }

  const handleDropdownClose = (url?: string) => {
    if (url) {
      router.push(url)
    }
    setAnchorEl(null)
  }

  const styles = {
    px: 4,
    py: 1.75,
    width: '100%',
    display: 'flex',
    alignItems: 'center',
    color: 'text.primary',
    textDecoration: 'none',
    '& svg': {
      mr: 2.5,
      color: 'text.primary'
    }
  }

  const handleLogout = () => {
    // Clear all auth data from localStorage and sessionStorage
    localStorage.removeItem('userData')
    localStorage.removeItem('refreshToken')
    localStorage.removeItem('accessToken')
    localStorage.removeItem('isAuthenticated')
    localStorage.removeItem('twoFactorEnabled')
    
    sessionStorage.removeItem('userData')
    sessionStorage.removeItem('accessToken')
    sessionStorage.removeItem('isAuthenticated')
    sessionStorage.removeItem('userEmail')
    sessionStorage.removeItem('Email')
    sessionStorage.removeItem('authToken')
    sessionStorage.removeItem('requiresVerification')
    
    logout()
    handleDropdownClose()
  }

  // Get user's full name
  const getUserFullName = () => {
    if (userData?.fullName) {
      return userData.fullName
    }
    if (userData?.firstName || userData?.lastName) {
      return `${userData?.firstName || ''} ${userData?.lastName || ''}`.trim()
    }
    if (userData?.email) {
      return userData.email.split('@')[0]
    }
    return 'User'
  }

  // Get user's role display name
  // const getUserRoleDisplay = () => {
  //   const role = userData?.role || 'merchant'
  //   if (role === 'merchant') return 'Merchant'
  //   if (role === 'subUser') return 'Sub User'
  //   if (role === 'admin') return 'Administrator'
  //   return role?.charAt(0).toUpperCase() + role?.slice(1) || 'User'
  // }

  // Get user avatar initial
  const getUserInitial = () => {
    const fullName = getUserFullName()
    if (fullName && fullName !== 'User') {
      return fullName.charAt(0).toUpperCase()
    }
    return 'U'
  }

  return (
    <Fragment>
      <Badge
        overlap='circular'
        onClick={handleDropdownOpen}
        sx={{ ml: 2, cursor: 'pointer' }}
        badgeContent={<BadgeContentSpan />}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right'
        }}
      >
        <Avatar
          alt={getUserFullName()}
          onClick={handleDropdownOpen}
          sx={{ width: 40, height: 40, bgcolor: 'primary.main' }}
        >
          {getUserInitial()}
        </Avatar>
      </Badge>
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={() => handleDropdownClose()}
        sx={{ '& .MuiMenu-paper': { width: 230, mt: 4.5 } }}
        anchorOrigin={{ vertical: 'bottom', horizontal: direction === 'ltr' ? 'right' : 'left' }}
        transformOrigin={{ vertical: 'top', horizontal: direction === 'ltr' ? 'right' : 'left' }}
      >
        <Box sx={{ py: 1.75, px: 6 }}>
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <Badge
              overlap='circular'
              badgeContent={<BadgeContentSpan />}
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'right'
              }}
            >
              {/* <Avatar 
                alt={getUserFullName()} 
                src='/images/avatars/1.png' 
                sx={{ width: '2.5rem', height: '2.5rem', bgcolor: 'primary.main' }}
              >
                {getUserInitial()}
              </Avatar> */}
              <Avatar
          alt={getUserFullName()}
          onClick={handleDropdownOpen}
          sx={{ width: 40, height: 40, bgcolor: 'primary.main' }}
        >
          {getUserInitial()}
        </Avatar>
            </Badge>
            <Box sx={{ display: 'flex', ml: 2.5, alignItems: 'flex-start', flexDirection: 'column' }}>
              <Typography sx={{ fontWeight: 500 }}>{getUserFullName()}</Typography>
              <Typography variant='body2' sx={{ textTransform: 'capitalize' }}>
                 User 
                {/* {getUserRoleDisplay()} */}
              </Typography>
            </Box>
          </Box>
        </Box>
        <Divider sx={{ my: theme => `${theme.spacing(2)} !important` }} />
        <MenuItemStyled sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/user-profile/profile')}>
          <Box sx={styles}>
            <Icon icon='tabler:user-check' />
            My Profile
          </Box>
        </MenuItemStyled>
        <MenuItemStyled sx={{ p: 0 }} onClick={() => handleDropdownClose('/pages/faq')}>
          <Box sx={styles}>
            <Icon icon='tabler:help' />
            FAQ
          </Box>
        </MenuItemStyled>
        <Divider sx={{ my: theme => `${theme.spacing(2)} !important` }} />
        <MenuItemStyled onClick={handleLogout} sx={{ py: 2, '& svg': { mr: 2, fontSize: '1.375rem' } }}>
          <Icon icon='tabler:logout' />
          Logout
        </MenuItemStyled>
      </Menu>
    </Fragment>
  )
}

export default UserDropdown