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

import AdminBindingRuleCard from './AdminBindingRuleCard.vue'

defineProps<{
  saving: boolean
  validationState: ValidationState
  bindings: EditableBinding[]
  ruleMetrics: {
    completedCount: number
    draftCount: number
    manualCount: number
    assistedCount: number
    kuaishouCloudCount: number
  }
  isBindingCollapsed: (bindingId: string) => boolean
  isEditableBindingComplete: (binding: EditableBinding) => boolean
  getBindingTitle: (binding: EditableBinding, index: number) => string
  getBindingStatusLabel: (binding: EditableBinding) => string
  getBindingSummary: (binding: EditableBinding) => string
  isBindingInvalid: (bindingId: string) => boolean
  isFieldInvalid: (
    bindingId: string,
    field: ValidationField | 'externalSkuCode' | 'externalItemId' | 'externalSkuName',
  ) => boolean
}>()

const emit = defineEmits<{
  addBinding: []
  loadConfigs: []
  saveConfigs: []
  toggleCollapsed: [bindingId: string]
  clearValidation: []
  removeBinding: [bindingId: string]
}>()
</script>

<template>
  <section class="table-card table-card--dense">
    <div class="section-title-row section-title-row--tight">
      <div>
        <h3>已配置规则</h3>
        <p>正式规则集中维护在这里，新补查到的商品也会导入到这个区域继续补全。</p>
      </div>
      <div class="section-header-tools">
        <div class="section-mini-stats">
          <span class="mini-stat-chip">完整 {{ ruleMetrics.completedCount }}</span>
          <span class="mini-stat-chip">待完善 {{ ruleMetrics.draftCount }}</span>
          <span class="mini-stat-chip">人工 {{ ruleMetrics.manualCount }}</span>
          <span class="mini-stat-chip">半自动 {{ ruleMetrics.assistedCount }}</span>
          <span class="mini-stat-chip">快手 Cloud {{ ruleMetrics.kuaishouCloudCount }}</span>
        </div>
        <div class="section-action-group">
          <el-button round @click="emit('addBinding')">新增规则</el-button>
          <el-button round @click="emit('loadConfigs')">刷新</el-button>
          <el-button :loading="saving" round type="primary" @click="emit('saveConfigs')"
            >保存配置</el-button
          >
        </div>
      </div>
    </div>

    <p v-if="validationState?.message" class="validation-banner">
      {{ validationState.message }}
    </p>

    <div v-if="bindings.length === 0" class="empty-inline">当前还没有履约规则，先新增一条。</div>

    <AdminBindingRuleCard
      v-for="(binding, index) in bindings"
      :key="binding.id"
      :binding="binding"
      :index="index"
      :validation-state="validationState"
      :is-binding-collapsed="isBindingCollapsed(binding.id)"
      :is-complete="isEditableBindingComplete(binding)"
      :title="getBindingTitle(binding, index)"
      :status-label="getBindingStatusLabel(binding)"
      :summary="getBindingSummary(binding)"
      :is-invalid="isBindingInvalid(binding.id)"
      :is-field-invalid="(field) => isFieldInvalid(binding.id, field)"
      @toggle-collapsed="emit('toggleCollapsed', binding.id)"
      @clear-validation="emit('clearValidation')"
      @remove="emit('removeBinding', binding.id)"
    />
  </section>
</template>

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