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

import type { ClaimKuaishouCloudFlowInfo } from '@/types/claim'

defineProps<{
  qrCodeDataUrl: string
  isBindingPrepared: boolean
  isBindingPreparing: boolean
  isRoleReady: boolean
  refreshingRole: boolean
  confirmingRole: boolean
  flow: ClaimKuaishouCloudFlowInfo
  formatDateTime: (value: string | null) => string
}>()

defineEmits<{
  openBindUrl: [useCurrentPage?: boolean]
  refreshRole: []
  confirmRole: []
}>()
</script>

<template>
  <section class="content-card">
    <h2>第 2 步：扫码绑定角色</h2>
    <p class="muted">
      核销码已验证通过。请扫码或直接打开绑定页面，绑定你自己的游戏角色。绑定信息如果一开始不对，可以重新绑定后再点下一步。
    </p>

    <div v-if="isBindingPrepared && qrCodeDataUrl" class="qr-block">
      <img :src="qrCodeDataUrl" alt="绑定二维码" class="qr-code" />
      <div class="action-row">
        <el-button type="primary" size="large" @click="$emit('openBindUrl', false)">
          新窗口打开绑定页
        </el-button>
        <el-button size="large" plain @click="$emit('openBindUrl', true)"> 当前页面打开 </el-button>
      </div>
    </div>

    <div v-else class="status-banner info">
      <el-icon class="spinning"><Loading /></el-icon>
      <span>系统正在准备绑定资源，请稍后自动刷新。</span>
    </div>

    <p v-if="flow.role.errorMessage" class="muted warning-line">
      {{ flow.role.errorMessage }}
    </p>
    <p v-else class="muted warning-line">
      如果当前角色不正确，请重新打开绑定页完成重新绑定，然后刷新角色信息。
    </p>
    <p class="muted meta-line">
      最近刷新：{{ formatDateTime(flow.role.refreshedAt) }}；链接有效期：{{
        formatDateTime(flow.binding.bindExpiresAt)
      }}
    </p>
    <p v-if="flow.binding.bindProbeMessage" class="muted meta-line">
      链接检测：{{ flow.binding.bindProbeStatus || '-' }} / {{ flow.binding.bindProbeMessage }}
    </p>

    <div class="action-row">
      <el-button size="large" plain :loading="refreshingRole" @click="$emit('refreshRole')">
        <el-icon><RefreshRight /></el-icon>
        刷新角色信息
      </el-button>
      <el-button
        type="primary"
        size="large"
        :loading="confirmingRole"
        :disabled="!isBindingPrepared || !isRoleReady"
        @click="$emit('confirmRole')"
      >
        我已完成绑定，下一步
      </el-button>
    </div>
  </section>
</template>

<style scoped>
.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;
}

.content-card h2 {
  margin: 0;
  color: #0f172a;
}

.muted {
  margin: 0;
  color: #64748b;
  line-height: 1.6;
}

.warning-line {
  color: #b45309;
}

.meta-line {
  font-size: 13px;
}

.status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
}

.status-banner.info {
  background: #eff6ff;
  color: #1d4ed8;
}

.qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
  border: 1px solid #dbeafe;
}

.qr-code {
  width: 280px;
  height: 280px;
  padding: 12px;
  background: #ffffff;
  border-radius: 18px;
}

.action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

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

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

@media (max-width: 720px) {
  .content-card {
    max-width: 100%;
  }

  .qr-code {
    width: min(280px, 100%);
    height: auto;
  }

  .action-row {
    width: 100%;
    flex-direction: column;
  }
}
</style>
