import { useState, useEffect, useCallback } from 'react'

// ** MUI Imports
import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import Grid from '@mui/material/Grid'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import { DataGrid } from '@mui/x-data-grid'
import { Backdrop } from '@mui/material'

// ** Coloumn & Skeleton
import { skeletonRows, skeletonColumns, defaultColumns, CellType } from 'src/views/pages/permission/column'

// ** Custome Components
import Icon from 'src/@core/components/icon'

// ** Components
import PageHeader from 'src/@core/components/page-header'
import TableHeader from 'src/views/pages/permission/TableHeader'

// ** Types Import
import { PermissionFormValueType, ActionType, PermissionTableRowType } from 'src/types/pages/permission'

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

// ** Third Party Imports
import { BounceLoader } from 'react-spinners'

// ** Dialog Imports
import PermisionRoleTrashDialog from 'src/views/pages/permission/PermisionRoleTrashDialog'

// ** Utils
import { convertListToFormat, formEditPermisions } from 'src/views/pages/permission/utils'

type Mode = 'add' | 'edit' | 'cancle'

interface EditFormValueType {
  roleName: string
  permissions: PermissionFormValueType<ActionType>[]
  uid: string
}

const Permission = () => {
  // ** States
  const [value, setValue] = useState<string>('')
  const [pageSize, setPageSize] = useState<number>(10)
  const [permissionList, setPermissionList] = useState<PermissionFormValueType<ActionType>[]>([])
  const [rows, setRows] = useState<PermissionTableRowType[]>([])
  const [open, setOpen] = useState<boolean>(false)
  const [loading, setLoading] = useState<boolean>(true)
  const [editLoader, setEditLoader] = useState<boolean>(false)
  const [selectedRow, setSelectedRow] = useState<PermissionTableRowType | null>(null)
  const [editRowData, setEditRowData] = useState<EditFormValueType>({
    roleName: '',
    permissions: [],
    uid: ''
  })

  // ** Handle Dialog Trash
  const handleTrashToggle = (row: PermissionTableRowType | null, resetTable?: boolean | undefined) => {
    const isOpen = open
    if (!isOpen) {
      setOpen(true)
      if (typeof row === 'object') {
        setSelectedRow(row)
      }
    } else {
      setSelectedRow(null)
      setOpen(false)
    }
    if (resetTable) {
      fetchData()
    }
  }

  const handleEditToggle = (submitType: Mode) => {
    if (submitType === 'edit') {
      setEditRowData({ roleName: '', permissions: [], uid: '' })
      fetchData()
    } else if (submitType == 'add') {
      fetchData()
    } else if (submitType == 'cancle' && Object.values(editRowData).every(v => v.length)) {
      setEditRowData({ roleName: '', permissions: [], uid: '' })
    }
  }

  const handleFilter = useCallback((val: string) => {
    setValue(val)
  }, [])

  // ** Edit Permission
  const handleEdit = async (uid: string) => {
    try {
      setEditLoader(true)
      const response = await axios.get(`${endpoints.rolePermission.endpoint}/${uid}`)
      setEditRowData({
        roleName: response.data.content.roleName,
        permissions: formEditPermisions([...permissionList], response.data.content),
        uid: response.data.content.uid
      })
    } catch (error) {
    } finally {
      setEditLoader(false)
    }
  }

  // ** Columns
  const columns = [
    ...defaultColumns,
    {
      flex: 0.15,
      minWidth: 120,
      sortable: false,
      field: 'actions',
      headerName: 'Actions',
      renderCell: ({ row }: CellType) => (
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <IconButton onClick={() => handleEdit(row.uid)}>
            <Icon icon='tabler:edit' />
          </IconButton>
          <IconButton onClick={() => handleTrashToggle(row)}>
            <Icon icon='tabler:trash' />
          </IconButton>
        </Box>
      )
    }
  ]

  // ** Fetch Permission
  useEffect(() => {
    ;(async () => {
      try {
        const response = await axios.get(endpoints.permission.getAll)
        const { data } = response
        setPermissionList(convertListToFormat(data))
      } catch (error) {
        console.log(error)
      }
    })()
  }, [])

  async function fetchData() {
    setLoading(true)
    try {
      const response = await axios.get(endpoints.rolePermission.endpoint)
      const result = response.data.content.result

      const transformed: PermissionTableRowType[] = result.map((item: any, id: number) => ({
        id,
        uid: item.uid,
        roleName: item.roleName,
        createdAt: item.createdAt
      }))

      setRows(transformed)
    } catch (error) {
      console.log('Error fetching permission data:', error)
    } finally {
      setLoading(false)
    }
  }

  // ** Fetch Table List
  useEffect(() => {
    fetchData()

    return () => {
      setRows([])
    }
  }, [])

  return (
    <>
      {/* For Edit Backdrop */}
      <Backdrop sx={theme => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })} open={editLoader}>
        <BounceLoader color='#fff' />
      </Backdrop>
      <Grid container spacing={6}>
        <Grid item xs={12}>
          <PageHeader
            title={
              <Typography variant='h5' sx={{ mb: 6 }}>
                Roles List
              </Typography>
            }
            subtitle={
              <Typography sx={{ color: 'text.secondary' }}>
                Each category (Basic, Professional, and Business) includes the four predefined roles shown below.
              </Typography>
            }
          />
        </Grid>
        <Grid item xs={12}>
          <Card>
            <TableHeader
              value={value}
              handleFilter={handleFilter}
              permissionList={permissionList}
              editRowFormDetails={{ ...editRowData }}
              handleEditToggle={handleEditToggle}
            />
            {loading ? (
              <DataGrid
                autoHeight
                rows={skeletonRows}
                columns={skeletonColumns}
                pageSize={pageSize}
                disableSelectionOnClick
                rowsPerPageOptions={[10, 25, 50]}
                getRowId={row => row.uid}
              />
            ) : (
              <DataGrid
                autoHeight
                rows={rows}
                columns={columns}
                pageSize={pageSize}
                disableSelectionOnClick
                rowsPerPageOptions={[10, 25, 50]}
                onPageSizeChange={newPageSize => setPageSize(newPageSize)}
                getRowId={row => row.uid}
              />
            )}
          </Card>
        </Grid>
      </Grid>
      <PermisionRoleTrashDialog open={open} handleTrashToggle={handleTrashToggle} selectedRow={selectedRow} />
    </>
  )
}

