import React from 'react'
import { View, Text } from '@tarojs/components'
import { isGuest } from '@/utils/auth'

interface PriceProps {
  price: string | number
  original?: string | number
  size?: 'small' | 'normal' | 'large'
  color?: string
  symbol?: string
  /**
   * 游客脱敏模式：
   *  - 当用户未登录时，**不显示价格**，改成"登录后查看"占位文案
   *  - 用于过微信审核：游客可浏览商品列表/详情，但价格需登录后可见
   *  - 不传则维持原行为（游客也显示价格）
   */
  loginMask?: boolean
  /**
   * 自定义脱敏文案（仅在 loginMask=true 且游客态下生效）
   */
  maskText?: string
}

const Price: React.FC<PriceProps> = ({
  price,
  original,
  size = 'normal',
  color = '#ee0a24',
  symbol = '¥',
  loginMask = false,
  maskText = '登录后查看价格',
}) => {
  const fmt = (p: string | number) => {
    const num = typeof p === 'string' ? parseFloat(p) : p
    return isNaN(num) ? '0.00' : num.toFixed(2)
  }

  const sizeMap = {
    small: { mask: 'text-xs', symbol: 'text-xs', integer: 'text-sm font-medium', decimal: 'text-xs' },
    normal: { mask: 'text-sm', symbol: 'text-sm', integer: 'text-lg font-bold', decimal: 'text-sm' },
    large: { mask: 'text-base', symbol: 'text-lg', integer: 'text-2xl font-bold', decimal: 'text-lg' },
  }

  const cls = sizeMap[size]

  // 游客态 + 开启脱敏 -> 显示占位文案
  if (loginMask && isGuest()) {
    return (
      <View className='flex items-baseline'>
        <Text className={`${cls.mask} text-gray-400`}>{maskText}</Text>
      </View>
    )
  }

  return (
    <View className='flex items-baseline'>
      <Text className={`${cls.symbol} font-medium`} style={{ color }}>{symbol}</Text>
      <Text className={cls.integer} style={{ color }}>{fmt(price).split('.')[0]}</Text>
      <Text className={cls.decimal} style={{ color }}>.{fmt(price).split('.')[1]}</Text>
      {original && (
        <Text className='text-xs text-gray-400 line-through ml-1'>¥{fmt(original)}</Text>
      )}
    </View>
  )
}

export default Price