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

// MUI Imports
import Button from '@mui/material/Button'
import Drawer from '@mui/material/Drawer'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'

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

// Component Imports
import CustomTextField from '@core/components/mui/TextField'
import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
import { useChartOfAccountTypes } from '@/services/queries/chartOfAccountType'
import { useChartOfAccount } from '@/services/queries/chartOfAccount'

// Account Type
export type AccountType = {
  id: number
  code: string
  name: string
  category: string
  balance: string
}

type Props = {
  open: boolean
  handleClose: () => void
  accountData?: AccountType[]
  setData: (data: AccountType[]) => void
  editingAccount?: AccountType | null
}

type FormValidateType = {
  name: string
  code: string
  category: string
  parentAccount?: string
}

// Vars
const initialData = {
  name: '',
  code: '',
  category: '',
  parentAccount: ''
}

const AccountFormDrawer = (props: Props) => {
  // Props
  const { open, handleClose, accountData, setData, editingAccount } = props

  // Determine if we're editing
  const isEdit = !!editingAccount

  const { data: accountTypes, isLoading } = useChartOfAccountTypes()

  const { data: accounts, isLoading: isLoadingAccounts } = useChartOfAccount({
    page: 1,
    limit: 100
  })

  // Process account types for the dropdown
  const categoryOptions = accountTypes?.data.length
    ? accountTypes.data
        .filter(type => type.is_active) // Only show active types
        .map(type => ({
          id: type.id,
          name: type.name,
          code: type.code,
          description: type.description
        }))
    : []

  // Process accounts for parent account dropdown
  const parentAccountOptions = accounts?.data.length
    ? accounts.data
        .filter(account => account.is_active) // Only show active accounts
        .filter(account => (editingAccount ? account.id !== editingAccount.id.toString() : true)) // Exclude current account when editing
        .map(account => ({
          id: account.id,
          code: account.code,
          name: account.name,
          description: account.description
        }))
    : []

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

  // Reset form when editingAccount changes or drawer opens
  useEffect(() => {
    if (open) {
      if (editingAccount) {
        // Populate form with existing data
        resetForm({
          name: editingAccount.name,
          code: editingAccount.code,
          category: editingAccount.category,
          parentAccount: ''
        })
      } else {
        // Reset to initial data for new account
        resetForm(initialData)
      }
    }
  }, [editingAccount, open, resetForm])

  const onSubmit = (data: FormValidateType) => {
    if (isEdit && editingAccount) {
      // Update existing account
      const updatedAccounts =
        accountData?.map(account =>
          account.id === editingAccount.id
            ? {
                ...account,
                code: data.code,
                name: data.name,
                category: data.category
              }
            : account
        ) || []

      setData(updatedAccounts)
    } else {
      // Create new account
      const newAccount: AccountType = {
        id: accountData?.length ? Math.max(...accountData.map(a => a.id)) + 1 : 1,
        code: data.code,
        name: data.name,
        category: data.category,
        balance: '0'
      }

      setData([...(accountData ?? []), newAccount])
    }

    handleClose()
    resetForm(initialData)
  }

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

  return (
    <Drawer
      open={open}
      anchor='right'
      variant='temporary'
      onClose={handleReset}
      ModalProps={{ keepMounted: true }}
      sx={{
        '& .MuiDrawer-paper': {
          width: { xs: 300, sm: 400 },
          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'>{isEdit ? 'Edit Akun' : 'Tambah Akun Baru'}</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='account-form' onSubmit={handleSubmit(data => onSubmit(data))}>
          <div className='flex flex-col gap-6 p-6'>
            {/* Nama */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Nama <span className='text-red-500'>*</span>
              </Typography>
              <Controller
                name='name'
                control={control}
                rules={{ required: true }}
                render={({ field }) => (
                  <CustomTextField
                    {...field}
                    fullWidth
                    placeholder='Nama'
                    {...(errors.name && { error: true, helperText: 'Field ini wajib diisi.' })}
                  />
                )}
              />
            </div>

            {/* Kode */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Kode <span className='text-red-500'>*</span>
              </Typography>
              <Controller
                name='code'
                control={control}
                rules={{ required: true }}
                render={({ field }) => (
                  <CustomTextField
                    {...field}
                    fullWidth
                    placeholder='Kode'
                    {...(errors.code && { error: true, helperText: 'Field ini wajib diisi.' })}
                  />
                )}
              />
            </div>

            {/* Kategori */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Kategori <span className='text-red-500'>*</span>
              </Typography>
              <Controller
                name='category'
                control={control}
                rules={{ required: true }}
                render={({ field: { onChange, value, ...field } }) => (
                  <CustomAutocomplete
                    {...field}
                    loading={isLoading}
                    options={categoryOptions}
                    value={categoryOptions.find(option => option.name === value) || null}
                    onChange={(_, newValue) => onChange(newValue?.name || '')}
                    getOptionLabel={option => option.name}
                    renderOption={(props, option) => (
                      <Box component='li' {...props}>
                        <div>
                          <Typography variant='body2'>
                            {option.code} - {option.name}
                          </Typography>
                        </div>
                      </Box>
                    )}
                    renderInput={params => (
                      <CustomTextField
                        {...params}
                        placeholder={isLoading ? 'Loading categories...' : 'Pilih kategori'}
                        {...(errors.category && { error: true, helperText: 'Field ini wajib diisi.' })}
                      />
                    )}
                    isOptionEqualToValue={(option, value) => option.name === value.name}
                    disabled={isLoading}
                  />
                )}
              />
            </div>

            {/* Sub Akun dari */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Sub Akun dari
              </Typography>
              <Controller
                name='parentAccount'
                control={control}
                render={({ field: { onChange, value, ...field } }) => (
                  <CustomAutocomplete
                    {...field}
                    loading={isLoadingAccounts}
                    options={parentAccountOptions}
                    value={parentAccountOptions.find(account => `${account.code} ${account.name}` === value) || null}
                    onChange={(_, newValue) => onChange(newValue ? `${newValue.code} ${newValue.name}` : '')}
                    getOptionLabel={option => `${option.code} - ${option.name}`}
                    renderOption={(props, option) => (
                      <Box component='li' {...props}>
                        <div>
                          <Typography variant='body2'>
                            {option.code} - {option.name}
                          </Typography>
                          {option.description && (
                            <Typography variant='caption' color='textSecondary'>
                              {option.description}
                            </Typography>
                          )}
                        </div>
                      </Box>
                    )}
                    renderInput={params => (
                      <CustomTextField
                        {...params}
                        placeholder={isLoadingAccounts ? 'Loading accounts...' : 'Pilih akun parent'}
                      />
                    )}
                    isOptionEqualToValue={(option, value) =>
                      `${option.code} ${option.name}` === `${value.code} ${value.name}`
                    }
                    disabled={isLoadingAccounts}
                    noOptionsText={isLoadingAccounts ? 'Loading...' : 'Tidak ada akun tersedia'}
                  />
                )}
              />
            </div>
          </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='account-form'>
            {isEdit ? 'Update' : 'Simpan'}
          </Button>
          <Button variant='tonal' color='error' onClick={() => handleReset()}>
            Batal
          </Button>
        </div>
      </Box>
    </Drawer>
  )
}

export default AccountFormDrawer
