<template>
  <view class="profile-page">
    <!-- 自定义导航栏 -->
    <nav-bar :title="$t('user.profile')"></nav-bar>

    <view class="profile-content">
      <!-- 头像区域 -->
      <view class="avatar-section">
        <image 
          :src="userInfo.avatar" 
          class="avatar"
          @click="editAvatar"
        />
        <text class="avatar-text" @click="editAvatar">
          {{ userInfo.avatar ? $t('user.changeAvatar') : $t('user.setAvatar') }}
        </text>
      </view>

      <!-- 信息列表 -->
      <wd-cell-group border custom-class="info-list">
        <wd-cell
          v-for="field in fields"
          title-width="100rpx"
          :key="field.key"
          :title="field.label"
          clickable
          @click="editField(field)"
        >
          <view class="value-wrapper">
            <text v-if="userInfo[field.key] || userInfo[field.key] === 0" class="value">
              {{ formatValue(field, userInfo[field.key]) }}
            </text>
            <text v-else class="placeholder">{{ $t('user.notSet') }}</text>
            <wd-icon 
              v-if="userInfo[field.key]" 
              name="edit-1" 
              size="16px"
              color="#54a966" 
            />
          </view>
        </wd-cell>
      </wd-cell-group>
    </view>

    <!-- 编辑弹窗 -->
    <wd-popup v-model="showEditModal" position="bottom">
      <view class="edit-modal">
        <text class="modal-title">{{ editTitle }}</text>

        <!-- 昵称/姓名/年龄编辑 -->
        <view v-if="['nickname', 'name', 'age'].includes(currentField?.key || '')">
          <wd-input
            v-model="editValue"
            :placeholder="getPlaceholder(currentField?.key)"
            :type="currentField?.key === 'age' ? 'number' : 'text'"
          />
        </view>

        <!-- 邮箱编辑 -->
        <view v-if="currentField?.key === 'email'">
          <wd-input
            v-model="editForm.email"
            :placeholder="$t('user.email')"
            type="email"
          />
          <view class="code-input">
            <wd-input
              v-model="editForm.code"
              :placeholder="$t('login.codePlaceholder')"
              type="number"
              class="flex-1"
            />
            <wd-button
              size="small"
              :disabled="codeDisabled"
              class="w-[100px]"
              @click="sendCode"
            >
              {{ codeText }}
            </wd-button>
          </view>
        </view>

        <!-- 密码编辑 -->
        <view v-if="currentField?.key === 'password'">
          <wd-input
            v-model="editForm.password"
            :placeholder="$t('user.pleaseInputPassword')"
            type="password"
            @input="checkPasswordStrength"
          />
          <view class="password-note">
            <view v-if="passwordNote">{{ passwordNote }}</view>
            <view v-html="passwordStrength"></view>
          </view>
          <wd-input
            v-model="editForm.confirmPassword"
            :placeholder="$t('user.pleaseInputPasswordAgain')"
            type="password"
            style="margin-top: 20rpx"
          />
        </view>

        <!-- 性别编辑 -->
        <view v-if="currentField?.key === 'sex'">
          <wd-radio-group v-model="editValue" shape="button" class="text-center">
            <wd-radio v-for="item in sexOptions" :key="item.value" :value="item.value">{{ item.label }}</wd-radio>
          </wd-radio-group>
        </view>

        <!-- 头像上传 -->
        <view v-if="currentField?.key === 'avatar'">
          <wd-upload
            :file-list="avatarList"
            :limit="1"
            action="https://global.nuttyreading.com/oss/fileoss"
            @change="handleChangeAvatar"
          />
        </view>

        <!-- 确认按钮 -->
        <wd-button type="success" block :round="false" @click="handleSubmit" style="margin-top: 50rpx">
          {{ $t('common.confirm') }}
        </wd-button>
        <view class="cancel-btn" @click="closeModal">
          {{ $t('common.cancel') }}
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { 
  getUserInfo, 
  updateUserInfo, 
  updateEmail, 
  updatePassword,
  uploadImage,
  sendEmailCode
} from '@/api/modules/user'
import { checkPasswordStrength as validatePassword } from '@/utils/validator'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const userStore = useUserStore()

// 默认头像
const defaultAvatar = '/static/logo.png'

// 字段列表
const fields = computed(() => [
  { key: 'nickname', label: t('user.nickname') },
  { key: 'email', label: t('user.email') },
  { key: 'password', label: t('login.password') },
  { key: 'age', label: t('user.age') },
  { key: 'sex', label: t('user.sex') },
  { key: 'name', label: t('user.name') }
])

