import React from 'react'
import { View, Text } from '@tarojs/components'
import { Popup, Button } from '@nutui/nutui-react-taro'
import { Close } from '@nutui/icons-react-taro'

interface FreezeMoneyModalProps {
  visible: boolean
  amount: string
  onClose: () => void
}

/**
 * 待使用明细弹窗组件
 * 展示待使用（冻结中）金额和解冻规则说明
 */
const FreezeMoneyModal: React.FC<FreezeMoneyModalProps> = ({
  visible,
  amount,
  onClose
}) => {
  // 格式化金额，保留2位小数
  const formatAmount = (value: string | number): string => {
    const num = typeof value === 'string' ? parseFloat(value) : value
    if (isNaN(num)) return '0.00'
    return num.toFixed(2)
  }

  return (
    <Popup
      visible={visible}
      style={{ padding: '0', borderRadius: '16px', overflow: 'hidden' }}
      onClose={onClose}
      closeOnOverlayClick={true}
      position="center"
    >
      <View className="w-72 bg-white">
        {/* 头部标题 */}
        <View className="relative px-4 py-4 border-b border-gray-100">
          <Text className="text-lg font-semibold text-gray-800 text-center block">
            待使用明细
          </Text>
          <View
            className="absolute right-3 top-1 -translate-y-1 p-1"
            onClick={onClose}
          >
            <Close size={20} className="text-gray-400" />
          </View>
        </View>

        {/* 金额展示区域 */}
        <View className="px-6 py-8 text-center">
          <Text className="text-sm text-gray-500 mb-2 block">
            待使用（冻结中）
          </Text>
          <View className="flex items-baseline justify-center">
            <Text className="text-2xl font-bold text-gray-800">¥</Text>
            <Text className="text-4xl font-bold text-gray-800 ml-1">
              {formatAmount(amount)}
            </Text>
          </View>
        </View>

        {/* 分隔线 */}
        <View className="mx-6 h-px bg-gray-100" />

        {/* 温馨提示区域 */}
        <View className="px-6 py-6">
          <Text className="text-sm font-medium text-gray-700 mb-3 block">
            温馨提示：
          </Text>
          <Text className="text-sm text-gray-500 leading-relaxed block">
            需要直推用户进行下单配送后方可解冻到待提现资金组
          </Text>
        </View>

        {/* 底部按钮 */}
        <View className="px-6 pb-6">
          <Button
            type="primary"
            block
            onClick={onClose}
            style={{
              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              border: 'none',
              borderRadius: '8px',
              height: '44px',
              lineHeight: '44px'
            }}
          >
            关闭
          </Button>
        </View>
      </View>
    </Popup>
  )
}

export default FreezeMoneyModal