// import React, { useState, useCallback, MouseEvent } from 'react'

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

// // ** MUI Imports
// import Box from '@mui/material/Box'
// import Grid from '@mui/material/Grid'
// import Menu from '@mui/material/Menu'
// import Card from '@mui/material/Card'
// import CardHeader from '@mui/material/CardHeader'
// import CardContent from '@mui/material/CardContent'
// import Divider from '@mui/material/Divider'
// import FormControl from '@mui/material/FormControl'
// import { DataGrid } from '@mui/x-data-grid'
// import IconButton from '@mui/material/IconButton'
// import Typography from '@mui/material/Typography'
// import MenuItem from '@mui/material/MenuItem'
// import { TextField, Alert, Button } from '@mui/material'

// // ** Axios
// import axios from 'src/configs/axios'
// import endpoints from 'src/configs/endpoints'

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

// // ** Custom Table Components Imports
// import TableHeader from 'src/views/apps/user-management/list/TableHeader'
// import AddMerchantDrawer from 'src/views/apps/user-management/list/AddMerchantDrawer'

// // ** Custom Components Imports
// import CustomAvatar from 'src/@core/components/mui/avatar'

// // ** Types Imports
// import { MerchantType } from 'src/types/apps/merchantTypes'
// import { PermissionTableRowType } from 'src/types/pages/permission'

// // ** Utils Import
// import { getInitials } from 'src/@core/utils/get-initials'

// // ** TanStack Query
// import { useQuery } from '@tanstack/react-query'

// // ————————————————————————————————————————
// // Helpers & column defs
// // ————————————————————————————————————————

// interface CellType {
//   row: MerchantType
// }

// const renderClient = ({ firstName }: MerchantType) => {
//   return (
//     <CustomAvatar
//       skin='light'
//       color='primary'
//       sx={{ mr: 2.5, width: 38, height: 38, fontSize: '1rem', fontWeight: 500 }}
//     >
//       {getInitials(firstName || 'John Doe')}
//     </CustomAvatar>
//   )
// }

// const columns = [
//   {
//     flex: 0.2,
//     minWidth: 280,
//     field: 'firstName',
//     headerName: 'Full Name',
//     renderCell: ({ row }: CellType) => {
//       const { firstName, lastName, emailId } = row

//       return (
//         <Box sx={{ display: 'flex', alignItems: 'center' }}>
//           {renderClient(row)}
//           <Box sx={{ display: 'flex', alignItems: 'flex-start', flexDirection: 'column' }}>
//             <Typography
//               noWrap
//               component={Link}
//               href='/apps/user/view/account'
//               sx={{
//                 fontWeight: 500,
//                 textDecoration: 'none',
//                 color: 'text.secondary',
//                 '&:hover': { color: 'primary.main' }
//               }}
//             >
//               {firstName} {lastName}
//             </Typography>
//             <Typography noWrap variant='body2' sx={{ color: 'text.disabled' }}>
//               {emailId}
//             </Typography>
//           </Box>
//         </Box>
//       )
//     }
//   },
//   {
//     flex: 0.15,
//     minWidth: 150,
//     field: 'phone',
//     headerName: 'Phone',
//     renderCell: ({ row }: CellType) => (
//       <Typography noWrap sx={{ color: 'text.secondary' }}>
//         {row.mobileNum}
//       </Typography>
//     )
//   }
// ]

// // ————————————————————————————————————————
// // Data fetchers
// // ————————————————————————————————————————

// const fetchUsers = async (): Promise<MerchantType[]> => {
//   const response = await axios.get(endpoints.userManagement.getAll)

//   // Ensure each row has a unique "id" for DataGrid

//   return response.data.content.result.map((obj: MerchantType, idx: number) => ({ ...obj, id: obj.id ?? idx }))
// }

// const fetchRoles = async (): Promise<PermissionTableRowType[]> => {
//   const response = await axios.get(endpoints.rolePermission.endpoint)
//   const result = response.data.content.result

//   return result.map((item: any, idx: number) => ({
//     id: idx,
//     uid: item.uid,
//     roleName: item.roleName,
//     createdAt: item.createdAt
//   }))
// }

// // ————————————————————————————————————————
// // Component
// // ————————————————————————————————————————

// const UserList = () => {
//   // ** State
//   const [value, setValue] = useState<string>('')
//   const [pageSize, setPageSize] = useState<number>(10)
//   const [addUserOpen, setAddUserOpen] = useState<boolean>(false)
//   const [editRow, setEditRow] = useState<MerchantType | null>(null)

