<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import { fetchClaimDetail } from '@/services/claim'

import ClaimTencentView from './ClaimTencentView.vue'
import KuaishouCloudClaimView from './kuaishou-cloud/KuaishouCloudClaimView.vue'

const route = useRoute()
const token = computed(() => String(route.params.token || '').trim())
const loading = ref(true)
const errorMessage = ref('')
const flowType = ref('tencent_claim')

async function bootstrap() {
  loading.value = true
  errorMessage.value = ''

  try {
    const response = await fetchClaimDetail(token.value)
    flowType.value = String(
      response.data.flowType || response.data.task.executorKey || 'tencent_claim',
    ).trim()
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : '读取领取信息失败'
  } finally {
    loading.value = false
  }
}

const isKuaishouCloudFlow = computed(
  () => flowType.value === 'kuaishou_cloud' || flowType.value === 'kuaishou_ct_assisted',
)

onMounted(() => {
  void bootstrap()
})
</script>

<template>
  <main v-if="loading" class="claim-shell loading-shell">
    <section class="shell-card">
      <strong>页面加载中</strong>
      <p>正在识别领取流程类型。</p>
    </section>
  </main>

  <main v-else-if="errorMessage" class="claim-shell error-shell">
    <section class="shell-card">
      <strong>无法打开领取页</strong>
      <p>{{ errorMessage }}</p>
    </section>
  </main>

  <KuaishouCloudClaimView v-else-if="isKuaishouCloudFlow" :token="token" />
  <ClaimTencentView v-else />
</template>

<style scoped>
.claim-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top left, rgba(74, 222, 128, 0.12), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
}

.shell-card {
  width: min(520px, 100%);
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
  text-align: center;
}

.shell-card strong {
  display: block;
  margin-bottom: 10px;
  color: #0f172a;
}

.shell-card p {
  margin: 0;
  color: #475569;
}
</style>
