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

    <!-- 触发区域 -->
    <view
      class="flex justify-between items-center border border-gray-200 rounded-lg p-3 bg-gray-50"
      @tap="openInput"
    >
      <text :class="displayValue ? 'text-gray-900' : 'text-gray-400'" class="text-sm">
        {{ displayValue || placeholder }}
      </text>
      <IconFont name="right" size="14" color="#9CA3AF" />
    </view>

    <!-- 自定义输入弹窗 -->
    <nut-popup
      v-model:visible="showInputModal"
      position="bottom"
      :overlay="true"
      :close-on-click-overlay="false"
      :style="{ padding: '0', borderRadius: '24rpx 24rpx 0 0', overflow: 'hidden', height: '40%' }"
      :overlay-style="{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }"
    >
      <view class="flex flex-col bg-white">
        <!-- 标题栏 -->
        <view class="flex justify-between items-center p-4 border-b border-gray-100">
          <text class="text-base font-semibold text-gray-900">{{ inputLabel || '请输入提取期' }}</text>
          <view class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100" @tap="onCancel">
            <text class="text-xl text-gray-500 leading-none">×</text>
          </view>
        </view>

        <!-- 输入区域 -->
        <view class="p-4">
          <!-- 数字输入 + 单位 -->
          <view class="flex items-center border border-gray-300 rounded-lg px-4 py-3 mb-3 bg-gray-50">
            <input
              v-model="inputValue"
              class="flex-1 text-base text-gray-900 bg-transparent border-none outline-none"
              type="digit"
              :placeholder="inputPlaceholder"
              @input="onInputChange"
            />
            <text class="text-base text-gray-500 ml-2">年</text>
          </view>

          <!-- 验证提示 -->
          <view class="mb-4 min-h-[20rpx]" :class="isValid && inputValue ? 'text-green-500' : 'text-gray-500'">
            <text v-if="!inputValue" class="text-xs">{{ validationHint }}</text>
            <text v-else-if="isValid" class="text-xs">✓ 格式正确</text>
            <text v-else class="text-xs text-red-500">✗ {{ validationError }}</text>
          </view>

          <!-- 快捷选项 -->
          <view class="flex flex-wrap items-center gap-2">
            <text class="text-sm text-gray-500">快捷选项：</text>
            <view
              v-for="option in quickOptions"
              :key="option"
              class="px-4 py-2 rounded-lg border text-sm transition-colors"
              :class="inputValue === option ? 'bg-blue-50 border-blue-500 text-blue-600' : 'bg-white border-gray-300 text-gray-700'"
              @tap="selectQuickOption(option)"
            >
              <text>{{ option }}</text>
            </view>
          </view>
        </view>

        <!-- 操作按钮 -->
        <view class="flex gap-3 p-4 border-t border-gray-100">
          <view
            class="flex-1 h-11 flex items-center justify-center rounded-lg text-base bg-gray-100 text-gray-700"
            @tap="onCancel"
          >
            <text>取消</text>
          </view>
          <view
            class="flex-1 h-11 flex items-center justify-center rounded-lg text-base transition-colors"
            :class="canConfirm ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-400'"
            @tap="onConfirm"
          >
            <text>确定</text>
          </view>
        </view>
      </view>
    </nut-popup>
  </view>
</template>

<script setup>
/**
 * 提取期自定义输入组件
 *
 * @description 用于输入自定义的提取期，支持整数年期（1-100年）和快捷选项
 *              - 整数约束：只接受整数年期（1-100）
 *              - 快捷选项：终身、一笔过
 *              - 实时验证：输入时即时反馈格式是否正确
 *              - 可扩展：预留 customValidators 接口支持未来格式扩展
 *
 * @module components/plan/PlanFields/PeriodInput
 * @author Claude Code
 * @version 1.0.0
 *
 * @example
 * <PeriodInput
 *   v-model:visible="showPeriodInput"
 *   v-model="periodValue"
 *   label="提取期"
 *   inputLabel="请输入提取期"
 *   :validation-rules="{ min: 1, max: 100 }"
 *   @confirm="handlePeriodConfirm"
 * />
 */
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import IconFont from '@/components/icons/IconFont.vue'
import { useGlobalPopup } from './GlobalPopupManager.js'

