<script setup lang="ts">
/**
 * 文件职责：加料管理页面主视图。
 * 1. 还原原型的工具栏、统计条、卡片列表与右侧抽屉。
 * 2. 管理加料组及其关联商品。
 */
import { Page } from '@vben/common-ui';

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

import AddonEditorDrawer from './components/AddonEditorDrawer.vue';
import AddonGroupCard from './components/AddonGroupCard.vue';
import AddonProductPickerModal from './components/AddonProductPickerModal.vue';
import { useProductAddonsPage } from './composables/useProductAddonsPage';

const {
  addItem,
  disableGroup,
  drawerSubmitText,
  drawerTitle,
  enableGroup,
  filteredRows,
  form,
  groupCount,
  isDrawerOpen,
  isDrawerSubmitting,
  isLoading,
  isPickerLoading,
  isPickerOpen,
  isPickerSubmitting,
  isStoreLoading,
  keyword,
  loadPickerProducts,
  openBindProducts,
  openCreateDrawer,
  openEditDrawer,
  optionCount,
  pickerKeyword,
  pickerProducts,
  pickerSelectedIds,
  pickerTitle,
  relatedProductCount,
  removeCardItem,
  removeGroup,
  removeItem,
  renameItem,
  selectedStoreId,
  setDrawerOpen,
  setFormDescription,
  setFormMaxSelect,
  setFormMinSelect,
  setFormName,
  setFormRequired,
  setItemName,
  setItemPrice,
  setItemStock,
  setKeyword,
  setPickerKeyword,
  setPickerOpen,
  setSelectedStoreId,
  storeOptions,
  submitDrawer,
  submitPicker,
  togglePickerProduct,
} = useProductAddonsPage();
</script>

<template>
  <Page title="加料管理" content-class="page-product-addons">
    <div class="pad-page">
      <div class="pad-toolbar">
        <Select
          class="pad-store-select"
          :value="selectedStoreId"
          :options="storeOptions"
          :loading="isStoreLoading"
          placeholder="请选择门店"
          @update:value="(value) => setSelectedStoreId(String(value ?? ''))"
        />
        <Input
          class="pad-search"
          :value="keyword"
          placeholder="搜索加料组名称…"
          @update:value="setKeyword"
        />
        <span class="pad-spacer"></span>
        <Button type="primary" @click="openCreateDrawer">+ 添加加料组</Button>
      </div>

      <div v-if="selectedStoreId" class="pad-stats">
        <span>
          加料组 <strong>{{ groupCount }}</strong>
        </span>
        <span>
          选项总数 <strong>{{ optionCount }}</strong>
        </span>
        <span>
          关联商品 <strong>{{ relatedProductCount }}</strong>
        </span>
      </div>

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

      <Spin v-else :spinning="isLoading">
        <template v-if="filteredRows.length > 0">
          <AddonGroupCard
            v-for="item in filteredRows"
            :key="item.id"
            :item="item"
            @edit="openEditDrawer"
            @bind-products="openBindProducts"
            @remove-group="removeGroup"
            @enable="enableGroup"
            @disable="disableGroup"
            @rename-item="renameItem"
            @remove-item="removeCardItem"
          />
        </template>
        <div v-else class="pad-empty">
          <Empty description="暂无加料组" />
        </div>
      </Spin>
    </div>

    <AddonEditorDrawer
      :open="isDrawerOpen"
      :title="drawerTitle"
      :submit-text="drawerSubmitText"
      :submitting="isDrawerSubmitting"
      :form="form"
      @close="setDrawerOpen(false)"
      @set-name="setFormName"
      @set-description="setFormDescription"
      @set-required="setFormRequired"
      @set-min-select="setFormMinSelect"
      @set-max-select="setFormMaxSelect"
      @set-item-name="setItemName"
      @set-item-price="setItemPrice"
      @set-item-stock="setItemStock"
      @add-item="addItem"
      @remove-item="removeItem"
      @submit="submitDrawer"
    />

    <AddonProductPickerModal
      :open="isPickerOpen"
      :title="pickerTitle"
      :loading="isPickerLoading"
      :submitting="isPickerSubmitting"
      :keyword="pickerKeyword"
      :products="pickerProducts"
      :selected-ids="pickerSelectedIds"
      @close="setPickerOpen(false)"
      @set-keyword="setPickerKeyword"
      @search="loadPickerProducts"
      @toggle-product="togglePickerProduct"
      @submit="submitPicker"
    />
  </Page>
</template>

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