<script setup lang="ts">
// 이메일 인증 결과 — 메일 링크(새 탭)로 진입. 인증 결과를 표시하고 창을 닫는다.
// 브라우저가 스크립트의 창 닫기를 차단할 수 있으므로(사용자가 직접 연 탭),
// 안내 문구를 함께 보여 사용자가 직접 닫고 기존 화면에서 로그인하도록 한다.
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useRoute, RouterLink } from 'vue-router'

const route = useRoute()
const ok = computed(() => route.query.ok === '1')

// 자동 닫기를 시도했는지(차단 시 안내 문구 노출)
const triedClose = ref(false)
let closeTimer: ReturnType<typeof setTimeout> | null = null

onMounted(() => {
  if (!ok.value) return
  // 완료 표시 후 잠시 뒤 창 닫기 시도(직접 연 탭은 브라우저가 막을 수 있음)
  closeTimer = setTimeout(() => {
    triedClose.value = true
    window.close()
  }, 1500)
})

onBeforeUnmount(() => {
  if (closeTimer) clearTimeout(closeTimer)
})
</script>

<template>
  <div class="verified-wrap">
    <div class="card">
      <!-- 인증 성공 -->
      <template v-if="ok">
        <div class="ico ok">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2.4"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M20 6 9 17l-5-5" />
          </svg>
        </div>
        <h1>이메일 인증 완료</h1>
        <p class="lede">
          회원가입이 완료되었습니다.<br>이 창을 닫고 기존 화면에서 로그인해 주세요.
        </p>
        <p
          v-if="triedClose"
          class="hint"
        >
          창이 자동으로 닫히지 않으면 직접 닫으셔도 됩니다.
        </p>
      </template>

      <!-- 인증 실패/만료 -->
      <template v-else>
        <div class="ico bad">
          <svg
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2.4"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <circle
              cx="12"
              cy="12"
              r="10"
            />
            <path d="M15 9l-6 6M9 9l6 6" />
          </svg>
        </div>
        <h1>인증에 실패했습니다</h1>
        <p class="lede">
          인증 링크가 만료되었거나 유효하지 않습니다.<br>회원가입 화면에서 인증 메일을 다시 받아 주세요.
        </p>
        <RouterLink
          class="btn primary"
          to="/signup"
        >
          회원가입으로 가기
        </RouterLink>
      </template>
    </div>
  </div>
</template>

<style scoped>
.verified-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg, #f4f5f7);
  padding: 1.5rem;
}
.card {
  width: 100%;
  max-width: 25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-sm);
  padding: 2.25rem 1.875rem;
  text-align: center;
}
.ico {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 1.25rem;
}
.ico svg {
  width: 1.75rem;
  height: 1.75rem;
}
.ico.ok {
  background: var(--green-weak);
  color: #1b7a3d;
  border: 1px solid var(--green-border);
}
.ico.bad {
  background: var(--red-weak);
  color: var(--red);
  border: 1px solid var(--red-border);
}
h1 {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.025rem;
}
.lede {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.7;
  margin-top: 0.625rem;
}
.hint {
  font-size: 0.781rem;
  color: var(--text-3);
  margin-top: 0.75rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.625rem;
  padding: 0 1.25rem;
  margin-top: 1.5rem;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn.primary {
  border: none;
  background: var(--accent);
  color: #fff;
}
.btn.primary:hover {
  background: var(--accent-hover);
}
</style>
