<script setup lang="ts">
export interface StatCardItem {
  subtitle: string
  title: string
  icon: string
  color: string
  /** Optional id for click handler (e.g. total | online | offline | alerts) */
  key?: string
  clickable?: boolean
  active?: boolean
}

withDefaults(
  defineProps<{
    items: StatCardItem[]
    /** 首屏加载：显示骨架 */
    loading?: boolean
    /** 点击刷新中：仅按钮 loading，不遮挡卡片 */
    refreshing?: boolean
    /** 显示右上角刷新按钮 */
    showRefresh?: boolean
  }>(),
  {
    loading: false,
    refreshing: false,
    showRefresh: true,
  },
)

const emit = defineEmits<{
  click: [key: string]
  refresh: []
}>()

function onCardClick(item: StatCardItem) {
  if (item.clickable === false || !item.key) return
  emit('click', item.key)
}
</script>

<template>
  <div class="stat-cards-row">
    <div v-if="showRefresh" class="d-flex justify-end align-center mb-2">
      <v-btn
        icon="mdi-refresh"
        size="small"
        variant="text"
        :loading="refreshing"
        :disabled="loading"
        title="刷新统计"
        aria-label="刷新统计"
        @click="emit('refresh')"
      />
    </div>

    <v-skeleton-loader v-if="loading" type="heading" class="mb-1" />

    <v-row v-else>
      <v-col
        v-for="(item, i) in items"
        :key="item.key ?? i"
        cols="6"
        :sm="items.length > 4 ? 4 : 3"
        :lg="items.length > 4 ? 2 : 3"
      >
        <v-card
          elevation="0"
          rounded="xl"
          border
          class="stat-card"
          :class="{
            'stat-card--clickable': item.clickable !== false && item.key,
            'stat-card--active': item.active,
            'stat-card--refreshing': refreshing,
          }"
          :role="item.clickable !== false && item.key ? 'button' : undefined"
          :tabindex="item.clickable !== false && item.key ? 0 : undefined"
          @click="onCardClick(item)"
          @keydown.enter.prevent="onCardClick(item)"
        >
          <v-card-text class="pa-4 d-flex align-center justify-space-between">
            <div>
              <div
                class="text-caption text-medium-emphasis mb-1"
                style="font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase"
              >
                {{ item.subtitle }}
              </div>
              <div
                class="font-weight-bold"
                :class="'text-' + item.color"
                style="font-size: 36px; line-height: 1.1"
              >
                {{ item.title }}
              </div>
            </div>
            <v-avatar :color="item.color" size="48" rounded="lg" class="stat-icon">
              <v-icon :icon="item.icon" size="24" color="white" />
            </v-avatar>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<style scoped>
.stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.stat-card--refreshing {
  opacity: 0.88;
}
.stat-card--clickable {
  cursor: pointer;
}
.stat-card--clickable:focus-visible {
  outline: 2px solid rgb(var(--v-theme-primary));
  outline-offset: 2px;
}
.stat-card--active {
  border-color: rgb(var(--v-theme-primary)) !important;
  box-shadow: 0 0 0 1px rgba(var(--v-theme-primary), 0.35) !important;
}
.stat-card--clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(var(--v-theme-primary), 0.08) !important;
}
.stat-icon {
  transition: transform 0.3s ease;
}
.stat-card:hover .stat-icon {
  transform: scale(1.1);
}
</style>
