<script setup lang="ts">
/**
 * 文件职责：营销中心-满减活动页面主视图。
 * 1. 还原原型工具栏、统计、活动卡片列表和分页。
 * 2. 编排主编辑抽屉与二级商品范围抽屉。
 */
import type {
  MarketingFullReductionActivityType,
  MarketingFullReductionDisplayStatus,
} from '#/api/marketing';

import { Page } from '@vben/common-ui';

import { Button, Empty, Input, Pagination, Select, Spin } from 'ant-design-vue';

import FullReductionActivityCard from './components/FullReductionActivityCard.vue';
import FullReductionEditorDrawer from './components/FullReductionEditorDrawer.vue';
import FullReductionScopePickerDrawer from './components/FullReductionScopePickerDrawer.vue';
import FullReductionStatsCards from './components/FullReductionStatsCards.vue';
import { useMarketingFullReductionPage } from './composables/useMarketingFullReductionPage';

const {
  addReduceTier,
  applyFilters,
  disableActivity,
  drawerSubmitText,
  drawerTitle,
  filterForm,
  form,
  FULL_REDUCTION_ACTIVITY_FILTER_OPTIONS,
  FULL_REDUCTION_STATUS_FILTER_OPTIONS,
  handlePageChange,
  handlePickerCategoryFilterChange,
  handlePickerScopeTypeChange,
  handlePickerSearch,
  hasStore,
  isDrawerLoading,
  isDrawerOpen,
  isDrawerSubmitting,
  isLoading,
  isPickerLoading,
  isPickerOpen,
  isStoreLoading,
  keyword,
  openCreateDrawer,
  openEditDrawer,
  openGiftApplicablePicker,
  openGiftScopePicker,
  openSecondHalfApplicablePicker,
  page,
  pageSize,
  pickerAllowAll,
  pickerCategories,
  pickerCategoryFilterId,
  pickerKeyword,
  pickerProducts,
  pickerScope,
  pickerTitle,
  removeActivity,
  removeReduceTier,
  resetFilters,
  rows,
  scopedStoreOptions,
  selectedStoreId,
  setDrawerOpen,
  setFormActivityType,
  setFormChannels,
  setFormDescription,
  setFormName,
  setFormStackWithCoupon,
  setFormStoreIds,
  setFormStoreScopeMode,
  setFormValidDateRange,
  setGiftBuyQuantity,
  setGiftGiftQuantity,
  setGiftScopeType,
  setKeyword,
  setPickerCategoryIds,
  setPickerKeyword,
  setPickerOpen,
  setPickerProductIds,
  setReduceTierMeetAmount,
  setReduceTierReduceAmount,
  setSecondHalfDiscountType,
  setSelectedStoreId,
  setStatusFilter,
  setTypeFilter,
  stats,
  storeNameMap,
  storeOptions,
  submitDrawer,
  submitPicker,
  total,
} = useMarketingFullReductionPage();

function onStatusFilterChange(value: unknown) {
  const next =
    typeof value === 'string' && value
      ? (value as MarketingFullReductionDisplayStatus)
      : '';
  setStatusFilter(next);
  void applyFilters();
}

function onTypeFilterChange(value: unknown) {
  const next =
    typeof value === 'string' && value
      ? (value as MarketingFullReductionActivityType)
      : '';
  setTypeFilter(next);
  void applyFilters();
}
</script>

