import React, { Component } from "react";
import { Box, Typography, Button } from "@mui/material";
import { withI18n } from "../../i18n/withTranslation.js";

class PaymentConfirmationDialog extends Component {
  render() {
    const {
      paymentCompletionData,
      isCompletingOrder,
      completionError,
      orderCompleted,
      onContinueShopping,
      onViewOrders,
    } = this.props;

    if (!paymentCompletionData) return null;

    return (
      <Box sx={{ 
        mb: 3, 
        p: 3, 
        border: '2px solid', 
        borderColor: paymentCompletionData.isSuccessful ? '#2e7d32' : '#d32f2f',
        borderRadius: 2,
        bgcolor: paymentCompletionData.isSuccessful ? '#e8f5e8' : '#ffebee'
      }}>
        <Typography variant="h5" sx={{ 
          mb: 2, 
          color: paymentCompletionData.isSuccessful ? '#2e7d32' : '#d32f2f',
          fontWeight: 'bold'
        }}>
          {paymentCompletionData.isSuccessful ? 
            (this.props.t ? this.props.t('payment.successful') : 'Zahlung erfolgreich!') : 
            (this.props.t ? this.props.t('payment.failed') : 'Zahlung fehlgeschlagen')}
        </Typography>
        
        {paymentCompletionData.isSuccessful ? (
          <>
            {orderCompleted ? (
              <Typography variant="body1" sx={{ mt: 2, color: '#2e7d32' }}>
{this.props.t ? this.props.t('payment.orderCompleted') : '🎉 Ihre Bestellung wurde erfolgreich abgeschlossen! Sie können jetzt Ihre Bestellungen einsehen.'}
              </Typography>
            ) : (
              <Typography variant="body1" sx={{ mt: 2, color: '#2e7d32' }}>
{this.props.t ? this.props.t('payment.orderProcessing') : 'Ihre Zahlung wurde erfolgreich verarbeitet. Die Bestellung wird automatisch abgeschlossen.'}
              </Typography>
            )}
          </>
        ) : (
          <Typography variant="body1" sx={{ mt: 2, color: '#d32f2f' }}>
{this.props.t ? this.props.t('payment.paymentError') : 'Ihre Zahlung konnte nicht verarbeitet werden. Bitte versuchen Sie es erneut oder wählen Sie eine andere Zahlungsmethode.'}
          </Typography>
        )}

        {isCompletingOrder && (
          <Typography variant="body2" sx={{ mt: 2, color: '#2e7d32', p: 2, bgcolor: '#e8f5e8', borderRadius: 1 }}>
            {this.props.t ? this.props.t('orders.processing') : 'Bestellung wird abgeschlossen...'}
          </Typography>
        )}

        {completionError && (
          <Typography variant="body2" sx={{ mt: 2, color: '#d32f2f', p: 2, bgcolor: '#ffcdd2', borderRadius: 1 }}>
            {completionError}
          </Typography>
        )}

        {orderCompleted && (
          <Box sx={{ mt: 3, display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
            <Button 
              onClick={onContinueShopping}
              variant="outlined"
              sx={{ 
                color: '#2e7d32', 
                borderColor: '#2e7d32',
                '&:hover': {
                  backgroundColor: 'rgba(46, 125, 50, 0.04)',
                  borderColor: '#1b5e20'
                }
              }}
            >
{this.props.t ? this.props.t('cart.continueShopping') : 'Weiter einkaufen'}
            </Button>
            <Button 
              onClick={onViewOrders}
              variant="contained"
              sx={{ 
                bgcolor: '#2e7d32',
                '&:hover': { bgcolor: '#1b5e20' }
              }}
            >
{this.props.t ? this.props.t('payment.viewOrders') : 'Zu meinen Bestellungen'}
            </Button>
          </Box>
        )}
      </Box>
    );
  }
}

export default withI18n()(PaymentConfirmationDialog);