<!-- 用户端主布局，负责侧栏、移动端导航和账户积分刷新。 -->
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { Menu } from "@/icons";
import { RouterView, useRoute, useRouter } from "vue-router";
import WebSidebar from "@/components/WebSidebar.vue";
import { useAuthStore } from "@/stores/auth";
import { POINT_BALANCE_CHANGED_EVENT } from "@/utils/pointBalance";

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const viewportWidth = ref(window.innerWidth);
const drawerOpen = ref(false);
const mobile = computed(() => viewportWidth.value < 768);
const collapsed = computed(() => viewportWidth.value >= 768 && viewportWidth.value < 1200);
const fullscreen = computed(() => route.meta.fullscreen === true);

function updateViewport() {
  viewportWidth.value = window.innerWidth;
  if (!mobile.value) drawerOpen.value = false;
}
function navigate(path: string) {
  drawerOpen.value = false;
  void router.push(path);
}
function refreshPointBalance() {
  void auth.loadAccount();
}

onMounted(() => {
  window.addEventListener("resize", updateViewport, { passive: true });
  window.addEventListener(POINT_BALANCE_CHANGED_EVENT, refreshPointBalance);
  void auth.loadAccount();
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", updateViewport);
  window.removeEventListener(POINT_BALANCE_CHANGED_EVENT, refreshPointBalance);
});
</script>

<template>
  <div
    class="web-layout"
    :class="{ 'is-collapsed': collapsed, 'is-fullscreen': fullscreen }"
  >
    <aside
      v-if="!mobile && !fullscreen"
      class="web-layout__sidebar"
    >
      <WebSidebar
        :active-path="route.path"
        :collapsed="collapsed"
        @navigate="navigate"
      />
    </aside>

    <el-drawer
      v-if="!fullscreen"
      v-model="drawerOpen"
      direction="ltr"
      size="min(280px, 88vw)"
      :with-header="false"
      class="web-drawer"
    >
      <WebSidebar
        :active-path="route.path"
        @navigate="navigate"
      />
    </el-drawer>

    <main class="web-layout__main">
      <header
        v-if="mobile && !fullscreen"
        class="web-layout__mobile-bar"
      >
        <button
          type="button"
          class="web-layout__menu"
          title="打开菜单"
          @click="drawerOpen = true"
        >
          <Menu :size="21" />
        </button>
        <strong>{{ String(route.meta.title || "剧游AI") }}</strong>
      </header>
      <RouterView />
    </main>
  </div>
</template>

<style scoped lang="scss">
.web-layout {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  color: var(--web-text);
  background: var(--web-bg);
}
.web-layout.is-collapsed {
  grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr);
}
.web-layout.is-fullscreen {
  grid-template-columns: minmax(0, 1fr);
}
.web-layout__sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 20;
}
.web-layout__main {
  min-width: 0;
  min-height: 100dvh;
  overflow: hidden;
}
.web-layout__mobile-bar {
  position: sticky;
  top: 0;
  z-index: 19;
  height: var(--mobile-bar-height);
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background: var(--web-sidebar);
  border-bottom: 1px solid var(--web-line);
}
.web-layout__mobile-bar strong {
  font-size: 15px;
  font-weight: 600;
}
.web-layout__menu {
  width: var(--control-height-lg);
  height: var(--control-height-lg);
  display: grid;
  place-items: center;
  color: var(--web-text);
  background: var(--web-surface);
  border: 1px solid var(--web-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.18s;
}
.web-layout__menu:hover:not(:disabled) {
  background: var(--web-hover);
}
@media (max-width: 767px) {
  .web-layout {
    display: block;
  }
}
</style>

<style lang="scss">
.web-drawer .el-drawer__body {
  padding: 0;
  background: var(--web-sidebar);
}
</style>
