<template>
  <div class="identity-shell">
    <nav class="auth-nav auth-nav--sticky">
      <button class="auth-nav-brand" type="button" @click="navigate('/')">
        <span class="auth-logo">
          <q-icon name="shield" size="26px" />
        </span>
        <span class="auth-nav-title">Dpz.Core</span>
        <span class="auth-nav-sub">认证中心</span>
      </button>

      <div class="auth-nav-end">
        <q-btn flat round icon="logout" @click="signOut">
          <q-tooltip>退出登录</q-tooltip>
        </q-btn>
        <q-btn
          round
          flat
          :icon="$q.dark.isActive ? 'light_mode' : 'dark_mode'"
          @click="$q.dark.toggle()"
        >
          <q-tooltip>切换主题</q-tooltip>
        </q-btn>
      </div>
    </nav>

    <main class="identity-shell-page">
      <div class="identity-decor" aria-hidden="true">
        <div class="identity-grid" />
        <div class="identity-scan" />
        <div class="identity-beam identity-beam--a" />
        <div class="identity-beam identity-beam--b" />
      </div>
      <div class="identity-container">
        <component :is="currentPage" />
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useQuasar } from "quasar";
import { PageContext } from "../services/PageContext";
import AccessDeniedPage from "./components/AccessDeniedPage.vue";
import ChangePasswordPage from "./components/ChangePasswordPage.vue";
import ConsentPage from "./components/ConsentPage.vue";
import PasskeyManagePage from "./components/PasskeyManagePage.vue";
import SecurityOnboardingPage from "./components/SecurityOnboardingPage.vue";
import TwoFactorBindPage from "./components/TwoFactorBindPage.vue";
import TwoFactorUnbindPage from "./components/TwoFactorUnbindPage.vue";

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

const currentPage = computed(() => {
  switch (context.pageName) {
    case "consent":
      return ConsentPage;
    case "access-denied":
      return AccessDeniedPage;
    case "bind-two-factor":
      return TwoFactorBindPage;
    case "unbind-two-factor":
      return TwoFactorUnbindPage;
    case "passkeys":
      return PasskeyManagePage;
    case "security-onboarding":
      return SecurityOnboardingPage;
    case "change-password":
    default:
      return ChangePasswordPage;
  }
});

function navigate(url: string) {
  window.location.href = url;
}

function signOut() {
  $q.dialog({
    title: "退出登录",
    message: "确认退出当前认证中心会话？",
    cancel: true,
    persistent: true,
  }).onOk(() => {
    window.location.href = "/sign-out";
  });
}
</script>