<template>
  <q-layout view="hHh Lpr fFf" class="auth-page admin-shell">
    <q-header class="admin-shell__header">
      <q-toolbar class="admin-topbar">
        <q-btn flat round dense icon="menu" @click="toggleDrawer">
          <q-tooltip>导航</q-tooltip>
        </q-btn>

        <div class="admin-brand" @click="goHome">
          <div class="admin-brand__mark">
            <q-icon name="shield" />
          </div>
          <div>
            <strong>认证中心管理</strong>
            <span>Dpz.Core Auth Console</span>
          </div>
        </div>

        <q-space />

        <div class="admin-route-indicator">
          <q-icon :name="route.meta.icon" />
          <span>{{ route.meta.title }}</span>
        </div>

        <q-btn
          round
          flat
          :icon="$q.dark.isActive ? 'light_mode' : 'dark_mode'"
          @click="$q.dark.toggle()"
        >
          <q-tooltip>{{
            $q.dark.isActive ? "浅色模式" : "深色模式"
          }}</q-tooltip>
        </q-btn>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="drawer"
      show-if-above
      :width="286"
      class="admin-shell__drawer"
    >
      <div class="admin-drawer-panel">
        <div class="admin-drawer-panel__status">
          <span />
          <div>
            <strong>System online</strong>
            <small>Security command ready</small>
          </div>
        </div>

        <q-list class="admin-nav">
          <q-item
            v-for="item in adminMenu"
            :key="item.hash"
            clickable
            :active="activeNavKey === item.key"
            class="admin-nav__item"
            :data-accent="item.accent"
            @click="navigate(item.hash)"
          >
            <q-item-section avatar>
              <q-icon :name="item.icon" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ item.label }}</q-item-label>
              <q-item-label caption>{{ item.subtitle }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </div>
    </q-drawer>

    <q-page-container>
      <q-page class="admin-page">
        <router-view v-slot="{ Component, route: viewRoute }">
          <component
            :is="Component"
            :id="route.params.id"
            :key="viewRoute.fullPath"
            :navigate="navigate"
          />
        </router-view>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";
import { adminMenu } from "./admin/adminMenu";

const $q = useQuasar();
$q.dark.set("auto");

const drawer = ref(false);
let drawerToggleLocked = false;
const route = useRoute();
const router = useRouter();

const activeNavKey = computed(() => {
  const key = String(route.meta.key ?? route.name);
  return key === "application-form" ? "applications" : key;
});

watch(
  () => route.meta.title,
  (title) => {
    document.title = `${title ?? "控制台"} - Dpz.Core 认证中心`;
  },
  { immediate: true },
);

function navigate(hash: string) {
  void router.push(hash.replace(/^#/, ""));
  if ($q.screen.lt.md) {
    drawer.value = false;
  }
}

function goHome() {
  window.location.href = "/";
}

function toggleDrawer(event: Event) {
  event.preventDefault();
  event.stopPropagation();
  if (drawerToggleLocked) {
    return;
  }

  drawerToggleLocked = true;
  drawer.value = !drawer.value;
  window.setTimeout(() => {
    drawerToggleLocked = false;
  }, 120);
}
</script>