import { Component } from 'react';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import { formatBackendError } from '../utils/backendError';

class BackendError extends Component {
  render() {
    const { error, title, onRetry, sx, action } = this.props;
    if (!error) return null;

    const formatted = formatBackendError(error);
    const heading = title || formatted.title;

    return (
      <Alert
        severity="error"
        sx={{ maxWidth: 720, ...sx }}
        action={action}
      >
        <AlertTitle>{heading}</AlertTitle>
        {formatted.detail ? (
          <Typography variant="body2" component="div" sx={{ mb: formatted.request ? 1 : 0 }}>
            {formatted.detail}
          </Typography>
        ) : null}
        {formatted.request ? (
          <Box
            component="code"
            sx={{
              display: 'block',
              fontSize: '0.75rem',
              color: 'text.secondary',
              fontFamily: 'monospace',
            }}
          >
            {formatted.request}
            {formatted.status != null ? ` → ${formatted.status}` : ''}
          </Box>
        ) : null}
        {onRetry ? (
          <Box sx={{ mt: 1.5 }}>
            <Button size="small" variant="outlined" color="inherit" onClick={onRetry}>
              Erneut versuchen
            </Button>
          </Box>
        ) : null}
      </Alert>
    );
  }
}

export default BackendError;