<script setup lang="ts">
import type { AdminCloudtentaclesSkuItem, AdminKuaishouEticketShopConfigItem } from '@/types/admin'

import type { EditableItem, ValidationState } from '../composables/types'

defineProps<{
  item: EditableItem
  index: number
  validationState: ValidationState
  cloudtentaclesSourceOptions: { key: string; label: string }[]
  cloudSkuCatalogErrorMessage: string
  cloudSkuCatalogLoading: boolean
  isCollapsed: boolean
  isItemComplete: (item: EditableItem) => boolean
  getCardTitle: (item: EditableItem, index: number) => string
  getCardSummary: (item: EditableItem) => string
  getRuleState: (item: EditableItem) => { label: string; tone: string }
  getExternalMatchSummary: (item: EditableItem) => string
  getCloudSkuSummary: (item: EditableItem) => string
  getConsumeShopSummary: (item: EditableItem) => string
  getCloudSkuOptions: (item: EditableItem) => AdminCloudtentaclesSkuItem[]
  formatCloudSkuOptionLabel: (sku: AdminCloudtentaclesSkuItem) => string
  getKuaishouConsumeShopOptions: () => AdminKuaishouEticketShopConfigItem[]
  formatKuaishouConsumeShopOption: (shop: AdminKuaishouEticketShopConfigItem) => string
}>()

const emit = defineEmits<{
  toggleCollapsed: []
  handleCloudSkuSelected: [value: number | string | undefined]
  handleCloudSkuDropdownVisible: [visible: boolean]
  handleKuaishouConsumeShopSelected: []
  remove: []
}>()
</script>

