<script setup lang="ts">
/**
 * 页面壳：主题 ConfigProvider + C 端氛围层。
 * 管理端 admin-mode 不挂星空，避免后台花哨。
 */
import { computed } from 'vue'
import { useTheme } from '@/composables/useTheme'
import { useAppMode } from '@/composables/useAppMode'
import AmbientBackground from '@/components/c-end/AmbientBackground.vue'

const props = withDefaults(defineProps<{
  /** force admin dark shell */
  admin?: boolean
  withTabPad?: boolean
  /** 强制关闭氛围（极少用） */
  noAmbient?: boolean
}>(), {
  admin: false,
  withTabPad: false,
  noAmbient: false,
})

const { isDark, wotTheme, themeVars, apply } = useTheme()
const { appMode } = useAppMode()

apply()

const forceDark = computed(() => props.admin || appMode.value === 'admin' || isDark.value)
const providerTheme = computed(() => (forceDark.value ? 'dark' : wotTheme.value))
const showAmbient = computed(() => (
  !props.noAmbient && !props.admin && appMode.value !== 'admin'
))

const rootClass = computed(() => [
  'page-root',
  'page-shell',
  props.withTabPad ? 'page-pad-tab' : '',
  forceDark.value ? 'theme-dark' : '',
  props.admin || appMode.value === 'admin' ? 'admin-mode' : '',
])

/** 内联兜底：个别端未吃到全局 .page-root 的 100vh 时仍铺满视口 */
const rootStyle = 'min-height:100vh;position:relative;'
</script>

<template>
  <wd-config-provider :theme="providerTheme" :theme-vars="themeVars">
    <view :class="rootClass" :style="rootStyle">
      <AmbientBackground v-if="showAmbient" />
      <view class="page-shell__content">
        <slot />
      </view>
    </view>
    <wd-toast />
    <wd-dialog />
  </wd-config-provider>
</template>

<style scoped lang="scss">
.page-shell__content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}
</style>
