<template>
  <div class="stat-row">
    <div
      v-for="(stat, i) in stats" :key="stat.key"
      class="stat-card"
      :class="{ clickable: stat.link }"
      :style="{ animationDelay: `${i * 60}ms` }"
      @click="stat.link ? go(stat.link) : null"
      :title="stat.link ? stat.title : undefined"
    >
      <div class="stat-card-bg" :class="'stat-bg--' + stat.key"></div>
      <div class="stat-card-inner">
        <div class="stat-top">
          <div class="stat-icon-wrap" :style="{ background: stat.iconBg }">
            <span class="stat-icon">{{ stat.icon }}</span>
          </div>
        </div>
        <div class="stat-value">{{ stat.value }}</div>
        <div class="stat-label">{{ stat.label }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 统计卡片行 — 从 Dashboard.vue 抽出(4 张统计卡: ideas/projects/tasks/drafts)。
// 共享 project store(全局单例),stats computed 直读 store.stats,无需父传 props。
// 卡片可点击跳转对应列表页(ideas/projects/tasks),提升导航效率。
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { useProjectStore } from '@/stores/project'

const store = useProjectStore()
const { t } = useI18n()
const router = useRouter()

function go(link: string) {
  router.push(link)
}

const stats = computed(() => [
  { key: 'ideas', icon: '\u{1F4A1}', label: t('dashboard.stats.ideas'), value: store.stats.ideas,
    iconBg: 'rgba(123,111,240,0.12)', link: '/ideas', title: t('dashboard.viewAll') },
  { key: 'projects', icon: '\u{1F4C2}', label: t('dashboard.stats.projects'), value: store.stats.projects,
    iconBg: 'rgba(94,175,240,0.10)', link: '/projects', title: t('dashboard.viewAll') },
  { key: 'tasks', icon: '⚡', label: t('dashboard.stats.activeTasks'), value: store.stats.activeTasks,
    iconBg: 'rgba(61,219,160,0.10)', link: '/tasks', title: t('dashboard.viewAll') },
  { key: 'drafts', icon: '\u{1F4DD}', label: t('dashboard.stats.drafts'), value: store.stats.drafts,
    iconBg: 'rgba(240,199,94,0.10)', link: null, title: '' },
])
</script>

<style scoped>
/* 仅迁入统计卡行自身样式;页面级布局(dash-grid/responsive 全局栅格)留 Dashboard.vue */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.stat-card {
  position: relative;
  border-radius: var(--df-radius-md);
  overflow: hidden;
  border: 0.5px solid var(--df-border);
  animation: fadeInUp 0.5s var(--df-ease) both;
}
.stat-card.clickable {
  cursor: pointer;
  transition: border-color 0.15s var(--df-ease), transform 0.15s var(--df-ease);
}
.stat-card.clickable:hover {
  border-color: var(--df-accent);
  transform: translateY(-1px);
}
.stat-card-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stat-bg--ideas { background: var(--df-accent-bg); }
.stat-bg--projects { background: var(--df-info-bg); }
.stat-bg--tasks { background: var(--df-success-bg); }
.stat-bg--drafts { background: var(--df-warning-bg); }
.stat-card-inner {
  position: relative;
  padding: 12px 14px 10px;
}
.stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.stat-icon-wrap {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--df-radius-sm);
}
.stat-icon { font-size: 14px; }

.stat-value {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.8px;
  color: var(--df-text);
  line-height: 1;
  margin-bottom: 2px;
}
.stat-label {
  font-size: 11px;
  color: var(--df-text-dim);
  font-weight: 450;
}

/* 中等窗口:缩窄统计卡 */
@media (min-width: 901px) and (max-width: 1200px) {
  .stat-row { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .stat-card-inner { padding: 10px 12px 8px; }
  .stat-value { font-size: 22px; }
  .stat-icon-wrap { width: 24px; height: 24px; }
  .stat-icon { font-size: 12px; }
}

/* 超宽窗口:展开统计卡 */
@media (min-width: 1600px) {
  .stat-row { gap: 14px; }
  .stat-card-inner { padding: 14px 18px 12px; }
  .stat-value { font-size: 28px; }
  .stat-icon-wrap { width: 30px; height: 30px; }
}
</style>
