<script setup lang="ts">
import AdminStatusTag from '@/components/admin/AdminStatusTag.vue'
import type { AdminTaskDetail } from '@/types/admin'

import type { SummaryCard } from '../composables/types'

interface Props {
  detail: AdminTaskDetail
  isKuaishouCloudTask: boolean
  summaryCards: SummaryCard[]
  claimUrl: string
  claimLinkInvalid: boolean
}

defineProps<Props>()
</script>

<template>
  <!-- Kuaishou Cloud hero card -->
  <section v-if="isKuaishouCloudTask && detail.kuaishouCloudFulfillment" class="hero-card">
    <div class="hero-copy">
      <span class="hero-eyebrow">{{ detail.task.executorKey || 'task' }}</span>
      <h2>{{ detail.task.taskNo }}</h2>
      <p>
        订单 {{ detail.order?.platformOrderId || '-' }} · 商品
        {{ detail.orderItem?.skuName || detail.orderItem?.skuCode || '-' }}
        · 店铺
        {{ detail.order?.shopName || detail.order?.shopId || '-' }}
      </p>
    </div>
    <div class="hero-meta-grid">
      <article
        v-for="card in summaryCards"
        :key="card.label"
        :class="['hero-metric', `hero-metric--${card.tone}`]"
      >
        <span>{{ card.label }}</span>
        <strong>{{ card.value }}</strong>
      </article>
    </div>
    <div class="hero-inline">
      <span>系统绑定 <AdminStatusTag :status="detail.task.systemBindingStatus" /></span>
      <span>完整绑定 <AdminStatusTag :status="detail.task.userBindingStatus" /></span>
      <span v-if="detail.task.lastError">最近异常 {{ detail.task.lastError }}</span>
    </div>
    <div v-if="claimUrl" class="hero-link-row">
      <span>客户领取页</span>
      <a class="claim-link" :href="claimUrl" target="_blank" rel="noreferrer">{{ claimUrl }}</a>
    </div>
    <div v-else-if="claimLinkInvalid" class="hero-link-row">
      <span>客户领取页</span>
      <strong>已失效</strong>
    </div>
  </section>

  <!-- Simple info card for other task types -->
  <section v-else class="info-card">
    <h2>{{ detail.task.taskNo }}</h2>
    <p>
      状态：<AdminStatusTag :status="detail.task.status" /> · 订单：{{
        detail.order?.platformOrderId || '-'
      }}
    </p>
    <p>
      执行器：{{ detail.task.executorKey || '-' }} · 履约：<AdminStatusTag
        :status="detail.task.deliveryStatus"
      />
    </p>
    <p>
      系统绑定：<AdminStatusTag :status="detail.task.systemBindingStatus" /> ·
      完整绑定：<AdminStatusTag :status="detail.task.userBindingStatus" />
    </p>
    <p>
      角色：{{ detail.task.roleName || '-' }} /
      {{ detail.task.roleId || '-' }}
    </p>
    <p>最后错误：{{ detail.task.lastError || '-' }}</p>
    <p v-if="claimUrl">
      领取链接：
      <a class="claim-link" :href="claimUrl" target="_blank" rel="noreferrer">{{ claimUrl }}</a>
    </p>
    <p v-else-if="claimLinkInvalid">领取链接：已失效</p>
  </section>
</template>

<style scoped src="../AdminTaskDetail.css"></style>
