<script setup lang="ts">
import { CircleClose, Loading } from '@element-plus/icons-vue'

import ClaimBindingStep from './components/ClaimBindingStep.vue'
import ClaimConfirmStep from './components/ClaimConfirmStep.vue'
import ClaimHeaderCard from './components/ClaimHeaderCard.vue'
import ClaimResultStep from './components/ClaimResultStep.vue'
import ClaimTicketStep from './components/ClaimTicketStep.vue'
import { useKuaishouCloudClaim } from './composables/useKuaishouCloudClaim'

const props = defineProps<{
  token: string
}>()

const claim = useKuaishouCloudClaim(() => props.token)
</script>

<template>
  <main class="claim-page">
    <ClaimHeaderCard
      :order="claim.order.value"
      :product="claim.product.value"
      :current-step="claim.currentStep.value"
      :progress-text="claim.progressText.value"
    />

    <div v-if="claim.loading.value" class="content-card loading-card">
      <el-icon class="large-icon spinning"><Loading /></el-icon>
      <p>正在读取当前领取进度...</p>
    </div>

    <div v-else-if="claim.errorMessage.value" class="content-card error-card">
      <el-icon class="large-icon error"><CircleClose /></el-icon>
      <p>{{ claim.errorMessage.value }}</p>
    </div>

    <template v-else-if="claim.detail.value && claim.flow.value">
      <ClaimTicketStep
        v-if="claim.currentStep.value === 1"
        :ticket-code="claim.ticketCode.value"
        :can-submit-ticket="claim.canSubmitTicket.value"
        :submitting="claim.submitting.value"
        :is-binding-preparing="claim.isBindingPreparing.value"
        :flow="claim.flow.value"
        @update:ticket-code="claim.ticketCode.value = $event"
        @submit-ticket="claim.submitTicket()"
      />

      <ClaimBindingStep
        v-else-if="claim.currentStep.value === 2"
        :qr-code-data-url="claim.qrCodeDataUrl.value"
        :is-binding-prepared="claim.isBindingPrepared.value"
        :is-binding-preparing="claim.isBindingPreparing.value"
        :is-role-ready="claim.isRoleReady.value"
        :role-name="claim.roleName.value"
        :role-id="claim.roleId.value"
        :refreshing-role="claim.refreshingRole.value"
        :confirming-role="claim.confirmingRole.value"
        :flow="claim.flow.value"
        :format-date-time="claim.formatAdminDateTime"
        @open-bind-url="claim.openBindUrl($event)"
        @refresh-role="claim.refreshRole()"
        @confirm-role="claim.confirmRole()"
      />

      <ClaimConfirmStep
        v-else-if="claim.currentStep.value === 3"
        :role-name="claim.roleName.value"
        :role-id="claim.roleId.value"
        :product="claim.product.value"
        :redeeming="claim.redeeming.value"
        @confirm-redeem="claim.confirmRedeem()"
      />

      <ClaimResultStep
        v-else
        :result-title="claim.resultTitle.value"
        :result-description="claim.resultDescription.value"
        :flow="claim.flow.value"
        :order="claim.order.value"
        :product="claim.product.value"
        :role-name="claim.roleName.value"
        :role-id="claim.roleId.value"
        :format-date-time="claim.formatAdminDateTime"
      />
    </template>

    <div v-else class="content-card error-card">
      <el-icon class="large-icon error"><CircleClose /></el-icon>
      <p>流程数据不完整，请联系客服处理</p>
    </div>
  </main>
</template>

<style scoped>
.claim-page {
  min-height: 100vh;
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.content-card {
  width: 100%;
  max-width: 680px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(12px);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.loading-card,
.error-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px;
}

.large-icon {
  font-size: 44px;
}

.large-icon.success {
  color: #16a34a;
}

.large-icon.error {
  color: #dc2626;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 720px) {
  .claim-page {
    padding: 16px;
  }

  .content-card {
    max-width: 100%;
  }
}
</style>
