<template>
  <Teleport to="body">
    <Transition name="modal">
      <div
        v-if="show"
        class="fixed inset-0 z-[9999] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
        @click.self="close"
      >
        <div class="w-full max-w-sm mx-4 bg-[#121214] border border-white/10 rounded-xl p-6 shadow-2xl">
          <div class="flex items-center justify-between mb-5">
            <h3 class="text-lg font-medium text-white">修改密码</h3>
            <button
              type="button"
              class="text-white/40 hover:text-white transition-colors"
              aria-label="关闭"
              @click="close"
            >
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
            </button>
          </div>

          <form @submit.prevent="handleSubmit" class="space-y-4">
            <div class="form-group">
              <label for="change-pwd-old">原密码</label>
              <input
                id="change-pwd-old"
                v-model="form.oldPassword"
                type="password"
                class="admin-input"
                required
                autocomplete="current-password"
              />
            </div>
            <div class="form-group">
              <label for="change-pwd-new">新密码</label>
              <input
                id="change-pwd-new"
                v-model="form.newPassword"
                type="password"
                class="admin-input"
                required
                minlength="6"
                autocomplete="new-password"
              />
            </div>
            <div class="flex gap-3 pt-2">
              <button type="button" class="admin-btn-secondary flex-1" :disabled="submitting" @click="close">
                取消
              </button>
              <button type="submit" class="admin-btn-primary flex-1" :disabled="submitting">
                {{ submitting ? '提交中...' : '更新密码' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { reactive, ref, watch, onUnmounted } from 'vue'
import { useToast } from '../../composables/useToast'
import { updateCurrentUserPassword } from '../../services/api'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
}>()

const toast = useToast()
const submitting = ref(false)
const form = reactive({
  oldPassword: '',
  newPassword: '',
})

const resetForm = () => {
  form.oldPassword = ''
  form.newPassword = ''
}

const close = () => {
  if (submitting.value) return
  emit('update:show', false)
}

const onKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Escape') close()
}

watch(
  () => props.show,
  (open) => {
    if (open) {
      resetForm()
      document.addEventListener('keydown', onKeydown)
    } else {
      document.removeEventListener('keydown', onKeydown)
    }
  },
)

onUnmounted(() => {
  document.removeEventListener('keydown', onKeydown)
})

const handleSubmit = async () => {
  submitting.value = true
  try {
    await updateCurrentUserPassword(form.oldPassword, form.newPassword)
    toast.success('密码已更新')
    resetForm()
    emit('update:show', false)
  } catch (e: unknown) {
    toast.error(e instanceof Error ? e.message : '密码更新失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.form-group label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.2s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}
</style>