// 性别选项
const sexOptions = [
  { label: t('user.male'), value: 1 },
  { label: t('user.female'), value: 0 },
  { label: t('user.secrecy'), value: 2 },
]

// 编辑相关
const showEditModal = ref(false)
const currentField = ref<any>(null)
const editTitle = ref('')
const editValue = ref<any>('')
const editForm = ref({
  email: '',
  code: '',
  password: '',
  confirmPassword: ''
})

// 验证码相关
const codeDisabled = ref(false)
const codeText = ref(t('login.getCode'))
let codeTimer: any = null

// 密码强度
const passwordNote = ref('')
const passwordStrength = ref('')
const passwordOk = ref(false)

// 头像上传
const avatarList = ref<any[]>([])
const avatarUrl = ref('')


/**
 * 获取用户数据
 */
const userInfo = ref<any>({}) // 用户信息
const getData = async () => {
  const res = await getUserInfo()
  userStore.setUserInfo(res.result)
  userInfo.value = res.result
  userInfo.value.avatar = res.result.avatar || defaultAvatar
}

/**
 * 格式化显示值
 */
const formatValue = (field: any, value: any) => {
  if (field.key === 'sex') {
    let result = null
    switch(value) {
      case 1:
        result = t('user.male')
        break
      case 0:
        result = t('user.female')
        break
      case 2:
        result = t('user.secrecy')
        break
      default:
        result = null
        break
    }
    return result
  }
  if (field.key === 'password') {
    return '******'
  }
  return value
}

/**
 * 获取输入框占位符
 */
const getPlaceholder = (key?: string) => {
  const placeholders: Record<string, string> = {
    nickname: t('common.pleaseInput') + t('user.nickname'),
    name: t('common.pleaseInput') + t('user.name'),
    age: t('common.pleaseInput') + t('user.age')
  }
  return placeholders[key || ''] || ''
}

/**
 * 编辑字段
 */
const editField = (field: any) => {
  currentField.value = field
  editTitle.value = (userInfo.value[field.key] ? t('common.edit') : t('user.clickToSet')) + field.label
  
  // 重置表单
  editValue.value = ''
  editForm.value = {
    email: '',
    code: '',
    password: '',
    confirmPassword: ''
  }
  passwordNote.value = ''
  passwordStrength.value = ''
  
  // 设置初始值
  if (field.key === 'sex' && userInfo.value.sex) {
    editValue.value = userInfo.value.sex
  }

  showEditModal.value = true
}

/**
 * 编辑头像
 */
const editAvatar = () => {
  currentField.value = { key: 'avatar', label: t('user.avatar') }
  editTitle.value = userInfo.value.avatar ? t('user.changeAvatar') : t('user.setAvatar')
  avatarList.value = userInfo.value.avatar ? [{ url: userInfo.value.avatar }] : []
  showEditModal.value = true
}

/**
 * 上传前检查
 */
const beforeUpload = async () => {
  // TODO: 检查相机和存储权限
  return true
}

/**
 * 处理头像上传变化
 */
const handleChangeAvatar = async(filelist: any) => {
  if (filelist.fileList.length > 0) {
    avatarUrl.value = JSON.parse(filelist.fileList[0].response).url
  } else {
    avatarUrl.value = ''
  }
}

/**
 * 删除头像
 */
const handleDeleteAvatar = () => {
  avatarList.value = []
}

/**
 * 发送验证码
 */
const sendCode = async () => {
  if (!editForm.value.email) {
    uni.showToast({
      title: t('user.pleaseInput') + t('user.email'),
      icon: 'none'
    })
    return
  }

  await sendEmailCode(editForm.value.email)
  uni.showToast({
    title: t('user.sendCodeSuccess'),
    icon: 'none'
  })
  startCountdown()
}

/**
 * 验证码倒计时
 */
const startCountdown = () => {
  if (codeTimer) {
    clearInterval(codeTimer)
  }
  
  codeDisabled.value = true
  let countdown = 60
  codeText.value = `${countdown}S`
  
  codeTimer = setInterval(() => {
    countdown--
    codeText.value = `${countdown}S`
    if (countdown <= 0) {
      clearInterval(codeTimer)
      codeText.value = t('login.getCode')
      codeDisabled.value = false
    }
  }, 1000)
}

/**
 * 检查密码强度
 */
