import React from 'react';

interface CurrencyDisplayProps {
  amount: number;
  currency: string;
  showSymbol?: boolean;
  decimalPlaces?: number;
  className?: string;
  style?: React.CSSProperties;
}

// 货币符号映射
const currencySymbols: Record<string, string> = {
  USD: '$',
  EUR: '€',
  GBP: '£',
  JPY: '¥',
  CNY: '¥',
  AUD: 'A$',
  CAD: 'C$',
  CHF: 'Fr',
  HKD: 'HK$',
  SGD: 'S$',
  KRW: '₩',
  INR: '₹',
  BRL: 'R$',
  RUB: '₽',
  MXN: 'MX$',
  NZD: 'NZ$',
};

// 货币格式配置
const currencyFormats: Record<string, {
  symbolPosition: 'prefix' | 'suffix';
  decimalSeparator: string;
  thousandsSeparator: string;
  defaultDecimalPlaces: number;
}> = {
  USD: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  EUR: { symbolPosition: 'prefix', decimalSeparator: ',', thousandsSeparator: '.', defaultDecimalPlaces: 2 },
  GBP: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  JPY: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 0 },
  CNY: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  AUD: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  CAD: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  CHF: { symbolPosition: 'suffix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  HKD: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  SGD: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  KRW: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 0 },
  INR: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  BRL: { symbolPosition: 'prefix', decimalSeparator: ',', thousandsSeparator: '.', defaultDecimalPlaces: 2 },
  RUB: { symbolPosition: 'prefix', decimalSeparator: ',', thousandsSeparator: ' ', defaultDecimalPlaces: 2 },
  MXN: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
  NZD: { symbolPosition: 'prefix', decimalSeparator: '.', thousandsSeparator: ',', defaultDecimalPlaces: 2 },
};

export const CurrencyDisplay: React.FC<CurrencyDisplayProps> = ({
  amount,
  currency,
  showSymbol = true,
  decimalPlaces,
  className = '',
  style,
}) => {
  // 获取货币格式配置
  const formatConfig = currencyFormats[currency] || {
    symbolPosition: 'prefix',
    decimalSeparator: '.',
    thousandsSeparator: ',',
    defaultDecimalPlaces: 2,
  };

  // 获取货币符号
  const symbol = currencySymbols[currency] || currency;

  // 确定小数位数
  const decimals = decimalPlaces !== undefined ? decimalPlaces : formatConfig.defaultDecimalPlaces;

  // 格式化金额
  const formattedAmount = amount.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, formatConfig.thousandsSeparator);

  // 构建显示内容
  let displayContent = '';
  if (showSymbol) {
    if (formatConfig.symbolPosition === 'prefix') {
      displayContent = `${symbol}${formattedAmount}`;
    } else {
      displayContent = `${formattedAmount} ${symbol}`;
    }
  } else {
    displayContent = formattedAmount;
  }

  return (
    <span className={className} style={style}>
      {displayContent}
    </span>
  );
};

export default CurrencyDisplay;
