<template>
  <main class="page">
    <section class="card main-section flex flex-col gap-2.5 mx-auto py-8">
      <p v-if="!giscus || !giscus.repo" class="text-sm text-red-500 mb-4">Giscus 未配置。</p>
      <ClientOnly>
        <section class="card panel flex flex-col gap-2.5">
          <h2 class="m-0 mb-1 text-lg font-semibold">留言板</h2>
          <p class="text-sm text-white/60 mb-3">在这里留下想说的话吧 · Comments</p>
          <div class="giscus-wrapper">
            <component
              :is="GiscusComponent"
              v-if="GiscusComponent"
              :repo="giscus.repo"
              :repo-id="giscus.repoId"
              :category="giscus.category"
              :category-id="giscus.categoryId"
              :mapping="giscus.mapping"
              :reactions-enabled="giscus.reactionsEnabled"
              :emit-metadata="giscus.emitMetadata"
              :input-position="giscus.inputPosition"
              :theme="'/css/giscus.css'"
              lang="zh-CN"
              class="giscus"
            />
            <div v-else id="giscus-container" class="giscus" />
          </div>
        </section>
      </ClientOnly>
    </section>
  </main>
</template>

<script setup lang="ts">
import { definePageMeta } from "#imports";
import { onMounted, shallowRef, markRaw } from "vue";
import type { Component } from "vue";
import siteConfig from "~/config/siteConfig";

const giscus = siteConfig.comments.giscus || {};
const GiscusComponent = shallowRef<Component | null>(null);

async function tryUseOfficialComponent() {
  try {
    const mod = await import("@giscus/vue");
    const comp = mod.default ?? mod;
    if (comp) GiscusComponent.value = markRaw(comp);
    return !!comp;
  } catch (e) {
    console.error("Failed to import Giscus component:", e);
    return false;
  }
}

onMounted(async () => {
  // 如果没有配置 giscus，显示提示（由模板处理）
  if (!siteConfig.comments.enable) return;
  if (!giscus || !giscus.repo) return;
  const ok = await tryUseOfficialComponent();
  if (!ok) {
    console.error("Failed to load Giscus component.");
  }
});

definePageMeta({
  order: 5,
  label: "留言",
});
</script>

<style scoped>
/* .container {
  padding-left: 1rem;
  padding-right: 1rem;
} */

h1 {
  color: #e6eef8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
</style>

<!-- <style src="../styles/giscus.css"></style> -->
