<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { NForm, NFormItem, NInput, NButton, NResult, NCard, NIcon, type FormRules } from 'naive-ui'
import { SendOutline, ArrowBackOutline } from '@vicons/ionicons5'
import { api } from '../../api/client'
const router = useRouter()
const email = ref('')
const loading = ref(false)
const sent = ref(false)
const error = ref('')
const resetLink = ref('')
const isDevMode = ref(false)
const formRef = ref()
const rules: FormRules = {
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' },
  ],
}

async function handleSubmit() {
  try { await formRef.value?.validate() } catch { return }
  error.value = ''
  loading.value = true
  try {
    const { data } = await api.post('/auth/forgot-password', { email: email.value })
    sent.value = true
    if (data.reset_link) { resetLink.value = data.reset_link; isDevMode.value = true }
  } catch (e: any) { error.value = e.response?.data?.detail || '发送失败' }
  finally { loading.value = false }
}
</script>

<template>
  <div class="auth-form">
    <div v-if="!sent">
      <h3 class="auth-title">🔑 忘记密码</h3>
      <p class="auth-desc">输入注册邮箱，我们将发送密码重置链接</p>
      <NForm ref="formRef" :model="{email}" :rules="rules" @submit.prevent="handleSubmit" size="large">
        <NFormItem path="email" class="tight-item"><NInput v-model:value="email" placeholder="your@email.com" @keyup.enter="handleSubmit" /></NFormItem>
        <div v-if="error" class="form-error">{{ error }}</div>
        <NButton type="primary" block :loading="loading" @click="handleSubmit" class="submit-btn sky-btn"><template #icon><NIcon size="14"><SendOutline /></NIcon></template>发送重置链接</NButton>
      </NForm>
    </div>

    <div v-else>
      <!-- 开发模式：显示重置链接 -->
      <div v-if="isDevMode">
        <NResult status="success" title="重置链接已生成" description="开发环境未配置SMTP，点击下方链接重置密码" />
        <NCard size="small" style="margin-top:12px;word-break:break-all">
          <a :href="resetLink" style="color:#1a5276;font-size:13px">{{ resetLink }}</a>
        </NCard>
      </div>
      <NResult v-else status="success" title="邮件已发送" description="请检查邮箱，点击链接重置密码（1小时内有效）" />

      <div style="text-align:center;margin-top:12px">
<NButton @click="router.push('/auth/login')" class="sky-btn"><template #icon><NIcon size="14"><ArrowBackOutline /></NIcon></template>返回登录</NButton>
      </div>
    </div>
    <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>
