<script setup lang="ts">
/**
 * 文件职责：分类管理页面主视图。
 * 1. 组合分类统计、左侧列表、右侧详情、编辑抽屉与商品选择弹窗。
 * 2. 复用门店维度工具栏与复制弹窗组件。
 */
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

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

import CopyToStoresModal from '../../shared/components/CopyToStoresModal.vue';
import StoreScopeToolbar from '../../shared/components/StoreScopeToolbar.vue';
import CategoryDetailPanel from './components/CategoryDetailPanel.vue';
import CategoryEditorDrawer from './components/CategoryEditorDrawer.vue';
import CategoryProductPickerModal from './components/CategoryProductPickerModal.vue';
import CategorySidebar from './components/CategorySidebar.vue';
import CategoryStatsBar from './components/CategoryStatsBar.vue';
import { useProductCategoryPage } from './composables/useProductCategoryPage';

const {
  categoryKeyword,
  categoryProducts,
  channelFilter,
  copyCandidates,
  copyTargetStoreIds,
  drawerSubmitText,
  drawerTitle,
  filteredCategories,
  form,
  isCategoryLoading,
  isCategoryProductsLoading,
  isCopyAllChecked,
  isCopyIndeterminate,
  isCopyModalOpen,
  isCopySubmitting,
  isDrawerOpen,
  isDrawerSubmitting,
  isPickerLoading,
  isPickerOpen,
  isPickerSubmitting,
  isStoreLoading,
  pickerKeyword,
  pickerProducts,
  pickerSelectedIds,
  selectedCategory,
  selectedCategoryId,
  selectedStoreId,
  selectedStoreName,
  stats,
  storeOptions,
  handleCopyCheckAll,
  handleCopySubmit,
  loadPickerProducts,
  openCopyModal,
  openCreateDrawer,
  openEditDrawer,
  openProductPicker,
  removeSelectedCategory,
  selectCategory,
  setCategoryKeyword,
  setChannelFilter,
  setCopyModalOpen,
  setDrawerOpen,
  setFormDescription,
  setFormIcon,
  setFormName,
  setFormSort,
  setPickerKeyword,
  setPickerOpen,
  setSelectedStoreId,
  submitDrawer,
  submitProductPicker,
  toggleCopyStore,
  toggleDrawerChannel,
  toggleDrawerStatus,
  togglePickerProduct,
  unbindProduct,
} = useProductCategoryPage();
</script>

<template>
  <Page title="分类管理" content-class="page-product-category">
    <div class="pcat-page">
      <StoreScopeToolbar
        class="pcat-toolbar-card"
        :selected-store-id="selectedStoreId"
        :store-options="storeOptions"
        :is-store-loading="isStoreLoading"
        :copy-disabled="storeOptions.length <= 1"
        copy-position="left"
        @update:selected-store-id="setSelectedStoreId"
        @copy="openCopyModal"
      >
        <template #actions>
          <Button
            type="primary"
            class="pcat-add-category-btn"
            @click="openCreateDrawer"
          >
            <template #icon>
              <IconifyIcon icon="lucide:plus" />
            </template>
            添加分类
          </Button>
        </template>
      </StoreScopeToolbar>

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

      <template v-else>
        <CategoryStatsBar :stats="stats" />

        <div class="pcat-main">
          <CategorySidebar
            :loading="isCategoryLoading"
            :categories="filteredCategories"
            :selected-category-id="selectedCategoryId"
            :keyword="categoryKeyword"
            :channel-filter="channelFilter"
            :total-count="stats.totalCategories"
            @select="selectCategory"
            @update:keyword="setCategoryKeyword"
            @update:channel-filter="setChannelFilter"
          />

          <CategoryDetailPanel
            :selected-category="selectedCategory"
            :category-products="categoryProducts"
            :is-category-products-loading="isCategoryProductsLoading"
            @edit="openEditDrawer"
            @remove="removeSelectedCategory"
            @open-picker="openProductPicker"
            @unbind="unbindProduct"
          />
        </div>
      </template>
    </div>

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

    <CategoryEditorDrawer
      :open="isDrawerOpen"
      :title="drawerTitle"
      :submit-text="drawerSubmitText"
      :submitting="isDrawerSubmitting"
      :form="form"
      @close="setDrawerOpen(false)"
      @set-name="setFormName"
      @set-description="setFormDescription"
      @set-icon="setFormIcon"
      @set-sort="setFormSort"
      @toggle-channel="toggleDrawerChannel"
      @toggle-status="toggleDrawerStatus"
      @submit="submitDrawer"
    />

    <CopyToStoresModal
      :open="isCopyModalOpen"
      :copy-candidates="copyCandidates"
      :target-store-ids="copyTargetStoreIds"
      :is-all-checked="isCopyAllChecked"
      :is-indeterminate="isCopyIndeterminate"
      :is-submitting="isCopySubmitting"
      :selected-store-name="selectedStoreName"
      title="复制分类设置到其他门店"
      confirm-text="确认复制"
      @update:open="setCopyModalOpen"
      @check-all="handleCopyCheckAll"
      @submit="handleCopySubmit"
      @toggle-store="
        ({ storeId, checked }) => toggleCopyStore(storeId, checked)
      "
    />
  </Page>
</template>

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