Permission.acl = {
  action: 'read',
  subject: 'permission'
}

export default Permission


// sagar 
// import { useState, useEffect, useCallback } from 'react'

// // ** MUI Imports
// import Box from '@mui/material/Box'
// import Card from '@mui/material/Card'
// import Grid from '@mui/material/Grid'
// import IconButton from '@mui/material/IconButton'
// import Typography from '@mui/material/Typography'
// import { DataGrid } from '@mui/x-data-grid'
// import { Backdrop } from '@mui/material'

// // ** Coloumn & Skeleton
// import { skeletonRows, skeletonColumns, defaultColumns, CellType } from 'src/views/pages/permission/column'

// // ** Custome Components
// import Icon from 'src/@core/components/icon'

// // ** Components
// import PageHeader from 'src/@core/components/page-header'
// import TableHeader from 'src/views/pages/permission/TableHeader'

// // ** Types Import
// import { PermissionFormValueType, ActionType, PermissionTableRowType } from 'src/types/pages/permission'

// // ** Third Party Imports
// import { BounceLoader } from 'react-spinners'

// // ** Dialog Imports
// import PermisionRoleTrashDialog from 'src/views/pages/permission/PermisionRoleTrashDialog'

// // ** Utils
// import { convertListToFormat, formEditPermisions } from 'src/views/pages/permission/utils'

