<script setup lang="ts">
import { ref, computed } from 'vue'
import { changePassword } from '@/api/auth'

const formData = ref({
  old_password: '',
  new_password: '',
  confirm_password: '',
})

const passwordVisible = ref({
  old: false,
  new: false,
  confirm: false,
})

const submitting = ref(false)

const passwordStrength = computed(() => {
  const password = formData.value.new_password
  if (!password)
    return { level: 0, text: '', color: '' }

  let strength = 0
  if (password.length >= 8)
    strength++
  if (password.length >= 12)
    strength++
  if (/[a-z]/.test(password))
    strength++
  if (/[A-Z]/.test(password))
    strength++
  if (/\d/.test(password))
    strength++
  if (/[^a-zA-Z\d]/.test(password))
    strength++

  if (strength <= 2)
    return { level: 1, text: '弱', color: '#ff6b6b' }
  if (strength <= 4)
    return { level: 2, text: '中', color: '#e68815' }
  return { level: 3, text: '强', color: '#3ed268' }
})

const isFormValid = computed(() => {
  const { old_password, new_password, confirm_password } = formData.value
  return (
    old_password.length > 0
    && new_password.length >= 8
    && new_password === confirm_password
  )
})

function togglePasswordVisible(field: 'old' | 'new' | 'confirm') {
  passwordVisible.value[field] = !passwordVisible.value[field]
}

async function submitChange() {
  if (!formData.value.old_password) {
    uni.showToast({ title: '请输入当前密码', icon: 'none' })
    return
  }

  if (formData.value.new_password.length < 8) {
    uni.showToast({ title: '新密码至少8位', icon: 'none' })
    return
  }

  if (formData.value.new_password !== formData.value.confirm_password) {
    uni.showToast({ title: '两次密码输入不一致', icon: 'none' })
    return
  }

  if (formData.value.old_password === formData.value.new_password) {
    uni.showToast({ title: '新密码不能与当前密码相同', icon: 'none' })
    return
  }

  submitting.value = true

  try {
    await changePassword({
      old_password: formData.value.old_password,
      new_password: formData.value.new_password,
    })

    uni.showToast({ title: '密码修改成功', icon: 'success', duration: 2000 })

    uni.removeStorageSync('admin-token')
    uni.removeStorageSync('refresh_token')
    uni.removeStorageSync('user_info')

    setTimeout(() => {
      uni.reLaunch({ url: '/pages/common/login/index' })
    }, 2000)
  } catch (error: any) {
    console.error('修改密码失败:', error)
    if (error instanceof Error && error.message && !error.statusCode) {
      uni.$u.toast(error.message)
    }
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <view class="bg-page min-h-screen">
    <view class="px-4 py-4">
      <!-- 表单卡片 -->
      <view class="bg-white rounded-16px p-4">
        <!-- 当前密码 -->
        <view class="mb-4">
          <text class="text-14px text-[#666] block mb-2">当前密码</text>
          <view class="flex items-center bg-[#f8fafc] rounded-full px-4 h-12">
            <input
              v-model="formData.old_password"
              :password="!passwordVisible.old"
              class="flex-1 text-15px text-[#212121]"
              placeholder="请输入当前密码"
              placeholder-class="text-[#cbd5e1]"
            >
            <view @click="togglePasswordVisible('old')">
              <i v-if="passwordVisible.old" class="i-mdi-eye text-20px text-[#94a3b8]" />
              <i v-else class="i-mdi-eye-off text-20px text-[#94a3b8]" />
            </view>
          </view>
        </view>

        <!-- 新密码 -->
        <view class="mb-4">
          <view class="flex items-center justify-between mb-2">
            <text class="text-14px text-[#666]">新密码</text>
            <text
              v-if="formData.new_password"
              :style="{ color: passwordStrength.color }"
              class="text-12px font-600"
            >
              {{ passwordStrength.text }}
            </text>
          </view>
          <view class="flex items-center bg-[#f8fafc] rounded-full px-4 h-12">
            <input
              v-model="formData.new_password"
              :password="!passwordVisible.new"
              class="flex-1 text-15px text-[#212121]"
              placeholder="请输入新密码"
              placeholder-class="text-[#cbd5e1]"
            >
            <view @click="togglePasswordVisible('new')">
              <i v-if="passwordVisible.new" class="i-mdi-eye text-20px text-[#94a3b8]" />
              <i v-else class="i-mdi-eye-off text-20px text-[#94a3b8]" />
            </view>
          </view>
          <view v-if="formData.new_password" class="flex items-center gap-1 mt-2">
            <view
              v-for="i in 3"
              :key="i"
              class="flex-1 h-2px rounded-full transition-all"
              :style="{ backgroundColor: i <= passwordStrength.level ? passwordStrength.color : '#e0e0e0' }"
            />
          </view>
        </view>

        <!-- 确认密码 -->
        <view class="mb-6">
          <text class="text-14px text-[#666] block mb-2">确认密码</text>
          <view class="flex items-center bg-[#f8fafc] rounded-full px-4 h-12">
            <input
              v-model="formData.confirm_password"
              :password="!passwordVisible.confirm"
              class="flex-1 text-15px text-[#212121]"
              placeholder="请再次输入新密码"
              placeholder-class="text-[#cbd5e1]"
            >
            <view @click="togglePasswordVisible('confirm')">
              <i v-if="passwordVisible.confirm" class="i-mdi-eye text-20px text-[#94a3b8]" />
              <i v-else class="i-mdi-eye-off text-20px text-[#94a3b8]" />
            </view>
          </view>
          <view v-if="formData.confirm_password" class="mt-2">
            <text
              :class="[
                'text-12px',
                formData.new_password === formData.confirm_password ? 'text-[#52c41a]' : 'text-[#ff4d4f]',
              ]"
            >
              {{ formData.new_password === formData.confirm_password ? '密码一致' : '密码不一致' }}
            </text>
          </view>
        </view>

        <!-- 提交按钮 -->
        <view
          :class="[
            'py-4 rounded-full text-center text-16px font-600 transition-all',
            isFormValid && !submitting
              ? 'bg-brand text-white shadow-brand'
              : 'bg-[#e0e0e0] text-[#999]',
          ]"
          @click="submitChange"
        >
          {{ submitting ? '修改中...' : '确认修改' }}
        </view>
      </view>

      <!-- 密码要求 -->
      <view class="bg-white rounded-16px p-4 mt-4">
        <text class="text-14px font-600 text-[#212121] block mb-3">密码要求</text>
        <view class="space-y-2">
          <view class="flex items-center gap-2">
            <text :class="formData.new_password.length >= 8 ? 'text-[#52c41a]' : 'text-[#cbd5e1]'">●</text>
            <text class="text-13px text-[#666]">至少8个字符</text>
          </view>
          <view class="flex items-center gap-2">
            <text :class="/[a-zA-Z]/.test(formData.new_password) ? 'text-[#52c41a]' : 'text-[#cbd5e1]'">●</text>
            <text class="text-13px text-[#666]">包含字母</text>
          </view>
          <view class="flex items-center gap-2">
            <text :class="/\d/.test(formData.new_password) ? 'text-[#52c41a]' : 'text-[#cbd5e1]'">●</text>
            <text class="text-13px text-[#666]">包含数字</text>
          </view>
          <view class="flex items-center gap-2">
            <text :class="/[^a-zA-Z\d]/.test(formData.new_password) ? 'text-[#52c41a]' : 'text-[#cbd5e1]'">●</text>
            <text class="text-13px text-[#666]">包含特殊字符</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.space-y-2 > view:not(:last-child) {
  margin-bottom: 8px;
}
</style>
