<template>
  <div>
    <!-- 标签 -->
    <div v-if="label" class="text-sm text-gray-600 mb-2 flex items-center">
      <span v-if="required" class="text-red-500 mr-1">*</span>
      <span>{{ label }}</span>
      <span v-if="currencyText" class="text-gray-500">（{{ currencyText }}）</span>
    </div>

    <!-- 多币种模式（方案 2 - 未来扩展） -->
    <div v-if="multiCurrencyEnabled" class="mb-2">
      <div class="text-sm text-gray-600 mb-2">币种</div>
      <div class="flex gap-2">
        <button
          v-for="curr in supportedCurrencies"
          :key="curr.value"
          :class="[
            'px-4 py-2 rounded-lg text-sm border transition-colors',
            selectedCurrency === curr.value
              ? 'bg-blue-600 text-white border-blue-600'
              : 'bg-white text-gray-600 border-gray-200'
          ]"
          @tap="selectCurrency(curr.value)"
        >
          {{ curr.label }}
        </button>
      </div>
    </div>

    <!-- 保额显示区域（可点击） -->
    <div
      class="border border-gray-200 rounded-lg flex items-center overflow-hidden cursor-pointer"
      @tap="openKeyboard"
    >
      <div class="flex-1 p-3 text-sm">
        <span v-if="displayValue" class="text-gray-900">{{ displayValue }}</span>
        <span v-else class="text-gray-400">{{ placeholder }}</span>
      </div>
      <span class="text-sm text-gray-500 shrink-0 ml-2 mr-5">{{ currencySymbol }}</span>
    </div>

    <!-- 金额显示弹窗 -->
    <nut-popup
      v-model:visible="showAmountModal"
      position="center"
      :style="{ padding: '0', borderRadius: '24rpx', overflow: 'hidden' }"
      :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
      :close-on-click-overlay="false"
    >
      <view class="amount-modal">
        <!-- 背景装饰 -->
        <view class="amount-modal-bg">
          <view class="amount-modal-circle amount-modal-circle-1"></view>
          <view class="amount-modal-circle amount-modal-circle-2"></view>
          <view class="amount-modal-circle amount-modal-circle-3"></view>
        </view>

        <!-- 内容区域 -->
        <view class="amount-modal-content">
          <!-- 币种符号 -->
          <view class="amount-modal-currency">{{ currencySymbol }}</view>

          <!-- 金额数值 -->
          <view class="amount-modal-value">
            {{ formattedInputValue || '0.00' }}
          </view>

          <!-- 提示文字 -->
          <view class="amount-modal-hint">请输入金额</view>
        </view>
      </view>
    </nut-popup>

    <!-- 数字键盘 -->
    <nut-number-keyboard
      v-model:visible="showKeyboard"
      type="rightColumn"
      overlay
      :custom-key="customKey"
      confirm-text="完成"
      @input="onInput"
      @delete="onDelete"
      @confirm="onConfirm"
      @close="onClose"
    />
  </div>
</template>

<script setup>
/**
 * 保额键盘输入组件
 *
 * @description 点击后弹出数字键盘进行输入的保额组件
 *              - 单位转换：内部存储为分（整数），显示为元（带2位小数）
 *              - 币种支持：CNY、USD、HKD、EUR
 *              - 多币种模式：通过 FEATURE_FLAGS.MULTI_CURRENCY_ENABLED 控制
 *              - 支持弹窗嵌套：通过 GlobalPopupManager 注册为全局弹窗
 * @author Claude Code
 * @example
 * <!-- 固定币种模式 -->
 * <AmountKeyboard
 *   v-model="coverage"
 *   label="保额"
 *   currency="USD"
 *   placeholder="请输入保额"
 * />
 *
 * @example
 * <!-- 多币种模式 -->
 * <AmountKeyboard
 *   v-model="coverage"
 *   label="保额"
 *   :config="{ supported_currencies: ['CNY', 'USD'], default_currency: 'CNY' }"
 *   placeholder="请输入保额"
 * />
 */
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import Taro from '@tarojs/taro'
import { FEATURE_FLAGS, CURRENCY_SYMBOLS, CURRENCY_MAP } from '@/config/plan-templates'
import { useGlobalPopup } from './GlobalPopupManager.js'

/**
 * 组件属性
 */