// type Mode = 'add' | 'edit' | 'cancle'

// interface EditFormValueType {
//   roleName: string
//   permissions: PermissionFormValueType<ActionType>[]
//   uid: string
// }

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

// const DUMMY_PERMISSION_LIST: PermissionFormValueType<ActionType>[] = [
//   {
//     moduleName: 'User Management',
//     actions: [
//       { action: 'create', checked: true },
//       { action: 'read', checked: true },
//       { action: 'update', checked: true },
//       { action: 'delete', checked: false }
//     ]
//   },
//   {
//     moduleName: 'Role Management',
//     actions: [
//       { action: 'create', checked: true },
//       { action: 'read', checked: true },
//       { action: 'update', checked: true },
//       { action: 'delete', checked: true }
//     ]
//   },
//   {
//     moduleName: 'Permission Management',
//     actions: [
//       { action: 'create', checked: false },
//       { action: 'read', checked: true },
//       { action: 'update', checked: false },
//       { action: 'delete', checked: false }
//     ]
//   },
//   {
//     moduleName: 'Transaction Management',
//     actions: [
//       { action: 'create', checked: true },
//       { action: 'read', checked: true },
//       { action: 'update', checked: false },
//       { action: 'delete', checked: false }
//     ]
//   }
// ]

// const DUMMY_ROLES: PermissionTableRowType[] = [
//   { id: 1, uid: 'role_1', roleName: 'Admin', createdAt: '2024-01-01T00:00:00Z' },
//   { id: 2, uid: 'role_2', roleName: 'Manager', createdAt: '2024-01-02T00:00:00Z' },
//   { id: 3, uid: 'role_3', roleName: 'User', createdAt: '2024-01-03T00:00:00Z' },
//   { id: 4, uid: 'role_4', roleName: 'Super Admin', createdAt: '2024-01-04T00:00:00Z' },
//   { id: 5, uid: 'role_5', roleName: 'Support', createdAt: '2024-01-05T00:00:00Z' }
// ]

// const DUMMY_EDIT_DATA: { [key: string]: EditFormValueType } = {
//   role_1: {
//     roleName: 'Admin',
//     permissions: DUMMY_PERMISSION_LIST,
//     uid: 'role_1'
//   },
//   role_2: {
//     roleName: 'Manager',
//     permissions: DUMMY_PERMISSION_LIST.map(module => ({
//       ...module,
//       actions: module.actions.map(action => ({
//         ...action,
//         checked: action.action === 'read' ? true : false
//       }))
//     })),
//     uid: 'role_2'
//   },
//   role_3: {
//     roleName: 'User',
//     permissions: DUMMY_PERMISSION_LIST.map(module => ({
//       ...module,
//       actions: module.actions.map(action => ({
//         ...action,
//         checked: action.action === 'read' ? true : false
//       }))
//     })),
//     uid: 'role_3'
//   },
//   role_4: {
//     roleName: 'Super Admin',
//     permissions: DUMMY_PERMISSION_LIST,
//     uid: 'role_4'
//   },
//   role_5: {
//     roleName: 'Support',
//     permissions: DUMMY_PERMISSION_LIST.map(module => ({
//       ...module,
//       actions: module.actions.map(action => ({
//         ...action,
//         checked: action.action === 'read' ? true : false
//       }))
//     })),
//     uid: 'role_5'
//   }
// }

// const Permission = () => {
//   // ** States
//   const [value, setValue] = useState<string>('')
//   const [pageSize, setPageSize] = useState<number>(10)
//   const [permissionList, setPermissionList] = useState<PermissionFormValueType<ActionType>[]>(DUMMY_PERMISSION_LIST)
//   const [rows, setRows] = useState<PermissionTableRowType[]>(DUMMY_ROLES)
//   const [open, setOpen] = useState<boolean>(false)
//   const [loading, setLoading] = useState<boolean>(false)
//   const [editLoader, setEditLoader] = useState<boolean>(false)
//   const [selectedRow, setSelectedRow] = useState<PermissionTableRowType | null>(null)
//   const [editRowData, setEditRowData] = useState<EditFormValueType>({
//     roleName: '',
//     permissions: [],
//     uid: ''
//   })

