<script setup lang="ts">
/**
 * 文件职责：规格做法管理页面主视图。
 * 1. 还原原型的工具栏、统计条、卡片网格与右侧抽屉。
 * 2. 通过真实 TenantAPI 完成模板增删改查与复制。
 */
import { Page } from '@vben/common-ui';

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

import SpecEditorDrawer from './components/SpecEditorDrawer.vue';
import SpecTemplateCard from './components/SpecTemplateCard.vue';
import { useProductSpecsPage } from './composables/useProductSpecsPage';

const {
  addOption,
  copyTemplate,
  drawerSubmitText,
  drawerTitle,
  filteredRows,
  form,
  isDrawerOpen,
  isDrawerSubmitting,
  isLoading,
  isStoreLoading,
  keyword,
  methodCount,
  openCreateDrawer,
  openEditDrawer,
  removeOption,
  removeTemplate,
  loadSpecs,
  selectedStoreId,
  setDrawerOpen,
  setFormIsRequired,
  setFormName,
  setFormSelectionType,
  setFormType,
  setKeyword,
  setOptionExtraPrice,
  setOptionName,
  setSelectedStoreId,
  setTypeFilter,
  specCount,
  storeOptions,
  submitDrawer,
  totalProducts,
  typeFilter,
} = useProductSpecsPage();
</script>

<template>
  <Page title="规格做法" content-class="page-product-specs">
    <div class="psp-page">
      <div class="psp-toolbar">
        <Select
          class="psp-store-select"
          :value="selectedStoreId"
          :options="storeOptions"
          :loading="isStoreLoading"
          placeholder="请选择门店"
          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
        />

        <div class="psp-filter-tabs">
          <button
            type="button"
            class="psp-filter-tab"
            :class="{ active: typeFilter === 'all' }"
            @click="setTypeFilter('all')"
          >
            全部
            <span class="count">{{ specCount + methodCount }}</span>
          </button>
          <button
            type="button"
            class="psp-filter-tab"
            :class="{ active: typeFilter === 'spec' }"
            @click="setTypeFilter('spec')"
          >
            规格
            <span class="count">{{ specCount }}</span>
          </button>
          <button
            type="button"
            class="psp-filter-tab"
            :class="{ active: typeFilter === 'method' }"
            @click="setTypeFilter('method')"
          >
            做法
            <span class="count">{{ methodCount }}</span>
          </button>
        </div>

        <span class="psp-spacer"></span>

        <Input
          class="psp-search"
          :value="keyword"
          placeholder="搜索模板名称…"
          @update:value="setKeyword"
          @press-enter="loadSpecs"
        />
        <Button type="primary" @click="openCreateDrawer">+ 添加模板</Button>
      </div>

      <Card v-if="storeOptions.length === 0" :bordered="false">
        <Empty description="暂无门店，请先创建门店" />
      </Card>

      <template v-else>
        <div class="psp-stats">
          <div class="psp-stat">
            <span class="psp-stat-dot" style="background: #1890ff"></span>
            规格模板
            <span class="psp-stat-num">{{ specCount }}</span>
          </div>
          <div class="psp-stat">
            <span class="psp-stat-dot" style="background: #fa8c16"></span>
            做法模板
            <span class="psp-stat-num">{{ methodCount }}</span>
          </div>
          <div class="psp-stat">
            <span class="psp-stat-dot" style="background: #52c41a"></span>
            总关联商品
            <span class="psp-stat-num">{{ totalProducts }}</span>
          </div>
        </div>

        <Spin :spinning="isLoading">
          <div v-if="filteredRows.length > 0" class="psp-grid">
            <SpecTemplateCard
              v-for="item in filteredRows"
              :key="item.id"
              :item="item"
              @edit="openEditDrawer"
              @copy="copyTemplate"
              @remove="removeTemplate"
            />
          </div>

          <Card v-else :bordered="false">
            <Empty description="暂无模板" />
          </Card>
        </Spin>
      </template>
    </div>

    <SpecEditorDrawer
      :open="isDrawerOpen"
      :title="drawerTitle"
      :submit-text="drawerSubmitText"
      :submitting="isDrawerSubmitting"
      :form="form"
      @close="setDrawerOpen(false)"
      @set-name="setFormName"
      @set-type="setFormType"
      @set-selection-type="setFormSelectionType"
      @set-required="setFormIsRequired"
      @set-option-name="setOptionName"
      @set-option-extra-price="setOptionExtraPrice"
      @add-option="addOption"
      @remove-option="removeOption"
      @submit="submitDrawer"
    />
  </Page>
</template>

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