<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";

import EmptyState from "../../shared/components/EmptyState.vue";
import MarketWorkspaceView from "../../pages/market/MarketWorkspaceView.vue";
import ScreenerPage from "../../pages/screener/ScreenerPage.vue";
import MentorPage from "../../pages/mentor/MentorPage.vue";
import HeavenPage from "../../pages/heaven/HeavenPage.vue";
import ReviewPage from "../../pages/review/ReviewPage.vue";
import { useMarketStore } from "../../shared/stores/market";
import { useSessionStore } from "../../shared/stores/session";
import { useUiStore } from "../../shared/stores/ui";
import { findWorkspace } from "../workspaceRegistry";

const route = useRoute();
const market = useMarketStore();
const session = useSessionStore();
const ui = useUiStore();
const workspace = computed(() => findWorkspace(String(route.params.workspace)) ?? findWorkspace("emotion")!);
const locked = computed(
  () => ["screener", "mentor", "heaven"].includes(workspace.value.key) && !session.account?.smart_access,
);
const implementedMarket = computed(() =>
  [
    "emotion", "pool", "broken", "limit-down", "yesterday", "performance", "ladder",
    "rotation", "auction", "themes", "popularity", "dragon-list",
  ].includes(
    workspace.value.key,
  ),
);
</script>

<template>
  <MarketWorkspaceView v-if="implementedMarket" :workspace-key="workspace.key" />
  <ScreenerPage v-else-if="workspace.key === 'screener'" />
  <MentorPage v-else-if="workspace.key === 'mentor'" />
  <HeavenPage v-else-if="workspace.key === 'heaven'" />
  <ReviewPage v-else-if="workspace.key === 'review'" />
  <main v-else class="page-frame">
    <header class="page-header">
      <h1>{{ workspace.title }}</h1>
      <p class="page-subtitle">{{ workspace.description }} · 数据日期 {{ market.selectedDate }}</p>
    </header>
    <div v-if="locked" class="notice notice-warning membership-lock">
      <span><strong>{{ workspace.title }}仅对会员开放</strong>，开通会员后可使用完整智能功能。</span>
      <button class="btn btn-small" type="button" @click="ui.openDialog('membership')">查看会员状态</button>
    </div>
    <section class="card" :class="{ 'locked-content': locked }" :aria-disabled="locked">
      <EmptyState title="暂无可显示数据" description="当前日期尚未载入该页面的有效行情数据。" />
    </section>
  </main>
</template>
