import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Typography,
  Box,
  Alert,
} from '@mui/material'
import { OrderSide, OrderType } from '../types'

interface OrderConfirmationDialogProps {
  open: boolean
  onClose: () => void
  onConfirm: () => void
  symbol: string
  side: OrderSide
  orderType: OrderType
  quantity: number
  price?: number
  stopPrice?: number
  takeProfitPrice?: number
  trailingPercent?: number
}

export default function OrderConfirmationDialog({
  open,
  onClose,
  onConfirm,
  symbol,
  side,
  orderType,
  quantity,
  price,
  stopPrice,
  takeProfitPrice,
  trailingPercent,
}: OrderConfirmationDialogProps) {
  const estimatedTotal = price ? quantity * price : null

  return (
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>
        Confirm {side.toUpperCase()} Order
      </DialogTitle>
      <DialogContent>
        <Box sx={{ mb: 2 }}>
          <Alert severity="warning" sx={{ mb: 2 }}>
            Please verify all details carefully before confirming.
          </Alert>
          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Typography variant="body2" color="text.secondary">Symbol:</Typography>
              <Typography variant="body2" fontWeight="bold">{symbol}</Typography>
            </Box>
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Typography variant="body2" color="text.secondary">Side:</Typography>
              <Typography 
                variant="body2" 
                fontWeight="bold"
                color={side === OrderSide.BUY ? 'success.main' : 'error.main'}
              >
                {side.toUpperCase()}
              </Typography>
            </Box>
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Typography variant="body2" color="text.secondary">Type:</Typography>
              <Typography variant="body2" fontWeight="bold">{orderType.replace('_', ' ')}</Typography>
            </Box>
            <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
              <Typography variant="body2" color="text.secondary">Quantity:</Typography>
              <Typography variant="body2" fontWeight="bold">{quantity.toFixed(8)}</Typography>
            </Box>
            {price && (
              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                <Typography variant="body2" color="text.secondary">Price:</Typography>
                <Typography variant="body2" fontWeight="bold">${price.toFixed(2)}</Typography>
              </Box>
            )}
            {stopPrice && (
              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                <Typography variant="body2" color="text.secondary">Stop Price:</Typography>
                <Typography variant="body2" fontWeight="bold">${stopPrice.toFixed(2)}</Typography>
              </Box>
            )}
            {takeProfitPrice && (
              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                <Typography variant="body2" color="text.secondary">Take Profit Price:</Typography>
                <Typography variant="body2" fontWeight="bold">${takeProfitPrice.toFixed(2)}</Typography>
              </Box>
            )}
            {trailingPercent && (
              <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                <Typography variant="body2" color="text.secondary">Trailing Percent:</Typography>
                <Typography variant="body2" fontWeight="bold">{(trailingPercent * 100).toFixed(2)}%</Typography>
              </Box>
            )}
            {estimatedTotal && (
              <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1, pt: 1, borderTop: 1, borderColor: 'divider' }}>
                <Typography variant="body1" fontWeight="bold">Est. Total:</Typography>
                <Typography variant="body1" fontWeight="bold">${estimatedTotal.toFixed(2)}</Typography>
              </Box>
            )}
          </Box>
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose}>Cancel</Button>
        <Button
          onClick={onConfirm}
          variant="contained"
          color={side === OrderSide.BUY ? 'success' : 'error'}
        >
          Confirm Order
        </Button>
      </DialogActions>
    </Dialog>
  )
}
