/**
 * Price Change Confirmation Dialog (Final Freeze Architecture)
 *
 * Displayed when the price changes between Preview and Submit
 * beyond the user's configured slippage threshold.
 *
 * @see Intent: blocklets/core/ai/intent/20260112-dynamic-price.md
 */

import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } from '@mui/material';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';

export interface PriceChangeConfirmProps {
  open: boolean;
  previewRate?: string;
  submitRate?: string;
  changePercent: number;
  onConfirm: () => void;
  onCancel: () => void;
  loading?: boolean;
}

export default function PriceChangeConfirm({
  open,
  previewRate = undefined,
  submitRate = undefined,
  changePercent,
  onConfirm,
  onCancel,
  loading = false,
}: PriceChangeConfirmProps) {
  const { t } = useLocaleContext();

  const changeDirection = changePercent > 0 ? 'increased' : 'decreased';
  const absChangePercent = Math.abs(changePercent);

  return (
    <Dialog
      open={open}
      onClose={loading ? undefined : onCancel}
      maxWidth="sm"
      fullWidth
      PaperProps={{
        sx: {
          borderRadius: 2,
        },
      }}>
      <DialogTitle
        sx={{
          display: 'flex',
          alignItems: 'center',
          gap: 1,
          pb: 1,
        }}>
        <WarningAmberIcon color="warning" />
        <Typography variant="h6" component="span">
          {t('payment.checkout.priceChange.title', { fallback: 'Price Changed' })}
        </Typography>
      </DialogTitle>

      <DialogContent>
        <Stack spacing={2}>
          <Typography variant="body1" color="text.secondary">
            {t('payment.checkout.priceChange.description', {
              fallback: `The exchange rate has ${changeDirection} by ${absChangePercent.toFixed(2)}% since you started this checkout.`,
              direction: changeDirection,
              percent: absChangePercent.toFixed(2),
            })}
          </Typography>

          {(previewRate || submitRate) && (
            <Box
              sx={{
                bgcolor: 'action.hover',
                borderRadius: 1,
                p: 2,
              }}>
              <Stack spacing={1}>
                {previewRate && (
                  <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Typography variant="body2" color="text.secondary">
                      {t('payment.checkout.priceChange.previewRate', { fallback: 'Preview Rate' })}:
                    </Typography>
                    <Typography variant="body2" fontFamily="monospace">
                      {previewRate}
                    </Typography>
                  </Box>
                )}
                {submitRate && (
                  <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Typography variant="body2" color="text.secondary">
                      {t('payment.checkout.priceChange.currentRate', { fallback: 'Current Rate' })}:
                    </Typography>
                    <Typography variant="body2" fontFamily="monospace">
                      {submitRate}
                    </Typography>
                  </Box>
                )}
                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                  <Typography variant="body2" color="text.secondary">
                    {t('payment.checkout.priceChange.change', { fallback: 'Change' })}:
                  </Typography>
                  <Typography
                    variant="body2"
                    fontWeight="bold"
                    color={changePercent > 0 ? 'error.main' : 'success.main'}>
                    {changePercent > 0 ? '+' : ''}
                    {changePercent.toFixed(2)}%
                  </Typography>
                </Box>
              </Stack>
            </Box>
          )}

          <Typography variant="body2" color="text.secondary">
            {t('payment.checkout.priceChange.confirm', {
              fallback: 'Do you want to continue with the new price?',
            })}
          </Typography>
        </Stack>
      </DialogContent>

      <DialogActions sx={{ px: 3, pb: 2 }}>
        <Button onClick={onCancel} disabled={loading} variant="outlined" color="inherit">
          {t('payment.checkout.priceChange.cancel', { fallback: 'Cancel' })}
        </Button>
        <Button onClick={onConfirm} disabled={loading} variant="contained" color="primary" autoFocus>
          {loading
            ? t('payment.checkout.priceChange.confirming', { fallback: 'Confirming...' })
            : t('payment.checkout.priceChange.accept', { fallback: 'Accept & Continue' })}
        </Button>
      </DialogActions>
    </Dialog>
  );
}