<script setup lang="ts">
/**
 * 文件职责：营销中心-优惠券页面主视图。
 * 1. 还原原型工具栏、统计、卡片列表和分页。
 * 2. 编排优惠券新增编辑抽屉与卡片操作。
 */
import type {
  MarketingCouponDisplayStatus,
  MarketingCouponType,
} from '#/api/marketing';

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

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

import CouponEditorDrawer from './components/CouponEditorDrawer.vue';
import CouponStatsCards from './components/CouponStatsCards.vue';
import CouponTemplateCard from './components/CouponTemplateCard.vue';
import { useMarketingCouponPage } from './composables/useMarketingCouponPage';

const {
  applyFilters,
  COUPON_STATUS_FILTER_OPTIONS,
  COUPON_TYPE_FILTER_OPTIONS,
  disableCoupon,
  drawerSubmitText,
  drawerTitle,
  enableCoupon,
  filterForm,
  form,
  handlePageChange,
  hasStore,
  isDrawerLoading,
  isDrawerOpen,
  isDrawerSubmitting,
  isLoading,
  isStoreLoading,
  keyword,
  openCreateDrawer,
  openEditDrawer,
  page,
  pageSize,
  removeCoupon,
  resetFilters,
  rows,
  selectedStoreId,
  setDrawerOpen,
  setFormChannels,
  setFormCouponType,
  setFormMinimumSpend,
  setFormName,
  setFormPerUserLimit,
  setFormRelativeValidDays,
  setFormStoreIds,
  setFormStoreScopeMode,
  setFormTotalQuantity,
  setFormValidDateRange,
  setFormValidityType,
  setFormValue,
  setKeyword,
  setSelectedStoreId,
  setStatusFilter,
  setTypeFilter,
  stats,
  storeNameMap,
  storeOptions,
  submitDrawer,
  total,
} = useMarketingCouponPage();

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

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

<template>
  <Page title="优惠券" content-class="page-marketing-coupon">
    <div class="mcp-page">
      <div class="mcp-toolbar">
        <Select
          class="mcp-store-select"
          :value="selectedStoreId"
          :options="storeOptions"
          :loading="isStoreLoading"
          placeholder="请选择门店"
          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
        />

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

        <Select
          class="mcp-filter-select"
          :value="filterForm.couponType"
          placeholder="全部类型"
          :options="COUPON_TYPE_FILTER_OPTIONS"
          @update:value="onTypeFilterChange"
        />

        <Input
          class="mcp-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="mcp-spacer"></span>
        <Button type="primary" @click="openCreateDrawer">创建优惠券</Button>
      </div>

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

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

      <Spin v-else :spinning="isLoading">
        <div v-if="rows.length > 0" class="mcp-list">
          <CouponTemplateCard
            v-for="item in rows"
            :key="item.id"
            :item="item"
            :store-name-map="storeNameMap"
            @edit="(row) => openEditDrawer(row.id)"
            @view="(row) => openEditDrawer(row.id)"
            @enable="enableCoupon"
            @disable="disableCoupon"
            @remove="removeCoupon"
          />
        </div>

        <div v-else class="mcp-empty">
          <Empty description="暂无优惠券" />
        </div>

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

    <CouponEditorDrawer
      :open="isDrawerOpen"
      :title="drawerTitle"
      :submit-text="drawerSubmitText"
      :submitting="isDrawerSubmitting"
      :loading="isDrawerLoading"
      :form="form"
      :store-options="storeOptions"
      @close="setDrawerOpen(false)"
      @set-name="setFormName"
      @set-coupon-type="setFormCouponType"
      @set-value="setFormValue"
      @set-minimum-spend="setFormMinimumSpend"
      @set-total-quantity="setFormTotalQuantity"
      @set-per-user-limit="setFormPerUserLimit"
      @set-validity-type="setFormValidityType"
      @set-valid-date-range="setFormValidDateRange"
      @set-relative-valid-days="setFormRelativeValidDays"
      @set-channels="setFormChannels"
      @set-store-scope-mode="setFormStoreScopeMode"
      @set-store-ids="setFormStoreIds"
      @submit="submitDrawer"
    />
  </Page>
</template>

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