<template>
  <div
    :data-local-id="item.localId"
    :class="[
      'binding-card',
      { 'binding-card--invalid': validationState?.localId === item.localId },
    ]"
  >
    <div class="binding-header">
      <div class="binding-summary">
        <div class="binding-title-row">
          <strong>{{ getCardTitle(item, index) }}</strong>
          <span
            :class="['binding-status-chip', { 'binding-status-chip--done': isItemComplete(item) }]"
          >
            {{ getRuleState(item).label }}
          </span>
        </div>
        <span class="binding-subtle">{{ getCardSummary(item) }}</span>
      </div>
      <el-button link type="primary" @click="emit('toggleCollapsed')">
        {{ isCollapsed ? '展开' : '折叠' }}
      </el-button>
    </div>

    <div v-if="isCollapsed" class="binding-collapsed-preview">
      <span>外部商品：{{ getExternalMatchSummary(item) }}</span>
      <span>内部 SKU：{{ item.internalSkuCode || '-' }}</span>
      <span>cloud 资源：{{ getCloudSkuSummary(item) }}</span>
      <span>核销店铺：{{ getConsumeShopSummary(item) }}</span>
    </div>

    <div v-else class="mapping-editor">
      <section class="mapping-panel mapping-panel--external">
        <div class="mapping-panel-head">
          <strong>外部商品</strong>
          <span>来源平台 / 快手侧命中条件</span>
        </div>

        <div class="mapping-grid">
          <label class="field-block">
            <span>来源 provider</span>
            <el-input
              v-model="item.provider"
              class="text-input"
              maxlength="32"
              placeholder="默认 91kaquan"
            />
          </label>
          <label class="field-block">
            <span>来源 platform</span>
            <el-input
              v-model="item.platform"
              class="text-input"
              maxlength="32"
              placeholder="默认 kuaishou"
            />
          </label>
          <label class="field-block field-wide">
            <span>店铺 ID</span>
            <el-input
              v-model="item.shopId"
              class="text-input"
              maxlength="80"
              placeholder="留空表示跨店铺共用"
            />
          </label>
          <label class="field-block">
            <span>外部 SKU</span>
            <el-input
              v-model="item.externalSkuCode"
              class="text-input"
              maxlength="120"
              placeholder="例如 91卡券 productNo"
            />
          </label>
          <label class="field-block">
            <span>外部商品 ID</span>
            <el-input
              v-model="item.externalItemId"
              class="text-input"
              maxlength="120"
              placeholder="平台商品 ID"
            />
          </label>
          <label class="field-block field-wide">
            <span>外部商品名</span>
            <el-input
              v-model="item.externalSkuName"
              class="text-input"
              maxlength="200"
              placeholder="用于名称匹配"
            />
          </label>
          <label class="field-block field-wide">
            <span>解析商品名</span>
            <el-input
              v-model="item.resolvedSkuName"
              class="text-input"
              maxlength="120"
              placeholder="可作为商品名兜底"
            />
          </label>
        </div>
      </section>

      <div class="mapping-arrow" aria-hidden="true">
        <span>映射到</span>
      </div>

      <section class="mapping-panel mapping-panel--internal">
        <div class="mapping-panel-head">
          <strong>内部履约</strong>
          <span>内部 SKU + cloud 资源</span>
        </div>

        <div class="mapping-grid">
          <label class="field-block">
            <span>内部 SKU</span>
            <el-input
              v-model="item.internalSkuCode"
              class="text-input"
              maxlength="80"
              placeholder="必填，用于生成任务"
            />
          </label>
          <label class="field-block">
            <span>优先级</span>
            <el-input-number
              v-model="item.priority"
              class="text-input"
              :min="1"
              controls-position="right"
            />
          </label>
          <label class="field-block field-wide">
            <span>内部商品名</span>
            <el-input
              v-model="item.internalSkuName"
              class="text-input"
              maxlength="120"
              placeholder="展示用，可选但建议填"
            />
          </label>
          <label class="field-block">
            <span>cloud 主账号</span>
            <el-select
              v-model="item.cloudSourceKey"
              class="text-input"
              placeholder="选择 cloud 账号"
            >
              <el-option
                v-for="opt in cloudtentaclesSourceOptions"
                :key="opt.key"
                :label="opt.label || opt.key"
                :value="opt.key"
              />
            </el-select>
          </label>
          <label class="field-block field-wide">
            <span>备选 cloud 账号</span>
            <el-select
              v-model="item.cloudSourceKeyFallbacks"
              class="text-input"
              multiple
              placeholder="主账号不可用时自动尝试备选"
            >
              <el-option
                v-for="opt in cloudtentaclesSourceOptions.filter(
                  (o) => o.key !== item.cloudSourceKey,
                )"
                :key="opt.key"
                :label="opt.label || opt.key"
                :value="opt.key"
              />
            </el-select>
          </label>
          <label class="field-block">
            <span>cloud SKU ID</span>
            <el-select
              v-model="item.cloudSkuId"
              class="text-input"
              @change="emit('handleCloudSkuSelected', item.cloudSkuId)"
              @visible-change="emit('handleCloudSkuDropdownVisible', $event)"
            >
              <el-option label="请选择 cloud SKU" :value="0" />
              <el-option
                v-for="sku in getCloudSkuOptions(item)"
                :key="sku.id"
                :label="formatCloudSkuOptionLabel(sku)"
                :value="sku.id"
              />
            </el-select>
            <small class="field-help">先填内部 SKU / 商品名，再选择会更容易匹配。</small>
          </label>
          <label class="field-block field-wide">
            <span>cloud SKU 名称</span>
            <el-input
              :model-value="item.cloudSkuName"
              class="text-input text-input--readonly"
              placeholder="选择 cloud SKU 后自动带出"
              readonly
            />
          </label>
          <label class="field-block">
            <span>虚拟号 VN Key</span>
            <el-input class="text-input text-input--readonly" model-value="1" readonly />
          </label>
          <label class="field-block">
            <span>最低保留余额</span>
            <el-input-number
              v-model="item.minAssetReserve"
              class="text-input"
              :min="0"
              controls-position="right"
            />
          </label>
        </div>
      </section>
    </div>

    <div v-if="!isCollapsed" class="mapping-extra">
      <label class="field-block field-wide">
        <span>快手核销店铺</span>
        <el-select
          v-model="item.kuaishouConsumeShopId"
          class="text-input"
          placeholder="请选择已配置 Cookie 的快手小店"
          @change="emit('handleKuaishouConsumeShopSelected')"
        >
          <el-option label="请选择已配置 Cookie 的快手小店" value="" />
          <el-option
            v-for="shop in getKuaishouConsumeShopOptions()"
            :key="shop.shopId"
            :label="formatKuaishouConsumeShopOption(shop)"
            :value="shop.shopId"
          />
        </el-select>
        <small class="field-help"
          >来自"平台店铺 -> 快手小店核销"配置，保存时会自动带出店铺名。</small
        >
      </label>
      <label class="field-block">
        <span>核销店铺 ID</span>
        <el-input
          :model-value="item.kuaishouConsumeShopId || '-'"
          class="text-input text-input--readonly"
          readonly
        />
      </label>
      <label class="field-block">
        <span>核销店铺名</span>
        <el-input
          :model-value="item.kuaishouConsumeShopName || '-'"
          class="text-input text-input--readonly"
          readonly
        />
      </label>
      <label class="field-block field-wide">
        <span>备注</span>
        <el-input
          v-model="item.notes"
          class="text-input textarea-input"
          maxlength="400"
          placeholder="绑定场景、客服注意事项等"
          type="textarea"
        />
      </label>
    </div>

    <p v-if="validationState?.localId === item.localId" class="binding-inline-error">
      {{ validationState?.message }}
    </p>
    <p v-if="cloudSkuCatalogErrorMessage" class="binding-inline-error">
      {{ cloudSkuCatalogErrorMessage }}
    </p>

    <div class="binding-actions">
      <el-checkbox v-model="item.enabled">启用规则</el-checkbox>
      <el-checkbox v-model="item.autoBuyEnabled">自动购买</el-checkbox>
      <el-checkbox v-model="item.autoReturnNumberAfterDispatch">发货后退号</el-checkbox>
      <el-checkbox v-model="item.autoConsumeAfterDispatch">发货后核销</el-checkbox>
      <el-button link type="danger" @click="emit('remove')">删除</el-button>
    </div>
  </div>
</template>

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