<template>
  <div class="set-password-container">
    <div class="set-password-card">
      <div class="text-center mb-4">
        <i class="bi bi-shield-lock display-1 text-primary"></i>
        <h3 class="mt-3">비밀번호 설정</h3>
        <p class="text-muted">
          비상시 로그인을 위해 비밀번호를 설정해주세요.
        </p>
      </div>

      <div class="alert alert-info">
        <i class="bi bi-info-circle me-2"></i>
        Google 계정으로 로그인되었습니다.<br>
        비밀번호를 설정하면 이메일/비밀번호로도 로그인할 수 있습니다.
      </div>

      <form @submit.prevent="handleSetPassword">
        <div class="mb-3">
          <label class="form-label">새 비밀번호</label>
          <input 
            type="password" 
            class="form-control" 
            v-model="newPassword" 
            placeholder="8자 이상 입력" 
            required 
            minlength="8"
          />
          <small class="text-muted">8자 이상, 영문+숫자 조합 권장</small>
        </div>

        <div class="mb-4">
          <label class="form-label">비밀번호 확인</label>
          <input 
            type="password" 
            class="form-control" 
            v-model="confirmPassword" 
            placeholder="비밀번호 다시 입력" 
            required
          />
          <small v-if="confirmPassword && newPassword !== confirmPassword" class="text-danger">
            비밀번호가 일치하지 않습니다.
          </small>
        </div>

        <button 
          type="submit" 
          class="btn btn-primary w-100 mb-3" 
          :disabled="isSubmitting || !canSubmit"
        >
          <span v-if="isSubmitting">
            <span class="spinner-border spinner-border-sm me-2"></span>설정 중...
          </span>
          <span v-else>
            <i class="bi bi-check-lg me-2"></i>비밀번호 설정
          </span>
        </button>

        <div class="text-center">
          <a href="/" class="text-muted small">나중에 설정하기 →</a>
        </div>
      </form>

      <div class="alert alert-danger mt-3" v-if="errorMessage">
        <i class="bi bi-exclamation-triangle me-2"></i>{{ errorMessage }}
      </div>

      <div class="alert alert-success mt-3" v-if="successMessage">
        <i class="bi bi-check-circle me-2"></i>{{ successMessage }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({ layout: false })

const router = useRouter()

const newPassword = ref('')
const confirmPassword = ref('')
const isSubmitting = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

const canSubmit = computed(() => {
  return newPassword.value.length >= 8 && newPassword.value === confirmPassword.value
})

async function handleSetPassword() {
  if (!canSubmit.value) return
  
  isSubmitting.value = true
  errorMessage.value = ''
  successMessage.value = ''
  
  try {
    await $fetch('/api/auth/set-password', {
      method: 'POST',
      body: { password: newPassword.value }
    })
    
    successMessage.value = '비밀번호가 설정되었습니다. 메인 페이지로 이동합니다.'
    
    setTimeout(() => {
      router.push('/')
    }, 1500)
  } catch (e: any) {
    errorMessage.value = e.data?.message || e.message || '비밀번호 설정에 실패했습니다.'
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.set-password-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 2rem;
}
.set-password-card {
  background: white;
  border-radius: 1rem;
  padding: 2rem;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
</style>
