import { Box, Stack, Typography } from '@mui/material';
import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { tSafe } from '../../utils/format';

interface TotalDisplayProps {
  label?: string;
  total: string;
  usdEquivalent?: string | null;
}

// Split a price string like "1,234.56 TBA" into parts for display
function splitPrice(total: string): { prefix: string; integer: string; decimal: string; suffix: string } {
  if (!total) return { prefix: '', integer: '0', decimal: '', suffix: '' };
  const trimmed = total.trim();

  // Handle "$X.XX" format
  if (trimmed.startsWith('$')) {
    const numPart = trimmed.slice(1).trim();
    const dotIdx = numPart.indexOf('.');
    if (dotIdx >= 0) {
      return {
        prefix: '$',
        integer: numPart.slice(0, dotIdx),
        decimal: `.${numPart.slice(dotIdx + 1)}`,
        suffix: '',
      };
    }
    return { prefix: '$', integer: numPart, decimal: '', suffix: '' };
  }

  // Handle "123.45 TBA" or "0 TBA" format
  const parts = trimmed.split(/\s+/);
  const numStr = parts[0] || '0';
  const unit = parts.slice(1).join(' ');
  const dotIdx = numStr.indexOf('.');
  if (dotIdx >= 0) {
    return {
      prefix: '',
      integer: numStr.slice(0, dotIdx),
      decimal: `.${numStr.slice(dotIdx + 1)}`,
      suffix: unit,
    };
  }
  return { prefix: '', integer: numStr, decimal: '', suffix: unit };
}

export default function TotalDisplay({ label = undefined, total, usdEquivalent = undefined }: TotalDisplayProps) {
  const { t } = useLocaleContext();
  const { prefix, integer, decimal, suffix } = splitPrice(total);

  return (
    <Box sx={{ pt: 4, borderTop: '1px solid', borderColor: 'divider' }}>
      <Stack direction="row" justifyContent="space-between" alignItems="flex-end">
        {/* Left: label + promo link */}
        <Stack spacing={0.5} sx={{ pb: 1 }}>
          <Typography
            sx={{
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: '0.02em',
              color: 'text.disabled',
            }}>
            {label || tSafe(t, 'payment.checkout.totalDueToday', 'Total due today')}
          </Typography>
        </Stack>

        {/* Right: big price */}
        <Box sx={{ display: 'flex', alignItems: 'baseline', lineHeight: 1 }}>
          {/* Currency symbol / prefix */}
          {prefix && (
            <Typography component="span" sx={{ fontSize: 36, fontWeight: 500, color: 'text.primary', opacity: 0.4 }}>
              {prefix}
            </Typography>
          )}
          {/* Integer part — extra large */}
          <Typography
            component="span"
            sx={{
              fontSize: { xs: 54, md: 72 },
              fontWeight: 800,
              lineHeight: 1,
              letterSpacing: '-0.04em',
              color: 'text.primary',
            }}>
            {integer}
          </Typography>
          {/* Decimal part — lighter */}
          {decimal && (
            <Typography component="span" sx={{ fontSize: 36, fontWeight: 300, color: 'text.primary', opacity: 0.3 }}>
              {decimal}
            </Typography>
          )}
          {/* Currency unit */}
          {suffix && (
            <Typography
              component="span"
              sx={{ fontSize: 20, fontWeight: 700, color: 'text.disabled', ml: 1, textTransform: 'uppercase' }}>
              {suffix}
            </Typography>
          )}
        </Box>
      </Stack>

      {/* USD equivalent */}
      {usdEquivalent && (
        <Typography sx={{ fontSize: 12, color: 'text.disabled', textAlign: 'right', mt: 0.5, fontWeight: 500 }}>
          ≈ {usdEquivalent}
        </Typography>
      )}
    </Box>
  );
}