//   // ** Handle Dialog Trash (Delete)
//   const handleTrashToggle = (row: PermissionTableRowType | null, resetTable?: boolean) => {
//     const isOpen = open
//     if (!isOpen) {
//       setOpen(true)
//       if (typeof row === 'object') {
//         setSelectedRow(row)
//       }
//     } else {
//       setSelectedRow(null)
//       setOpen(false)
//     }
//     if (resetTable) {
//       fetchData()
//     }
//   }

//   // ** Handle Edit Toggle (Add/Edit/Cancel)
//   const handleEditToggle = (submitType: Mode) => {
//     if (submitType === 'edit') {
//       // After editing, refresh the data
//       setEditRowData({ roleName: '', permissions: [], uid: '' })
//       fetchData()
//     } else if (submitType === 'add') {
//       // After adding new role, refresh the data
//       fetchData()
//     } else if (submitType === 'cancle') {
//       setEditRowData({ roleName: '', permissions: [], uid: '' })
//     }
//   }

//   const handleFilter = useCallback((val: string) => {
//     setValue(val)
//   }, [])

//   // ** Edit Permission
//   const handleEdit = async (uid: string) => {
//     try {
//       setEditLoader(true)
//       // Simulate API delay
//       setTimeout(() => {
//         const dummyData = DUMMY_EDIT_DATA[uid]
//         if (dummyData) {
//           setEditRowData({
//             roleName: dummyData.roleName,
//             permissions: dummyData.permissions,
//             uid: dummyData.uid
//           })
//         } else {
//           setEditRowData({
//             roleName: '',
//             permissions: [...permissionList],
//             uid: uid
//           })
//         }
//         setEditLoader(false)
//       }, 500)
//     } catch (error) {
//       console.error('Error in handleEdit:', error)
//       setEditLoader(false)
//     }
//   }

//   // ** Delete Role
//   const handleDeleteRole = (uid: string) => {
//     // Remove the role from the list
//     const updatedRows = rows.filter(row => row.uid !== uid)
//     setRows(updatedRows)
//     // Show success message (optional)
//     console.log(`Role with uid ${uid} deleted successfully`)
//   }

//   // ** Add New Role
//   const handleAddRole = (newRole: { roleName: string; permissions: PermissionFormValueType<ActionType>[] }) => {
//     const newUid = `role_${Date.now()}`
//     const newRoleData: PermissionTableRowType = {
//       id: rows.length + 1,
//       uid: newUid,
//       roleName: newRole.roleName,
//       createdAt: new Date().toISOString()
//     }
    
//     // Add to DUMMY_EDIT_DATA for edit functionality
//     DUMMY_EDIT_DATA[newUid] = {
//       roleName: newRole.roleName,
//       permissions: newRole.permissions,
//       uid: newUid
//     }
    
//     setRows([...rows, newRoleData])
//     console.log(`New role ${newRole.roleName} added successfully`)
//   }

//   // ** Update Role
//   const handleUpdateRole = (uid: string, updatedData: { roleName: string; permissions: PermissionFormValueType<ActionType>[] }) => {
//     // Update the role in rows
//     const updatedRows = rows.map(row => 
//       row.uid === uid ? { ...row, roleName: updatedData.roleName } : row
//     )
//     setRows(updatedRows)
    
//     // Update in DUMMY_EDIT_DATA
//     if (DUMMY_EDIT_DATA[uid]) {
//       DUMMY_EDIT_DATA[uid] = {
//         ...DUMMY_EDIT_DATA[uid],
//         roleName: updatedData.roleName,
//         permissions: updatedData.permissions
//       }
//     }
    