const props = defineProps({
  /**
   * 标签文本
   * @type {string}
   */
  label: {
    type: String,
    default: ''
  },

  /**
   * 是否必填
   * @type {boolean}
   */
  required: {
    type: Boolean,
    default: false
  },

  /**
   * 占位符文本
   * @type {string}
   */
  placeholder: {
    type: String,
    default: '请输入保额'
  },

  /**
   * 绑定的值（单位：分）
   * @type {number}
   * @example 100000 表示 1000.00 元
   */
  modelValue: {
    type: Number,
    default: null
  },

  /**
   * 币种代码（固定币种模式）
   * @type {string}
   * @default 'CNY'
   */
  currency: {
    type: String,
    default: 'CNY'
  },

  /**
   * 模版配置（多币种模式）
   * @type {Object}
   * @property {Array<string>} supported_currencies - 支持的币种代码数组
   * @property {string} default_currency - 默认币种代码
   * @example { supported_currencies: ['CNY', 'USD'], default_currency: 'CNY' }
   */
  config: {
    type: Object,
    default: () => ({})
  }
})

/**
 * 组件事件
 */
const emit = defineEmits([
  /**
   * 更新值事件
   * @event update:modelValue
   * @param {number} value - 保额值（单位：分）
   */
  'update:modelValue'
])

/**
 * 判断是否启用多币种
 * @type {ComputedRef<boolean>}
 */
const multiCurrencyEnabled = computed(() => FEATURE_FLAGS.MULTI_CURRENCY_ENABLED)

/**
 * 当前选中的币种
 * @type {Ref<string>}
 */
const selectedCurrency = ref(props.config.default_currency || props.currency || 'CNY')

/**
 * 支持的币种列表（多币种模式）
 * @type {ComputedRef<Array<{label: string, symbol: string, value: string}>>}
 */
const supportedCurrencies = computed(() => {
  if (!multiCurrencyEnabled.value) return []

  return (props.config.supported_currencies || ['CNY'])
    .map(code => CURRENCY_MAP[code])
    .filter(Boolean)
})

/**
 * 当前币种符号
 * @type {ComputedRef<string>}
 * @example
 * // CNY -> '¥'
 * // USD -> '$'
 */
const currencySymbol = computed(() => {
  if (multiCurrencyEnabled.value) {
    // 多币种模式：使用用户选择的币种
    const curr = supportedCurrencies.value.find(c => c.value === selectedCurrency.value)
    return curr?.symbol || '¥'
  }

  // 固定币种模式：使用 props.currency
  return CURRENCY_SYMBOLS[props.currency] || '¥'
})

/**
 * 币种文本（用于标签显示）
 * @type {ComputedRef<string>}
 */
const currencyText = computed(() => {
  if (multiCurrencyEnabled.value) {
    const curr = supportedCurrencies.value.find(c => c.value === selectedCurrency.value)
    return curr?.label || ''
  }

  const CURRENCY_NAMES = {
    CNY: '人民币',
    USD: '美元',
    HKD: '港币',
    EUR: '欧元'
  }

  return CURRENCY_NAMES[props.currency] || ''
})

/**
 * 键盘显示状态
 * @type {Ref<boolean>}
 */
const showKeyboard = ref(false)

/**
 * 键盘打开时间戳（用于判断误触发关闭）
 * @type {Ref<number>}
 */
const keyboardOpenTime = ref(0)

/**
 * 键盘输入值（临时存储，字符串格式）
 * @type {Ref<string>}
 */
const inputValue = ref('')

/**
 * 金额弹窗显示状态
 * @type {Ref<boolean>}
 */
const showAmountModal = ref(false)

/**
 * 显示值（元，带2位小数）
 * @type {ComputedRef<string>}
 */
const displayValue = computed(() => {
  // 优先显示输入过程中的值
  if (inputValue.value) {
    return inputValue.value
  }
  // 如果没有输入值，显示表单的原始值
  if (props.modelValue !== null && props.modelValue !== undefined) {
    return (props.modelValue / 100).toFixed(2)
  }
  return ''
})

/**
 * 格式化输入值（带千分位分隔符）
 * @type {ComputedRef<string>}
 */
const formattedInputValue = computed(() => {
  if (!inputValue.value) return '0.00'

  // 解析数值
  const num = parseFloat(inputValue.value)
  if (Number.isNaN(num)) return '0.00'

  // 格式化为千分位
  const parts = num.toFixed(2).split('.')
  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  return parts.join('.')
})

/**
 * 自定义键盘按键
 * @type {Ref<Array<string>>}
 */
const customKey = ref(['.'])

/**
 * 使用全局弹窗管理器
 */
const { registerPopup, activatePopup, deactivatePopup } = useGlobalPopup()

