<template>
  <div class="page-container">
    <el-card shadow="hover" header="连接治理配置" class="info-card">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="WebSocket 端点">
          {{ config?.websocketEndpoint ?? '—' }}
        </el-descriptions-item>
        <el-descriptions-item label="服务端口">{{ config?.serverPort ?? '—' }}</el-descriptions-item>
        <el-descriptions-item label="OFFER 去重窗口">
          {{ config ? (config.dedupWindowMs / 1000).toFixed(0) + ' 秒' : '—' }}
          <span class="text-muted">（同一连接在此窗口内的重复 OFFER 将被忽略）</span>
        </el-descriptions-item>
        <el-descriptions-item label="连接确认超时">
          {{ config ? (config.requestTimeoutMs / 1000).toFixed(0) + ' 秒' : '—' }}
          <span class="text-muted">（超时未确认则通知主控端请求失败）</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="hover" header="管理令牌 (admin.token)" class="info-card">
      <el-alert type="info" :closable="false" show-icon>
        <template #title>如何修改后台登录令牌</template>
        <p>
          管理接口受 <code>X-Admin-Token</code> 头保护，令牌由服务器
          <code>application.yml</code> 中的 <code>admin.token</code> 配置，
          也可通过环境变量 <code>ADMIN_TOKEN</code> 覆盖。
        </p>
        <p>当前前端默认令牌取自 <code>.env</code> 的 <code>VITE_ADMIN_TOKEN</code>，需与服务器保持一致。</p>
        <p>示例：</p>
        <pre>admin:
  token: ${ADMIN_TOKEN:webrtc-admin-token}</pre>
        <p class="text-muted">修改后重启信令服务器即可生效。</p>
      </el-alert>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getConfig } from '@/api/admin';
import type { ServerConfig } from '@/api/admin';

const config = ref<ServerConfig | null>(null);
onMounted(async () => {
  config.value = await getConfig();
});
</script>

<style scoped>
.info-card {
  margin-bottom: 16px;
}
pre {
  background: #f0f2f5;
  padding: 10px 12px;
  border-radius: 6px;
  overflow: auto;
  font-size: 13px;
}
</style>
