<template>
  <view class="min-h-screen bg-gray-50 p-5 pb-24">
    <!-- Avatar -->
    <view class="flex flex-col items-center py-8" @click="changeAvatar">
      <view
        class="w-24 h-24 rounded-full bg-gray-100 flex items-center justify-center mb-2 overflow-hidden"
      >
        <image
          :src="formData.avatar_url || defaultAvatar"
          class="w-full h-full"
          mode="aspectFill"
        />
      </view>
      <view class="flex items-center justify-center">
        <text class="text-gray-500 text-sm mr-1">上传头像</text>
        <Ask size="15" color="#888" @tap.stop="showAvatarTipDialog = true" />
      </view>
    </view>

    <!-- Form -->
    <view class="space-y-6">
      <!-- Nickname -->
      <view class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-2">昵称</label>
        <view class="bg-white rounded-xl p-2 border border-gray-200">
          <nut-input
            v-model="formData.nickname"
            placeholder="请输入昵称"
            :border="false"
            class="!bg-transparent !border-none !p-0 text-base"
          />
        </view>
      </view>

      <!-- birth_date -->
      <view class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-2">出生年月</label>
        <view class="bg-white rounded-xl p-4 border border-gray-200" @click="showDatePicker = true">
          <view class="flex justify-between items-center">
            <text
              :class="{
                'text-gray-400': !formData.birth_date,
                'text-gray-900': formData.birth_date,
              }"
              class="text-base"
            >
              {{ formData.birth_date || '-/-/-/' }}
            </text>
            <DateIcon size="20" color="#888" />
          </view>
        </view>
        <text class="text-red-500 text-xs mt-1 block"
          >注意：出生年月填写后不可修改，请仔细确认</text
        >
      </view>

      <!-- gender -->
      <view class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-2">性别</label>
        <view
          class="bg-white rounded-xl p-4 border border-gray-200"
          @click="showGenderPicker = true"
        >
          <view class="flex justify-between items-center">
            <text
              :class="{
                'text-gray-400': !formData.gender_text,
                'text-gray-900': formData.gender_text,
              }"
              class="text-base"
            >
              {{ formData.gender_text || '请选择' }}
            </text>
            <Right size="16" color="#888" />
          </view>
        </view>
      </view>

      <!-- wheelchair_needed -->
      <view class="mb-6">
        <label class="block text-sm font-medium text-gray-700 mb-2">是否需要轮椅出行</label>
        <view
          class="bg-white rounded-xl p-4 border border-gray-200"
          @click="showWheelchairPicker = true"
        >
          <view class="flex justify-between items-center">
            <text
              :class="{
                'text-gray-400': !formData.wheelchair_text,
                'text-gray-900': formData.wheelchair_text,
              }"
              class="text-base"
            >
              {{ formData.wheelchair_text || '请选择' }}
            </text>
            <Right size="16" color="#888" />
          </view>
        </view>
      </view>
    </view>

    <!-- Save Button -->
    <view class="fixed bottom-0 left-0 right-0 p-4 bg-white border-t border-gray-100">
      <nut-button
        type="primary"
        size="large"
        :color="isFormValid ? THEME_COLORS.PRIMARY : '#D8D8D8'"
        block
        @click="handleSave"
        :disabled="!isFormValid"
        >保存</nut-button
      >
    </view>

    <!-- Popups -->
    <nut-popup v-model:visible="showDatePicker" position="bottom">
      <nut-date-picker
        v-model="currentDate"
        @confirm="onDateConfirm"
        @cancel="showDatePicker = false"
        :min-date="minDate"
        :max-date="maxDate"
        title="选择出生年月"
      ></nut-date-picker>
    </nut-popup>

    <nut-popup v-model:visible="showWheelchairPicker" position="bottom">
      <nut-picker
        v-model="wheelchairValue"
        :columns="wheelchairColumns"
        @confirm="onWheelchairConfirm"
        @cancel="showWheelchairPicker = false"
        title="是否需要轮椅出行"
      ></nut-picker>
    </nut-popup>

    <nut-popup v-model:visible="showGenderPicker" position="bottom">
      <nut-picker
        v-model="genderValue"
        :columns="genderColumns"
        @confirm="onGenderConfirm"
        @cancel="showGenderPicker = false"
        title="选择性别"
      ></nut-picker>
    </nut-popup>

    <nut-image-preview v-model:show="previewVisible" :images="previewImages" />

    <!-- 头像上传须知对话框 -->
    <nut-dialog v-model:visible="showAvatarTipDialog" title="头像上传须知">
      <template #default>
        <view class="text-gray-700 leading-loose text-sm text-left break-words">
          <view class="mb-2">1. 头像大小不能超过5MB</view>
          <view class="mb-2">2. 头像格式为jpg、jpeg、png</view>
          <view>3. 头像未通过审核，可能原因：色情 / 暴恐内容、敏感人物、违规广告</view>
        </view>
      </template>
      <template #footer>
        <nut-button
          @click="showAvatarTipDialog = false"
          type="primary"
          size="normal"
          :color="THEME_COLORS.PRIMARY"
          block
        >
          我知道了
        </nut-button>
      </template>
    </nut-dialog>
  </view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import Taro, { useLoad } from '@tarojs/taro'
import { Date as DateIcon, Right, Ask } from '@nutui/icons-vue-taro'
import BASE_URL from '@/utils/config'
// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
// 获取接口信息
import { updateUserProfileAPI } from '@/api/user'
import { buildUpdateUserProfilePayload } from '@/utils/userProfile'
// 导入主题颜色
import { THEME_COLORS } from '@/utils/config'

/**
 * @description 表单数据
 */