//   //** Row actions menu
//   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
//   const rowOptionsOpen = Boolean(anchorEl)
//   const handleRowOptionsClick = (event: MouseEvent<HTMLElement>) => setAnchorEl(event.currentTarget)
//   const handleRowOptionsClose = () => setAnchorEl(null)

//   const handleFilter = useCallback((val: string) => setValue(val), [])
//   const toggleAddUserDrawer = () => setAddUserOpen(prev => !prev)

//   // —— Users query
//   const {
//     data: users = [],
//     isLoading: isLoadingUsers,
//     isFetching: isFetchingUsers,
//     isError: isUsersError,
//     error: usersError,
//     refetch: refetchUsers
//   } = useQuery({
//     queryKey: ['users'],
//     queryFn: fetchUsers,
//     staleTime: 60 * 1000,
//     refetchOnWindowFocus: true
//   })

//   // —— Roles query
//   const {
//     data: roleList = [],
//     isError: isRolesError,
//     error: rolesError,
//     refetch: refetchRoles
//   } = useQuery({
//     queryKey: ['roles'],
//     queryFn: fetchRoles,
//     staleTime: 5 * 60 * 1000,
//     refetchOnWindowFocus: false
//   })

//   // Column with actions
//   const columnmWithAction = [
//     ...columns,
//     {
//       flex: 0.1,
//       minWidth: 120,
//       field: 'report',
//       headerName: 'Report',
//       renderCell: ({ row }: CellType) => (
//         <Link href={`/apps/user-management/reports/${row.id}`}>
//           <IconButton aria-label='capture screenshot' color='secondary'>
//             <Icon icon='material-symbols:bar-chart-4-bars' />
//           </IconButton>
//         </Link>
//       )
//     },
//     {
//       flex: 0.1,
//       minWidth: 120,
//       field: 'manage',
//       headerName: 'Manage',
//       renderCell: ({ row }: CellType) => (
//         <Link href={`/apps/user-management/manage/${row.id}`}>
//           <IconButton aria-label='capture screenshot' color='secondary'>
//             <Icon icon='material-symbols:manage-accounts-outline' />
//           </IconButton>
//         </Link>
//       )
//     },
//     {
//       flex: 0.1,
//       minWidth: 100,
//       sortable: false,
//       field: 'actions',
//       headerName: 'Actions',
//       renderCell: ({ row }: CellType) => (
//         <>
//           <IconButton size='small' onClick={handleRowOptionsClick}>
//             <Icon icon='tabler:dots-vertical' />
//           </IconButton>
//           <Menu
//             keepMounted
//             anchorEl={anchorEl}
//             open={rowOptionsOpen}
//             onClose={handleRowOptionsClose}
//             anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
//             transformOrigin={{ vertical: 'top', horizontal: 'right' }}
//             PaperProps={{ style: { minWidth: '8rem' } }}
//           >
//             <MenuItem
//               onClick={() => {
//                 toggleAddUserDrawer()
//                 handleRowOptionsClose()
//                 setEditRow(row)
//               }}
//               sx={{ '& svg': { mr: 2 } }}
//             >
//               <Icon icon='tabler:edit' fontSize={20} />
//               Edit
//             </MenuItem>
//             <MenuItem
//               component={Link}
//               sx={{ '& svg': { mr: 2 } }}
//               href='/apps/user/view/account'
//               onClick={handleRowOptionsClose}
//             >
//               <Icon icon='material-symbols:block' fontSize={20} />
//               Block
//             </MenuItem>
//             <MenuItem sx={{ '& svg': { mr: 2 } }}>
//               <Icon icon='tabler:trash' fontSize={20} />
//               Delete
//             </MenuItem>
//           </Menu>
//         </>
//       )
//     }
//   ]

//   return (
//     <Grid container spacing={6.5}>
//       <Grid item xs={12}>
//         <Card>
//           <CardHeader title='Search Filters' />
//           <CardContent>
//             <Grid container spacing={6}>
//               <Grid item sm={4} xs={12}>
//                 <FormControl fullWidth>
//                   <TextField
//                     fullWidth
//                     id='search-name'
//                     label='Full Name & Username'
//                     placeholder='Search'
//                     value={value}
//                     onChange={e => handleFilter(e.target.value)}
//                   />
//                 </FormControl>
//               </Grid>
//               <Grid item sm={4} xs={12}>
//                 <FormControl fullWidth>
//                   <TextField fullWidth id='search-email' label='Email' placeholder='Search' />
//                 </FormControl>
//               </Grid>
//               <Grid item sm={4} xs={12}>
//                 <FormControl fullWidth>
//                   <TextField fullWidth id='search-phone' label='Phone' placeholder='Search' />
//                 </FormControl>
//               </Grid>
//             </Grid>
//           </CardContent>

