<script setup lang="ts">
/**
 * 通用统计岛组件：一行多个紧凑玻璃质感统计小卡
 *
 * 设计语言与提现管理账户卡的统计岛（finance/withdrawal AccountInfoCard）完全一致：
 * 12px 圆角 + 1px 边框 + 主色渐变玻璃底 + 右上角 SVG 图标 + 角落径向荧光 +
 * DIN 等宽大数字，hover 主色边框浮起。用于替换各页面过大的 AnalysisOverview 大卡。
 */
import { IconifyIcon as VbenIcon } from '@vben/icons';

import type { StatIslandItem } from './typing';

withDefaults(
  defineProps<{
    items: StatIslandItem[];
    /** 每行列数（桌面端），默认 4；窄屏自动降为 2 列 */
    columns?: number;
  }>(),
  { columns: 4 },
);

/** 金额展示为两位小数；非数字原样透出（如「—」占位） */
function formatValue(val: number | string) {
  const n = Number(val);
  return Number.isFinite(n) ? n.toFixed(2) : String(val);
}
</script>

<template>
  <div class="stat-islands" :style="{ '--stat-cols': columns }">
    <article
      v-for="item in items"
      :key="item.key"
      class="stat-island"
      :class="{ 'stat-island--emphasize': item.emphasize }"
      :aria-label="item.label"
    >
      <div class="stat-island-glow" />
      <VbenIcon class="stat-icon" :icon="item.icon" />
      <div class="stat-label">{{ item.label }}</div>
      <div class="stat-val">
        <span v-if="item.prefix !== ''" class="stat-val-prefix">{{ item.prefix ?? '¥' }}</span>
        {{ formatValue(item.value) }}
      </div>
    </article>
  </div>
</template>

<style scoped>
.stat-islands {
  display: grid;
  grid-template-columns: repeat(var(--stat-cols, 4), minmax(0, 1fr));
  gap: 10px;
}

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

/* 统计岛：玻璃质感 + 右上角图标 + 淡荧光（与提现管理 stat-island 同规格） */
.stat-island {
  position: relative;
  overflow: hidden;
  padding: 14px;
  cursor: default;
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 4%),
    hsl(var(--card, var(--background)))
  );
  backdrop-filter: blur(8px);
  border: 1px solid hsl(var(--border));
  border-radius: 12px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.stat-island:hover {
  border-color: hsl(var(--primary) / 40%);
  box-shadow:
    0 8px 20px hsl(var(--primary) / 14%),
    0 2px 6px rgb(0 0 0 / 6%);
  transform: translateY(-3px);
}

/* 角落局部高光，强化荧光感 */
.stat-island-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 110px;
  height: 110px;
  pointer-events: none;
  background: radial-gradient(circle, hsl(var(--primary) / 18%) 0%, transparent 70%);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.stat-island:hover .stat-island-glow {
  opacity: 1;
}

/* 强调项：主色字 + 更强荧光 */
.stat-island--emphasize {
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 10%),
    hsl(var(--card, var(--background)))
  );
  border-color: hsl(var(--primary) / 30%);
}

.stat-island--emphasize .stat-island-glow {
  opacity: 0.85;
}

.stat-island--emphasize .stat-val {
  color: hsl(var(--primary));
}

/* 右上角图标：固定 24x24，主色调 */
.stat-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  color: hsl(var(--primary) / 70%);
  transition: color 0.2s ease;
}

.stat-island:hover .stat-icon {
  color: hsl(var(--primary));
}

.stat-label {
  position: relative;
  z-index: 1;
  padding-right: 32px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.2;
  color: hsl(var(--muted-foreground));
}

.stat-val {
  position: relative;
  z-index: 1;
  font-family: 'DIN Alternate', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
}

.stat-val-prefix {
  margin-right: 2px;
  font-size: 12px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
</style>
