<template>
  <n-layout class="app-shell" has-sider wh-full>
    <n-layout-sider
      class="app-shell__sider"
      collapse-mode="width"
      :collapsed-width="64"
      :width="200"
      :native-scrollbar="false"
      :collapsed="appStore.collapsed"
    >
      <SideBar />
    </n-layout-sider>

    <article class="app-shell__main">
      <header class="app-shell__header" :style="`height: ${header.height}px`">
        <AppHeader />
      </header>
      <section v-if="tags.visible" class="app-shell__tags" hidden sm:block>
        <AppTags :style="{ height: `${tags.height}px` }" />
      </section>
      <section class="app-shell__content">
        <AppMain />
      </section>
    </article>
  </n-layout>
</template>

<script setup>
import AppHeader from './components/header/index.vue'
import SideBar from './components/sidebar/index.vue'
import AppMain from './components/AppMain.vue'
import AppTags from './components/tags/index.vue'
import { useAppStore } from '@/store'
import { header, tags } from '~/settings'

const appStore = useAppStore()
</script>

<style scoped lang="scss">
.app-shell {
  padding: 12px;
  gap: 12px;
  background: linear-gradient(180deg, #f3f6fa 0%, #ecf1f7 100%);
}

.app-shell__sider {
  overflow: hidden;
  border: 1px solid var(--app-shell-border);
  border-radius: 18px;
  background: #f8fafc;
  box-shadow: var(--app-shell-shadow);
}

.app-shell__main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.app-shell__header,
.app-shell__tags {
  display: flex;
  align-items: center;
  border: 1px solid var(--app-shell-border);
  border-radius: 16px;
  background: var(--app-shell-bg);
  box-shadow: var(--app-shell-shadow);
}

.app-shell__header {
  padding: 0 16px;
}

.app-shell__tags {
  padding: 0 8px;
}

.app-shell__content {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  border-radius: 18px;
}
</style>
