<script setup lang="ts">
import { PROFILE_OPTIONS } from '../composables/types'
import type { EditableBinding, ValidationField, ValidationState } from '../composables/types'

defineProps<{
  binding: EditableBinding
  index: number
  validationState: ValidationState
  isBindingCollapsed: boolean
  isComplete: boolean
  title: string
  statusLabel: string
  summary: string
  isInvalid: boolean
  isFieldInvalid: (
    field: ValidationField | 'externalSkuCode' | 'externalItemId' | 'externalSkuName',
  ) => boolean
}>()

const emit = defineEmits<{
  toggleCollapsed: []
  clearValidation: []
  remove: []
}>()
</script>

<template>
  <div
    :data-binding-id="binding.id"
    :class="['binding-card', { 'binding-card--invalid': isInvalid }]"
  >
    <div class="binding-header">
      <div class="binding-summary">
        <div class="binding-title-row">
          <strong>{{ title }}</strong>
          <span :class="['binding-status-chip', { 'binding-status-chip--done': isComplete }]">
            {{ statusLabel }}
          </span>
        </div>
        <span class="binding-subtle">{{ summary }}</span>
      </div>
      <el-button link type="primary" @click="emit('toggleCollapsed')">
        {{ isBindingCollapsed ? '展开' : '折叠' }}
      </el-button>
    </div>

    <div v-if="isBindingCollapsed" class="binding-collapsed-preview">
      <span
        >外部商品：{{
          binding.externalSkuName || binding.externalSkuCode || binding.externalItemId || '-'
        }}</span
      >
      <span>内部履约 SKU：{{ binding.skuCode || '-' }}</span>
      <span
        >履约方式：{{
          PROFILE_OPTIONS.find((item) => item.value === binding.profileKey)?.label ||
          binding.profileKey
        }}</span
      >
    </div>

    <div v-else class="binding-grid">
      <label class="field-block">
        <span>渠道</span>
        <el-input
          v-model="binding.provider"
          class="text-input"
          placeholder="agiso"
          @input="emit('clearValidation')"
        />
      </label>

      <label class="field-block">
        <span>平台</span>
        <el-input
          v-model="binding.platform"
          class="text-input"
          placeholder="xianyu / taobao / pdd"
          @input="emit('clearValidation')"
        />
      </label>

      <label class="field-block">
        <span>店铺 ID</span>
        <el-input
          v-model="binding.shopId"
          :class="[{ 'text-input--invalid': isFieldInvalid('shopId') }]"
          class="text-input"
          data-field="shopId"
          placeholder="留空表示跨店铺通用"
          @input="emit('clearValidation')"
        />
      </label>

      <label class="field-block">
        <span>店铺名称</span>
        <el-input
          v-model="binding.shopName"
          class="text-input"
          placeholder="用于保存和识别店铺"
          @input="emit('clearValidation')"
        />
      </label>

      <label class="field-block">
        <span>优先级</span>
        <el-input-number
          v-model="binding.priority"
          class="text-input"
          :min="1"
          controls-position="right"
          @change="emit('clearValidation')"
        />
      </label>

      <label class="field-block">
        <span>外部 SKU 编码</span>
        <el-input
          v-model="binding.externalSkuCode"
          :class="[{ 'text-input--invalid': isFieldInvalid('externalSkuCode') }]"
          class="text-input"
          data-field="externalSkuCode"
          placeholder="例如 6046726460016"
          @input="emit('clearValidation')"
        />
      </label>

      <label class="field-block">
        <span>外部商品 ID</span>
        <el-input
          v-model="binding.externalItemId"
          :class="[{ 'text-input--invalid': isFieldInvalid('externalItemId') }]"
          class="text-input"
          data-field="externalItemId"
          placeholder="例如 1033324289962"
          @input="emit('clearValidation')"
        />
      </label>

      <label class="field-block field-wide">
        <span>外部商品名</span>
        <el-input
          v-model="binding.externalSkuName"
          :class="[{ 'text-input--invalid': isFieldInvalid('externalSkuName') }]"
          class="text-input"
          data-field="externalSkuName"
          placeholder="例如 奥利奥动作"
          @input="emit('clearValidation')"
        />
      </label>

      <label class="field-block">
        <span>内部履约 SKU</span>
        <el-input
          v-model="binding.skuCode"
          :class="[{ 'text-input--invalid': isFieldInvalid('skuCode') }]"
          class="text-input"
          data-field="skuCode"
          placeholder="例如 sjz_hdl_test01"
          @input="emit('clearValidation')"
        />
        <small class="field-help"
          >填你们系统内部统一 SKU。相同履约商品，尽量跨平台共用同一个内部 SKU。</small
        >
      </label>

      <label class="field-block">
        <span>内部商品名</span>
        <el-input
          v-model="binding.skuName"
          class="text-input"
          placeholder="用于后台展示"
          @input="emit('clearValidation')"
        />
      </label>

      <label class="field-block">
        <span>履约方式</span>
        <el-select
          v-model="binding.profileKey"
          :class="[{ 'text-input--invalid': isFieldInvalid('profileKey') }]"
          class="text-input"
          data-field="profileKey"
          @change="emit('clearValidation')"
        >
          <el-option
            v-for="item in PROFILE_OPTIONS"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </label>

      <label class="field-block">
        <span>匹配后展示名</span>
        <el-input
          v-model="binding.resolvedSkuName"
          class="text-input"
          placeholder="例如 三角洲行动-自动领取"
          @input="emit('clearValidation')"
        />
      </label>
    </div>

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

    <div class="binding-actions">
      <el-checkbox v-model="binding.enabled">启用规则</el-checkbox>
      <el-button link type="danger" @click="emit('remove')">删除</el-button>
    </div>
  </div>
</template>

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