<template>
  <!-- 注销账号弹窗 — 多步骤流程 -->
  <Teleport to="body">
    <div v-if="modelValue" class="delete-account-overlay" @click="$emit('update:modelValue', false)">
      <div class="delete-account-dialog" @click.stop>
        <!-- 右上角关闭按钮 -->
        <span class="delete-account-dialog__close" @click="$emit('update:modelValue', false)">✕</span>

        <!-- 顶部步骤条 -->
        <div class="delete-account-dialog__steps">
          <div class="delete-account-dialog__step" :class="{ 'delete-account-dialog__step--active': currentStep === 1, 'delete-account-dialog__step--done': currentStep > 1 }">
            <span class="delete-account-dialog__step-num">1</span>
            <span class="delete-account-dialog__step-label">须知确认</span>
          </div>
          <div class="delete-account-dialog__step-line"></div>
          <div class="delete-account-dialog__step" :class="{ 'delete-account-dialog__step--active': currentStep === 2, 'delete-account-dialog__step--done': currentStep > 2 }">
            <span class="delete-account-dialog__step-num">2</span>
            <span class="delete-account-dialog__step-label">安全验证</span>
          </div>
          <div class="delete-account-dialog__step-line"></div>
          <div class="delete-account-dialog__step" :class="{ 'delete-account-dialog__step--active': currentStep === 3 }">
            <span class="delete-account-dialog__step-num">3</span>
            <span class="delete-account-dialog__step-label">完成</span>
          </div>
        </div>

        <!-- 步骤1：须知确认 -->
        <template v-if="currentStep === 1">
          <h2 class="delete-account-dialog__title">注销账号前，请确认以下事项</h2>
          <p class="delete-account-dialog__subtitle">注销账号为不可撤回操作。请在继续前认真阅读以下内容，确认你已了解注销后的影响。</p>

          <div class="delete-account-dialog__body">
            <!-- 左侧警告列表 -->
            <div class="delete-account-dialog__warnings">
              <!-- 注销后不能撤回 -->
              <div class="delete-account-dialog__warning-item delete-account-dialog__warning-item--danger">
                <div class="delete-account-dialog__warning-icon delete-account-dialog__warning-icon--danger">!</div>
                <div class="delete-account-dialog__warning-content">
                  <div class="delete-account-dialog__warning-title delete-account-dialog__warning-title--danger">注销后不能撤回</div>
                  <p class="delete-account-dialog__warning-desc">账号注销完成后，你将无法再使用该账号登录 Offer 派，账号也无法由你自行恢复。</p>
                </div>
              </div>
              <!-- 权益清零 -->
              <div class="delete-account-dialog__warning-item">
                <div class="delete-account-dialog__warning-icon delete-account-dialog__warning-icon--orange">●</div>
                <div class="delete-account-dialog__warning-content">
                  <div class="delete-account-dialog__warning-title">权益清零</div>
                  <p class="delete-account-dialog__warning-desc">账号内的 AI 简历优化、岗位匹配、投递追踪、内推码、求职信草稿、面试准备记录等数据与权益将被清空。</p>
                </div>
              </div>
              <!-- 会员权益不退款 -->
              <div class="delete-account-dialog__warning-item">
                <div class="delete-account-dialog__warning-icon delete-account-dialog__warning-icon--orange">●</div>
                <div class="delete-account-dialog__warning-content">
                  <div class="delete-account-dialog__warning-title">会员权益不退款</div>
                  <p class="delete-account-dialog__warning-desc">如你的账号仍有会员有效期或已购买权益，注销账号后视为你主动放弃继续使用，已开通会员权益不做退款处理；法律法规另有规定的除外。</p>
                </div>
              </div>

              <!-- 确认勾选 -->
              <div class="delete-account-dialog__confirm-check">
                <label class="delete-account-dialog__checkbox-label">
                  <input type="checkbox" v-model="hasConfirmed" class="delete-account-dialog__checkbox" />
                  <span>我已阅读并确认《账号注销须知》，理解注销后不能撤回、权益清零、会员权益不退款。</span>
                </label>
              </div>

              <!-- 底部按钮 -->
              <div class="delete-account-dialog__actions">
                <button class="delete-account-dialog__btn delete-account-dialog__btn--outline" disabled>
                  {{ hasConfirmed ? '已勾选确认注销须知' : '请先勾选确认注销须知' }}
                </button>
                <button class="delete-account-dialog__btn delete-account-dialog__btn--danger" :disabled="!hasConfirmed" @click="goToStep2">
                  继续注销
                </button>
              </div>
            </div>

            <!-- 右侧账户状态卡片 -->
            <div class="delete-account-dialog__account-status">
              <h3 class="delete-account-dialog__status-title">当前账户状态</h3>
              <div class="delete-account-dialog__status-row">
                <span class="delete-account-dialog__status-label">当前会员</span>
                <span class="delete-account-dialog__status-value">{{ memberType }}</span>
              </div>
              <div class="delete-account-dialog__status-row">
                <span class="delete-account-dialog__status-label">有效期至</span>
                <span class="delete-account-dialog__status-value">{{ expireDate }}</span>
              </div>
              <div class="delete-account-dialog__status-row">
                <span class="delete-account-dialog__status-label">处理规则</span>
                <span class="delete-account-dialog__status-value delete-account-dialog__status-value--danger">剩余权益将清零</span>
              </div>
              <div class="delete-account-dialog__status-notice">
                注销后剩余会员权益将清零，不做退款处理。
              </div>
            </div>
          </div>
        </template>

        <!-- 步骤2：二次确认 -->
        <template v-if="currentStep === 2">
          <div class="delete-account-dialog__confirm-card">
            <div class="delete-account-dialog__confirm-icon">!</div>
            <h2 class="delete-account-dialog__confirm-title">确认注销账号？</h2>
            <p class="delete-account-dialog__confirm-desc">注销完成后不能撤回，账号权益将清零，已开通会员权益不退款。</p>
            <div class="delete-account-dialog__confirm-actions">
              <button class="delete-account-dialog__confirm-btn delete-account-dialog__confirm-btn--cancel" @click="currentStep = 1">再想想</button>
              <button class="delete-account-dialog__confirm-btn delete-account-dialog__confirm-btn--danger" @click="handleConfirmDelete">确认注销</button>
            </div>
          </div>
        </template>

        <!-- 步骤2（备用）：安全验证 — 手机验证码，暂时注释 -->
        <!-- <template v-if="currentStep === 2">
          <h2 class="delete-account-dialog__title">安全验证</h2>
          <p class="delete-account-dialog__subtitle">为保护账号安全，请完成身份验证后继续注销流程。</p>
          <div class="delete-account-dialog__verify">
            <div class="delete-account-dialog__verify-card">
              <h3 class="delete-account-dialog__verify-card-title">验证手机号</h3>
              <p class="delete-account-dialog__verify-card-desc">验证码将发送至 +86 138****8888</p>
              <div class="delete-account-dialog__verify-input-row">
                <input v-model="verifyCode" type="text" maxlength="6" placeholder="请输入验证码" class="delete-account-dialog__verify-input" />
                <button class="delete-account-dialog__verify-send" :disabled="countdown > 0" @click="sendCode">
                  {{ countdown > 0 ? `${countdown}s 后重发` : '获取验证码' }}
                </button>
              </div>
              <button class="delete-account-dialog__verify-next-btn" :disabled="verifyCode.length < 4" @click="handleConfirmDelete">下一步</button>
              <p class="delete-account-dialog__verify-tip">完成验证后进入最终确认。</p>
            </div>
          </div>
        </template> -->

        <!-- 步骤3：完成 -->
        <template v-if="currentStep === 3">
          <div class="delete-account-dialog__done-card">
            <div class="delete-account-dialog__done-icon">✓</div>
            <h2 class="delete-account-dialog__done-title">注销申请已提交</h2>
            <p class="delete-account-dialog__done-desc">我们将按注销流程处理你的账号。处理期间，请勿再次购买会员权益。</p>
            <button class="delete-account-dialog__done-btn" @click="handleFinish">我知道了</button>
          </div>
        </template>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { cancelAccount } from '@/api/auth'

