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

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

import AdminKuaishouCloudRuleCard from './AdminKuaishouCloudRuleCard.vue'

defineProps<{
  enabled: boolean
  saving: boolean
  cloudtentaclesSourceOptions: { key: string; label: string }[]
  cloudSkuCatalogLoading: boolean
  validationState: ValidationState
  items: EditableItem[]
  filteredItems: EditableItem[]
  ruleFilter: RuleFilter
  ruleFilterOptions: Array<{ value: RuleFilter; label: string; count: number }>
  isCollapsed: (localId: string) => 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
  cloudSkuCatalogErrorMessage: string
}>()

const emit = defineEmits<{
  'update:enabled': [value: boolean]
  'update:ruleFilter': [value: RuleFilter]
  expandAll: []
  collapseReady: []
  refreshCloudSku: []
  addItem: []
  saveConfigs: []
  toggleCollapsed: [localId: string]
  handleCloudSkuSelected: [item: EditableItem, value: number | string | undefined]
  handleCloudSkuDropdownVisible: [item: EditableItem, visible: boolean]
  handleKuaishouConsumeShopSelected: [item: EditableItem]
  removeItem: [localId: string]
}>()
</script>

<template>
  <section class="table-card table-card--dense">
    <div class="section-title-row section-title-row--tight">
      <div>
        <h3>规则编辑</h3>
        <p>每一条规则描述"快手外部商品"如何映射到"内部 SKU + cloud 资源"。</p>
      </div>
      <div class="section-header-tools">
        <div class="section-mini-stats">
          <el-button
            v-for="option in ruleFilterOptions"
            :key="option.value"
            round
            size="small"
            :type="ruleFilter === option.value ? 'primary' : 'default'"
            @click="emit('update:ruleFilter', option.value)"
          >
            {{ option.label }} {{ option.count }}
          </el-button>
        </div>
        <div class="section-action-group">
          <el-button round @click="emit('expandAll')">全部展开</el-button>
          <el-checkbox
            :model-value="enabled"
            @update:model-value="emit('update:enabled', Boolean($event))"
          >
            启用整条配置
          </el-checkbox>
          <el-button round @click="emit('collapseReady')">收起已完成</el-button>
          <el-button round :loading="cloudSkuCatalogLoading" @click="emit('refreshCloudSku')"
            >刷新 cloud SKU</el-button
          >
          <el-button round @click="emit('addItem')">新增规则</el-button>
          <el-button round type="primary" :loading="saving" @click="emit('saveConfigs')"
            >保存全部</el-button
          >
        </div>
      </div>
    </div>

    <p v-if="validationState?.message" class="validation-banner">
      {{ validationState.message }}
    </p>
    <div v-if="items.length === 0" class="empty-inline">当前还没有新履约规则，先新增一条。</div>
    <div v-else-if="filteredItems.length === 0" class="empty-inline">当前筛选下没有规则。</div>

    <AdminKuaishouCloudRuleCard
      v-for="(item, index) in filteredItems"
      :key="item.localId"
      :item="item"
      :index="index"
      :validation-state="validationState"
      :cloudtentacles-source-options="cloudtentaclesSourceOptions"
      :cloud-sku-catalog-error-message="cloudSkuCatalogErrorMessage"
      :cloud-sku-catalog-loading="cloudSkuCatalogLoading"
      :is-collapsed="isCollapsed(item.localId)"
      :is-item-complete="isItemComplete"
      :get-card-title="getCardTitle"
      :get-card-summary="getCardSummary"
      :get-rule-state="getRuleState"
      :get-external-match-summary="getExternalMatchSummary"
      :get-cloud-sku-summary="getCloudSkuSummary"
      :get-consume-shop-summary="getConsumeShopSummary"
      :get-cloud-sku-options="getCloudSkuOptions"
      :format-cloud-sku-option-label="formatCloudSkuOptionLabel"
      :get-kuaishou-consume-shop-options="getKuaishouConsumeShopOptions"
      :format-kuaishou-consume-shop-option="formatKuaishouConsumeShopOption"
      @toggle-collapsed="emit('toggleCollapsed', item.localId)"
      @handle-cloud-sku-selected="emit('handleCloudSkuSelected', item, $event)"
      @handle-cloud-sku-dropdown-visible="emit('handleCloudSkuDropdownVisible', item, $event)"
      @handle-kuaishou-consume-shop-selected="emit('handleKuaishouConsumeShopSelected', item)"
      @remove="emit('removeItem', item.localId)"
    />
  </section>
</template>

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