'use client'

// Next Imports
import dynamic from 'next/dynamic'
import { useTranslations } from 'next-intl'

// MUI Imports
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import { useTheme } from '@mui/material/styles'

// Third Party Imports
import classnames from 'classnames'
import type { ApexOptions } from 'apexcharts'

// Types Imports
import type { ThemeColor } from '@core/types'

// Components Imports
import OptionMenu from '@core/components/option-menu'
import CustomAvatar from '@core/components/mui/Avatar'

// Styled Component Imports
const AppReactApexCharts = dynamic(() => import('@/libs/styles/AppReactApexCharts'))

type AlertStatType = {
  title: string
  count: string
  avatarIcon: string
  avatarColor?: ThemeColor
}

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

const FarmAlertsTracker = ({ data }: FarmAlertsTrackerProps) => {
  const t = useTranslations('farmDashboard')
  const alertStats = (data?.alertStats as AlertStatType[] | undefined) ?? []
  const totalAlerts = (data?.totalAlerts as number | undefined) ?? 0
  const radialBarValue = (data?.radialBarValue as number | undefined) ?? 30
  const theme = useTheme()
  const disabledText = 'var(--mui-palette-text-disabled)'

  const options: ApexOptions = {
    stroke: { dashArray: 10 },
    labels: [t('labels.activeAlerts')],
    colors: ['var(--mui-palette-warning-main)'],
    states: {
      hover: { filter: { type: 'none' } },
      active: { filter: { type: 'none' } }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        opacityTo: 0.5,
        opacityFrom: 1,
        shadeIntensity: 0.5,
        stops: [30, 70, 100],
        inverseColors: false,
        gradientToColors: ['var(--mui-palette-warning-main)']
      }
    },
    plotOptions: {
      radialBar: {
        endAngle: 130,
        startAngle: -140,
        hollow: { size: '60%' },
        track: { background: 'transparent' },
        dataLabels: {
          name: {
            offsetY: -24,
            color: disabledText,
            fontFamily: theme.typography.fontFamily,
            fontSize: theme.typography.body2.fontSize as string
          },
          value: {
            offsetY: 8,
            fontWeight: 500,
            formatter: () => String(totalAlerts),
            color: 'var(--mui-palette-text-primary)',
            fontFamily: theme.typography.fontFamily,
            fontSize: theme.typography.h2.fontSize as string
          }
        }
      }
    },
    grid: {
      padding: { top: -18, left: 0, right: 0, bottom: 14 }
    }
  }

  return (
    <Card>
      <CardHeader
        title={t('cards.farmAlertsTracker')}
        subheader={t('subheaders.requiresAttention')}
        action={<OptionMenu options={[t('optionMenu.viewAll'), t('optionMenu.dismiss'), t('optionMenu.settings')]} />}
      />
      <CardContent className='flex flex-col sm:flex-row items-center justify-between gap-7'>
        <div className='flex flex-col gap-6 is-full sm:is-[unset]'>
          <div className='flex flex-col'>
            <Typography variant='h2'>{totalAlerts}</Typography>
            <Typography>{t('labels.totalAlerts')}</Typography>
          </div>
          <div className='flex flex-col gap-4 is-full'>
            {alertStats.map((item, index) => (
              <div key={index} className='flex items-center gap-4'>
                <CustomAvatar skin='light' variant='rounded' color={item.avatarColor} size={34}>
                  <i className={classnames(item.avatarIcon, 'text-[22px]')} />
                </CustomAvatar>
                <div className='flex flex-col'>
                  <Typography className='font-medium' color='text.primary'>
                    {item.title}
                  </Typography>
                  <Typography variant='body2'>{item.count}</Typography>
                </div>
              </div>
            ))}
          </div>
        </div>
        <AppReactApexCharts
          type='radialBar'
          height={350}
          width='100%'
          series={[radialBarValue]}
          options={options}
        />
      </CardContent>
    </Card>
  )
}

export default FarmAlertsTracker