// 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'

// Types
import { Campaign } from '@/types/services/campaign'

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

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

  const getCampaignTypeColor = (type: string) => {
    switch (type) {
      case 'POINTS':
        return 'primary'
      case 'TOKENS':
        return 'success'
      case 'REWARD':
        return 'warning'
      case 'MIXED':
        return 'info'
      default:
        return 'secondary'
    }
  }

  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 Kampanye</Typography>
        </Box>
      </DialogTitle>

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

        <Box
          sx={{
            backgroundColor: 'grey.50',
            p: 2,
            borderRadius: 1,
            border: '1px solid',
            borderColor: 'grey.200',
            mb: 2
          }}
        >
          <Box display='flex' alignItems='center' gap={2} className='mb-2'>
            <Typography variant='subtitle2' className='font-medium'>
              {campaign.name}
            </Typography>
            <Chip label={campaign.type} color={getCampaignTypeColor(campaign.type)} variant='tonal' size='small' />
          </Box>

          {campaign.description && (
            <Typography variant='body2' color='text.secondary' className='mb-2'>
              {campaign.description}
            </Typography>
          )}

          <Box display='flex' flexDirection='column' gap={1}>
            <Typography variant='body2' color='text.secondary'>
              Periode:{' '}
              {new Date(campaign.start_date).toLocaleDateString('id-ID', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
              })}{' '}
              -{' '}
              {new Date(campaign.end_date).toLocaleDateString('id-ID', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
              })}
            </Typography>

            <Typography variant='body2' color='text.secondary'>
              Status: {campaign.is_active ? 'Aktif' : 'Tidak Aktif'}
              {campaign.show_on_app && ' • Tampil di App'}
            </Typography>

            <Typography variant='body2' color='text.secondary'>
              Dibuat:{' '}
              {new Date(campaign.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 kampanye
            ini akan dihapus secara permanen, termasuk:
          </Typography>
          <Box component='ul' sx={{ mt: 1, mb: 0, pl: 2 }}>
            <li>Aturan kampanye (rules)</li>
            <li>Riwayat penggunaan kampanye</li>
            <li>Data analitik kampanye</li>
          </Box>
        </Alert>

        <DialogContentText>
          Pastikan tidak ada pengguna yang masih menggunakan kampanye ini dan tidak ada transaksi yang sedang berjalan
          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 DeleteCampaignDialog