'use client'

// React Imports
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'

// Component Imports
import OptionMenu from '@core/components/option-menu'

type AnomalyItem = {
  sensor: string
  value: string
  expected: string
  deviation: string
  severity: 'warning' | 'error'
}

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

const AnomalyDetectionCard = ({ data }: AnomalyDetectionCardProps) => {
  const t = useTranslations('farmDashboard')
  const anomalies = (data?.anomalies as AnomalyItem[] | undefined) ?? []

  return (
    <Card>
      <CardHeader
        avatar={<i className='tabler-alert-triangle text-xl' />}
        title={t('cards.anomalyDetectionCard')}
        subheader={t('subheaders.outOfRangeValues')}
        action={<OptionMenu options={[t('optionMenu.viewAll'), t('optionMenu.configure'), t('optionMenu.export')]} />}
        sx={{ '& .MuiCardHeader-avatar': { mr: 3 } }}
      />
      <CardContent className='flex flex-col gap-3'>
        {anomalies.length === 0 ? (
          <Typography variant='body2' color='text.secondary'>
            {t('empty.noAnomalies')}
          </Typography>
        ) : (
          anomalies.map((item, index) => (
            <div key={index} className='flex flex-col gap-1 p-3 rounded bg-actionHover'>
              <div className='flex items-center justify-between'>
                <Typography variant='body2' className='font-medium'>
                  {item.sensor}
                </Typography>
                <Chip
                  label={item.severity}
                  color={item.severity}
                  size='small'
                  variant='tonal'
                />
              </div>
              <Typography variant='caption' color='text.secondary'>
                {t('labels.value')}: {item.value} ({t('labels.expected')}: {item.expected}) · {t('labels.deviation')}: {item.deviation}
              </Typography>
            </div>
          ))
        )}
      </CardContent>
    </Card>
  )
}

export default AnomalyDetectionCard
