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

// MUI Imports
import Dialog from '@mui/material/Dialog'
import DialogTitle from '@mui/material/DialogTitle'
import DialogContent from '@mui/material/DialogContent'
import DialogActions from '@mui/material/DialogActions'
import DialogContentText from '@mui/material/DialogContentText'
import Button from '@mui/material/Button'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Alert from '@mui/material/Alert'
import Chip from '@mui/material/Chip'

// Component Imports
import CustomAvatar from '@core/components/mui/Avatar'

// Utils
import { getInitials } from '@/utils/getInitials'

// Types
import { Reward } from '@/types/services/reward'
import type { ThemeColor } from '@core/types'

type Props = {
  open: boolean
  onClose: () => void
  onConfirm: () => void
  reward: Reward | null
  isDeleting?: boolean
}

// Helper function to get reward type color
const getRewardTypeColor = (type: string): ThemeColor => {
  switch (type) {
    case 'VOUCHER':
      return 'info'
    case 'PHYSICAL':
      return 'success'
    case 'DIGITAL':
      return 'warning'
    default:
      return 'primary'
  }
}

const DeleteRewardDialog = ({ open, onClose, onConfirm, reward, isDeleting = false }: Props) => {
  if (!reward) return null

  return (
    <Dialog
      open={open}
      onClose={onClose}
      maxWidth='sm'
      fullWidth
      aria-labelledby='delete-dialog-title'
      aria-describedby='delete-dialog-description'
    >
      <DialogTitle id='delete-dialog-title'>
        <Box display='flex' alignItems='center' gap={2}>
          <i className='tabler-trash text-red-500 text-2xl' />
          <Typography variant='h6'>Hapus Reward</Typography>
        </Box>
      </DialogTitle>

      <DialogContent>
        <DialogContentText id='delete-dialog-description' className='mb-4'>
          Apakah Anda yakin ingin menghapus reward berikut?
        </DialogContentText>

        <Box
          sx={{
            backgroundColor: 'grey.50',
            p: 2,
            borderRadius: 1,
            border: '1px solid',
            borderColor: 'grey.200',
            mb: 2
          }}
        >
          {/* Reward Info with Avatar */}
          <Box display='flex' alignItems='center' gap={2} className='mb-3'>
            <CustomAvatar src={reward.images?.[0]} size={50}>
              {getInitials(reward.name)}
            </CustomAvatar>
            <Box>
              <Typography variant='subtitle2' className='font-medium mb-1'>
                {reward.name}
              </Typography>
              <Chip
                label={reward.reward_type}
                color={getRewardTypeColor(reward.reward_type)}
                variant='tonal'
                size='small'
              />
            </Box>
          </Box>

          {/* Reward Details */}
          <Box display='flex' flexDirection='column' gap={1}>
            <Typography variant='body2' color='text.secondary'>
              <strong>Biaya Poin:</strong> {new Intl.NumberFormat('id-ID').format(reward.cost_points)} poin
            </Typography>

            {reward.stock !== undefined && (
              <Typography variant='body2' color='text.secondary'>
                <strong>Stok:</strong>{' '}
                {reward.stock === 0 ? 'Habis' : reward.stock === null ? 'Unlimited' : reward.stock}
              </Typography>
            )}

            <Typography variant='body2' color='text.secondary'>
              <strong>Maks per Customer:</strong> {reward.max_per_customer} item
            </Typography>

            {reward.tnc?.expiry_days && (
              <Typography variant='body2' color='text.secondary'>
                <strong>Berlaku Hingga:</strong> {reward.tnc.expiry_days} hari
              </Typography>
            )}

            <Typography variant='body2' color='text.secondary'>
              <strong>Dibuat:</strong>{' '}
              {new Date(reward.created_at).toLocaleDateString('id-ID', {
                year: 'numeric',
                month: 'long',
                day: 'numeric'
              })}
            </Typography>
          </Box>
        </Box>

        <Alert severity='warning' sx={{ mb: 2 }}>
          <Typography variant='body2'>
            <strong>Peringatan:</strong> Tindakan ini tidak dapat dibatalkan. Semua data yang terkait dengan reward ini
            akan dihapus secara permanen.
          </Typography>
        </Alert>

        <DialogContentText>
          Pastikan tidak ada pengguna yang masih memiliki atau menukarkan reward ini sebelum menghapus.
        </DialogContentText>
      </DialogContent>

      <DialogActions className='p-4'>
        <Button onClick={onClose} variant='outlined' disabled={isDeleting}>
          Batal
        </Button>
        <Button
          onClick={onConfirm}
          color='error'
          variant='contained'
          disabled={isDeleting}
          startIcon={isDeleting ? <i className='tabler-loader animate-spin' /> : <i className='tabler-trash' />}
        >
          {isDeleting ? 'Menghapus...' : 'Hapus'}
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default DeleteRewardDialog
