<script setup lang="ts">
import { onMounted } from "vue";
import { RouterLink, RouterView, useRoute } from "vue-router";
import { Activity, ArrowDownToLine, FileJson, Home, MessageSquareText, Network } from "lucide-vue-next";
import { usePortalState } from "./state";

const route = useRoute();
const state = usePortalState();

const navItems = [
  { path: "/", label: "状态总览", icon: Home },
  { path: "/releases", label: "发布版本", icon: ArrowDownToLine },
  { path: "/sources", label: "接口源", icon: Network },
  { path: "/feedback", label: "反馈查询", icon: MessageSquareText },
  { path: "/compatibility", label: "兼容说明", icon: FileJson },
];

onMounted(() => state.load());
</script>

<template>
  <main class="portal-shell">
    <nav class="topnav">
      <RouterLink class="brand" to="/">
        <span><img :src="state.branding.value.siteIconUrl" :alt="state.branding.value.developerName" /></span>
        <strong>{{ state.branding.value.developerName }}</strong>
      </RouterLink>
      <div class="nav-links">
        <RouterLink v-for="item in navItems" :key="item.path" :to="item.path" :class="{ active: route.path === item.path }">
          <component :is="item.icon" :size="15" />{{ item.label }}
        </RouterLink>
      </div>
    </nav>

    <p v-if="state.error.value" class="state-banner error">服务状态读取失败：{{ state.error.value }}</p>
    <p v-else-if="state.loading.value" class="state-banner loading"><Activity :size="16" />正在读取客户端公开状态...</p>
    <p v-else-if="state.loadedAt.value" class="state-banner ready">公开状态已更新：{{ state.loadedAt.value.slice(0, 19).replace("T", " ") }}</p>

    <RouterView />
  </main>
</template>
