/**
 * @ai-summary Confirmation dialog for bulk actions
 * @ai-context Modal for confirming destructive bulk operations with item list
 */

import React from 'react';
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  List,
  ListItem,
  ListItemText,
  CircularProgress,
  Box,
} from '@mui/material';

/**
 * Props for BulkActionDialog component
 */
export interface BulkActionDialogProps {
  open: boolean;
  title: string;
  message: string;
  items: string[];
  onConfirm: () => void;
  onCancel: () => void;
  loading?: boolean;
  confirmText?: string;
  cancelText?: string;
}

/**
 * Confirmation dialog for bulk actions
 *
 * @example
 * ```tsx
 * <BulkActionDialog
 *   open={open}
 *   title="Delete 3 makes?"
 *   message="This will delete 15 dependent models. Continue?"
 *   items={['Honda', 'Toyota', 'Ford']}
 *   onConfirm={handleConfirm}
 *   onCancel={handleCancel}
 *   loading={deleting}
 * />
 * ```
 */
export const BulkActionDialog: React.FC<BulkActionDialogProps> = ({
  open,
  title,
  message,
  items,
  onConfirm,
  onCancel,
  loading = false,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
}) => {
  return (
    <Dialog
      open={open}
      onClose={loading ? undefined : onCancel}
      maxWidth="sm"
      fullWidth
      aria-labelledby="bulk-action-dialog-title"
    >
      <DialogTitle id="bulk-action-dialog-title">{title}</DialogTitle>

      <DialogContent>
        <Typography variant="body1" sx={{ mb: 2 }}>
          {message}
        </Typography>

        {items.length > 0 && (
          <Box
            sx={{
              maxHeight: 200,
              overflow: 'auto',
              border: 1,
              borderColor: 'divider',
              borderRadius: 1,
              bgcolor: 'background.default',
            }}
          >
            <List dense>
              {items.map((item, index) => (
                <ListItem key={index}>
                  <ListItemText
                    primary={item}
                    primaryTypographyProps={{
                      variant: 'body2',
                    }}
                  />
                </ListItem>
              ))}
            </List>
          </Box>
        )}
      </DialogContent>

      <DialogActions sx={{ px: 3, pb: 2 }}>
        <Button
          onClick={onCancel}
          disabled={loading}
          sx={{
            minWidth: 44,
            minHeight: 44,
            textTransform: 'none',
          }}
        >
          {cancelText}
        </Button>
        <Button
          onClick={onConfirm}
          disabled={loading}
          variant="contained"
          color="error"
          sx={{
            minWidth: 44,
            minHeight: 44,
            textTransform: 'none',
          }}
        >
          {loading ? (
            <CircularProgress size={24} color="inherit" />
          ) : (
            confirmText
          )}
        </Button>
      </DialogActions>
    </Dialog>
  );
};