//           {/* Errors (users / roles) */}
//           {(isUsersError || isRolesError) && (
//             <Box px={3} pb={2}>
//               {isUsersError && (
//                 <Alert severity='error' sx={{ mb: 2 }}>
//                   Failed to load users: {(usersError as Error)?.message || 'Unknown error'}
//                 </Alert>
//               )}
//               {isRolesError && (
//                 <Alert severity='error'>
//                   Failed to load roles: {(rolesError as Error)?.message || 'Unknown error'}
//                 </Alert>
//               )}
//             </Box>
//           )}

//           <Divider sx={{ m: '0 !important' }} />

//           <TableHeader value={value} handleFilter={handleFilter} toggle={toggleAddUserDrawer} />

//           <DataGrid
//             autoHeight
//             rowHeight={62}
//             rows={users}
//             columns={columnmWithAction}
//             pageSize={pageSize}
//             disableSelectionOnClick
//             rowsPerPageOptions={[10, 25, 50]}
//             onPageSizeChange={(newPageSize: number) => setPageSize(newPageSize)}
//             loading={isLoadingUsers || isFetchingUsers}

//             // If your API returns a different primary key, you can set getRowId here instead of mapping id above:
//             // getRowId={(row) => row.uid}
//           />

//           {/* Optional manual refresh */}
//           <Box display='flex' gap={2} p={3}>
//             <Button onClick={() => refetchUsers()} variant='outlined' startIcon={<Icon icon='mdi:refresh' />}>
//               Refresh Users
//             </Button>
//             <Button onClick={() => refetchRoles()} variant='outlined' startIcon={<Icon icon='mdi:refresh' />}>
//               Refresh Roles
//             </Button>
//           </Box>
//         </Card>
//       </Grid>

//       <AddMerchantDrawer
//         open={addUserOpen}
//         toggle={toggleAddUserDrawer}
//         roleList={roleList}
//         editRow={editRow}
//         setEditRow={setEditRow}
//         fetchUsers={refetchUsers}
//       />
//     </Grid>
//   )
// }

// UserList.acl = {
//   action: 'read',
//   subject: 'user-management'
// }

// export default UserList


// sagar 
import React, { useState, useCallback, MouseEvent } from 'react'

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

// ** MUI Imports
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import Menu from '@mui/material/Menu'
import Card from '@mui/material/Card'
import Divider from '@mui/material/Divider'
import { DataGrid } from '@mui/x-data-grid'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import MenuItem from '@mui/material/MenuItem'
import { TextField, Button, InputAdornment } from '@mui/material'

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

// ** Custom Components Imports
import CustomAvatar from 'src/@core/components/mui/avatar'

// ** Custom Table Components Imports
import AddMerchantDrawer from 'src/views/apps/user-management/list/AddMerchantDrawer'

// ** Utils Import
import { getInitials } from 'src/@core/utils/get-initials'

// ————————————————————————————————————————
// Dummy Data
// ————————————————————————————————————————

interface MerchantType {
  id: number | string
  firstName: string
  lastName: string
  emailId: string
  mobileNum: string
  countryCode?: string
  status?: string
  role?: string
}

const DUMMY_USERS: MerchantType[] = [
  { id: 1, firstName: 'John', lastName: 'Doe', emailId: 'john.doe@example.com', mobileNum: '1234567', countryCode: '+1', status: 'Active', role: 'Admin' },
  { id: 2, firstName: 'Jane', lastName: 'Smith', emailId: 'jane.smith@example.com', mobileNum: '2345678', countryCode: '+1', status: 'Active', role: 'User' },
  { id: 3, firstName: 'Michael', lastName: 'Johnson', emailId: 'michael.j@example.com', mobileNum: '3456789', countryCode: '+1', status: 'Inactive', role: 'Manager' },
  { id: 4, firstName: 'Emily', lastName: 'Brown', emailId: 'emily.brown@example.com', mobileNum: '4567890', countryCode: '+1', status: 'Active', role: 'User' },
  { id: 5, firstName: 'David', lastName: 'Wilson', emailId: 'david.wilson@example.com', mobileNum: '5678901', countryCode: '+1', status: 'Active', role: 'Admin' },
  { id: 6, firstName: 'Sarah', lastName: 'Martinez', emailId: 'sarah.m@example.com', mobileNum: '6789012', countryCode: '+1', status: 'Pending', role: 'User' },
  { id: 7, firstName: 'James', lastName: 'Anderson', emailId: 'james.a@example.com', mobileNum: '7890123', countryCode: '+1', status: 'Active', role: 'Manager' },
  { id: 8, firstName: 'Lisa', lastName: 'Taylor', emailId: 'lisa.t@example.com', mobileNum: '8901234', countryCode: '+1', status: 'Inactive', role: 'User' },
  { id: 9, firstName: 'Robert', lastName: 'Thomas', emailId: 'robert.t@example.com', mobileNum: '9012345', countryCode: '+1', status: 'Active', role: 'Admin' },
  { id: 10, firstName: 'Maria', lastName: 'Jackson', emailId: 'maria.j@example.com', mobileNum: '0123456', countryCode: '+1', status: 'Active', role: 'User' }
]

