import { Alert, AlertTitle, Typography, Button, Box, CircularProgress, type SxProps } from '@mui/material';
import { ErrorOutline, Refresh } from '@mui/icons-material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useState } from 'react';

interface DynamicPricingUnavailableProps {
  error?: string;
  onRetry?: () => void | Promise<void>;
  showRetry?: boolean;
  sx?: SxProps;
}

export default function DynamicPricingUnavailable({
  error = undefined,
  onRetry = undefined,
  showRetry = true,
  sx = undefined,
}: DynamicPricingUnavailableProps) {
  const { t } = useLocaleContext();
  const [retrying, setRetrying] = useState(false);

  // Log technical errors to console, but don't display them to users
  if (error) {
    console.error('[Dynamic Pricing Error]', error);
  }

  const handleRetry = async () => {
    if (!onRetry || retrying) return;
    setRetrying(true);
    try {
      await onRetry();
    } finally {
      setRetrying(false);
    }
  };

  return (
    <Alert
      severity="warning"
      icon={<ErrorOutline />}
      sx={{
        borderRadius: 2,
        '& .MuiAlert-message': {
          width: '100%',
        },
        ...sx,
      }}>
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', width: '100%' }}>
        <Box>
          <AlertTitle sx={{ fontWeight: 600 }}>{t('payment.dynamicPricing.unavailable.title')}</AlertTitle>
          <Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.5 }}>
            {t('payment.dynamicPricing.unavailable.message')}
          </Typography>
        </Box>
        {showRetry && onRetry && (
          <Button
            size="small"
            variant="outlined"
            onClick={handleRetry}
            disabled={retrying}
            startIcon={retrying ? <CircularProgress size={16} /> : <Refresh />}
            sx={{ ml: 2, flexShrink: 0 }}>
            {t('payment.dynamicPricing.unavailable.retry')}
          </Button>
        )}
      </Box>
    </Alert>
  );
}