'use client'

// React Imports
import { useEffect, useState } from 'react'

// MUI Imports
import CircularProgress from '@mui/material/CircularProgress'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'

// Component Imports
import UserList from '@views/apps/user/list'

// API Imports
import { userManagementService } from '@/libs/api'
import type { UsersType } from '@/types/apps/userTypes'

const UserListApp = () => {
  const [users, setUsers] = useState<UsersType[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        setLoading(true)
        const response = await userManagementService.getUsers() as any
        setUsers(response.users)
      } catch (err: any) {
        setError(err.message || 'خطا در دریافت لیست کاربران')
        console.error('Error fetching users:', err)
      } finally {
        setLoading(false)
      }
    }
    fetchUsers()
  }, [])

  if (loading) {
    return (
      <Box className='flex items-center justify-center bs-full'>
        <CircularProgress />
      </Box>
    )
  }

  if (error) {
    return (
      <Box className='flex items-center justify-center bs-full'>
        <Typography color='error'>{error}</Typography>
      </Box>
    )
  }

  return <UserList userData={users} />
}

export default UserListApp