const DUMMY_ROLES = [
  { id: 1, uid: 'role_1', roleName: 'Admin', createdAt: '2024-01-01' },
  { id: 2, uid: 'role_2', roleName: 'Manager', createdAt: '2024-01-02' },
  { id: 3, uid: 'role_3', roleName: 'User', createdAt: '2024-01-03' }
]

const noop = () => undefined

// ————————————————————————————————————————
// Helpers & column defs
// ————————————————————————————————————————

interface CellType {
  row: MerchantType
}

const renderClient = ({ firstName }: MerchantType) => {
  return (
    <CustomAvatar
      skin='light'
      color='primary'
      sx={{ mr: 2.5, width: 38, height: 38, fontSize: '1rem', fontWeight: 500 }}
    >
      {getInitials(firstName || 'John Doe')}
    </CustomAvatar>
  )
}

const columns = [
  {
    flex: 0.2,
    minWidth: 280,
    field: 'firstName',
    headerName: 'Full Name',
    renderCell: ({ row }: CellType) => {
      const { firstName, lastName, emailId } = row

      return (
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          {renderClient(row)}
          <Box sx={{ display: 'flex', alignItems: 'flex-start', flexDirection: 'column' }}>
            <Typography
              noWrap
              component={Link}
              href='/apps/user/view/account'
              sx={{
                fontWeight: 500,
                textDecoration: 'none',
                color: 'text.secondary',
                '&:hover': { color: 'primary.main' }
              }}
            >
              {firstName} {lastName}
            </Typography>
            <Typography noWrap variant='body2' sx={{ color: 'text.disabled' }}>
              {emailId}
            </Typography>
          </Box>
        </Box>
      )
    }
  },
  {
    flex: 0.15,
    minWidth: 150,
    field: 'phone',
    headerName: 'Phone',
    renderCell: ({ row }: CellType) => (
      <Typography noWrap sx={{ color: 'text.secondary' }}>
        {row.mobileNum}
      </Typography>
    )
  },
  {
    flex: 0.15,
    minWidth: 200,
    field: 'email',
    headerName: 'Email',
    renderCell: ({ row }: CellType) => (
      <Typography noWrap sx={{ color: 'text.secondary' }}>
        {row.emailId}
      </Typography>
    )
  }
]

// ————————————————————————————————————————
// Component
// ————————————————————————————————————————

