<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NForm, NFormItem, NInput, NButton, NResult, NIcon } from 'naive-ui'
import { RefreshOutline, LogInOutline } from '@vicons/ionicons5'
import { api } from '../../api/client'
const route = useRoute(); const router = useRouter()
const password = ref(''); const loading = ref(false); const done = ref(false); const error = ref('')
async function handleReset() {
  error.value = ''
  if (!password.value.trim()) { error.value = '请输入新密码'; return }
  if (password.value.length < 8) { error.value = '密码至少8位，需包含大小写字母和数字'; return }
  loading.value = true
  try {
    await api.post('/auth/reset-password', { token: route.query.token as string, new_password: password.value })
    done.value = true
  } catch (e: any) { error.value = e.response?.data?.detail || '重置失败，令牌可能已过期' }
  finally { loading.value = false }
}
</script>
<template>
  <div class="auth-form">
    <h3 class="auth-title">🔐 设置新密码</h3>
    <p class="auth-desc" v-if="!done">输入你的新密码</p>
    <div v-if="!done">
      <NForm @submit.prevent="handleReset" size="large">
        <NFormItem class="tight-item"><NInput v-model:value="password" type="password" placeholder="新密码（至少8位，含大小写字母+数字）" @keyup.enter="handleReset" /></NFormItem>
        <div v-if="error" class="form-error">{{ error }}</div>
        <NButton type="primary" block :loading="loading" @click="handleReset" class="submit-btn sky-btn"><template #icon><NIcon size="14"><RefreshOutline /></NIcon></template>重置密码</NButton>
      </NForm>
    </div>
    <NResult v-else status="success" title="密码已重置" description="现在可以用新密码登录了">
      <template #footer>
        <NButton type="primary" @click="router.push('/auth/login')" class="sky-btn"><template #icon><NIcon size="14"><LogInOutline /></NIcon></template>去登录</NButton>
      </template>
    </NResult>
    <div style="text-align:center;margin-top:12px">
      <router-link to="/auth/login" style="font-size:13px;color:var(--text-muted)">← 返回登录</router-link>
    </div>
  </div>
</template>

<style scoped>
.auth-form { padding:0; text-align:center; }
.auth-title { font-size:20px; margin:0 0 4px; font-weight:700; }
html.dark .auth-title { color: #e0e0e0; }
.auth-desc { color:var(--text-secondary); font-size:13px; margin:0 0 20px; }
.tight-item { margin-bottom:8px !important; }
.form-error { color:#d03050; font-size:13px; margin:0 0 8px; }
.submit-btn { height:42px; margin-top:10px; }
</style>
