<script setup>
import { computed } from 'vue'
import { RouterView, useRoute } from 'vue-router'
import HeaderComponent from './components/HeaderComponent.vue'
import FooterComponent from './components/FooterComponent.vue'
import AgentAssistantDrawer from './components/shell/AgentAssistantDrawer.vue'
import { useHudTheme } from './composables/useHudTheme'

useHudTheme()

const route = useRoute()
const isAuthPage = computed(() => {
  const path = route.path
  return path === '/login' || path === '/register' || path === '/forgot-password'
})
</script>

<template>
  <div class="app-container hud-app">
    <HeaderComponent v-if="!isAuthPage" />
    <RouterView v-slot="{ Component }" class="router-view-container">
      <Transition name="hud-route" mode="out-in">
        <component :is="Component" :key="route.fullPath" />
      </Transition>
    </RouterView>
    <FooterComponent />
    <AgentAssistantDrawer />
  </div>
</template>

<style>
:root,
body,
#app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

.app-container {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* 让登录等全屏页在「顶栏/页尾」之间拿到确定高度，子级才能稳定做左右分栏 */
.router-view-container {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.router-view-container > * {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}
</style>