const UserList = () => {
  // ** State
  const [searchQuery, setSearchQuery] = useState<string>('')
  const [pageSize, setPageSize] = useState<number>(10)
  const [addUserOpen, setAddUserOpen] = useState<boolean>(false)
  const [editRow, setEditRow] = useState<any>(null)

  //** Row actions menu
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
  const rowOptionsOpen = Boolean(anchorEl)
  
  const handleRowOptionsClick = (event: MouseEvent<HTMLElement>) => setAnchorEl(event.currentTarget)
  const handleRowOptionsClose = () => setAnchorEl(null)

  const handleSearch = useCallback((val: string) => setSearchQuery(val), [])
  const toggleAddUserDrawer = () => {
    setAddUserOpen(prev => !prev)
    if (!addUserOpen) {
      setEditRow(null)
    }
  }

  // Filter users based on search query
  const filteredUsers = DUMMY_USERS.filter(user => {
    if (!searchQuery) return true
    
    const searchLower = searchQuery.toLowerCase()
    
    return (
      (user.firstName && user.firstName.toLowerCase().includes(searchLower)) ||
      (user.lastName && user.lastName.toLowerCase().includes(searchLower)) ||
      (user.emailId && user.emailId.toLowerCase().includes(searchLower)) ||
      (user.mobileNum && user.mobileNum.toLowerCase().includes(searchLower)) ||
      (`${user.firstName} ${user.lastName}`.toLowerCase().includes(searchLower))
    )
  })

  // Column with actions
  const columnWithAction = [
    ...columns,
    {
      flex: 0.1,
      minWidth: 120,
      field: 'report',
      headerName: 'Report',
      renderCell: ({ row }: CellType) => (
        <Link href={`/apps/user-management/reports/${row.id}`}>
          <IconButton aria-label='capture screenshot' color='secondary'>
            <Icon icon='material-symbols:bar-chart-4-bars' />
          </IconButton>
        </Link>
      )
    },
    {
      flex: 0.1,
      minWidth: 120,
      field: 'manage',
      headerName: 'Manage',
      renderCell: ({ row }: CellType) => (
        <Link href={`/apps/user-management/manage/${row.id}`}>
          <IconButton aria-label='capture screenshot' color='secondary'>
            <Icon icon='material-symbols:manage-accounts-outline' />
          </IconButton>
        </Link>
      )
    },
    {
      flex: 0.1,
      minWidth: 100,
      sortable: false,
      field: 'actions',
      headerName: 'Actions',
      renderCell: ({ row }: CellType) => (
        <>
          <IconButton size='small' onClick={(event) => {
            setEditRow(row)
            handleRowOptionsClick(event)
          }}>
            <Icon icon='tabler:dots-vertical' />
          </IconButton>
          <Menu
            keepMounted
            anchorEl={anchorEl}
            open={rowOptionsOpen}
            onClose={handleRowOptionsClose}
            anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
            transformOrigin={{ vertical: 'top', horizontal: 'right' }}
            PaperProps={{ style: { minWidth: '8rem' } }}
          >
            <MenuItem
              onClick={() => {
                toggleAddUserDrawer()
                handleRowOptionsClose()
              }}
              sx={{ '& svg': { mr: 2 } }}
            >
              <Icon icon='tabler:edit' fontSize={20} />
              Edit
            </MenuItem>
            <MenuItem
              sx={{ '& svg': { mr: 2 } }}
              onClick={handleRowOptionsClose}
            >
              <Icon icon='material-symbols:block' fontSize={20} />
              Block
            </MenuItem>
            <MenuItem sx={{ '& svg': { mr: 2 } }}>
              <Icon icon='tabler:trash' fontSize={20} />
              Delete
            </MenuItem>
          </Menu>
        </>
      )
    }
  ]

  return (
    <Grid container spacing={6.5}>
      <Grid item xs={12}>
        <Card>
          {/* Header with Title, Search and Add Button */}
          <Box sx={{ 
            p: 5, 
            pb: 3, 
            display: 'flex', 
            flexWrap: 'wrap', 
            alignItems: 'center', 
            justifyContent: 'space-between' 
          }}>
            <Typography variant='h5' sx={{ fontWeight: 600 }}>
              User List
            </Typography>
            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
              <TextField
                size='small'
                placeholder='Search by name, email or phone...'
                value={searchQuery}
                onChange={(e) => handleSearch(e.target.value)}
                sx={{ width: 300 }}
                InputProps={{
                  startAdornment: (
                    <InputAdornment position='start'>
                      <Icon icon='tabler:search' fontSize={20} />
                    </InputAdornment>
                  ),
                }}
              />
              <Button
                variant='contained'
                onClick={toggleAddUserDrawer}
                startIcon={<Icon icon='tabler:plus' />}
              >
                Add New User
              </Button>
            </Box>
          </Box>
          
          <Divider sx={{ m: '0 !important' }} />

          <DataGrid
            autoHeight
            rowHeight={62}
            rows={filteredUsers}
            columns={columnWithAction}
            pageSize={pageSize}
            disableSelectionOnClick
            rowsPerPageOptions={[10, 25, 50]}
            onPageSizeChange={(newPageSize: number) => setPageSize(newPageSize)}
            getRowId={(row: any) => row.id || row.uid || Math.random().toString()}
            sx={{
              '& .MuiDataGrid-columnHeaders': {
                backgroundColor: 'action.hover',
              }
            }}
          />
        </Card>
      </Grid>

     <AddMerchantDrawer
  open={addUserOpen}
  toggle={toggleAddUserDrawer}
  roleList={DUMMY_ROLES}
  editRow={editRow}
  setEditRow={setEditRow}
  fetchUsers={noop}
/>
    </Grid>
  )
}

UserList.acl = {
  action: 'read',
  subject: 'user-management'
}

export default UserList