<template>
  <div class="forgot-page">
    <div class="forgot-card">
      <div class="logo">🌿</div>
      <h2>找回密码</h2>
      <p class="subtitle">输入注册邮箱，验证码将发送（开发期打印在服务器日志）</p>

      <n-form>
        <n-form-item label="注册邮箱">
          <n-input v-model:value="email" placeholder="your@email.com" size="large" />
        </n-form-item>

        <template v-if="step === 2">
          <n-form-item label="验证码（见后端日志）">
            <n-input v-model:value="code" placeholder="6 位验证码" size="large" maxlength="6" />
          </n-form-item>
          <n-form-item label="新密码">
            <n-input v-model:value="newPassword" type="password" show-password-on="click" placeholder="新密码" size="large" />
          </n-form-item>
        </template>

        <n-button v-if="step === 1" type="primary" block size="large" :loading="sending" @click="sendCode">
          发送验证码
        </n-button>
        <n-button v-else type="primary" block size="large" :loading="resetting" @click="reset">
          重置密码
        </n-button>
      </n-form>

      <div class="footer">
        <router-link to="/login">← 返回登录</router-link>
      </div>

      <div v-if="devHint" class="dev-hint">
        💡 开发模式：验证码已打印到后端控制台（docker compose logs backend）
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import api from '@/api/client'

const router = useRouter()
const message = useMessage()
const email = ref('')
const code = ref('')
const newPassword = ref('')
const step = ref(1)
const sending = ref(false)
const resetting = ref(false)
const devHint = ref(false)

async function sendCode() {
  if (!email.value.trim()) { message.error('请输入邮箱'); return }
  sending.value = true
  try {
    await api.post('/auth/forgot', { email: email.value.trim() })
    step.value = 2
    devHint.value = true
    message.success('验证码已发送（开发期见后端日志）')
  } catch (e: any) {
    message.error(e.response?.data?.detail || '发送失败')
  } finally {
    sending.value = false
  }
}

async function reset() {
  if (!code.value || !newPassword.value) { message.error('请填写完整'); return }
  resetting.value = true
  try {
    await api.post('/auth/reset', {
      email: email.value.trim(),
      code: code.value.trim(),
      new_password: newPassword.value,
    })
    message.success('密码已重置，请重新登录')
    router.push('/login')
  } catch (e: any) {
    message.error(e.response?.data?.detail || '重置失败')
  } finally {
    resetting.value = false
  }
}
</script>

<style scoped>
.forgot-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #009688 0%, #26A69A 100%);
  padding: 20px;
}
.forgot-card {
  width: 400px; max-width: 100%; background: var(--color-surface, #fff);
  border-radius: 20px; padding: 36px 32px; box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
.logo { font-size: 48px; text-align: center; }
.forgot-card h2 { text-align: center; margin: 8px 0 4px; color: var(--color-primary-dark, #00796B); }
.subtitle { text-align: center; font-size: 13px; color: var(--color-text-hint, #999); margin-bottom: 24px; }
.footer { text-align: center; margin-top: 20px; }
.footer a { font-size: 13px; color: var(--color-primary, #009688); text-decoration: none; }
.dev-hint {
  margin-top: 16px; padding: 10px; background: #FFF3E0; border-radius: 8px;
  font-size: 12px; color: #E65100; text-align: center;
}
</style>
