'use client'
// React Imports
import { useEffect, useState } from 'react'

// MUI Imports
import Button from '@mui/material/Button'
import Drawer from '@mui/material/Drawer'
import IconButton from '@mui/material/IconButton'
import MenuItem from '@mui/material/MenuItem'
import Typography from '@mui/material/Typography'
import Grid from '@mui/material/Grid2'
import Box from '@mui/material/Box'
import Radio from '@mui/material/Radio'
import RadioGroup from '@mui/material/RadioGroup'
import FormControlLabel from '@mui/material/FormControlLabel'
import FormControl from '@mui/material/FormControl'

// Third-party Imports
import { useForm, Controller } from 'react-hook-form'

// Component Imports
import CustomTextField from '@core/components/mui/TextField'

type Props = {
  open: boolean
  handleClose: () => void
  setData?: (data: any) => void
}

type StockAdjustmentType = {
  tipeStok: 'perhitungan' | 'stokMasukKeluar'
  gudang: string
  tanggal: string
  akun: string
  nomor: string
  referensi: string
  tag: string
  qtyTercatat: number
  satuan: string
  qtyAktual: number
  selisih: number
  hargaRataRata: number
}

type FormValidateType = StockAdjustmentType

// Vars
const initialData: StockAdjustmentType = {
  tipeStok: 'perhitungan',
  gudang: '',
  tanggal: '11/09/2025',
  akun: '8-80100 Penyesuaian Persediaan',
  nomor: 'SA/00007',
  referensi: '',
  tag: '',
  qtyTercatat: 0,
  satuan: 'Pcs',
  qtyAktual: 0,
  selisih: 0,
  hargaRataRata: 0
}