<template>
  <Page title="满减活动" content-class="page-marketing-full-reduction">
    <div class="mfr-page">
      <div class="mfr-toolbar">
        <Select
          class="mfr-store-select"
          :value="selectedStoreId"
          :options="storeOptions"
          :loading="isStoreLoading"
          placeholder="全部门店"
          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
        />

        <Select
          class="mfr-filter-select"
          :value="filterForm.activityType"
          :options="FULL_REDUCTION_ACTIVITY_FILTER_OPTIONS"
          placeholder="全部类型"
          @update:value="onTypeFilterChange"
        />

        <Select
          class="mfr-filter-select"
          :value="filterForm.status"
          :options="FULL_REDUCTION_STATUS_FILTER_OPTIONS"
          placeholder="全部状态"
          @update:value="onStatusFilterChange"
        />

        <Input
          class="mfr-search"
          :value="keyword"
          placeholder="搜索活动名称"
          allow-clear
          @update:value="(value) => setKeyword(String(value ?? ''))"
          @press-enter="applyFilters"
        />

        <Button @click="applyFilters">搜索</Button>
        <Button @click="resetFilters">重置</Button>

        <span class="mfr-spacer"></span>
        <Button type="primary" @click="openCreateDrawer">创建活动</Button>
      </div>

      <FullReductionStatsCards v-if="hasStore" :stats="stats" />

      <div v-if="!hasStore" class="mfr-empty">暂无门店，请先创建门店</div>

      <Spin v-else :spinning="isLoading">
        <div v-if="rows.length > 0" class="mfr-list">
          <FullReductionActivityCard
            v-for="item in rows"
            :key="item.id"
            :item="item"
            :store-name-map="storeNameMap"
            @edit="(row) => openEditDrawer(row.id, row.storeIds)"
            @disable="disableActivity"
            @remove="removeActivity"
          />
        </div>

        <div v-else class="mfr-empty">
          <Empty description="暂无满减活动" />
        </div>

        <div v-if="rows.length > 0" class="mfr-pagination">
          <Pagination
            :current="page"
            :page-size="pageSize"
            :total="total"
            show-size-changer
            :page-size-options="['4', '10', '20', '50']"
            :show-total="(value) => `共 ${value} 条`"
            @change="handlePageChange"
          />
        </div>
      </Spin>
    </div>

    <FullReductionEditorDrawer
      :open="isDrawerOpen"
      :title="drawerTitle"
      :submit-text="drawerSubmitText"
      :submitting="isDrawerSubmitting"
      :loading="isDrawerLoading"
      :form="form"
      :store-options="scopedStoreOptions"
      @close="setDrawerOpen(false)"
      @set-name="setFormName"
      @set-activity-type="setFormActivityType"
      @add-reduce-tier="addReduceTier"
      @remove-reduce-tier="removeReduceTier"
      @set-reduce-tier-meet-amount="setReduceTierMeetAmount"
      @set-reduce-tier-reduce-amount="setReduceTierReduceAmount"
      @set-gift-buy-quantity="setGiftBuyQuantity"
      @set-gift-gift-quantity="setGiftGiftQuantity"
      @set-gift-scope-type="setGiftScopeType"
      @set-second-half-discount-type="setSecondHalfDiscountType"
      @set-valid-date-range="setFormValidDateRange"
      @set-channels="setFormChannels"
      @set-store-scope-mode="setFormStoreScopeMode"
      @set-form-store-ids="setFormStoreIds"
      @set-stack-with-coupon="setFormStackWithCoupon"
      @set-description="setFormDescription"
      @open-gift-applicable-picker="openGiftApplicablePicker"
      @open-gift-scope-picker="openGiftScopePicker"
      @open-second-half-applicable-picker="openSecondHalfApplicablePicker"
      @submit="submitDrawer"
    />

    <FullReductionScopePickerDrawer
      :open="isPickerOpen"
      :loading="isPickerLoading"
      :title="pickerTitle"
      :allow-all="pickerAllowAll"
      :scope="pickerScope"
      :keyword="pickerKeyword"
      :category-filter-id="pickerCategoryFilterId"
      :categories="pickerCategories"
      :products="pickerProducts"
      @close="setPickerOpen(false)"
      @set-scope-type="handlePickerScopeTypeChange"
      @set-keyword="setPickerKeyword"
      @set-category-filter-id="handlePickerCategoryFilterChange"
      @set-category-ids="setPickerCategoryIds"
      @set-product-ids="setPickerProductIds"
      @search="handlePickerSearch"
      @submit="submitPicker"
    />
  </Page>
</template>

<style lang="less">
@import './styles/index.less';
</style>
