import type { LabelEditorForm, ProductLabelTableRowViewModel } from '../types';

import type { StoreListItemDto } from '#/api/store';

/**
 * 文件职责：标签页面状态与行为编排。
 * 1. 管理门店、列表、筛选与统计状态。
 * 2. 封装标签新增编辑、启停与删除流程。
 */
import { computed, onMounted, reactive, ref, watch } from 'vue';

import { createDefaultLabelForm } from './labels-page/constants';
import { createDataActions } from './labels-page/data-actions';
import { createDrawerActions } from './labels-page/drawer-actions';
import { createLabelActions } from './labels-page/label-actions';

export function useProductLabelsPage() {
  const stores = ref<StoreListItemDto[]>([]);
  const selectedStoreId = ref('');
  const isStoreLoading = ref(false);

  const rows = ref<ProductLabelTableRowViewModel[]>([]);
  const isLoading = ref(false);
  const keyword = ref('');

  const isDrawerOpen = ref(false);
  const isDrawerSubmitting = ref(false);
  const drawerMode = ref<'create' | 'edit'>('create');
  const editingLabelId = ref('');

  const form = reactive<LabelEditorForm>(createDefaultLabelForm(1));

  const storeOptions = computed(() =>
    stores.value.map((item) => ({
      label: item.name,
      value: item.id,
    })),
  );

  const filteredRows = computed(() => {
    const normalized = keyword.value.trim().toLowerCase();
    if (!normalized) return rows.value;
    return rows.value.filter((item) =>
      item.name.toLowerCase().includes(normalized),
    );
  });

  const labelCount = computed(() => rows.value.length);

  const enabledCount = computed(
    () => rows.value.filter((item) => item.status === 'enabled').length,
  );

  const relatedProductCount = computed(() =>
    rows.value.reduce((sum, item) => sum + item.productCount, 0),
  );

  const drawerTitle = computed(() =>
    drawerMode.value === 'create' ? '添加标签' : '编辑标签',
  );

  const drawerSubmitText = computed(() => '保存');

  const { loadLabels, loadStores } = createDataActions({
    stores,
    selectedStoreId,
    isStoreLoading,
    rows,
    isLoading,
  });

  function setSelectedStoreId(value: string) {
    selectedStoreId.value = value;
  }

  function setKeyword(value: string) {
    keyword.value = value;
  }

  const {
    openCreateDrawer,
    openEditDrawer,
    setDrawerOpen,
    setFormColor,
    setFormName,
    setFormSort,
    submitDrawer,
    toggleFormStatus,
  } = createDrawerActions({
    drawerMode,
    editingLabelId,
    form,
    isDrawerOpen,
    isDrawerSubmitting,
    loadLabels,
    rows,
    selectedStoreId,
  });

  const { disableLabel, enableLabel, removeLabel } = createLabelActions({
    selectedStoreId,
    loadLabels,
  });

  watch(selectedStoreId, () => {
    keyword.value = '';
    void loadLabels();
  });

  onMounted(loadStores);

  return {
    disableLabel,
    drawerSubmitText,
    drawerTitle,
    enableLabel,
    enabledCount,
    filteredRows,
    form,
    isDrawerOpen,
    isDrawerSubmitting,
    isLoading,
    isStoreLoading,
    keyword,
    labelCount,
    openCreateDrawer,
    openEditDrawer,
    relatedProductCount,
    removeLabel,
    selectedStoreId,
    setDrawerOpen,
    setFormColor,
    setFormName,
    setFormSort,
    setKeyword,
    setSelectedStoreId,
    storeOptions,
    submitDrawer,
    toggleFormStatus,
  };
}
