<script setup lang="ts" name="TeekLayoutProvider">
import type { TeekConfig } from "vitepress-theme-teek";
import Teek, { teekConfigContext, TkCommentGiscus,TkRightBottomButton } from "vitepress-theme-teek";
import { useData } from "vitepress";
import { watch, ref, provide, defineAsyncComponent } from "vue";
import { useStorage } from "vitepress-theme-teek";
import { usePasswordProtection } from "../composables/usePasswordProtection";
import { giscusConfig } from "../config/commentConfig";
import {
  teekDocConfig,
  teekBlogFullConfig,
  teekBlogConfig,
  teekBlogParkConfig,
  teekBlogBodyConfig,
  teekBlogCardConfig
} from "../config/teekConfig";

// 异步组件引入
const CalendarCard = defineAsyncComponent(() => import("./CalendarCard.vue"));
const ConfigSwitch = defineAsyncComponent(() => import("./ConfigSwitch.vue"));
const ContributeChart = defineAsyncComponent(() => import("./ContributeChart.vue"));
const JumpToBottom = defineAsyncComponent(() => import("./JumpToBottom.vue"));
const NotFound = defineAsyncComponent(() => import("./404.vue"));
const PasswordProtect = defineAsyncComponent(() => import("./PasswordProtect.vue"));

const ns = "layout-provider";
const { frontmatter } = useData();

// --- 2. 密码保护逻辑 ---
const {
  showPassword,
  currentPassword,
  currentVerifyPrefix,
  handleVerified
} = usePasswordProtection();

// --- 3. 配置合并核心逻辑 ---
const getConfigByStyle = (style: string): TeekConfig => {
  const configs: Record<string, TeekConfig> = {
    "doc": teekDocConfig,
    "blog": teekBlogConfig,
    "blog-part": teekBlogParkConfig,
    "blog-full": teekBlogFullConfig,
    "blog-body": teekBlogBodyConfig,
    "blog-card": teekBlogCardConfig,
  };

  const baseConfig = configs[style] || teekBlogFullConfig;
  // 重要：将风格配置与导入的 Giscus 配置合并
  return {
    ...baseConfig,
    ...giscusConfig
  };
};

// 初始化响应式配置
const currentStyle = useStorage("tk:configStyle", "blog");
const teekConfig = ref(getConfigByStyle(currentStyle.value));
provide(teekConfigContext, teekConfig);

const watchRuntimeAndRibbon = async (layout: string, style: string) => {
};

watch(frontmatter, newVal => {
  setTimeout(() => watchRuntimeAndRibbon(newVal.layout, currentStyle.value), 700);
}, {
  immediate: true,
  flush: "post",
});

const handleConfigSwitch = (config: TeekConfig, style: string) => {
  // 切换时重新合并配置，防止评论功能失效
  teekConfig.value = {
    ...config,
    ...giscusConfig
  };
  setTimeout(() => watchRuntimeAndRibbon(frontmatter.value.layout, style), 700);
};
</script>

<template>
  <div v-if="showPassword" class="password-mask">
    <PasswordProtect
        :correctPassword="currentPassword"
        :pageId="currentVerifyPrefix || ''"
        @verified="handleVerified"
    />
  </div>

  <Teek.Layout v-else>
    <template #teek-theme-enhance-bottom>
      <div :class="[ns, 'flx-align-center']">
        <ConfigSwitch v-model="currentStyle" @switch="handleConfigSwitch" />
      </div>
    </template>

    <template #nav-screen-content-after>
      <ConfigSwitch v-model="currentStyle" @switch="handleConfigSwitch" />
    </template>

    <template #teek-home-card-my-after>
      <CalendarCard />
    </template>

    <template #teek-archives-top-before>
      <ContributeChart />
    </template>

    <template #doc-after>
      <TkCommentGiscus />
    </template>

    <template #teek-login-page>
      <PasswordProtect
          :correctPassword="currentPassword"
          :pageId="currentVerifyPrefix || ''"
          @verified="handleVerified"
      />
    </template>

    <template #not-found>
      <NotFound />
    </template>

    <template #teek-to-comment="{ show, icon }">
      <JumpToBottom
          v-if="show"
          :show="show"
          :icon="icon" />
    </template>

  </Teek.Layout>
</template>

<style lang="scss">
.password-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background-color: var(--vp-c-bg);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tk-my.is-circle-bg {
  .tk-my__avatar.circle-rotate {
    margin-top: 200px;
  }
}

/* 可以在这里微调评论组件的间距 */
.giscus {
  margin-top: 2rem;
}
</style>