<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
import { ElMessageBox } from "element-plus";
import { RouterView, useRoute, useRouter } from "vue-router";
import AdminMenu from "@/components/AdminMenu.vue";
import AppIcon from "@/components/AppIcon.vue";
import logoUrl from "@/assets/logo";
import { useAuthStore } from "@/stores/auth";

const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const width = ref(window.innerWidth);
const drawerOpen = ref(false);
const loggingOut = ref(false);
const collapsed = computed(() => width.value < 1200);
const mobile = computed(() => width.value < 768);
const updateWidth = () => {
  width.value = window.innerWidth;
  if (!mobile.value) drawerOpen.value = false;
};
onMounted(() => window.addEventListener("resize", updateWidth, { passive: true }));
onBeforeUnmount(() => window.removeEventListener("resize", updateWidth));

/** 确认管理员主动退出后注销当前会话，桌面侧栏与移动抽屉共用该流程。 */
async function logout() {
  if (loggingOut.value) return;
  try {
    await ElMessageBox.confirm("退出后需要重新登录，确定退出管理后台吗？", "退出登录", {
      type: "warning",
      confirmButtonText: "退出登录",
      cancelButtonText: "取消",
    });
  } catch (error) {
    if (error === "cancel" || error === "close") return;
    throw error;
  }
  loggingOut.value = true;
  try {
    await auth.logout();
    await router.replace("/login");
  } finally {
    loggingOut.value = false;
  }
}
function navigate(path: string) {
  router.push(path);
  drawerOpen.value = false;
}
</script>

<template>
  <div
    class="admin-shell"
    :class="{ 'is-collapsed': collapsed && !mobile }"
  >
    <aside
      v-if="!mobile"
      class="sidebar"
    >
      <div
        class="brand"
        :title="collapsed ? '剧游AI' : undefined"
      >
        <span class="brand-mark"
          ><img
            :src="logoUrl"
            alt="" /></span
        ><strong v-if="!collapsed">剧游AI</strong>
      </div>
      <AdminMenu
        :active-path="route.path"
        :collapsed="collapsed"
        @navigate="navigate"
      />
      <button
        class="menu-item logout"
        type="button"
        :title="collapsed ? '退出登录' : undefined"
        :disabled="loggingOut"
        @click="logout"
      >
        <AppIcon
          name="SwitchButton"
          :size="20"
        /><span v-if="!collapsed">退出登录</span>
      </button>
    </aside>

    <el-drawer
      v-model="drawerOpen"
      direction="ltr"
      size="240px"
      :with-header="false"
      class="mobile-drawer"
    >
      <div class="brand">
        <span class="brand-mark"
          ><img
            :src="logoUrl"
            alt="" /></span
        ><strong>剧游AI</strong>
      </div>
      <AdminMenu
        :active-path="route.path"
        @navigate="navigate"
      />
      <button
        class="menu-item logout"
        type="button"
        :disabled="loggingOut"
        @click="logout"
      >
        <AppIcon
          name="SwitchButton"
          :size="20"
        /><span>退出登录</span>
      </button>
    </el-drawer>

    <div class="shell-main">
      <main class="page-content">
        <button
          v-if="mobile"
          class="icon-button mobile-menu-trigger"
          type="button"
          title="打开菜单"
          @click="drawerOpen = true"
        >
          <AppIcon
            name="Menu"
            :size="22"
          />
        </button>
        <RouterView />
      </main>
    </div>
  </div>
</template>

<style scoped>
.mobile-menu-trigger {
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
</style>
