<script setup lang="ts">
import type {
  AdminCloudtentaclesLoginTestResult,
  AdminCloudtentaclesValidateSessionResult,
} from '@/types/admin'
import AdminResultCard from '@/components/admin/AdminResultCard.vue'

type Props = {
  cloudtentaclesLoginResult: AdminCloudtentaclesLoginTestResult | null
  cloudtentaclesValidateResult: AdminCloudtentaclesValidateSessionResult | null
}

defineProps<Props>()
</script>

<template>
  <el-card v-if="cloudtentaclesLoginResult || cloudtentaclesValidateResult" class="section-card">
    <template #header>
      <div>
        <span class="card-title">cloudtentacles 调试结果</span>
        <p class="card-desc">
          用于确认当前账号会话、权限和用户信息，后续发货执行器会复用这里的登录能力。
        </p>
      </div>
    </template>

    <div class="result-grid">
      <AdminResultCard
        label="当前 token"
        :value="
          cloudtentaclesValidateResult?.session.tokenMasked ||
          cloudtentaclesLoginResult?.session.tokenMasked ||
          '-'
        "
      >
        <p>原始 token 已写入上方输入框，可继续用于校验或后续调试。</p>
      </AdminResultCard>
      <AdminResultCard
        label="权限"
        :value="`${cloudtentaclesValidateResult?.session.permissionCount || cloudtentaclesLoginResult?.session.permissionCount || 0} 项`"
      >
        <p>
          {{
            (
              cloudtentaclesValidateResult?.session.permissions ||
              cloudtentaclesLoginResult?.session.permissions ||
              []
            ).join('、') || '暂无'
          }}
        </p>
      </AdminResultCard>
      <AdminResultCard
        label="余额"
        :value="cloudtentaclesValidateResult?.asset || cloudtentaclesLoginResult?.asset || 0"
      >
        <p>可用于确认当前履约账号状态。</p>
      </AdminResultCard>
    </div>
  </el-card>
</template>

<style scoped>
.section-card {
  border-radius: var(--radius-lg);
}

.card-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.card-desc {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
</style>