//     console.log(`Role with uid ${uid} updated successfully`)
//   }

//   // ** Columns with working actions
//   const columns = [
//     ...defaultColumns,
//     {
//       flex: 0.15,
//       minWidth: 120,
//       sortable: false,
//       field: 'actions',
//       headerName: 'Actions',
//       renderCell: ({ row }: CellType) => (
//         <Box sx={{ display: 'flex', alignItems: 'center' }}>
//           <IconButton 
//             onClick={() => handleEdit(row.uid)}
//             sx={{ color: 'primary.main' }}
//           >
//             <Icon icon='tabler:edit' />
//           </IconButton>
//           <IconButton 
//             onClick={() => handleTrashToggle(row)}
//             sx={{ color: 'error.main' }}
//           >
//             <Icon icon='tabler:trash' />
//           </IconButton>
//         </Box>
//       )
//     }
//   ]

//   // ** Fetch Permission (using dummy data)
//   useEffect(() => {
//     setPermissionList(DUMMY_PERMISSION_LIST)
//   }, [])

//   const fetchData = async () => {
//     setLoading(true)
//     try {
//       // Simulate API delay
//       setTimeout(() => {
//         setRows(DUMMY_ROLES)
//         setLoading(false)
//       }, 500)
//     } catch (error) {
//       console.log('Error fetching permission data:', error)
//       setLoading(false)
//     }
//   }

//   // ** Fetch Table List
//   useEffect(() => {
//     fetchData()

//     return () => {
//       setRows([])
//     }
//   }, [])

//   // Filter rows based on search value
//   const filteredRows = rows.filter(row => 
//     row.roleName.toLowerCase().includes(value.toLowerCase())
//   )

//   return (
//     <>
//       {/* For Edit Backdrop */}
//       <Backdrop sx={theme => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })} open={editLoader}>
//         <BounceLoader color='#fff' />
//       </Backdrop>
//       <Grid container spacing={6}>
//         <Grid item xs={12}>
//           <PageHeader
//             title={
//               <Typography variant='h5' sx={{ mb: 6 }}>
//                 Roles List
//               </Typography>
//             }
//             subtitle={
//               <Typography sx={{ color: 'text.secondary' }}>
//                 Each category (Basic, Professional, and Business) includes the four predefined roles shown below.
//               </Typography>
//             }
//           />
//         </Grid>
//         <Grid item xs={12}>
//           <Card>
//             <TableHeader
//               value={value}
//               handleFilter={handleFilter}
//               permissionList={permissionList}
//               editRowFormDetails={editRowData}
//               handleEditToggle={handleEditToggle}
//             />
//             {loading ? (
//               <DataGrid
//                 autoHeight
//                 rows={skeletonRows}
//                 columns={skeletonColumns}
//                 pageSize={pageSize}
//                 disableSelectionOnClick
//                 rowsPerPageOptions={[10, 25, 50]}
//                 getRowId={(row: any) => row.uid}
//               />
//             ) : (
//               <DataGrid
//                 autoHeight
//                 rows={filteredRows}
//                 columns={columns}
//                 pageSize={pageSize}
//                 disableSelectionOnClick
//                 rowsPerPageOptions={[10, 25, 50]}
//                 onPageSizeChange={(newPageSize: number) => setPageSize(newPageSize)}
//                 getRowId={(row: any) => row.uid}
//                 sx={{
//                   '& .MuiDataGrid-cell': {
//                     cursor: 'pointer'
//                   }
//                 }}
//               />
//             )}
//           </Card>
//         </Grid>
//       </Grid>
//       <PermisionRoleTrashDialog 
//         open={open} 
//         handleTrashToggle={handleTrashToggle} 
//         selectedRow={selectedRow}
//       />
//     </>
//   )
// }

// export default Permission

// Permission.acl = {
//   action: 'read',
//   subject: 'permission'
// }