const checkPasswordStrength = () => {
  const password = editForm.value.password
  if (!password) {
    passwordNote.value = ''
    passwordStrength.value = ''
    passwordOk.value = false
    return
  }

  const strength = validatePassword(password)
  
  if (strength === 'strong') {
    passwordStrength.value = `<span style="color:#18bc37">${t('forget.passwordStrengthStrong')}</span>`
    passwordNote.value = ''
    passwordOk.value = true
  } else if (strength === 'medium') {
    passwordStrength.value = `<span style="color:#2979ff">${t('forget.passwordStrengthMedium')}</span>`
    passwordNote.value = t('forget.passwordStrengthWeak')
    passwordOk.value = true
  } else if (strength === 'weak') {
    passwordStrength.value = `<span style="color:#f3a73f">弱</span>`
    passwordNote.value = t('forget.passwordStrengthWeak')
    passwordOk.value = false
  } else {
    passwordStrength.value = ''
    passwordNote.value = t('forget.passwordStrengthWeak')
    passwordOk.value = false
  }
}

/**
 * 提交修改
 */
const handleSubmit = async () => {
  const key = currentField.value?.key
  
  // 构建更新数据对象
  let updateData: any = Object.assign({}, userInfo.value)

  switch (key) {
    case 'email':
      // 更新邮箱
      if (!editForm.value.email || !editForm.value.code) {
        uni.showToast({
          title: t('user.pleaseInputCode'),
          icon: 'none'
        })
        return
      }
      await updateEmail(userInfo.value.id, editForm.value.email, editForm.value.code)
      break
      
    case 'password':
      // 更新密码
      if (!passwordOk.value) {
        uni.showToast({
          title: passwordNote.value,
          icon: 'none'
        })
        return
      }
      if (editForm.value.password !== editForm.value.confirmPassword) {
        uni.showToast({
          title: t('user.passwordNotMatch'),
          icon: 'none'
        })
        return
      }
      await updatePassword(userInfo.value.id, editForm.value.password)
      break
      
    case 'avatar':
      // 更新头像
      console.log('avatarUrl.value:', avatarUrl.value)
      if (!avatarUrl.value) {
        uni.showToast({
          title: t('common.pleaseSelect') + t('user.avatar'),
          icon: 'none'
        })
        return
      }
      
      // 如果是新上传的图片，需要先上传
      updateData.avatar = avatarUrl.value
      await updateUserInfo(updateData)
      break
      
    case 'sex':
      // 更新性别
      updateData.sex = editValue.value
      await updateUserInfo(updateData)
      break
      
    default:
      // 更新其他字段
      if (!editValue.value) {
        uni.showToast({
          title: getPlaceholder(key),
          icon: 'none'
        })
        return
      }
      updateData[key] = editValue.value
      await updateUserInfo(updateData)
      break
  }

  uni.showToast({
    title: t('user.updateSuccess'),
    icon: 'success'
  })
  
  closeModal()
  
  // 刷新数据
  setTimeout(() => {
    getData()
  }, 500)
}

/**
 * 关闭弹窗
 */
const closeModal = () => {
  showEditModal.value = false
  currentField.value = null
  if (codeTimer) {
    clearInterval(codeTimer)
    codeDisabled.value = false
    codeText.value = t('login.getCode')
  }
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
$theme-color: #54a966;

.profile-page {
  min-height: 100vh;
  background-color: #f7faf9;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    position: relative;

    .navbar-left {
      position: absolute;
      left: 10px;
      display: flex;
      align-items: center;
      padding: 10rpx;
    }

    .navbar-title {
      font-size: 16px;
      font-weight: 700;
      color: #333;
    }
  }
}

.profile-content {
  padding: 20rpx;
}

.avatar-section {
  background: #fff;
  border-radius: 15rpx;
  padding: 40rpx;
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .avatar {
    width: 180rpx;
    height: 180rpx;
    border-radius: 180rpx;
    background-color: #f5f5f5;
    margin-bottom: 20rpx;
  }

  .avatar-text {
    font-size: 30rpx;
    color: $theme-color;
    font-weight: 600;
  }
}

.info-list {
  background: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.value-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .value {
    color: #666;
    margin-right: 10rpx;
  }

  .placeholder {
    color: #999;
    margin-right: 10rpx;
  }
}

.edit-modal {
  padding: 60rpx 50rpx 80rpx;

  .modal-title {
    font-size: 32rpx;
    color: #555;
    text-align: center;
    font-weight: bold;
    margin-bottom: 50rpx;
    display: block;
  }

  .code-input {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-top: 20rpx;
  }

  .password-note {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #999;
    line-height: 40rpx;
  }

  .radio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #ededed;

    &:last-child {
      border-bottom: none;
    }

    text {
      font-size: 30rpx;
      color: #333;
    }
  }

  .cancel-btn {
    text-align: center;
    font-size: 28rpx;
    color: #888;
    margin-top: 25rpx;
  }
}
</style>
