<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
import AppNavbar from '@/components/layout/AppNavbar.vue'

const userStore = useUserStore()

// 模块列表（与后端 utils/modules.py 对应）
const modules = computed(() => {
  const all = [
    {
      id: 'troubleshoot',
      name: '问题排查',
      icon: '🔍',
      description: '基于历史知识库的 AI 问题排查，357 条记录',
      url: '/troubleshoot',
      roles: [] as string[]
    },
    {
      id: 'service-monitor',
      name: '服务监测',
      icon: '📊',
      description: '通过 SSH 连接监测服务器服务运行状态、输出报告',
      url: '/service-monitor',
      roles: [] as string[]
    },
    {
      id: 'service-manage',
      name: '服务管理',
      icon: '🛠️',
      description: '新统一平台服务授权、服务升级、服务信息管理',
      url: '/service-manage',
      roles: ['admin']
    },
  ]
  // 按角色过滤
  return all.filter(m => !m.roles.length || m.roles.includes(userStore.user?.role || ''))
})
</script>

<template>
  <div class="platform-page">
    <AppNavbar />
    <div class="container">
      <div class="page-header">
        <h1>运行维护平台</h1>
        <p>选择要使用的功能模块</p>
      </div>
      <div class="module-grid">
        <router-link
          v-for="m in modules"
          :key="m.id"
          :to="m.url"
          class="module-card"
        >
          <div class="module-icon">{{ m.icon }}</div>
          <div class="module-name">{{ m.name }}</div>
          <div class="module-desc">{{ m.description }}</div>
          <div class="module-enter">进入</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.platform-page {
  min-height: 100vh;
  padding-top: 56px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;

  h1 {
    font-size: 28px;
    font-weight: 700;
    color: $gray-900;
    margin-bottom: 8px;
  }

  p {
    color: $gray-500;
    font-size: 16px;
  }
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  @media screen and (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  @media screen and (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

.module-card {
  background: #fff;
  border-radius: 12px;
  padding: 32px 24px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  cursor: pointer;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
}

.module-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.module-name {
  font-size: 18px;
  font-weight: 700;
  color: $gray-900;
  margin-bottom: 8px;
}

.module-desc {
  font-size: 13px;
  color: $gray-500;
  margin-bottom: 20px;
  line-height: 1.5;
}

.module-enter {
  display: inline-block;
  background: $primary;
  color: #fff;
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s;

  .module-card:hover & {
    background: $primary-hover;
  }
}
</style>