'use client'

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

// MUI Imports
import Grid from '@mui/material/Grid2'

// Type Imports
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'

// Component Imports
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'

// API Imports
import { userManagementService } from '@/libs/api'

const UserListCards = () => {
  const [stats, setStats] = useState({
    total: 0,
    active: 0,
    pending: 0,
    inactive: 0
  })

  useEffect(() => {
    const fetchStats = async () => {
      try {
        const response = await userManagementService.getUsers()
        setStats(response.stats)
      } catch (error) {
        console.error('Error fetching user stats:', error)
      }
    }
    fetchStats()
  }, [])

  const data: UserDataType[] = [
    {
      title: 'کل کاربران',
      stats: stats.total.toString(),
      avatarIcon: 'tabler-users',
      avatarColor: 'primary',
      trend: 'positive',
      trendNumber: '29%',
      subtitle: 'کل کاربر'
    },
    {
      title: 'کاربران فعال',
      stats: stats.active.toString(),
      avatarIcon: 'tabler-user-check',
      avatarColor: 'success',
      trend: 'positive',
      trendNumber: '18%',
      subtitle: 'آمار هفته گذشته'
    },
    {
      title: 'کاربران در انتظار',
      stats: stats.pending.toString(),
      avatarIcon: 'tabler-user-search',
      avatarColor: 'warning',
      trend: 'positive',
      trendNumber: '42%',
      subtitle: 'آمار هفته گذشته'
    },
    {
      title: 'کاربران غیرفعال',
      stats: stats.inactive.toString(),
      avatarIcon: 'tabler-user-x',
      avatarColor: 'error',
      trend: 'negative',
      trendNumber: '14%',
      subtitle: 'آمار هفته گذشته'
    }
  ]

  return (
    <Grid container spacing={6}>
      {data.map((item, i) => (
        <Grid key={i} size={{ xs: 12, sm: 6, md: 3 }}>
          <HorizontalWithSubtitle {...item} />
        </Grid>
      ))}
    </Grid>
  )
}

export default UserListCards
