'use client'

import { useTranslations } from 'next-intl'
import useMediaQuery from '@mui/material/useMediaQuery'
import { useTheme } from '@mui/material/styles'
import Drawer from '@mui/material/Drawer'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'

// Component Imports
import PerfectScrollbar from 'react-perfect-scrollbar'
import Select from '@mui/material/Select'
import MenuItem from '@mui/material/MenuItem'
import FormControl from '@mui/material/FormControl'
import InputLabel from '@mui/material/InputLabel'
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  ResponsiveContainer
} from 'recharts'
import type { ZoneFeatureProperties } from './cropZoningTypes'
import { CROP_COLORS } from './cropZoningTypes'

type ZoneDetailPanelProps = {
  open: boolean
  onClose: () => void
  zone: ZoneFeatureProperties | null
  onCropChange?: (zoneId: string, crop: string) => void
}

const CROP_LABELS: Record<string, string> = {
  wheat: 'گندم',
  canola: 'کلزا',
  saffron: 'زعفران'
}

export default function ZoneDetailPanel({
  open,
  onClose,
  zone,
  onCropChange
}: ZoneDetailPanelProps) {
  const t = useTranslations('cropZoning')
  const tCommon = useTranslations('common')
  const theme = useTheme()
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))

  if (!zone) return null

  const chartData = zone.criteria.map(c => ({ subject: c.name, value: c.value, fullMark: 100 }))

  return (
    <Drawer
      open={open}
      onClose={onClose}
      anchor='end'
      variant='temporary'
      ModalProps={{
        disablePortal: true,
        disableAutoFocus: true,
        keepMounted: true
      }}
      PaperProps={{
        className: isMobile ? 'is-full max-is-[100vw]' : 'is-[360px] max-is-[100vw] rounded-s-xl shadow-xl border-s border-gray-200/50 dark:border-gray-700/50',
        sx: { bgcolor: 'background.paper' }
      }}
      sx={{ zIndex: 1300 }}
    >
      <Box className='flex flex-col is-full' sx={{ height: '100%' }}>
        <Box className='p-6 pb-2'>
          <Typography variant='h5'>
            {t('panel.title')}
          </Typography>
        </Box>
        <PerfectScrollbar options={{ wheelPropagation: false }} className='flex-1 px-6 pb-6'>
        <Box className='flex flex-col gap-4'>
          <Box className='rounded-xl border border-gray-200/60 dark:border-gray-700/60 p-4 bg-white/50 dark:bg-gray-800/30'>
            <Typography variant='subtitle2' color='text.secondary' className='mbe-2'>
              محصول پیشنهادی
            </Typography>
            <Typography variant='h6' sx={{ color: CROP_COLORS[zone.crop as keyof typeof CROP_COLORS] }}>
              {CROP_LABELS[zone.crop] ?? zone.crop}
            </Typography>
            <Typography variant='body2' className='mt-2'>
              درصد تطابق: {zone.matchPercent}%
            </Typography>
            <Typography variant='body2'>نیاز آب: {zone.waterNeed}</Typography>
            <Typography variant='body2'>سود تخمینی: {zone.estimatedProfit}</Typography>
          </Box>

          <Box>
            <Typography variant='subtitle2' color='text.secondary' className='mbe-2'>
              {t('panel.reason')}
            </Typography>
            <Typography variant='body2'>{zone.reason}</Typography>
          </Box>

          <Box className='rounded-xl border border-gray-200/60 dark:border-gray-700/60 p-4 bg-white/50 dark:bg-gray-800/30'>
            <Typography variant='subtitle2' color='text.secondary' className='mbe-3'>
              {t('panel.criteriaChart')}
            </Typography>
            <div className='bs-[220px]'>
              <ResponsiveContainer width='100%' height='100%'>
                <RadarChart data={chartData}>
                  <PolarGrid />
                  <PolarAngleAxis dataKey='subject' />
                  <PolarRadiusAxis angle={90} domain={[0, 100]} />
                  <Radar
                    name='امتیاز'
                    dataKey='value'
                    stroke='var(--mui-palette-primary-main)'
                    fill='var(--mui-palette-primary-main)'
                    fillOpacity={0.4}
                    strokeWidth={2}
                  />
                </RadarChart>
              </ResponsiveContainer>
            </div>
          </Box>

          <FormControl fullWidth size='small'>
            <InputLabel>{t('panel.changeCrop')}</InputLabel>
            <Select
              value={zone.crop}
              label={t('panel.changeCrop')}
              onChange={e => onCropChange?.(zone.zoneId, e.target.value)}
            >
              <MenuItem value='wheat'>{CROP_LABELS.wheat}</MenuItem>
              <MenuItem value='canola'>{CROP_LABELS.canola}</MenuItem>
              <MenuItem value='saffron'>{CROP_LABELS.saffron}</MenuItem>
            </Select>
          </FormControl>

          <Button variant='outlined' onClick={onClose} fullWidth>
            {tCommon('close')}
          </Button>
        </Box>
        </PerfectScrollbar>
      </Box>
    </Drawer>
  )
}
