import React from 'react';
import { 
  Dialog, 
  DialogTitle, 
  DialogContent, 
  DialogContentText, 
  DialogActions, 
  Button, 
  Typography, 
  Box,
  IconButton,
  Paper
} from '@mui/material';
import { 
  Warning, 
  Close,
  CleaningServices
} from '@mui/icons-material';

interface ConfirmDialogProps {
  open: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  loading?: boolean;
}

const ConfirmDialog: React.FC<ConfirmDialogProps> = ({ 
  open, 
  onClose, 
  onConfirm, 
  title, 
  message, 
  confirmLabel = 'Confirm', 
  cancelLabel = 'Cancel',
  loading = false
}) => {
  return (
    <Dialog 
      open={open} 
      onClose={onClose}
      slotProps={{
        paper: {
          sx: {
            borderRadius: 4,
            p: 1,
            maxWidth: 400,
            border: 1,
            borderColor: 'divider',
            boxShadow: '0 24px 48px rgba(0,0,0,0.2)',
            bgcolor: 'background.paper',
            backgroundImage: 'none'
          }
        }
      }}
    >
      <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1.5, pb: 1 }}>
        <Box sx={{ 
          p: 1, 
          borderRadius: 2, 
          bgcolor: 'error.main', 
          color: 'white', 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          boxShadow: '0 4px 12px rgba(211, 47, 47, 0.4)'
        }}>
          <Warning fontSize="small" />
        </Box>
        <Typography variant="h6" sx={{ fontWeight: 800 }}>{title}</Typography>
        <Box sx={{ flexGrow: 1 }} />
        <IconButton size="small" onClick={onClose} disabled={loading}>
          <Close fontSize="small" />
        </IconButton>
      </DialogTitle>
      
      <DialogContent sx={{ pb: 2 }}>
        <DialogContentText sx={{ color: 'text.secondary', fontWeight: 500, lineHeight: 1.6 }}>
          {message}
        </DialogContentText>
      </DialogContent>
      
      <DialogActions sx={{ p: 2, pt: 0 }}>
        <Button 
          onClick={onClose} 
          color="inherit" 
          disabled={loading}
          sx={{ borderRadius: 2, textTransform: 'none', fontWeight: 700, px: 3 }}
        >
          {cancelLabel}
        </Button>
        <Button 
          onClick={onConfirm} 
          variant="contained" 
          color="error" 
          autoFocus 
          disabled={loading}
          startIcon={<CleaningServices />}
          sx={{ 
            borderRadius: 2, 
            textTransform: 'none', 
            fontWeight: 700, 
            px: 3,
            boxShadow: '0 8px 16px rgba(211, 47, 47, 0.25)',
            '&:hover': { boxShadow: '0 12px 20px rgba(211, 47, 47, 0.35)' }
          }}
        >
          {confirmLabel}
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default ConfirmDialog;
