<script setup lang="ts">
/**
 * 文件职责：营销中心-秒杀活动页面。
 */
import type { MarketingSeckillDisplayStatus } from '#/api/marketing';

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

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

import SeckillActivityCard from './components/SeckillActivityCard.vue';
import SeckillEditorDrawer from './components/SeckillEditorDrawer.vue';
import SeckillProductPickerDrawer from './components/SeckillProductPickerDrawer.vue';
import SeckillStatsCards from './components/SeckillStatsCards.vue';
import { useMarketingSeckillPage } from './composables/useMarketingSeckillPage';

const {
  addSession,
  applyFilters,
  drawerSubmitText,
  drawerTitle,
  filterForm,
  form,
  SECKILL_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,
  removeActivity,
  removeProduct,
  removeSession,
  resetFilters,
  rows,
  selectedStoreId,
  setActivityType,
  setDrawerOpen,
  setFormName,
  setFormPerUserLimit,
  setFormTimeRange,
  setFormValidDateRange,
  setKeyword,
  setPickerKeyword,
  setPickerOpen,
  setSelectedStoreId,
  setStatusFilter,
  setPreheatEnabled,
  setPreheatHours,
  setProductPerUserLimit,
  setProductSeckillPrice,
  setProductStockLimit,
  setSessionDuration,
  setSessionStartTime,
  stats,
  storeOptions,
  submitDrawer,
  submitPicker,
  toggleActivityStatus,
  toggleAllProducts,
  toggleChannel,
  togglePickerProduct,
  total,
} = useMarketingSeckillPage();

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

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

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

        <Input
          class="sk-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="sk-spacer"></span>
        <Button type="primary" @click="openCreateDrawer">创建秒杀</Button>
      </div>

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

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

      <Spin v-else :spinning="isLoading">
        <div v-if="rows.length > 0" class="sk-list">
          <SeckillActivityCard
            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="sk-empty">
          <Empty description="暂无秒杀活动" />
        </div>

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

    <SeckillEditorDrawer
      :open="isDrawerOpen"
      :title="drawerTitle"
      :submit-text="drawerSubmitText"
      :submitting="isDrawerSubmitting"
      :loading="isDrawerLoading"
      :form="form"
      @close="setDrawerOpen(false)"
      @set-name="setFormName"
      @set-activity-type="setActivityType"
      @set-valid-date-range="setFormValidDateRange"
      @set-time-range="setFormTimeRange"
      @add-session="addSession"
      @remove-session="removeSession"
      @set-session-start-time="setSessionStartTime"
      @set-session-duration="setSessionDuration"
      @toggle-channel="toggleChannel"
      @set-per-user-limit="setFormPerUserLimit"
      @set-preheat-enabled="setPreheatEnabled"
      @set-preheat-hours="setPreheatHours"
      @open-product-picker="openProductPicker"
      @remove-product="removeProduct"
      @set-product-seckill-price="setProductSeckillPrice"
      @set-product-stock-limit="setProductStockLimit"
      @set-product-per-user-limit="setProductPerUserLimit"
      @submit="submitDrawer"
    />

    <SeckillProductPickerDrawer
      :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>
