'use client'

// React Imports
import { useState, useCallback } from 'react'
import dynamic from 'next/dynamic'
import { useTranslations } from 'next-intl'

// MUI Imports
import Grid from '@mui/material/Grid2'
import Button from '@mui/material/Button'
import CircularProgress from '@mui/material/CircularProgress'
import Alert from '@mui/material/Alert'
import Typography from '@mui/material/Typography'

// API Imports
import { sensorHubService } from '@/libs/api'

// Component Imports
import CustomTextField from '@core/components/mui/TextField'
import CustomAutocomplete from '@core/components/mui/Autocomplete'
import type { MapDrawGeoJSON } from '@/components/MapDraw'

const MapDraw = dynamic(() => import('@/components/MapDraw').then(mod => mod.MapDraw), {
  ssr: false,
  loading: () => (
    <div className='flex items-center justify-center h-[400px] rounded-lg bg-action-hover'>
      <CircularProgress size={32} />
    </div>
  )
})

type FormSensorHubProps = {
  onBack: () => void
}

const PLANT_TYPES = ['گندم', 'جو', 'ذرت', 'برنج', 'پنبه', 'چغندر قند', 'سیب‌زمینی', 'گوجه‌فرنگی', 'پیاز', 'سبزیجات']

const PLANT_NAMES_BY_TYPE: Record<string, string[]> = {
  گندم: ['رقم آذر', 'رقم شریف', 'رقم مروارید', 'رقم بهار', 'رقم الوند'],
  جو: ['رقم سرداری', 'رقم زاگرس', 'رقم کرج', 'رقم ریجاب'],
  ذرت: ['رقم سینگل کراس ۷۰۴', 'رقم سینگل کراس ۷۰۷', 'رقم ماکزیما'],
  برنج: ['رقم فجر', 'رقم خزر', 'رقم طارم'],
  پنبه: ['رقم ورامین', 'رقم ساحل', 'رقم سپید'],
  'چغندر قند': ['رقم اکباتان', 'رقم شیرین', 'رقم پاییزه'],
  سیب‌زمینی: ['رقم آگریا', 'رقم مارفونا', 'رقم ساوالان'],
  گوجه‌فرنگی: ['رقم چری', 'رقم روتگرز', 'رقم پامیس'],
  پیاز: ['رقم قرمز آذرشهر', 'رقم سفید قم', 'رقم زرد'],
  سبزیجات: ['کاهو', 'جعفری', 'شوید', 'تره', 'ریحان']
}

const FormSensorHub = ({ onBack }: FormSensorHubProps) => {
  const t = useTranslations('sensorHub')
  const [name, setName] = useState('')
  const [uuidSensor, setUuidSensor] = useState('')
  const [plantType, setPlantType] = useState<string | null>(null)
  const [plantName, setPlantName] = useState<string | null>(null)
  const [areaGeoJson, setAreaGeoJson] = useState<MapDrawGeoJSON>(null)
  const [areaM2, setAreaM2] = useState<number | undefined>(undefined)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleAreaChange = useCallback((geojson: MapDrawGeoJSON, area?: number) => {
    setAreaGeoJson(geojson)
    setAreaM2(area)
  }, [])

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError(null)
    setLoading(true)
    console.log(areaGeoJson)
    try {
      await sensorHubService.addSensor({
        name,
        uuid_sensor: uuidSensor,
        ...(areaGeoJson && { area_geojson: areaGeoJson }),
        ...(areaM2 !== undefined && { area_m2: areaM2 })
      })
      onBack()
    } catch (err: unknown) {
      const message = err && typeof err === 'object' && 'message' in err ? String((err as { message: string }).message) : t('errorSave')
      setError(message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className='flex flex-col gap-4'>
      <div className='flex items-center gap-2 mbe-2'>
        <Button
          variant='text'
          color='secondary'
          size='small'
          startIcon={<i className='tabler-arrow-right text-xl' />}
          onClick={onBack}
        >
          {t('back')}
        </Button>
        {/* <Typography variant='h6'>افزودن سنسور جدید</Typography> */}
      </div>
      <form onSubmit={handleSubmit}>
        <Grid container spacing={4}>
          {error && (
            <Grid size={{ xs: 12 }}>
              <Alert severity='error' onClose={() => setError(null)}>
                {error}
              </Alert>
            </Grid>
          )}
          <Grid size={{ xs: 12 }}>
            <CustomTextField
              fullWidth
              label={t('sensorName')}
              placeholder={t('placeholderName')}
              value={name}
              onChange={e => setName(e.target.value)}
            />
          </Grid>
          <Grid size={{ xs: 12 }}>
            <CustomTextField
              fullWidth
              label={t('sensorUuid')}
              placeholder={t('placeholderUuid')}
              value={uuidSensor}
              onChange={e => setUuidSensor(e.target.value)}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 6 }}>
            <CustomAutocomplete
              fullWidth
              options={PLANT_TYPES}
              value={plantType}
              onChange={(_, v) => {
                setPlantType(v)
                setPlantName(null)
              }}
              renderInput={params => <CustomTextField {...params} label={t('plantType')} />}
            />
          </Grid>
          <Grid size={{ xs: 12, md: 6 }}>
            <CustomAutocomplete
              fullWidth
              disabled={!plantType}
              options={plantType ? PLANT_NAMES_BY_TYPE[plantType] ?? [] : []}
              value={plantName}
              onChange={(_, v) => setPlantName(v)}
              renderInput={params => <CustomTextField {...params} label={t('plantName')} />}
            />
          </Grid>
          <Grid size={{ xs: 12 }}>
            <Typography variant='body2' color='text.secondary' className='mbe-2'>
              {t('mapAreaDescription')}
            </Typography>
            <MapDraw
              center={[35.6892, 51.389]}
              zoom={13}
              height={400}
              singleShape
              onAreaChange={handleAreaChange}
            />
            {areaM2 !== undefined && areaM2 > 0 && (
              <Typography variant='caption' color='text.secondary' className='mts-2 block'>
                مساحت تقریبی: {areaM2 >= 10000 ? `${(areaM2 / 10000).toFixed(2)} هکتار` : `${areaM2.toFixed(0)} متر مربع`}
              </Typography>
            )}
          </Grid>
          <Grid size={{ xs: 12 }} className='flex gap-2'>
            <Button variant='tonal' color='secondary' onClick={onBack} disabled={loading}>
              {t('cancel')}
            </Button>
            <Button
              variant='contained'
              type='submit'
              disabled={loading}
              startIcon={loading ? <CircularProgress size={16} color='inherit' /> : <i className='tabler-plus' />}
            >
              {loading ? t('saving') : t('saveSensor')}
            </Button>
          </Grid>
        </Grid>
      </form>
    </div>
  )
}

export default FormSensorHub
