<template>
  <div class="consent-container">
    <el-card class="consent-card">
      <div v-if="error" class="error-state">
        <el-icon class="icon-error"><CircleCloseFilled /></el-icon>
        <h3>授权失败</h3>
        <p>{{ error }}</p>
      </div>
      <div v-else class="loading-state">
        <el-icon class="is-loading"><Loading /></el-icon>
        <p>正在处理授权...</p>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getConsentRequest } from '../api/oidc'
import { Loading, CircleCloseFilled } from '@element-plus/icons-vue'

const route = useRoute()
const error = ref('')

onMounted(async () => {
  const challenge = route.query.consent_challenge as string
  if (!challenge) {
    error.value = "缺少授权 challenge 参数"
    return
  }
  
  try {
    const res = await getConsentRequest(challenge)
    if (res.data.redirect_to) {
      window.location.href = res.data.redirect_to
    } else {
      error.value = "服务器响应异常"
    }
  } catch (e: any) {
    error.value = e.response?.data?.detail || "授权处理失败"
  }
})
</script>

<style scoped>
.consent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}
.consent-card {
  width: 400px;
  text-align: center;
  padding: 20px;
}
.icon-error {
  font-size: 48px;
  color: #f56c6c;
}
.is-loading {
  font-size: 32px;
  color: #409eff;
}
</style>
