<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";

import { useSessionStore } from "../../shared/stores/session";
import MarketSettingsPanel from "../system/MarketSettingsPanel.vue";
import MembershipAdminPanel from "../system/MembershipAdminPanel.vue";
import ModelPoolPanel from "../system/ModelPoolPanel.vue";

const router = useRouter();
const session = useSessionStore();
const section = ref<"market" | "models" | "members">("market");

onMounted(() => {
  if (!session.isAdmin) router.replace("/workspace/emotion");
});
</script>

<template>
  <main v-if="session.isAdmin" class="page-frame">
    <header class="page-header system-header">
      <div><h1>系统管理</h1><p class="page-subtitle">平台行情、模型池与会员配置</p></div>
      <div class="system-tabs" role="tablist">
        <button type="button" :class="{ active: section === 'market' }" @click="section = 'market'">行情管理</button>
        <button type="button" :class="{ active: section === 'models' }" @click="section = 'models'">模型池</button>
        <button type="button" :class="{ active: section === 'members' }" @click="section = 'members'">会员管理</button>
      </div>
    </header>
    <MarketSettingsPanel v-if="section === 'market'" />
    <ModelPoolPanel v-else-if="section === 'models'" />
    <MembershipAdminPanel v-else />
  </main>
</template>
