<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/userStore'
import SidebarMenu from '../components/SidebarMenu.vue'
import BreadcrumbNav from '../components/BreadcrumbNav.vue'
import StatisticsCharts from '../components/StatisticsCharts.vue'
import InsightDashboard from '../components/shell/InsightDashboard.vue'
import CommunityQuickEntry from '../components/shell/CommunityQuickEntry.vue'
import HudPageHero from '../components/shell/HudPageHero.vue'

const router = useRouter()
const { userInfo, getUserInfo } = useUserStore()

onMounted(() => {
  getUserInfo().then(() => {
    if (!userInfo.value) {
      router.push('/login')
    }
  })
})
</script>

<template>
  <div class="home-container shell-layout-root">
    <div class="main-container">
      <div class="sidebar">
        <SidebarMenu />
      </div>

      <div class="content-area">
        <BreadcrumbNav />

        <HudPageHero
          title="数据控制台"
          description="模块切换与状态一览；含数据洞察看板、社群快捷入口与历史统计。"
        />

        <CommunityQuickEntry />

        <InsightDashboard />

        <div class="legacy-stats">
          <StatisticsCharts :userInfo="userInfo" />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 120px);
  background: transparent;
}

.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
  transition: all 0.3s ease;
}

.content-area {
  flex: 1;
  padding: 22px 24px 100px;
  overflow-y: auto;
  border-radius: 0;
}

.legacy-stats {
  margin-top: 8px;
}
</style>
