<script setup lang="ts">
/**
 * 文件职责：营销中心-限时折扣页面。
 */
import type { MarketingFlashSaleDisplayStatus } from '#/api/marketing';

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

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

import FlashSaleActivityCard from './components/FlashSaleActivityCard.vue';
import FlashSaleEditorDrawer from './components/FlashSaleEditorDrawer.vue';
import FlashSaleProductPickerModal from './components/FlashSaleProductPickerModal.vue';
import FlashSaleStatsCards from './components/FlashSaleStatsCards.vue';
import { useMarketingFlashSalePage } from './composables/useMarketingFlashSalePage';

const {
  applyFilters,
  drawerSubmitText,
  drawerTitle,
  filterForm,
  form,
  FLASH_SALE_STATUS_FILTER_OPTIONS,
  handlePageChange,
  handlePickerCategoryFilterChange,
  handlePickerSearch,
  hasStore,
  isDrawerLoading,
  isDrawerOpen,
  isDrawerSubmitting,
  isLoading,
  isPickerLoading,
  isPickerOpen,
  isStoreLoading,
  keyword,
  openCreateDrawer,
  openEditDrawer,
  openProductPicker,
  page,
  pageSize,
  pickerCategories,
  pickerCategoryFilterId,
  pickerKeyword,
  pickerProducts,
  pickerSelectedProductIds,
  quickSelectWeekDays,
  removeActivity,
  removeProduct,
  resetFilters,
  rows,
  selectedStoreId,
  setDrawerOpen,
  setFormCycleType,
  setFormName,
  setFormPerUserLimit,
  setFormRecurringDateMode,
  setFormTimeRange,
  setFormValidDateRange,
  setKeyword,
  setPickerKeyword,
  setPickerOpen,
  setSelectedStoreId,
  setStatusFilter,
  setProductDiscountPrice,
  setProductPerUserLimit,
  stats,
  storeOptions,
  submitDrawer,
  submitPicker,
  toggleActivityStatus,
  toggleAllProducts,
  toggleChannel,
  togglePickerProduct,
  toggleWeekDay,
  total,
} = useMarketingFlashSalePage();

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

<template>
  <Page title="限时折扣" content-class="page-marketing-flash-sale">
    <div class="fs-page">
      <div class="fs-toolbar">
        <Select
          class="fs-store-select"
          :value="selectedStoreId"
          :options="storeOptions"
          :loading="isStoreLoading"
          placeholder="全部门店"
          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
        />

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

        <Input
          class="fs-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="fs-spacer"></span>
        <Button type="primary" @click="openCreateDrawer">创建限时折扣</Button>
      </div>

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

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

      <Spin v-else :spinning="isLoading">
        <div v-if="rows.length > 0" class="fs-list">
          <FlashSaleActivityCard
            v-for="item in rows"
            :key="item.id"
            :item="item"
            @edit="(row) => openEditDrawer(row.id, row.storeIds)"
            @toggle-status="toggleActivityStatus"
            @remove="removeActivity"
          />
        </div>

        <div v-else class="fs-empty">
          <Empty description="暂无限时折扣活动" />
        </div>

        <div v-if="rows.length > 0" class="fs-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>

    <FlashSaleEditorDrawer
      :open="isDrawerOpen"
      :title="drawerTitle"
      :submit-text="drawerSubmitText"
      :submitting="isDrawerSubmitting"
      :loading="isDrawerLoading"
      :form="form"
      @close="setDrawerOpen(false)"
      @set-name="setFormName"
      @set-cycle-type="setFormCycleType"
      @set-recurring-date-mode="setFormRecurringDateMode"
      @set-valid-date-range="setFormValidDateRange"
      @set-time-range="setFormTimeRange"
      @toggle-week-day="toggleWeekDay"
      @quick-select-week-days="quickSelectWeekDays"
      @toggle-channel="toggleChannel"
      @set-per-user-limit="setFormPerUserLimit"
      @open-product-picker="openProductPicker"
      @remove-product="removeProduct"
      @set-product-discount-price="setProductDiscountPrice"
      @set-product-per-user-limit="setProductPerUserLimit"
      @submit="submitDrawer"
    />

    <FlashSaleProductPickerModal
      :open="isPickerOpen"
      :loading="isPickerLoading"
      :keyword="pickerKeyword"
      :category-filter-id="pickerCategoryFilterId"
      :categories="pickerCategories"
      :products="pickerProducts"
      :selected-product-ids="pickerSelectedProductIds"
      @close="setPickerOpen(false)"
      @set-keyword="setPickerKeyword"
      @set-category-filter-id="handlePickerCategoryFilterChange"
      @toggle-product="togglePickerProduct"
      @toggle-all="toggleAllProducts"
      @search="handlePickerSearch"
      @submit="submitPicker"
    />
  </Page>
</template>

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