// 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 { GamePrize } from '@/types/services/gamePrize'
import { useGamePrizes } from '@/services/queries/gamePrize'

// Types

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

const DeleteGamePrizeDialog = ({ open, onClose, onConfirm, gamePrize, isDeleting = false }: Props) => {
  if (!gamePrize) 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 Game</Typography>
        </Box>
      </DialogTitle>

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

        <Box
          sx={{
            backgroundColor: 'grey.50',
            p: 2,
            borderRadius: 1,
            border: '1px solid',
            borderColor: 'grey.200',
            mb: 2
          }}
        >
          <Typography variant='subtitle2' className='font-medium mb-1'>
            {gamePrize.name}
          </Typography>
          <Typography variant='body2' color='text.secondary'>
            Dibuat:{' '}
            {new Date(gamePrize.created_at).toLocaleDateString('id-ID', {
              year: 'numeric',
              month: 'long',
              day: 'numeric'
            })}
          </Typography>
        </Box>

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

        <DialogContentText>
          Pastikan tidak ada pengguna yang masih menggunakan game 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 DeleteGamePrizeDialog
