---
import { getEntry, render } from "astro:content";
import Comment from "@components/comment/index.astro";
import Markdown from "@components/misc/Markdown.astro";
import Icon from "@/components/misc/Icon.astro";
import { commentConfig, siteConfig } from "@/config";
import I18nKey from "@/i18n/i18nKey";
import { i18n } from "@/i18n/translation";
import MainGridLayout from "@/layouts/MainGridLayout.astro";

// 检查页面是否启用
if (!siteConfig.pages.guestbook) {
	return Astro.redirect("/404/");
}

const guestbookPost = await getEntry("spec", "guestbook");

if (!guestbookPost) {
	throw new Error("guestbook page content not found");
}

const { Content } = await render(guestbookPost);

// 检查评论系统是否启用
const isCommentEnabled = commentConfig?.type && commentConfig.type !== "none";

// 页面标题和描述
const title = i18n(I18nKey.guestbook);
const description = i18n(I18nKey.guestbookDescription);
---

<MainGridLayout title={title} description={description}>
  <div
    class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32"
  >
    <div class="card-base z-10 px-9 py-6 relative w-full">
      <!-- 页面标题和描述 -->
      <div class="mb-8">
        <div class="flex items-center gap-3 mb-3">
          <div class="h-8 w-8 rounded-lg bg-[var(--primary)] flex items-center justify-center text-white dark:text-black/70">
            <Icon icon="material-symbols:chat" class="text-[1.5rem]"></Icon>
          </div>
          <h1 class="text-3xl font-bold text-neutral-900 dark:text-neutral-100">
            {title}
          </h1>
        </div>
        {description && (
          <p class="text-base text-neutral-600 dark:text-neutral-400 leading-relaxed mb-4">
            {description}
          </p>
        )}
      </div>
      
      <Markdown class="mt-2">
        <Content />
      </Markdown>
    </div>
  </div>

  <!-- 评论区 -->
  <div class="mt-4">
    {isCommentEnabled ? (
      <Comment post={guestbookPost} customPath="/guestbook/" />
    ) : (
      <div class="card-base p-8 mb-6 relative overflow-hidden">
        <div class="text-center py-8 text-[var(--content-meta)]">
          <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--btn-regular-bg)] flex items-center justify-center">
            <svg
              class="w-8 h-8 text-[var(--primary)]"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
              ></path>
            </svg>
          </div>
          <p class="text-base mb-2">{i18n(I18nKey.commentNotConfigured)}</p>
          <p class="text-sm text-[var(--content-meta)] opacity-75">
            {i18n(I18nKey.guestbookCommentHint)}
          </p>
        </div>
      </div>
    )}
  </div>
</MainGridLayout>
