<template>
  <div class="home">
    <el-card class="block">
      <el-alert
        title="交付平台（I7）：按角色展示入口；Callback 仅 OPS / SYS_ADMIN"
        type="info"
        show-icon
        :closable="false"
      />
      <p class="meta">用户：{{ auth.displayName }}，角色：{{ auth.roles.join(", ") || "—" }}</p>
      <div class="quick-links" aria-label="模块导航">
        <router-link v-for="l in visibleModuleLinks" :key="l.to" class="ql" :to="l.to">
          {{ l.label }}
        </router-link>
      </div>
    </el-card>
    <el-card class="block">
      <template #header>调试</template>
      <el-button type="primary" :loading="pingLoading" @click="ping">Bearer 调用 /api/v1/ping</el-button>
      <pre v-if="pingBody">{{ pingBody }}</pre>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import axios from "axios";
import { useAuthStore } from "../stores/auth";

const auth = useAuthStore();
const pingBody = ref("");
const pingLoading = ref(false);

/** I7：与 MainLayout / 路由 meta 一致 */
const allModuleLinks = [
  { to: "/customers", label: "客户", roles: ["SYS_ADMIN", "DEVELOPER"] },
  { to: "/projects", label: "项目", roles: ["SYS_ADMIN", "DEVELOPER"] },
  { to: "/contracts", label: "合同", roles: ["SYS_ADMIN", "DEVELOPER"] },
  { to: "/deliveries", label: "交付", roles: ["SYS_ADMIN", "DEVELOPER"] },
  { to: "/licenses/sn", label: "许可 SN", roles: ["SYS_ADMIN", "DEVELOPER"] },
  { to: "/callbacks", label: "Callback 收件箱", roles: ["SYS_ADMIN", "OPS"] },
  { to: "/integration/environments", label: "集成环境", roles: ["SYS_ADMIN", "DEVELOPER", "OPS"] },
  { to: "/integration/product-lines", label: "产品线", roles: ["SYS_ADMIN", "DEVELOPER", "OPS"] },
  { to: "/devices", label: "设备管理", roles: ["SYS_ADMIN", "DEVELOPER"] },
  { to: "/todos", label: "待办中心", roles: ["SYS_ADMIN", "DEVELOPER", "OPS"] },
  { to: "/reports/contract-sn", label: "报表中心", roles: ["SYS_ADMIN"] },
];

const visibleModuleLinks = computed(() => allModuleLinks.filter((l) => auth.hasAnyRole(l.roles)));

onMounted(() => auth.restoreAxiosAuth());

async function ping() {
  pingLoading.value = true;
  pingBody.value = "";
  try {
    const { data } = await axios.get("/api/v1/ping");
    pingBody.value = JSON.stringify(data, null, 2);
  } catch (e) {
    pingBody.value = e.response?.data ? JSON.stringify(e.response.data) : String(e.message);
  } finally {
    pingLoading.value = false;
  }
}
</script>

<style scoped>
.home {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.meta {
  margin: 12px 0;
}
.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 8px;
}
.ql {
  color: var(--el-color-primary);
  text-decoration: none;
}
.ql:hover {
  text-decoration: underline;
}
pre {
  margin-top: 12px;
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 12px;
  border-radius: 4px;
}
</style>