/**
 * 组件属性
 */
const props = defineProps({
  /**
   * 弹窗显示状态（v-model:visible）
   * @type {boolean}
   */
  visible: {
    type: Boolean,
    default: false
  },

  /**
   * 绑定的值（v-model）
   * @type {string}
   */
  modelValue: {
    type: String,
    default: ''
  },

  /**
   * 标签文本
   * @type {string}
   */
  label: {
    type: String,
    default: ''
  },

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

  /**
   * 占位符文本
   * @type {string}
   */
  placeholder: {
    type: String,
    default: '请选择或输入提取期'
  },

  /**
   * 弹窗内输入提示文本
   * @type {string}
   */
  inputLabel: {
    type: String,
    default: '请输入提取期'
  },

  /**
   * 输入框占位符
   * @type {string}
   */
  inputPlaceholder: {
    type: String,
    default: '请输入年数'
  },

  /**
   * 验证规则
   * @type {Object}
   * @property {number} min - 最小年期（默认1）
   * @property {number} max - 最大年期（默认100）
   * @property {string[]} allowed_formats - 允许的非年期格式（如['终身', '一笔过']）
   * @property {Function[]} custom_validators - 自定义验证函数数组（预留扩展）
   */
  validationRules: {
    type: Object,
    default: () => ({
      min: 1,
      max: 100,
      allowed_formats: ['终身', '一笔过'],
      custom_validators: []
    })
  }
})

/**
 * 组件事件
 */
const emit = defineEmits([
  /**
   * 更新弹窗显示状态（v-model:visible）
   * @event update:visible
   * @param {boolean} value - 弹窗显示状态
   */
  'update:visible',

  /**
   * 更新绑定值（v-model）
   * @event update:modelValue
   * @param {string} value - 选中的提取期值
   */
  'update:modelValue',

  /**
   * 确认输入事件
   * @event confirm
   * @param {string} value - 确认的提取期值
   */
  'confirm',

  /**
   * 取消输入事件
   * @event cancel
   */
  'cancel'
])

/**
 * 使用全局弹窗管理器
 * @description 当弹窗打开时，通知父弹窗隐藏底部按钮
 */
const { registerPopup, activatePopup, deactivatePopup } = useGlobalPopup()

/**
 * 输入弹窗 ID
 * @type {Ref<string|null>}
 */
const inputPopupId = ref(null)

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

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

/**
 * 弹窗显示状态
 */
const showInputModal = ref(false)

/**
 * 输入框的值（原始输入）
 */
const inputValue = ref('')

/**
 * 当前验证状态
 */
const isValid = ref(false)

/**
 * 验证错误信息
 */
const validationError = ref('')

/**
 * 验证提示信息（无输入时显示）
 */
const validationHint = ref('')

/**
 * 快捷选项列表
 */
const quickOptions = computed(() => {
  return props.validationRules?.allowed_formats || ['终身', '一笔过']
})

/**
 * 显示的值
 */
const displayValue = computed(() => {
  return props.modelValue || ''
})

/**
 * 是否可以确认
 */
const canConfirm = computed(() => {
  return isValid.value && inputValue.value
})

/**
 * 监听 visible prop 变化
 */
watch(() => props.visible, (newVal) => {
  showInputModal.value = newVal
  if (newVal) {
    // 打开弹窗时，初始化输入值
    initInputValue()
  }
})

/**
 * 监听弹窗状态变化，同步到父组件
 */