const formData = reactive({
  avatar_url: '',
  nickname: '',
  birth_date: '',
  wheelchair_needed: null,
  wheelchair_text: '',
  gender: null,
  gender_text: '',
  qiniu_audit: '', // 图片审核信息
})

/**
 * @description 注册来源补充参数
 */
const registerSourceParams = reactive({
  reg_source: '',
  reg_stage_id: '',
})

/**
 * @description 检查表单是否有效
 */
const isFormValid = computed(() => {
  return (
    formData.nickname &&
    formData.birth_date &&
    formData.wheelchair_needed !== null &&
    formData.gender !== null
  )
})

// --- Avatar Tip Dialog ---
/**
 * @description 控制头像上传须知对话框显示
 */
const showAvatarTipDialog = ref(false)

// --- Date Picker ---
/**
 * @description 控制日期选择器显示
 */
const showDatePicker = ref(false)
/**
 * @description 最小可选日期
 */
const minDate = new Date(1920, 0, 1)
/**
 * @description 最大可选日期
 */
const maxDate = new Date()
/**
 * @description 当前选中的日期
 */
const currentDate = ref(new Date())

/**
 * @description 确认选择日期
 * @param {object} param0 - 包含 selectedValue 的对象
 */
const onDateConfirm = ({ selectedValue }) => {
  formData.birth_date = selectedValue.join('-')
  showDatePicker.value = false
}

// --- wheelchair_needed Picker ---
/**
 * @description 控制轮椅选择器显示
 */
const showWheelchairPicker = ref(false)
/**
 * @description 当前选中的轮椅选项
 */
const wheelchairValue = ref([])
/**
 * @description 轮椅选择器选项
 */
const wheelchairColumns = ref([
  { text: '是', value: 1 },
  { text: '否', value: 0 },
])

// --- Gender Picker ---
/**
 * @description 控制性别选择器显示
 */
const showGenderPicker = ref(false)
/**
 * @description 当前选中的性别选项
 */
const genderValue = ref([])
/**
 * @description 性别选择器选项
 */
const genderColumns = ref([
  { text: '女', value: 0 },
  { text: '男', value: 1 },
])

/**
 * @description 确认选择性别选项
 * @param {object} param0 - 包含 selectedValue 和 selectedOptions 的对象
 */
const onGenderConfirm = ({ selectedValue, selectedOptions }) => {
  formData.gender = selectedValue[0]
  formData.gender_text = selectedOptions.map(option => option.text).join('')
  showGenderPicker.value = false
}

/**
 * @description 确认选择轮椅选项
 * @param {object} param0 - 包含 selectedValue 和 selectedOptions 的对象
 */
const onWheelchairConfirm = ({ selectedValue, selectedOptions }) => {
  formData.wheelchair_needed = selectedValue[0]
  formData.wheelchair_text = selectedOptions.map(option => option.text).join('')
  showWheelchairPicker.value = false
}

// --- Avatar ---
/**
 * @description 控制图片预览显示
 */
const previewVisible = ref(false)
/**
 * @description 预览的图片列表
 */
const previewImages = ref([])

/**
 * @description 更换头像
 */
const changeAvatar = () => {
  Taro.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: res => {
      const tempFile = res.tempFiles[0]
      if (tempFile.size > 5 * 1024 * 1024) {
        Taro.showToast({
          title: '图片大小不能超过5MB',
          icon: 'none',
        })
        return
      }

      Taro.showLoading({ title: '上传中...' })

      Taro.uploadFile({
        url: BASE_URL + '/admin/?m=srv&a=upload&image_audit=1',
        filePath: tempFile.path,
        name: 'file',
        success: uploadRes => {
          Taro.hideLoading()
          const data = JSON.parse(uploadRes.data)
          if (data.code === 0) {
            // 检查是否为审核不通过
            if (data.data.audit_code === -1) {
              Taro.showModal({
                title: '温馨提示',
                content: data.msg,
                showCancel: false,
              }).then(res => {
                if (res.confirm) {
                  // 点击了确认按钮
                }
              })
            } else {
              formData.avatar_url = data.data.src
              formData.qiniu_audit = data.data.audit_result
              Taro.showToast({ title: '上传成功', icon: 'success' })
            }
          } else {
            Taro.showToast({ title: data.msg || '上传失败', icon: 'none' })
          }
        },
        fail: () => {
          Taro.hideLoading()
          Taro.showToast({ title: '上传失败，请稍后重试', icon: 'none' })
        },
      })
    },
    fail: () => {
      // Taro.showToast({ title: '选择图片失败', icon: 'none' });
    },
  })
}

// --- Save ---
/**
 * @description 保存用户信息
 */
const handleSave = async () => {
  if (!isFormValid.value) {
    Taro.showToast({
      title: '请填写所有必填项',
      icon: 'none',
    })
    return
  }

  if (!formData.avatar_url) {
    formData.avatar_url = defaultAvatar
  }

  const payload = buildUpdateUserProfilePayload(formData, registerSourceParams)
  const result = await updateUserProfileAPI(payload)
  if (result?.code === 1) {
    Taro.showToast({
      title: '保存成功',
      icon: 'success',
    })
    setTimeout(() => {
      Taro.navigateBack()
    }, 1500)
    return
  }

  Taro.showToast({
    title: result?.msg || '保存失败，请稍后重试',
    icon: 'none',
  })
}

useLoad(options => {
  registerSourceParams.reg_source = options?.reg_source || ''
  registerSourceParams.reg_stage_id = options?.reg_stage_id || ''
})
</script>

<style>
.nut-input.mt-2 {
  padding: 12px 0 !important;
  border-bottom: 1px solid #e5e7eb;
}
</style>