<script setup lang="ts">
import { computed } from 'vue';

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

import { Empty, Segmented } from 'ant-design-vue';

import MemberCouponPickerModal from './components/MemberCouponPickerModal.vue';
import MemberDaySettingCard from './components/MemberDaySettingCard.vue';
import MemberDetailDrawer from './components/MemberDetailDrawer.vue';
import MemberFilterBar from './components/MemberFilterBar.vue';
import MemberStatsBar from './components/MemberStatsBar.vue';
import MemberTableCard from './components/MemberTableCard.vue';
import MemberTierEditorDrawer from './components/MemberTierEditorDrawer.vue';
import MemberTierSystem from './components/MemberTierSystem.vue';
import { useMemberListPage } from './composables/useMemberListPage';

const {
  activeTab,
  applyCoupons,
  canManage,
  canView,
  couponItems,
  couponKeyword,
  couponLabelMap,
  couponLoading,
  couponModalOpen,
  couponModalTitle,
  daySetting,
  daySettingSaving,
  detail,
  detailLoading,
  detailOpen,
  filters,
  handleDeleteTier,
  handleExport,
  handleOpenCouponPicker,
  handleOpenCreateTier,
  handleOpenEditTier,
  handlePageChange,
  handleReset,
  handleSaveDaySetting,
  handleSearch,
  handleSubmitTier,
  isExporting,
  isListLoading,
  isStoreLoading,
  openDetail,
  pagination,
  rows,
  saveTags,
  searchCoupons,
  selectedCouponIds,
  selectedStoreId,
  setActiveTab,
  setCouponKeyword,
  setCouponModalOpen,
  setDetailOpen,
  setKeyword,
  setSelectedStoreId,
  setTierEditorOpen,
  setTierId,
  stats,
  storeOptions,
  tagSaving,
  tierEditorLoading,
  tierEditorOpen,
  tierEditorSubmitting,
  tierForm,
  tierLoading,
  tierOptions,
  tiers,
  toggleCoupon,
} = useMemberListPage();

const tabOptions = [
  { label: '会员列表', value: 'list' },
  { label: '等级体系', value: 'tiers' },
];

const tierDrawerTitle = computed(() =>
  tierForm.value?.tierId ? `编辑等级 - ${tierForm.value.name}` : '新增等级',
);
</script>

<template>
  <Page title="会员管理" content-class="page-member-list">
    <div class="mm-page">
      <Segmented
        class="mm-tab-switch"
        :value="activeTab"
        :options="tabOptions"
        @update:value="
          (value) => setActiveTab((value as 'list' | 'tiers') || 'list')
        "
      />

      <template v-if="canView">
        <div v-show="activeTab === 'list'" class="mm-list-tab">
          <MemberFilterBar
            :selected-store-id="selectedStoreId"
            :store-options="storeOptions"
            :is-store-loading="isStoreLoading"
            :tier-options="tierOptions"
            :filters="filters"
            :show-export="canManage"
            :is-exporting="isExporting"
            @update:selected-store-id="setSelectedStoreId"
            @update:tier-id="setTierId"
            @update:keyword="setKeyword"
            @search="handleSearch"
            @reset="handleReset"
            @export="handleExport"
          />

          <MemberStatsBar :stats="stats" />

          <MemberTableCard
            :rows="rows"
            :loading="isListLoading"
            :pagination="pagination"
            @page-change="handlePageChange"
            @detail="openDetail"
          />
        </div>

        <div v-show="activeTab === 'tiers'" class="mm-tier-tab">
          <MemberTierSystem
            :tiers="tiers"
            :loading="tierLoading"
            :can-manage="canManage"
            @create="handleOpenCreateTier"
            @edit="handleOpenEditTier"
            @delete="handleDeleteTier"
          />

          <MemberDaySettingCard
            :value="daySetting"
            :loading="daySettingSaving"
            :can-manage="canManage"
            @save="handleSaveDaySetting"
          />
        </div>
      </template>
      <Empty v-else description="暂无会员管理页面访问权限" />
    </div>

    <MemberDetailDrawer
      :open="detailOpen"
      :loading="detailLoading"
      :detail="detail"
      :can-manage="canManage"
      :tag-saving="tagSaving"
      @close="setDetailOpen(false)"
      @save-tags="saveTags"
    />

    <MemberTierEditorDrawer
      :open="tierEditorOpen"
      :title="tierDrawerTitle"
      :loading="tierEditorLoading"
      :submitting="tierEditorSubmitting"
      :model="tierForm"
      :can-manage="canManage"
      :coupon-label-map="couponLabelMap"
      @close="setTierEditorOpen(false)"
      @submit="handleSubmitTier"
      @open-coupon-picker="handleOpenCouponPicker"
    />

    <MemberCouponPickerModal
      :open="couponModalOpen"
      :title="couponModalTitle"
      :loading="couponLoading"
      :keyword="couponKeyword"
      :items="couponItems"
      :selected-ids="selectedCouponIds"
      @close="setCouponModalOpen(false)"
      @set-keyword="setCouponKeyword"
      @search="searchCoupons"
      @toggle="toggleCoupon"
      @submit="applyCoupons"
    />
  </Page>
</template>

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