const IngredientDetailStockAdjustmentDrawer = (props: Props) => {
  // Props
  const { open, handleClose, setData } = props

  // States
  const [formData, setFormData] = useState<StockAdjustmentType>(initialData)

  // Hooks
  const {
    control,
    reset: resetForm,
    handleSubmit,
    watch,
    setValue,
    formState: { errors }
  } = useForm<FormValidateType>({
    defaultValues: initialData
  })

  // Watch values untuk kalkulasi otomatis
  const qtyTercatat = watch('qtyTercatat')
  const qtyAktual = watch('qtyAktual')

  // Kalkulasi selisih otomatis
  useEffect(() => {
    const selisih = qtyAktual - qtyTercatat
    setValue('selisih', selisih)
  }, [qtyTercatat, qtyAktual, setValue])

  const onSubmit = (data: FormValidateType) => {
    console.log('Stock adjustment data:', data)
    if (setData) {
      setData(data)
    }
    handleClose()
  }

  const handleReset = () => {
    handleClose()
    resetForm(initialData)
    setFormData(initialData)
  }

  const formatNumber = (value: number) => {
    return new Intl.NumberFormat('id-ID').format(value)
  }

  const parseNumber = (value: string) => {
    return parseInt(value.replace(/\./g, '')) || 0
  }

  return (
    <Drawer
      open={open}
      anchor='right'
      variant='temporary'
      onClose={handleReset}
      ModalProps={{ keepMounted: true }}
      sx={{
        '& .MuiDrawer-paper': {
          width: { xs: 400, sm: 600 },
          display: 'flex',
          flexDirection: 'column',
          height: '100%'
        }
      }}
    >
      {/* Sticky Header */}
      <Box
        sx={{
          position: 'sticky',
          top: 0,
          zIndex: 10,
          backgroundColor: 'background.paper',
          borderBottom: 1,
          borderColor: 'divider'
        }}
      >
        <div className='flex items-center justify-between plb-5 pli-6'>
          <Typography variant='h5'>Penyesuaian Stok</Typography>
          <IconButton size='small' onClick={handleReset}>
            <i className='tabler-x text-2xl text-textPrimary' />
          </IconButton>
        </div>
      </Box>

      {/* Scrollable Content */}
      <Box sx={{ flex: 1, overflowY: 'auto' }}>
        <form id='stock-adjustment-form' onSubmit={handleSubmit(data => onSubmit(data))}>
          <div className='flex flex-col gap-6 p-6'>
            {/* Tipe Penyesuaian Stok */}
            <div>
              <Typography variant='body2' className='mb-3' sx={{ color: 'error.main' }}>
                * Tipe penyesuaian stok
              </Typography>
              <Controller
                name='tipeStok'
                control={control}
                rules={{ required: true }}
                render={({ field }) => (
                  <FormControl component='fieldset'>
                    <RadioGroup {...field} row sx={{ gap: 4 }}>
                      <FormControlLabel
                        value='perhitungan'
                        control={<Radio />}
                        label={
                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                            <Typography>Perhitungan Stok</Typography>
                            <IconButton size='small' sx={{ color: 'text.secondary' }}>
                              <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
                            </IconButton>
                          </Box>
                        }
                      />
                      <FormControlLabel
                        value='stokMasukKeluar'
                        control={<Radio />}
                        label={
                          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                            <Typography>Stok Masuk / Keluar</Typography>
                            <IconButton size='small' sx={{ color: 'text.secondary' }}>
                              <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
                            </IconButton>
                          </Box>
                        }
                      />
                    </RadioGroup>
                  </FormControl>
                )}
              />
            </div>

            {/* Gudang dan Tanggal */}
            <Grid container spacing={4}>
              <Grid size={6}>
                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
                  * Gudang
                </Typography>
                <Controller
                  name='gudang'
                  control={control}
                  rules={{ required: true }}
                  render={({ field }) => (
                    <CustomTextField
                      {...field}
                      select
                      fullWidth
                      placeholder='Pilih gudang'
                      {...(errors.gudang && { error: true, helperText: 'Field ini wajib diisi.' })}
                    >
                      <MenuItem value=''>Pilih gudang</MenuItem>
                      <MenuItem value='Gudang Utama'>Gudang Utama</MenuItem>
                      <MenuItem value='Gudang Cabang'>Gudang Cabang</MenuItem>
                      <MenuItem value='Gudang Produksi'>Gudang Produksi</MenuItem>
                    </CustomTextField>
                  )}
                />
              </Grid>
              <Grid size={6}>
                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
                  * Tanggal
                </Typography>
                <Controller
                  name='tanggal'
                  control={control}
                  rules={{ required: true }}
                  render={({ field }) => (
                    <CustomTextField
                      {...field}
                      fullWidth
                      type='date'
                      {...(errors.tanggal && { error: true, helperText: 'Field ini wajib diisi.' })}
                    />
                  )}
                />
              </Grid>
            </Grid>

            {/* Akun dan Nomor */}
            <Grid container spacing={4}>
              <Grid size={6}>
                <Typography variant='body2' className='mb-2' sx={{ color: 'error.main' }}>
                  * Akun
                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
                  </IconButton>
                </Typography>
                <Controller
                  name='akun'
                  control={control}
                  rules={{ required: true }}
                  render={({ field }) => (
                    <CustomTextField
                      {...field}
                      select
                      fullWidth
                      {...(errors.akun && { error: true, helperText: 'Field ini wajib diisi.' })}
                    >
                      <MenuItem value='8-80100 Penyesuaian Persediaan'>8-80100 Penyesuaian Persediaan</MenuItem>
                      <MenuItem value='8-80200 Penyesuaian Stok Rusak'>8-80200 Penyesuaian Stok Rusak</MenuItem>
                      <MenuItem value='8-80300 Penyesuaian Stok Hilang'>8-80300 Penyesuaian Stok Hilang</MenuItem>
                    </CustomTextField>
                  )}
                />
              </Grid>
              <Grid size={6}>
                <Typography variant='body2' className='mb-2'>
                  Nomor
                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
                  </IconButton>
                </Typography>
                <Controller
                  name='nomor'
                  control={control}
                  render={({ field }) => <CustomTextField {...field} fullWidth placeholder='SA/00007' />}
                />
              </Grid>
            </Grid>

            {/* Referensi dan Tag */}
            <Grid container spacing={4}>
              <Grid size={6}>
                <Typography variant='body2' className='mb-2'>
                  Referensi
                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
                  </IconButton>
                </Typography>
                <Controller
                  name='referensi'
                  control={control}
                  render={({ field }) => <CustomTextField {...field} fullWidth placeholder='Referensi' />}
                />
              </Grid>
              <Grid size={6}>
                <Typography variant='body2' className='mb-2'>
                  Tag
                  <IconButton size='small' sx={{ color: 'text.secondary', ml: 1 }}>
                    <i className='tabler-help-circle' style={{ fontSize: '16px' }} />
                  </IconButton>
                </Typography>
                <Controller
                  name='tag'
                  control={control}
                  render={({ field }) => (
                    <CustomTextField {...field} select fullWidth placeholder='Pilih Tag'>
                      <MenuItem value=''>Pilih Tag</MenuItem>
                      <MenuItem value='Urgent'>Urgent</MenuItem>
                      <MenuItem value='Regular'>Regular</MenuItem>
                      <MenuItem value='Maintenance'>Maintenance</MenuItem>
                    </CustomTextField>
                  )}
                />
              </Grid>
            </Grid>

            {/* Stock Details Section */}
            <Box sx={{ mt: 4 }}>
              <Grid container spacing={2} alignItems='end'>
                {/* Qty Tercatat */}
                <Grid size={2}>
                  <Typography variant='body2' className='mb-2 font-medium'>
                    Qty Tercatat
                  </Typography>
                  <Controller
                    name='qtyTercatat'
                    control={control}
                    render={({ field }) => (
                      <CustomTextField
                        {...field}
                        fullWidth
                        type='number'
                        onChange={e => field.onChange(parseInt(e.target.value) || 0)}
                      />
                    )}
                  />
                </Grid>

                {/* Satuan */}
                <Grid size={2}>
                  <Typography variant='body2' className='mb-2 font-medium'>
                    Satuan
                  </Typography>
                  <Controller
                    name='satuan'
                    control={control}
                    render={({ field }) => (
                      <CustomTextField {...field} select fullWidth>
                        <MenuItem value='Pcs'>Pcs</MenuItem>
                        <MenuItem value='Kg'>Kg</MenuItem>
                        <MenuItem value='Liter'>Liter</MenuItem>
                        <MenuItem value='Box'>Box</MenuItem>
                      </CustomTextField>
                    )}
                  />
                </Grid>

                {/* Qty Aktual */}
                <Grid size={2}>
                  <Typography variant='body2' className='mb-2 font-medium'>
                    Qty Aktual
                  </Typography>
                  <Controller
                    name='qtyAktual'
                    control={control}
                    render={({ field }) => (
                      <CustomTextField
                        {...field}
                        fullWidth
                        type='number'
                        onChange={e => field.onChange(parseInt(e.target.value) || 0)}
                      />
                    )}
                  />
                </Grid>

                {/* Selisih */}
                <Grid size={2}>
                  <Typography variant='body2' className='mb-2 font-medium'>
                    Selisih
                  </Typography>
                  <Controller
                    name='selisih'
                    control={control}
                    render={({ field }) => (
                      <CustomTextField
                        {...field}
                        fullWidth
                        type='number'
                        disabled
                        sx={{
                          '& .MuiInputBase-input.Mui-disabled': {
                            WebkitTextFillColor: 'text.primary',
                            backgroundColor: 'grey.100'
                          }
                        }}
                      />
                    )}
                  />
                </Grid>

                {/* Harga Rata-rata */}
                <Grid size={4}>
                  <Typography variant='body2' className='mb-2 font-medium'>
                    Harga Rata-rata
                  </Typography>
                  <Controller
                    name='hargaRataRata'
                    control={control}
                    render={({ field }) => (
                      <CustomTextField
                        {...field}
                        fullWidth
                        value={formatNumber(field.value)}
                        onChange={e => field.onChange(parseNumber(e.target.value))}
                      />
                    )}
                  />
                </Grid>
              </Grid>
            </Box>
          </div>
        </form>
      </Box>

      {/* Sticky Footer */}
      <Box
        sx={{
          position: 'sticky',
          bottom: 0,
          zIndex: 10,
          backgroundColor: 'background.paper',
          borderTop: 1,
          borderColor: 'divider',
          p: 3
        }}
      >
        <div className='flex items-center gap-4'>
          <Button variant='contained' type='submit' form='stock-adjustment-form'>
            Simpan
          </Button>
          <Button variant='tonal' color='error' onClick={() => handleReset()}>
            Batal
          </Button>
        </div>
      </Box>
    </Drawer>
  )
}

export default IngredientDetailStockAdjustmentDrawer
