<template>
  <div class="callback-page">
    <div class="loading-container">
      <div class="spinner"></div>
      <h2>{{ statusMessage }}</h2>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import unifiedLoginSDK from 'oauth2-login-sdk';

const router = useRouter();
const statusMessage = ref('正在处理认证回调...');
const errorMessage = ref('');

// 处理OAuth2回调
const handleCallback = async () => {
  try {
    statusMessage.value = '正在验证认证信息...';
    console.log('🔄 开始处理OAuth2回调');
    
    // 处理回调逻辑
    await unifiedLoginSDK.handleCallback();
    
    statusMessage.value = '认证成功！正在跳转...';
    console.log('✅ 认证回调处理完成');
    
    // SDK会自动跳转到配置的homePage
    // 如果需要自定义跳转，可以在这里处理
    
  } catch (error: any) {
    console.error('❌ 认证回调处理失败:', error);
    statusMessage.value = '认证失败';
    errorMessage.value = error.message || '未知错误';
    
    // 3秒后跳转到首页
    setTimeout(() => {
      router.push('/');
    }, 3000);
  }
};

// 页面加载时处理回调
onMounted(() => {
  handleCallback();
});
</script>

<style scoped>
.callback-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.loading-container {
  text-align: center;
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  width: 90%;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-container h2 {
  color: #333;
  margin: 0 0 10px 0;
  font-size: 20px;
}

.error-message {
  color: #ff4757;
  margin: 15px 0 0 0;
  padding: 10px;
  background: #ffebee;
  border-radius: 5px;
  border-left: 4px solid #ff4757;
}

@media (max-width: 480px) {
  .loading-container {
    padding: 30px 20px;
  }
  
  .loading-container h2 {
    font-size: 18px;
  }
}
</style>