<script setup lang="ts">
import { Page } from '@vben/common-ui';

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

import StoredCardPlanCard from './components/StoredCardPlanCard.vue';
import StoredCardPlanEditorDrawer from './components/StoredCardPlanEditorDrawer.vue';
import StoredCardRecordTable from './components/StoredCardRecordTable.vue';
import StoredCardRecordToolbar from './components/StoredCardRecordToolbar.vue';
import StoredCardStatsCards from './components/StoredCardStatsCards.vue';
import { useMemberStoredCardPage } from './composables/useMemberStoredCardPage';

const {
  activeTab,
  applyRecordFilters,
  canManage,
  canView,
  drawerSubmitText,
  drawerTitle,
  exportRecords,
  form,
  handleRecordPageChange,
  hasStore,
  isDrawerLoading,
  isDrawerOpen,
  isDrawerSubmitting,
  isExporting,
  isPlanLoading,
  isRecordLoading,
  isStoreLoading,
  openCreateDrawer,
  openEditDrawer,
  planRows,
  planStats,
  recordFilterForm,
  recordPager,
  removePlan,
  resetRecordFilters,
  selectedStoreId,
  setActiveTab,
  setDrawerOpen,
  setFormGiftAmount,
  setFormRechargeAmount,
  setFormSortOrder,
  setFormStatus,
  setRecordDateRange,
  setRecordKeyword,
  setSelectedStoreId,
  storeOptions,
  submitDrawer,
  tabOptions,
  toggleStatus,
} = useMemberStoredCardPage();
</script>

<template>
  <Page title="储值卡" content-class="page-member-stored-card">
    <div class="msc-page">
      <div class="msc-toolbar msc-toolbar-top">
        <Select
          class="msc-store-select"
          :value="selectedStoreId"
          :options="storeOptions"
          :loading="isStoreLoading"
          placeholder="请选择门店"
          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
        />

        <Segmented
          class="msc-segmented"
          :value="activeTab"
          :options="tabOptions"
          @update:value="
            (value) => setActiveTab((value as 'plans' | 'records') || 'plans')
          "
        />

        <span v-if="canView && !canManage" class="msc-readonly-tip">
          当前为只读权限
        </span>
      </div>

      <Empty v-if="!canView" description="暂无储值卡页面访问权限" />

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

      <template v-else>
        <section v-show="activeTab === 'plans'" class="msc-tab-panel">
          <Spin :spinning="isPlanLoading">
            <StoredCardStatsCards :stats="planStats" />

            <div class="msc-section-title">充值方案</div>

            <div v-if="planRows.length > 0" class="msc-plan-grid">
              <StoredCardPlanCard
                v-for="item in planRows"
                :key="item.planId"
                :item="item"
                :can-manage="canManage"
                @edit="openEditDrawer"
                @toggle-status="toggleStatus"
                @remove="removePlan"
              />
            </div>

            <div v-else class="msc-empty">
              <Empty description="暂无充值方案" />
            </div>

            <button
              type="button"
              class="g-btn g-btn-primary msc-create-btn"
              :disabled="!canManage"
              @click="openCreateDrawer"
            >
              添加充值方案
            </button>
          </Spin>
        </section>

        <section v-show="activeTab === 'records'" class="msc-tab-panel">
          <StoredCardRecordToolbar
            :filters="recordFilterForm"
            :can-manage="canManage"
            :exporting="isExporting"
            @set-keyword="setRecordKeyword"
            @set-date-range="setRecordDateRange"
            @search="applyRecordFilters"
            @reset="resetRecordFilters"
            @export="exportRecords"
          />

          <StoredCardRecordTable
            :loading="isRecordLoading"
            :pager="recordPager"
            @page-change="handleRecordPageChange"
          />
        </section>
      </template>

      <StoredCardPlanEditorDrawer
        :open="isDrawerOpen"
        :title="drawerTitle"
        :loading="isDrawerLoading"
        :submitting="isDrawerSubmitting"
        :submit-text="drawerSubmitText"
        :can-manage="canManage"
        :form="form"
        @close="setDrawerOpen(false)"
        @set-recharge-amount="setFormRechargeAmount"
        @set-gift-amount="setFormGiftAmount"
        @set-sort-order="setFormSortOrder"
        @set-status="setFormStatus"
        @submit="submitDrawer"
      />
    </div>
  </Page>
</template>

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