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

type KuaishouCloudFlow = NonNullable<AdminTaskDetail['kuaishouCloudFulfillment']>
type RoleInfoEntry = {
  key: string
  label: string
  value: string
}
type ChecklistItem = {
  key: string
  label: string
  status: string
  detail: string
}

interface Props {
  detail: AdminTaskDetail
  flow: KuaishouCloudFlow
  roleInfoEntries: RoleInfoEntry[]
  checklist: ChecklistItem[]
  claimUrl: string
  actionLoading: boolean
}

defineProps<Props>()

const collapsePanels = ['claim', 'ticket', 'cloud']

const emit = defineEmits<{
  refreshRole: []
  copyBindUrl: [url: string]
  openBindUrl: [url: string]
}>()
</script>

<template>
  <section class="info-card flow-card">
    <div class="flow-card-head">
      <div>
        <h3>快手 Cloud 履约面板</h3>
        <p class="section-copy">
          这是一套独立的快手 Cloud 任务面板，优先展示角色信息与当前履约推进点，次级明细可按需展开。
        </p>
      </div>
      <div class="flow-head-actions">
        <el-button
          v-if="detail.operations.canRefreshKuaishouCloudRoleInfo"
          :loading="actionLoading"
          round
          @click="emit('refreshRole')"
        >
          刷新角色信息
        </el-button>
        <el-button
          v-if="flow.binding.bindUrl"
          round
          @click="emit('copyBindUrl', flow.binding.bindUrl)"
        >
          复制绑定链接
        </el-button>
        <el-button
          v-if="flow.binding.bindUrl"
          round
          type="primary"
          plain
          @click="emit('openBindUrl', flow.binding.bindUrl)"
        >
          打开绑定页
        </el-button>
      </div>
    </div>

    <div class="redeem-summary-grid">
      <article class="redeem-summary-card">
        <span>准备状态</span>
        <div class="auto-delivery-tag-line">
          <AdminStatusTag :status="flow.binding.prepareStatus" />
        </div>
      </article>
      <article class="redeem-summary-card">
        <span>发货状态</span>
        <div class="auto-delivery-tag-line">
          <AdminStatusTag :status="flow.dispatch.status" />
        </div>
      </article>
      <article class="redeem-summary-card">
        <span>退号状态</span>
        <div class="auto-delivery-tag-line">
          <AdminStatusTag :status="flow.returnNumber.status" />
        </div>
      </article>
      <article class="redeem-summary-card">
        <span>当前任务状态</span>
        <div class="auto-delivery-tag-line">
          <AdminStatusTag :status="detail.task.status" />
        </div>
      </article>
    </div>

    <div class="kuaishou-focus-grid">
      <article class="flow-block flow-block--spotlight">
        <div class="spotlight-head">
          <div>
            <h4>角色信息</h4>
            <p class="flow-copy">
              角色信息来自 cloudtentacles 的 `vn/bind_info`，客服可在客户绑定后手动刷新。
            </p>
          </div>
          <div class="spotlight-actions">
            <AdminStatusTag :status="flow.role?.status || 'pending'" />
            <el-button
              v-if="detail.operations.canRefreshKuaishouCloudRoleInfo"
              :loading="actionLoading"
              round
              size="small"
              @click="emit('refreshRole')"
            >
              刷新
            </el-button>
          </div>
        </div>
        <div class="role-hero">
          <div>
            <span>角色名</span>
            <strong>{{ flow.role?.name || detail.task.roleName || '等待识别' }}</strong>
          </div>
          <div>
            <span>角色 ID</span>
            <strong>{{ flow.role?.rid || detail.task.roleId || '等待识别' }}</strong>
          </div>
          <div>
            <span>最近刷新</span>
            <strong>{{ formatAdminDateTime(flow.role?.refreshedAt) }}</strong>
          </div>
        </div>
        <p v-if="flow.role?.errorMessage" class="role-warning">
          {{ flow.role.errorMessage }}
        </p>
        <div v-if="roleInfoEntries.length > 0" class="flow-meta-list flow-meta-list--dense">
          <div v-for="entry in roleInfoEntries" :key="entry.key">
            <span>{{ entry.label }}</span>
            <strong>{{ entry.value }}</strong>
          </div>
        </div>
      </article>

      <article class="flow-block flow-block--checklist">
        <h4>流程检查</h4>
        <p class="flow-copy">
          客服可以先看这里，快速判断卡在哪一步，再决定是刷新角色、准备资源、发货还是退号。
        </p>
        <div class="checklist-grid">
          <div v-for="item in checklist" :key="item.key" class="checklist-item">
            <div class="checklist-item-head">
              <span>{{ item.label }}</span>
              <AdminStatusTag :status="item.status" />
            </div>
            <strong>{{ item.detail }}</strong>
          </div>
        </div>
      </article>
    </div>

    <el-collapse :model-value="collapsePanels" class="flow-collapse">
      <el-collapse-item name="claim" title="客户领取与绑定">
        <div class="flow-meta-list flow-meta-list--two-column">
          <div>
            <span>客户链接</span><strong>{{ claimUrl || '-' }}</strong>
          </div>
          <div>
            <span>绑定链接</span><strong>{{ flow.binding.bindUrl || '-' }}</strong>
          </div>
          <div>
            <span>Token 状态</span><strong>{{ detail.claimToken?.status || '-' }}</strong>
          </div>
          <div>
            <span>准备时间</span
            ><strong>{{ formatAdminDateTime(flow.binding.bindPreparedAt) }}</strong>
          </div>
          <div>
            <span>首次提交</span><strong>{{ formatAdminDateTime(flow.ticket.capturedAt) }}</strong>
          </div>
          <div>
            <span>校验时间</span><strong>{{ formatAdminDateTime(flow.ticket.verifiedAt) }}</strong>
          </div>
          <div>
            <span>虚拟号 ID</span><strong>{{ flow.binding.vnId || '-' }}</strong>
          </div>
          <div>
            <span>虚拟号码</span><strong>{{ flow.binding.vnPhone || '-' }}</strong>
          </div>
        </div>
        <p class="manual-hint">
          客户会先在领取页查看图文指引并提交核销码，只有校验通过后才会自动跳转绑定链接。
        </p>
      </el-collapse-item>

      <el-collapse-item name="ticket" title="核销与商品信息">
        <div class="flow-meta-list flow-meta-list--two-column">
          <div>
            <span>核销码</span><strong>{{ flow.ticket.code || '-' }}</strong>
          </div>
          <div>
            <span>校验状态</span><strong>{{ flow.ticket.status || '-' }}</strong>
          </div>
          <div>
            <span>商品标题</span><strong>{{ flow.ticket.goodsTitle || '-' }}</strong>
          </div>
          <div>
            <span>剩余次数</span><strong>{{ flow.ticket.leftCount || 0 }}</strong>
          </div>
        </div>
        <p class="manual-hint">
          "确认绑定完成并发货"已经合并为一个按钮，只有核销码通过校验后才能继续。
        </p>
      </el-collapse-item>

      <el-collapse-item name="cloud" title="Cloud 资源与发货">
        <div class="flow-meta-list flow-meta-list--two-column">
          <div>
            <span>cloudSourceKey</span><strong>{{ flow.binding.cloudSourceKey || '-' }}</strong>
          </div>
          <div>
            <span>cloud SKU</span>
            <strong>{{
              flow.binding.skuId ? `${flow.binding.skuId} / ${flow.binding.skuName || '-'}` : '-'
            }}</strong>
          </div>
          <div>
            <span>VN Key</span><strong>{{ flow.binding.vnKey || '-' }}</strong>
          </div>
          <div>
            <span>自动购买</span
            ><strong>{{ flow.purchase.autoBuyEnabled ? '开启' : '关闭' }}</strong>
          </div>
          <div>
            <span>背包命中</span><strong>{{ flow.purchase.usedKnapsack ? '是' : '否' }}</strong>
          </div>
          <div>
            <span>触发购买</span
            ><strong>{{ flow.purchase.purchaseTriggered ? '是' : '否' }}</strong>
          </div>
          <div>
            <span>购买时间</span
            ><strong>{{ formatAdminDateTime(flow.purchase.purchaseAt) }}</strong>
          </div>
          <div>
            <span>发货时间</span
            ><strong>{{ formatAdminDateTime(flow.dispatch.dispatchAt) }}</strong>
          </div>
          <div>
            <span>发送类型</span><strong>{{ flow.dispatch.sendType || '-' }}</strong>
          </div>
          <div>
            <span>结果说明</span
            ><strong>{{ flow.dispatch.note || detail.task.resultMessage || '-' }}</strong>
          </div>
        </div>
      </el-collapse-item>

      <el-collapse-item name="closure" title="流程收口">
        <div class="flow-meta-list flow-meta-list--two-column">
          <div>
            <span>退号时间</span
            ><strong>{{ formatAdminDateTime(flow.returnNumber.returnedAt) }}</strong>
          </div>
          <div>
            <span>自动退号</span
            ><strong>{{ flow.returnNumber.autoReturnEnabled ? '开启' : '关闭' }}</strong>
          </div>
          <div>
            <span>自动核销</span
            ><strong>{{ flow.consume.autoConsumeEnabled ? '开启' : '关闭' }}</strong>
          </div>
          <div>
            <span>核销店铺</span><strong>{{ flow.consume.shopId || '-' }}</strong>
          </div>
          <div>
            <span>核销店铺名</span><strong>{{ flow.consume.shopName || '-' }}</strong>
          </div>
          <div>
            <span>核销时间</span><strong>{{ formatAdminDateTime(flow.consume.consumedAt) }}</strong>
          </div>
          <div>
            <span>核销异常</span><strong>{{ flow.consume.errorMessage || '-' }}</strong>
          </div>
          <div>
            <span>备注</span><strong>{{ flow.notes || '-' }}</strong>
          </div>
        </div>
      </el-collapse-item>

      <el-collapse-item v-if="roleInfoEntries.length > 0" name="raw" title="角色原始字段">
        <div class="flow-meta-list flow-meta-list--two-column">
          <div v-for="entry in roleInfoEntries" :key="`raw-${entry.key}`">
            <span>{{ entry.label }}</span>
            <strong>{{ entry.value }}</strong>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </section>
</template>

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