/** 组件 Props */
const props = defineProps<{ modelValue: boolean }>()

/** 组件 Emits */
const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void; (e: 'deleted'): void }>()

const router = useRouter()
const store = useStore()

/** 当前步骤 */
const currentStep = ref(1)

/** 是否已勾选确认 */
const hasConfirmed = ref(false)

/** 验证码 */
const verifyCode = ref('')

/** 倒计时秒数 */
const countdown = ref(0)

/** 倒计时定时器 */
let timer: ReturnType<typeof setInterval> | null = null

/** 会员类型 */
const memberType = ref('季度会员')

/** 到期日期 */
const expireDate = ref('2026-xx-xx')

/** 弹窗打开时重置状态 */
watch(() => props.modelValue, (val) => {
  if (val) {
    currentStep.value = 1
    hasConfirmed.value = false
    verifyCode.value = ''
    countdown.value = 0
  }
  document.body.style.overflow = val ? 'hidden' : ''
})

/** 进入步骤2 */
const goToStep2 = () => {
  currentStep.value = 2
}

/** 发送验证码 */
const sendCode = () => {
  countdown.value = 60
  timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0 && timer) {
      clearInterval(timer)
      timer = null
    }
  }, 1000)
  ElMessage.success('验证码已发送')
}

/** 确认注销 — 调用后端注销接口 */
const handleConfirmDelete = async () => {
  try {
    await cancelAccount()
    // 注销成功，清空登录状态
    store.commit('SET_AUTHENTICATED', false)
    // 清空浏览器缓存数据（聊天记录、session 等）
    localStorage.clear()
    sessionStorage.clear()
    currentStep.value = 3
  } catch {
    ElMessage.error('注销请求失败，请稍后重试')
  }
}

/** 完成 — 关闭弹窗，通知父组件注销完成，跳转首页 */
const handleFinish = () => {
  emit('update:modelValue', false)
  emit('deleted')
  store.commit('SET_AUTHENTICATED', false)
  router.push('/')
}
</script>
