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

type KuaishouEticketDebugForm = {
  selectedShopId: string
  queryTicketCode: string
  eTicketId: string
  oid: string
  formToken: string
  num: number
  storeId: string
}

type Props = {
  kuaishouEticketShops: { id: string; kshopName: string; shopId: string }[]
  kuaishouEticketForm: KuaishouEticketDebugForm
  kuaishouEticketDetailing: boolean
  kuaishouEticketConsuming: boolean
  kuaishouEticketDetailResult: AdminKuaishouEticketDetailResult | null
  kuaishouEticketConsumeResult: AdminKuaishouEticketConsumeResult | null
  handleKuaishouEticketQueryDetail: () => void | Promise<void>
  handleKuaishouEticketConsume: () => void | Promise<void>
}

defineProps<Props>()
</script>

<template>
  <el-card class="section-card">
    <template #header>
      <div class="card-header">
        <div>
          <span class="card-title">快手小店核销调试</span>
          <p class="card-desc">
            这里使用"当前调试店铺"的 Cookie 执行查询与核销；eTicketId / oid / formToken
            都来自查询结果。
          </p>
        </div>
        <div class="card-actions">
          <el-button :loading="kuaishouEticketDetailing" @click="handleKuaishouEticketQueryDetail"
            >查询核销信息</el-button
          >
          <el-button
            :loading="kuaishouEticketConsuming"
            type="primary"
            @click="handleKuaishouEticketConsume"
            >执行核销</el-button
          >
        </div>
      </div>
    </template>

    <div class="debug-layout">
      <div class="debug-main">
        <el-form label-width="auto" label-position="top">
          <el-form-item label="调试店铺">
            <el-select
              v-model="kuaishouEticketForm.selectedShopId"
              placeholder="请选择店铺"
              class="w-full"
            >
              <el-option
                v-for="shop in kuaishouEticketShops"
                :key="shop.id"
                :label="shop.kshopName || shop.shopId || '未命名店铺'"
                :value="shop.id"
              />
            </el-select>
          </el-form-item>
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="查询券码">
                <el-input
                  v-model="kuaishouEticketForm.queryTicketCode"
                  placeholder="用于查询核销信息"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="核销数量">
                <el-input-number
                  v-model="kuaishouEticketForm.num"
                  :min="1"
                  controls-position="right"
                  class="w-full"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="storeId">
                <el-input v-model="kuaishouEticketForm.storeId" placeholder="默认 0" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <el-card shadow="never" class="auto-fill-card">
        <template #header>
          <div>
            <span class="card-title">自动回填参数</span>
            <span class="text-muted ml-2">查询后生成</span>
          </div>
        </template>
        <el-form label-width="auto" label-position="top">
          <el-row :gutter="16">
            <el-col :span="8">
              <el-form-item label="eTicketId">
                <el-input
                  :model-value="kuaishouEticketForm.eTicketId"
                  readonly
                  placeholder="查询后自动回填"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="oid">
                <el-input
                  :model-value="kuaishouEticketForm.oid"
                  readonly
                  placeholder="查询后自动回填"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="formToken">
                <el-input
                  :model-value="kuaishouEticketForm.formToken"
                  readonly
                  placeholder="查询后自动回填"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <div class="result-grid mt-4">
      <AdminResultCard
        label="详情查询"
        :value="
          kuaishouEticketDetailResult
            ? kuaishouEticketDetailResult.ok
              ? '成功'
              : '已返回'
            : '未执行'
        "
      >
        <p v-if="kuaishouEticketDetailResult?.detail">
          {{
            kuaishouEticketDetailResult.goods?.itemTitle ||
            kuaishouEticketDetailResult.goods?.skuDesc ||
            '-'
          }}， 剩余 {{ kuaishouEticketDetailResult.detail.leftCount }} /
          {{ kuaishouEticketDetailResult.detail.totalCount }}
        </p>
        <p v-else>先通过查询券码获取核销详情并自动带出核销参数。</p>
      </AdminResultCard>
      <AdminResultCard
        label="核销执行"
        :value="
          kuaishouEticketConsumeResult
            ? kuaishouEticketConsumeResult.consumed
              ? '已处理'
              : '已返回'
            : '未执行'
        "
      >
        <p v-if="kuaishouEticketConsumeResult">
          {{
            kuaishouEticketConsumeResult.errorMessage ||
            (kuaishouEticketConsumeResult.ok ? '核销成功' : '接口已返回结果')
          }}
        </p>
        <p v-else>查询详情后再执行核销会更稳妥。</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);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.card-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.debug-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
  gap: var(--space-4);
}

.auto-fill-card {
  background: var(--bg-subtle);
}

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

.text-muted {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .debug-layout {
    grid-template-columns: 1fr;
  }
}
</style>
