<script setup lang="ts">
import type { InventoryPoolGroup } from '../composables/types'

defineProps<{
  inventoryGroups: InventoryPoolGroup[]
  pageOverview: { skuCount: number; groupCount: number }
  pageSummary: { availableCount: number; reservedCount: number; deliveredCount: number; invalidCount: number }
  useGroupAsFilter: (group: InventoryPoolGroup) => void
  useGroupAsEntry: (group: InventoryPoolGroup) => void
  getCredentialTypeLabel: (value: string) => string
  getGroupSuggestion: (group: InventoryPoolGroup) => string
  formatAdminDateTime: (value: string) => string
}>()
</script>

<template>
  <div class="summary-grid">
    <div class="stat-card">
      <span class="stat-label">当前页内部 SKU</span>
      <strong class="stat-value">{{ pageOverview.skuCount }}</strong>
      <span class="stat-meta">当前页去重后的内部履约 SKU 数量</span>
    </div>
    <div class="stat-card">
      <span class="stat-label">当前页库存池</span>
      <strong class="stat-value">{{ pageOverview.groupCount }}</strong>
      <span class="stat-meta">按 内部履约 SKU + 凭据类型 聚合后的池子数量</span>
    </div>
    <div class="stat-card">
      <span class="stat-label">可立即分配</span>
      <strong class="stat-value">{{ pageSummary.availableCount }}</strong>
      <span class="stat-meta">当前页还能直接被任务预占的库存项</span>
    </div>
    <div class="stat-card">
      <span class="stat-label">预占中</span>
      <strong class="stat-value">{{ pageSummary.reservedCount }}</strong>
      <span class="stat-meta">当前页已经被任务锁定的库存项</span>
    </div>
  </div>

  <div class="pool-section">
    <div class="card-header" style="margin-bottom: 14px">
      <span class="card-title">当前页库存池概览</span>
      <span class="card-desc"
        >先看哪组内部履约 SKU 还有量，再决定补库存、查任务，还是切去人工履约。</span
      >
    </div>
    <div class="pool-grid">
      <article v-for="group in inventoryGroups" :key="group.key" class="pool-card">
        <div class="pool-topline">
          <div class="pool-title-block">
            <h4 class="pool-title">{{ group.skuCode }}</h4>
            <span class="pool-subtitle"
              >{{ getCredentialTypeLabel(group.credentialType) }} ·
              {{ group.credentialType }} · {{ group.inventoryGroupCode || '未分组' }}</span
            >
          </div>
          <span class="pool-total">共 {{ group.totalCount }} 条</span>
        </div>

        <div class="pool-stats">
          <span class="pool-stat">可用 {{ group.availableCount }}</span>
          <span class="pool-stat">预占 {{ group.reservedCount }}</span>
          <span class="pool-stat">发放 {{ group.deliveredCount }}</span>
          <span class="pool-stat">作废 {{ group.invalidCount }}</span>
        </div>

        <div class="pool-meta">
          <span>批次 {{ group.batchSummary }}</span>
          <span>最近更新 {{ formatAdminDateTime(group.latestUpdatedAt) }}</span>
        </div>

        <p class="pool-suggestion">{{ getGroupSuggestion(group) }}</p>

        <div class="pool-actions">
          <el-button round @click="useGroupAsFilter(group)">只看这个池</el-button>
          <el-button round type="primary" @click="useGroupAsEntry(group)"
            >作为入库目标</el-button
          >
        </div>
      </article>
    </div>
  </div>
</template>

<style scoped>
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat-card {
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: var(--radius-md);
  background: rgba(248, 250, 252, 0.72);
}
.stat-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.stat-value {
  font-size: 30px;
  line-height: 1;
  color: var(--text-primary);
  display: block;
  margin-top: var(--space-2);
}
.stat-meta {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  display: block;
  margin-top: var(--space-1);
}

.pool-section {
  margin-bottom: 18px;
}
.pool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.pool-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(248, 250, 252, 0.68);
}

.pool-topline {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: flex-start;
}
.pool-title-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.pool-title {
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pool-subtitle {
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pool-total {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: rgba(37, 89, 167, 0.08);
  border: 1px solid rgba(37, 89, 167, 0.12);
  color: #2559a7;
  font-size: var(--text-xs);
  font-weight: 700;
}
.pool-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.pool-stat {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: rgba(37, 89, 167, 0.08);
  color: #1d4f91;
  font-size: var(--text-xs);
  font-weight: 700;
}
.pool-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  word-break: break-word;
}
.pool-suggestion {
  margin: 0;
  line-height: 1.6;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.pool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1200px) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .summary-grid,
  .pool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .summary-grid,
  .pool-grid {
    grid-template-columns: 1fr;
  }
}
</style>
