'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 Chip from '@mui/material/Chip'
import { useTheme } from '@mui/material/styles'

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

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

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

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

const NDVIHealthCard = ({ data }: NDVIHealthCardProps) => {
  const t = useTranslations('farmDashboard')
  const ndviIndex = (data?.ndviIndex as number | undefined) ?? 0
  const healthData =
    (data?.healthData as Array<{ title: string; value: string; color: string; icon: string }>) ?? []
  const theme = useTheme()
  const successColor = theme.palette.success.main
  const disabledText = 'var(--mui-palette-text-disabled)'

  const options: ApexOptions = {
    stroke: { dashArray: 10 },
    labels: [t('labels.ndvi')],
    colors: [successColor],
    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: [successColor]
      }
    },
    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: (val: number) => val.toFixed(2),
            color: 'var(--mui-palette-text-primary)',
            fontFamily: theme.typography.fontFamily,
            fontSize: theme.typography.h2.fontSize as string
          }
        }
      }
    }
  }

  const ndviPercent = (typeof ndviIndex === 'number' ? ndviIndex : parseFloat(String(ndviIndex)) || 0) * 100

  return (
    <Card>
      <CardHeader
        avatar={<i className='tabler-chart-radar text-xl' />}
        title={t('cards.ndviHealthCard')}
        subheader={t('subheaders.vegetationIndex')}
        sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}
      />
      <CardContent className='flex flex-col sm:flex-row items-center justify-between gap-6'>
        <div className='flex flex-col gap-4 is-full sm:is-[unset]'>
          <Typography variant='h2'>{ndviIndex}</Typography>
          <Typography variant='body2'>{t('labels.ndviIndex')}</Typography>
          {healthData.length > 0 && (
            <div className='flex flex-col gap-3'>
              {healthData.map((item, index) => (
                <div key={index} className='flex items-center gap-3'>
                  <CustomAvatar skin='light' variant='rounded' color={item.color as 'success'} size={32}>
                    <i className={classnames(item.icon, 'text-lg')} />
                  </CustomAvatar>
                  <div>
                    <Typography variant='body2'>{item.title}</Typography>
                    <Chip label={item.value} color={item.color as 'success'} size='small' variant='tonal' />
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        <AppReactApexCharts
          type='radialBar'
          height={200}
          width='100%'
          series={[ndviPercent]}
          options={options}
        />
      </CardContent>
    </Card>
  )
}

export default NDVIHealthCard