watch(showInputModal, (newVal) => {
  if (newVal) {
    // 弹窗打开：激活全局弹窗，通知父弹窗隐藏 footer
    if (inputPopupId.value) {
      activatePopup(inputPopupId.value)
    }
  } else {
    // 弹窗关闭：停用全局弹窗，通知父弹窗恢复 footer
    if (inputPopupId.value) {
      deactivatePopup(inputPopupId.value)
    }
    emit('update:visible', false)
  }
})

/**
 * 监听输入值变化，触发验证
 */
watch(inputValue, () => {
  // 每次输入值变化都触发验证（防止 @input 事件丢失）
  validateInput()
})

/**
 * 初始化输入值
 */
const initInputValue = () => {
  if (props.modelValue) {
    // 如果是快捷选项，直接使用
    if (quickOptions.value.includes(props.modelValue)) {
      inputValue.value = props.modelValue
    } else {
      // 如果是年期格式，提取数字
      const match = props.modelValue.match(/^(\d+)年$/)
      if (match) {
        inputValue.value = match[1] // 只存储数字
      } else {
        inputValue.value = props.modelValue
      }
    }
  } else {
    inputValue.value = ''
  }
  validateInput()
}

/**
 * 打开输入弹窗
 */
const openInput = () => {
  emit('update:visible', true)
}

/**
 * 输入变化处理
 */
const onInputChange = () => {
  validateInput()
}

/**
 * 选择快捷选项
 */
const selectQuickOption = (option) => {
  inputValue.value = option
  validateInput()
}

/**
 * 验证输入
 * @returns {boolean} 是否有效
 */
const validateInput = () => {
  const rules = props.validationRules || {}
  const value = inputValue.value.trim()

  // 空值
  if (!value) {
    isValid.value = false
    validationError.value = ''
    validationHint.value = `请输入${rules.min || 1}-${rules.max || 100}之间的整数，或选择快捷选项`
    return false
  }

  // 快捷选项（终身、一笔过等）
  if (quickOptions.value.includes(value)) {
    isValid.value = true
    validationError.value = ''
    validationHint.value = ''
    return true
  }

  // 数字年期验证
  const num = Number(value)

  // 检查是否为有效数字
  if (Number.isNaN(num)) {
    isValid.value = false
    validationError.value = '请输入数字'
    validationHint.value = ''
    return false
  }

  // 检查是否为整数（核心要求）
  if (!Number.isInteger(num)) {
    isValid.value = false
    validationError.value = '年期必须是整数'
    validationHint.value = ''
    return false
  }

  // 检查范围
  const min = rules.min ?? 1
  const max = rules.max ?? 100

  if (num < min) {
    isValid.value = false
    validationError.value = `年期不能小于${min}年`
    validationHint.value = ''
    return false
  }

  if (num > max) {
    isValid.value = false
    validationError.value = `年期不能大于${max}年`
    validationHint.value = ''
    return false
  }

  // 自定义验证器（预留扩展）
  if (rules.custom_validators && rules.custom_validators.length > 0) {
    for (const validator of rules.custom_validators) {
      const result = validator(value)
      if (result.valid === false) {
        isValid.value = false
        validationError.value = result.error || '格式不正确'
        validationHint.value = ''
        return false
      }
    }
  }

  // 验证通过
  isValid.value = true
  validationError.value = ''
  validationHint.value = ''
  return true
}

/**
 * 确认输入
 */
const onConfirm = () => {
  if (!canConfirm.value) return

  let finalValue = inputValue.value

  // 如果是纯数字，添加"年"单位
  const num = Number(inputValue.value)
  if (!Number.isNaN(num) && Number.isInteger(num)) {
    finalValue = `${num}年`
  }

  emit('update:modelValue', finalValue)
  emit('confirm', finalValue)
  showInputModal.value = false
}

/**
 * 取消输入
 */
const onCancel = () => {
  inputValue.value = ''
  isValid.value = false
  showInputModal.value = false
  emit('cancel')
}
</script>

<style lang="less" scoped>
/* 组件样式（如有需要可在此补充 TailwindCSS 无法覆盖的样式） */
</style>