<template>
  <PageFrame section-class="insights-wrapper">
    <div class="insights-container">
      <section class="insights-grid">
        <article
          v-for="item in items"
          :key="item.label"
          class="insight-card"
          :class="{ clickable: item.routeName }"
          @click="handleCardClick(item)"
        >
          <h3 class="insight-title">{{ item.label }}</h3>
        </article>
      </section>
    </div>
  </PageFrame>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import PageFrame from '@/components/layout/PageFrame.vue'

type InsightItem = {
  label: string
  routeName?: string
  routeParams?: Record<string, string>
}

const router = useRouter()

const items: InsightItem[] = [
  { label: '学员管理', routeName: 'student-management' },
  { label: '排行榜', routeName: 'ranking-list' },
  { label: '学情分析', routeName: 'subject-analysis', routeParams: { subject: '英语' } },
  { label: '错题本' },
]

function handleCardClick(item: InsightItem) {
  if (!item.routeName) return
  router.push({ name: item.routeName, params: item.routeParams })
}
</script>

<style scoped lang="scss">
:deep(.insights-wrapper) {
  display: flex;
  flex-direction: column;
  // flex: 1;
  min-height: 0;
}

.insights-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-radius: 16px;
  background: #d8e1f0;
  // padding: 16px;
}

.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 32px 33px;
  width: 100%;
  height: 100%;
}

.insight-card {
  display: flex;
  align-items: flex-start;
  border-radius: 24px;
  background: #fff;
  padding: 80px;
  transition: box-shadow 0.2s;
  width: 848px;
  height: 373px;

  &.clickable {
    cursor: pointer;
  }

  &:hover {
    box-shadow: 0 6px 18px rgba(51, 83, 145, 0.15);
  }
}

.insight-title {
  font-size: 44px;
  font-weight: 600;
  color: #121212;
}
</style>
