'use client'

import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import CardHeader from '@mui/material/CardHeader'
import Chip from '@mui/material/Chip'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import { alpha, useTheme } from '@mui/material/styles'

import CustomAvatar from '@core/components/mui/Avatar'

interface FarmWalletSummaryCardProps {
  data?: Record<string, unknown>
}

const FarmWalletSummaryCard = ({ data }: FarmWalletSummaryCardProps) => {
  const theme = useTheme()
  const balance = String(data?.balance ?? '۲۴۸,۵۰۰,۰۰۰ تومان')
  const pendingSettlement = String(data?.pendingSettlement ?? '۱۲,۴۰۰,۰۰۰ تومان')
  const monthlyInflow = String(data?.monthlyInflow ?? '۹۴,۸۰۰,۰۰۰ تومان')
  const monthlyOutflow = String(data?.monthlyOutflow ?? '۵۱,۲۰۰,۰۰۰ تومان')
  const healthLabel = String(data?.healthLabel ?? 'جریان نقدی پایدار')

  return (
    <Card sx={{ height: '100%' }}>
      <CardHeader
        title='خلاصه کیف پول'
        subheader='وضعیت نقدینگی و تسویه های مزرعه'
        avatar={
          <CustomAvatar skin='light' color='info' size={42}>
            <i className='tabler-wallet text-xl' />
          </CustomAvatar>
        }
        action={<Chip size='small' color='success' variant='tonal' label={healthLabel} />}
      />
      <CardContent className='flex flex-col gap-4'>
        <Box sx={{ p: 3, borderRadius: 4, backgroundColor: alpha(theme.palette.info.main, 0.06) }}>
          <Typography variant='body2' color='text.secondary'>
            موجودی کل
          </Typography>
          <Typography variant='h5'>{balance}</Typography>
        </Box>

        <div className='grid grid-cols-2 gap-3'>
          <Box sx={{ p: 3, borderRadius: 4, backgroundColor: alpha(theme.palette.warning.main, 0.06) }}>
            <Typography variant='body2' color='text.secondary'>
              در انتظار تسویه
            </Typography>
            <Typography className='font-semibold'>{pendingSettlement}</Typography>
          </Box>
          <Box sx={{ p: 3, borderRadius: 4, backgroundColor: alpha(theme.palette.success.main, 0.06) }}>
            <Typography variant='body2' color='text.secondary'>
              ورودی ماه
            </Typography>
            <Typography className='font-semibold'>{monthlyInflow}</Typography>
          </Box>
        </div>

        <Box sx={{ p: 3, borderRadius: 4, border: `1px solid ${alpha(theme.palette.divider, 0.8)}` }}>
          <Typography variant='body2' color='text.secondary'>
            خروجی ۳۰ روز اخیر
          </Typography>
          <Typography className='font-semibold' color='error.main'>
            {monthlyOutflow}
          </Typography>
        </Box>
      </CardContent>
    </Card>
  )
}

export default FarmWalletSummaryCard