<script setup>
const props = defineProps({
  items: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  minWidth: {
    type: Number,
    default: 180,
  },
})
</script>

<template>
  <div class="metric-grid" :style="{ '--metric-min': `${minWidth}px` }">
    <div
      v-for="item in items"
      :key="item?.key || item?.label"
      class="metric-card"
      :class="`metric-tone--${item?.tone || 'blue'}`"
    >
      <div class="metric-top">
        <div v-if="item?.icon" class="metric-icon">
          <el-icon><component :is="item.icon" /></el-icon>
        </div>
        <div class="metric-label">{{ item?.label || '-' }}</div>
      </div>

      <div class="metric-value">
        <el-skeleton v-if="loading" :rows="1" animated />
        <template v-else>{{ item?.value ?? 0 }}</template>
      </div>

      <div v-if="item?.hint || item?.sub" class="metric-hint app-muted">{{ item?.hint || item?.sub }}</div>
    </div>
  </div>
</template>

<style scoped>
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--metric-min), 1fr));
  gap: 12px;
}

.metric-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--app-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.9));
  box-shadow: var(--app-shadow-soft);
  padding: 13px 14px;
  min-height: 104px;
}

.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--metric-top, #3b82f6);
}

.metric-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.metric-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--metric-icon-bg, rgba(59, 130, 246, 0.12));
  color: var(--metric-icon-color, #1d4ed8);
}

.metric-label {
  font-size: 12px;
  color: #475569;
  font-weight: 700;
  line-height: 1.4;
}

.metric-value {
  margin-top: 10px;
  font-size: 26px;
  line-height: 1.05;
  font-weight: 900;
  color: #0f172a;
}

.metric-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
}

.metric-tone--blue {
  --metric-top: linear-gradient(90deg, #3b82f6, #06b6d4);
  --metric-icon-bg: rgba(59, 130, 246, 0.14);
  --metric-icon-color: #1d4ed8;
}

.metric-tone--green {
  --metric-top: linear-gradient(90deg, #10b981, #22c55e);
  --metric-icon-bg: rgba(16, 185, 129, 0.14);
  --metric-icon-color: #047857;
}

.metric-tone--purple {
  --metric-top: linear-gradient(90deg, #8b5cf6, #ec4899);
  --metric-icon-bg: rgba(139, 92, 246, 0.14);
  --metric-icon-color: #6d28d9;
}

.metric-tone--orange {
  --metric-top: linear-gradient(90deg, #f59e0b, #f97316);
  --metric-icon-bg: rgba(245, 158, 11, 0.14);
  --metric-icon-color: #b45309;
}

.metric-tone--red {
  --metric-top: linear-gradient(90deg, #ef4444, #f43f5e);
  --metric-icon-bg: rgba(239, 68, 68, 0.14);
  --metric-icon-color: #b91c1c;
}

.metric-tone--cyan {
  --metric-top: linear-gradient(90deg, #06b6d4, #3b82f6);
  --metric-icon-bg: rgba(6, 182, 212, 0.14);
  --metric-icon-color: #0e7490;
}

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

  .metric-card {
    min-height: 96px;
  }

  .metric-value {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }
}
</style>
