// 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 MenuItem from '@mui/material/MenuItem'
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'

// Types
import { CampaignRule, RuleType, RewardType, CampaignRuleRequest } from '@/types/services/campaign'
import { useCampaignRulesMutation } from '@/services/mutations/campaign'

type Props = {
  open: boolean
  handleClose: () => void
  campaignId: string // Required campaign ID
  data?: CampaignRule | null // Data for edit mode
}

type FormValidateType = {
  rule_type: RuleType
  condition_value: string
  reward_type: RewardType
  reward_value: number
  reward_subtype: string
  reward_ref_id: string
}

// Initial form data
const initialData: FormValidateType = {
  rule_type: 'SPEND',
  condition_value: '',
  reward_type: 'POINTS',
  reward_value: 0,
  reward_subtype: '',
  reward_ref_id: ''
}

const AddEditCampaignRuleDrawer = (props: Props) => {
  // Props
  const { open, handleClose, campaignId, data } = props

  // States
  const [isSubmitting, setIsSubmitting] = useState(false)

  const { createCampaignRule, updateCampaignRule } = useCampaignRulesMutation()

  // Determine if this is edit mode
  const isEditMode = Boolean(data?.id)

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

  const watchedRewardType = watch('reward_type')

  // Effect to populate form when editing
  useEffect(() => {
    if (isEditMode && data) {
      const formData: FormValidateType = {
        rule_type: data.rule_type,
        condition_value: data.condition_value || '',
        reward_type: data.reward_type,
        reward_value: data.reward_value || 0,
        reward_subtype: data.reward_subtype || '',
        reward_ref_id: data.reward_ref_id || ''
      }

      resetForm(formData)
    } else {
      // Reset to initial data for add mode
      resetForm(initialData)
    }
  }, [data, isEditMode, resetForm])

  const handleFormSubmit = async (formData: FormValidateType) => {
    try {
      setIsSubmitting(true)

      // Create CampaignRuleRequest object
      const ruleRequest: CampaignRuleRequest = {
        campaign_id: campaignId,
        rule_type: formData.rule_type,
        condition_value: formData.condition_value.trim() || undefined,
        reward_type: formData.reward_type,
        reward_value: formData.reward_value > 0 ? formData.reward_value : undefined,
        reward_subtype: formData.reward_subtype.trim() || undefined,
        reward_ref_id: formData.reward_ref_id.trim() || undefined
      }

      if (isEditMode && data?.id) {
        // Update existing campaign rule
        updateCampaignRule.mutate(
          { id: data.id, payload: ruleRequest },
          {
            onSuccess: () => {
              handleReset()
              handleClose()
            },
            onError: error => {
              console.error('Error updating campaign rule:', error)
            }
          }
        )
      } else {
        // Create new campaign rule
        createCampaignRule.mutate(ruleRequest, {
          onSuccess: () => {
            handleReset()
            handleClose()
          },
          onError: error => {
            console.error('Error creating campaign rule:', error)
          }
        })
      }
    } catch (error) {
      console.error('Error submitting campaign rule:', error)
    } finally {
      setIsSubmitting(false)
    }
  }

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

  // Helper function to get rule type options
  const getRuleTypeOptions = () => [
    { value: 'TIER', label: 'Tier Based', icon: 'tabler-medal' },
    { value: 'SPEND', label: 'Spending Amount', icon: 'tabler-wallet' },
    { value: 'PRODUCT', label: 'Product Based', icon: 'tabler-package' },
    { value: 'CATEGORY', label: 'Category Based', icon: 'tabler-category' },
    { value: 'DAY', label: 'Day Based', icon: 'tabler-calendar' },
    { value: 'LOCATION', label: 'Location Based', icon: 'tabler-map-pin' }
  ]

  // Helper function to get reward type options
  const getRewardTypeOptions = () => [
    { value: 'POINTS', label: 'Points', icon: 'tabler-coins' },
    { value: 'TOKENS', label: 'Tokens', icon: 'tabler-ticket' },
    { value: 'REWARD', label: 'Reward Item', icon: 'tabler-gift' }
  ]

  // Helper function to get condition placeholder based on rule type
  const getConditionPlaceholder = (ruleType: RuleType) => {
    switch (ruleType) {
      case 'TIER':
        return 'e.g., GOLD, SILVER, BRONZE'
      case 'SPEND':
        return 'e.g., 100000 (minimum spend amount)'
      case 'PRODUCT':
        return 'e.g., product_id_123'
      case 'CATEGORY':
        return 'e.g., electronics, fashion'
      case 'DAY':
        return 'e.g., monday, weekend'
      case 'LOCATION':
        return 'e.g., jakarta, bandung'
      default:
        return 'Enter condition value'
    }
  }

  // Helper function to get reward subtype options based on reward type
  const getRewardSubtypeOptions = (rewardType: RewardType) => {
    switch (rewardType) {
      case 'POINTS':
        return ['bonus', 'cashback', 'referral']
      case 'TOKENS':
        return ['game', 'lottery', 'voucher']
      case 'REWARD':
        return ['product', 'discount', 'currency', 'experience']
      default:
        return []
    }
  }

  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'>{isEditMode ? 'Edit Campaign Rule' : 'Add New Campaign Rule'}</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='campaign-rule-form' onSubmit={handleSubmit(handleFormSubmit)}>
          <div className='flex flex-col gap-6 p-6'>
            {/* Rule Type */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Rule Type <span className='text-red-500'>*</span>
              </Typography>
              <Controller
                name='rule_type'
                control={control}
                rules={{ required: 'Rule type is required' }}
                render={({ field }) => (
                  <CustomTextField
                    {...field}
                    select
                    fullWidth
                    error={!!errors.rule_type}
                    helperText={errors.rule_type?.message}
                  >
                    {getRuleTypeOptions().map(option => (
                      <MenuItem key={option.value} value={option.value}>
                        <div className='flex items-center gap-2'>
                          <i className={`${option.icon} text-primary`} />
                          {option.label}
                        </div>
                      </MenuItem>
                    ))}
                  </CustomTextField>
                )}
              />
            </div>

            {/* Condition Value */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Condition Value
              </Typography>
              <Controller
                name='condition_value'
                control={control}
                render={({ field }) => (
                  <CustomTextField
                    {...field}
                    fullWidth
                    placeholder={getConditionPlaceholder(watch('rule_type'))}
                    error={!!errors.condition_value}
                    helperText={errors.condition_value?.message}
                  />
                )}
              />
            </div>

            {/* Reward Type */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Reward Type <span className='text-red-500'>*</span>
              </Typography>
              <Controller
                name='reward_type'
                control={control}
                rules={{ required: 'Reward type is required' }}
                render={({ field }) => (
                  <CustomTextField
                    {...field}
                    select
                    fullWidth
                    error={!!errors.reward_type}
                    helperText={errors.reward_type?.message}
                  >
                    {getRewardTypeOptions().map(option => (
                      <MenuItem key={option.value} value={option.value}>
                        <div className='flex items-center gap-2'>
                          <i className={`${option.icon} text-primary`} />
                          {option.label}
                        </div>
                      </MenuItem>
                    ))}
                  </CustomTextField>
                )}
              />
            </div>

            {/* Reward Value */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Reward Value
              </Typography>
              <Controller
                name='reward_value'
                control={control}
                rules={{
                  min: { value: 1, message: 'Reward value must be at least 1' }
                }}
                render={({ field }) => (
                  <CustomTextField
                    {...field}
                    fullWidth
                    type='number'
                    placeholder={`Enter ${watchedRewardType.toLowerCase()} amount`}
                    error={!!errors.reward_value}
                    helperText={errors.reward_value?.message}
                    onChange={e => field.onChange(Number(e.target.value))}
                  />
                )}
              />
            </div>

            {/* Reward Subtype */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Reward Subtype
              </Typography>
              <Controller
                name='reward_subtype'
                control={control}
                render={({ field }) => (
                  <CustomTextField
                    {...field}
                    select
                    fullWidth
                    error={!!errors.reward_subtype}
                    helperText={errors.reward_subtype?.message}
                  >
                    <MenuItem value=''>
                      <em>None</em>
                    </MenuItem>
                    {getRewardSubtypeOptions(watchedRewardType).map(subtype => (
                      <MenuItem key={subtype} value={subtype}>
                        {subtype.charAt(0).toUpperCase() + subtype.slice(1)}
                      </MenuItem>
                    ))}
                  </CustomTextField>
                )}
              />
            </div>

            {/* Reward Reference ID */}
            <div>
              <Typography variant='body2' className='mb-2'>
                Reward Reference ID
              </Typography>
              <Controller
                name='reward_ref_id'
                control={control}
                render={({ field }) => (
                  <CustomTextField
                    {...field}
                    fullWidth
                    placeholder='e.g., product_id, voucher_id (optional)'
                    error={!!errors.reward_ref_id}
                    helperText={errors.reward_ref_id?.message || 'Optional reference to specific reward item'}
                  />
                )}
              />
            </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='campaign-rule-form' disabled={isSubmitting}>
            {isSubmitting ? (isEditMode ? 'Updating...' : 'Creating...') : isEditMode ? 'Update Rule' : 'Create Rule'}
          </Button>
          <Button variant='outlined' color='error' onClick={handleReset} disabled={isSubmitting}>
            Cancel
          </Button>
        </div>
      </Box>
    </Drawer>
  )
}

export default AddEditCampaignRuleDrawer