<script setup lang="ts">
import AdminPageHeader from '@/components/admin/AdminPageHeader.vue'

import AdminInventoryEntryCard from './components/AdminInventoryEntryCard.vue'
import AdminInventoryFilterCard from './components/AdminInventoryFilterCard.vue'
import AdminInventoryPoolGrid from './components/AdminInventoryPoolGrid.vue'
import AdminInventoryTable from './components/AdminInventoryTable.vue'
import { useAdminInventory } from './composables/useAdminInventory'

const {
  loading,
  importing,
  creating,
  actionLoadingId,
  errorMessage,
  items,
  pagination,
  pageSummary,
  pageOverview,
  inventoryGroups,
  // filter
  filterSkuCode,
  filterCredentialType,
  filterStatus,
  filterBatchNo,
  filterInventoryGroupCode,
  // entry
  entrySkuCode,
  entryCredentialType,
  entryBatchNo,
  entryInventoryGroupCode,
  singleDisplayValue,
  bulkText,
  skuSuggestionsLoading,
  entrySkuSuggestions,
  // actions
  loadInventoryItems,
  resetFilters,
  submitCreate,
  submitImport,
  runRowAction,
  useGroupAsFilter,
  useGroupAsEntry,
  applySkuSuggestion,
  // formatters
  getCredentialTypeLabel,
  getCredentialTypeHint,
  getSkuNamingHint,
  formatInventoryStatus,
  getGroupSuggestion,
  // utils
  formatAdminDateTime,
} = useAdminInventory()
</script>

<template>
  <div class="inventory-page list-page">
    <AdminPageHeader title="库存管理" description="按内部履约 SKU 和凭据类型管理库存、预占和发放。">
      <template #extra>
        <span class="total-badge">共 {{ pagination.total }} 条库存</span>
      </template>
    </AdminPageHeader>

    <AdminInventoryFilterCard
      v-model:filter-sku-code="filterSkuCode"
      v-model:filter-credential-type="filterCredentialType"
      v-model:filter-status="filterStatus"
      v-model:filter-batch-no="filterBatchNo"
      v-model:filter-inventory-group-code="filterInventoryGroupCode"
      :load-inventory-items="loadInventoryItems"
      :reset-filters="resetFilters"
    />

    <AdminInventoryEntryCard
      v-model:entry-sku-code="entrySkuCode"
      v-model:entry-credential-type="entryCredentialType"
      v-model:entry-batch-no="entryBatchNo"
      v-model:entry-inventory-group-code="entryInventoryGroupCode"
      v-model:single-display-value="singleDisplayValue"
      v-model:bulk-text="bulkText"
      :creating="creating"
      :importing="importing"
      :sku-suggestions-loading="skuSuggestionsLoading"
      :entry-sku-suggestions="entrySkuSuggestions"
      :submit-create="submitCreate"
      :submit-import="submitImport"
      :apply-sku-suggestion="applySkuSuggestion"
      :get-credential-type-label="getCredentialTypeLabel"
      :get-credential-type-hint="getCredentialTypeHint"
      :get-sku-naming-hint="getSkuNamingHint"
    />

    <el-alert
      v-if="errorMessage"
      :title="errorMessage"
      type="error"
      show-icon
      :closable="false"
      class="mt-4"
    />

    <el-card
      shadow="never"
      class="section-card"
      v-loading="loading"
      element-loading-text="库存列表加载中"
    >
      <template v-if="items.length === 0 && !loading">
        <el-empty
          description="当前筛选下没有库存项，可以先在上方录入内部履约 SKU 对应的库存。"
          :image-size="60"
        />
      </template>

      <template v-else>
        <AdminInventoryPoolGrid
          :inventory-groups="inventoryGroups"
          :page-overview="pageOverview"
          :page-summary="pageSummary"
          :use-group-as-filter="useGroupAsFilter"
          :use-group-as-entry="useGroupAsEntry"
          :get-credential-type-label="getCredentialTypeLabel"
          :get-group-suggestion="getGroupSuggestion"
          :format-admin-date-time="formatAdminDateTime"
        />

        <AdminInventoryTable
          :loading="loading"
          :items="items"
          :pagination="pagination"
          :page-summary="pageSummary"
          :action-loading-id="actionLoadingId"
          :load-inventory-items="loadInventoryItems"
          :run-row-action="runRowAction"
          :format-inventory-status="formatInventoryStatus"
          :get-credential-type-label="getCredentialTypeLabel"
          :format-admin-date-time="formatAdminDateTime"
        />
      </template>
    </el-card>
  </div>
</template>

<style scoped>
@import '../../../styles/admin-list-pages.css';
</style>