/**
 * 数字键盘弹窗 ID
 * @type {Ref<string|null>}
 */
const keyboardPopupId = ref(null)

/**
 * 组件挂载时注册弹窗
 */
onMounted(() => {
  keyboardPopupId.value = registerPopup()
})

/**
 * 组件卸载时取消注册
 */
onUnmounted(() => {
  if (keyboardPopupId.value) {
    deactivatePopup(keyboardPopupId.value)
  }
})

/**
 * 监听键盘显示状态
 */
watch(showKeyboard, (newValue) => {
  if (!keyboardPopupId.value) {
    return
  }

  if (newValue) {
    // 键盘打开：激活全局弹窗，通知父弹窗隐藏 footer
    activatePopup(keyboardPopupId.value)
    // 记录打开时间
    keyboardOpenTime.value = Date.now()
  } else {
    // 键盘关闭：停用全局弹窗，通知父弹窗恢复 footer
    deactivatePopup(keyboardPopupId.value)
    // 同步关闭金额弹窗
    showAmountModal.value = false
  }
})

/**
 * 打开键盘
 */
const openKeyboard = () => {
  // 初始化键盘值为当前值（元），如果没有值则为空
  if (props.modelValue !== null && props.modelValue !== undefined) {
    inputValue.value = (props.modelValue / 100).toFixed(2)
  } else {
    inputValue.value = ''
  }

  showKeyboard.value = true
  showAmountModal.value = true
}

/**
 * 键盘输入处理
 * @param {string} val - 输入值（单个字符）
 */
const onInput = (val) => {
  // 如果输入的是小数点，检查是否已经有小数点
  if (val === '.' && inputValue.value.includes('.')) {
    return
  }

  // 如果输入的是数字，检查小数点后的位数
  if (val >= '0' && val <= '9') {
    const parts = inputValue.value.split('.')
    // 如果已经有小数点，并且小数点后有2位，则忽略输入
    if (parts.length === 2 && parts[1]?.length >= 2) {
      return
    }
  }

  // nut-number-keyboard 的 @input 事件传入的是单个字符，需要累加
  if (!inputValue.value) {
    // 初始状态，确保是字符串
    inputValue.value = String(val)
  } else {
    // 累加输入，确保两边都是字符串进行连接
    inputValue.value = String(inputValue.value) + String(val)
  }
}

/**
 * 删除键处理
 */
const onDelete = () => {
  if (!inputValue.value) return

  // 删除最后一个字符
  inputValue.value = inputValue.value.slice(0, -1)
}

/**
 * 完成按钮点击处理
 */
const onConfirm = () => {
  // 将元转换为分，保留两位小数
  let yuan = parseFloat(inputValue.value || '0')
  if (!Number.isNaN(yuan)) {
    // 先保留两位小数，再转换为分
    const formattedYuan = parseFloat(yuan.toFixed(2))
    const cents = Math.round(formattedYuan * 100)

    emit('update:modelValue', cents)
  }

  // 关闭键盘和金额弹窗
  showKeyboard.value = false
  showAmountModal.value = false
}

/**
 * 关闭键盘认处
 */
const onClose = () => {
  // 只关闭金额弹窗，让 showKeyboard 自然变化触发 watch 处理 GlobalPopupManager
  showAmountModal.value = false
}

/**
 * 选择币种（多币种模式）
 * @param {string} value - 币种代码
 */
const selectCurrency = (value) => {
  selectedCurrency.value = value
}
</script>

<style lang="less">
/**
 * 组件样式
 */
.cursor-pointer {
  cursor: pointer;
}

.amount-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 500rpx;
  min-height: 360rpx;
  padding: 60rpx 40rpx;
  overflow: hidden;

  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.1;
  }

  &-circle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.15;
  }

  &-circle-1 {
    width: 400rpx;
    height: 400rpx;
    top: -200rpx;
    right: -100rpx;
  }

  &-circle-2 {
    width: 300rpx;
    height: 300rpx;
    bottom: -100rpx;
    left: -80rpx;
  }

  &-circle-3 {
    width: 200rpx;
    height: 200rpx;
    top: 50%;
    right: 20%;
  }

  &-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &-currency {
    font-size: 48rpx;
    font-weight: bold;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --webkit-background-clip: text;
    --webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 20rpx;
  }

  &-value {
    font-size: 88rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.2;
    margin-bottom: 16rpx;
  }

  &-hint {
    font-size: 28rpx;
    color: #999;
  }
}
</style>