---
import path from "node:path";
import License from "@components/misc/License.astro";
import Markdown from "@components/misc/Markdown.astro";

import MainGridLayout from "@layouts/MainGridLayout.astro";
import { getSortedPosts } from "@utils/content-utils";
import { getDir, getPostUrlBySlug } from "@utils/url-utils";
import { Icon } from "astro-icon/components";
import { gitHubEditConfig, licenseConfig } from "src/config";
import PostMetadata from "../../components/PostMeta.astro";
import ImageWrapper from "../../components/misc/ImageWrapper.astro";
import { profileConfig, siteConfig } from "../../config";
import { formatDateToYYYYMMDD } from "../../utils/date-utils";

export async function getStaticPaths() {
	const blogEntries = await getSortedPosts();
	return blogEntries.map((entry) => ({
		params: { slug: entry.slug },
		props: { entry },
	}));
}

const { entry } = Astro.props;
const { Content, headings } = await entry.render();

const { remarkPluginFrontmatter } = await entry.render();

const jsonLd = {
	"@context": "https://schema.org",
	"@type": "BlogPosting",
	headline: entry.data.title,
	description: entry.data.description || entry.data.title,
    author: {
      "@type": "Person",
      name: profileConfig.name,
		url: Astro.site,
	},
	datePublished: formatDateToYYYYMMDD(entry.data.published),
	inLanguage: entry.data.lang
		? entry.data.lang.replace("_", "-")
		: siteConfig.lang.replace("_", "-"),
	// TODO include cover image here
};
---
<MainGridLayout banner={entry.data.image} title={entry.data.title} description={entry.data.description} lang={entry.data.lang} setOGTypeArticle={true} headings={headings}>
    <script is:inline slot="head" type="application/ld+json" set:html={JSON.stringify(jsonLd)}></script>
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative mb-4">
        <div id="post-container" class:list={["card-base z-10 px-6 md:px-9 pt-6 pb-4 relative w-full border border-black/10 dark:border-white/10 ",
            {}
        ]}>
            <!-- word count and reading time -->
            <div class="flex flex-row text-black/30 dark:text-white/30 gap-5 mb-3 transition onload-animation">
                <div class="flex flex-row items-center">
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
                        <Icon name="material-symbols:notes-rounded"></Icon>
                    </div>
                    <div class="text-sm">{remarkPluginFrontmatter.words} 字</div>
                </div>
                <div class="flex flex-row items-center">
                    <div class="transition h-6 w-6 rounded-md bg-black/5 dark:bg-white/10 text-black/50 dark:text-white/50 flex items-center justify-center mr-2">
                        <Icon name="material-symbols:schedule-outline-rounded"></Icon>
                    </div>
                    <div class="text-sm">{remarkPluginFrontmatter.minutes} 分钟</div>
                </div>
            </div>

            <!-- title -->
            <div class="relative onload-animation">                <div
                    data-pagefind-body data-pagefind-weight="10" data-pagefind-meta="title"
                    class="transition w-full flex items-center font-bold mb-3
                    text-3xl md:text-[2.25rem]/[2.75rem]
                    text-black/90 dark:text-white/90
                    md:before:w-1 before:h-5 before:rounded-md before:bg-[var(--primary)]
                    before:absolute before:top-[0.75rem] before:left-[-1.125rem]
                ">

                    <span>{entry.data.title}</span>
                </div>
            </div>

            <!-- description/excerpt -->
            {(entry.data.description || remarkPluginFrontmatter.excerpt) && (
                <div class="onload-animation mb-4">
                    <div class="text-black/75 dark:text-white/75 text-sm leading-relaxed">
                        {entry.data.description || remarkPluginFrontmatter.excerpt}
                    </div>
                </div>
            )}

            <!-- metadata -->
            <div class="onload-animation">
                <PostMetadata
                        class="mb-5"
                        published={entry.data.published}
                        updated={entry.data.updated}
                        tags={entry.data.tags}
                        category={entry.data.category}
                        slug={entry.slug}
                ></PostMetadata>
                {!entry.data.image && <div class="border-[var(--line-divider)] border-dashed border-b-[1px] mb-5"></div>}
            </div>

            <!-- always show cover as long as it has one -->

            {entry.data.image &&
                <ImageWrapper id="post-cover" src={entry.data.image} basePath={path.join("content/posts/", getDir(entry.id))} class="mb-8 rounded-xl banner-container onload-animation"/>
            }


            <Markdown class="mb-6 markdown-content onload-animation">
                <Content />
            </Markdown>

            <!-- 文章反馈与编辑区域 -->
            <div class="mb-4 p-4 rounded-lg bg-[var(--license-block-bg)] border border-[var(--line-divider)] onload-animation">
                <!-- 反馈区域 -->
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-3">
                        <div class="h-5 w-5 rounded bg-[var(--primary)] flex items-center justify-center">
                            <Icon name="material-symbols:help-outline" class="text-[0.75rem] text-white dark:text-black/70"></Icon>
                        </div>
                        <p class="text-black/80 dark:text-white/80 text-sm">这篇文章是否对你有帮助？</p>
                    </div>
                    <div class="flex gap-2">
                        <a href="/posts/pin/" class="group flex items-center gap-1 px-3 py-1.5 rounded bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)] text-[var(--btn-content)] text-xs font-medium transition-all active:scale-95">
                            <Icon name="material-symbols:contact-mail-outline" class="text-[0.875rem] group-hover:scale-110 transition-transform"></Icon>
                            联系
                        </a>
                        <a href="/donate/" class="group flex items-center gap-1 px-3 py-1.5 rounded bg-[var(--primary)] hover:bg-[oklch(0.65_0.16_var(--hue))] active:bg-[oklch(0.60_0.18_var(--hue))] text-white dark:text-black/80 text-xs font-medium transition-all active:scale-95">
                            <Icon name="material-symbols:favorite-outline" class="text-[0.875rem] group-hover:scale-110 transition-transform"></Icon>
                            赞助
                        </a>
                    </div>
                </div>
                
                {gitHubEditConfig.enable && (
                    <>
                        <!-- 分隔线 -->
                        <div class="border-t border-[var(--line-divider)] my-3"></div>
                        
                        <!-- GitHub编辑区域 -->
                        <div class="flex items-start gap-3">
                            <div class="h-5 w-5 rounded bg-[var(--primary)] flex items-center justify-center">
                                <Icon name="material-symbols:edit-outline" class="text-[0.875rem] text-white dark:text-black/70"></Icon>
                            </div>
                            <div class="flex-1">
                                <p class="text-black/80 dark:text-white/80 text-sm mb-1">发现错误或想要改进这篇文章？</p>
                                <a 
                                    href={`${gitHubEditConfig.baseUrl}/${entry.slug}.md`}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="inline-flex items-center gap-1 text-[var(--primary)] hover:text-[oklch(0.65_0.16_var(--hue))] text-sm font-medium transition-colors"
                                >
                                    <Icon name="fa6-brands:github" class="text-[0.875rem]"></Icon>
                                    在 GitHub 上编辑此页
                                    <Icon name="material-symbols:open-in-new" class="text-[0.75rem]"></Icon>
                                </a>
                            </div>
                        </div>
                    </>
                )}
            </div>

            {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
            

            
            <!-- Giscus 评论区 -->
            <!-- <script src="https://giscus.app/client.js"
                    data-repo="afoim/giscus-fuwari"
                    data-repo-id="R_kgDOOi8quw"
                    data-category="Announcements"
                    data-category-id="DIC_kwDOOi8qu84CprDV"
                    data-mapping="pathname"
                    data-strict="0"
                    data-reactions-enabled="1"
                    data-emit-metadata="0"
                    data-input-position="top"
                    data-theme="preferred_color_scheme"
                    data-lang="zh-CN"
                    data-loading="lazy"
                    crossorigin="anonymous"
                    async>
            </script> -->
    <br>

    <div class="flex flex-col md:flex-row justify-between mb-4 gap-4 overflow-hidden w-full">
        <a href={entry.data.nextSlug ? getPostUrlBySlug(entry.data.nextSlug) : "#"}
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.nextSlug}]}>
            {entry.data.nextSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-start gap-4" >
                <Icon name="material-symbols:chevron-left-rounded" class="text-[2rem] text-[var(--primary)]" />
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                    {entry.data.nextTitle}
                </div>
            </div>}
        </a>

        <a href={entry.data.prevSlug ? getPostUrlBySlug(entry.data.prevSlug) : "#"}
           class:list={["w-full font-bold overflow-hidden active:scale-95", {"pointer-events-none": !entry.data.prevSlug}]}>
            {entry.data.prevSlug && <div class="btn-card rounded-2xl w-full h-[3.75rem] max-w-full px-4 flex items-center !justify-end gap-4" >
                <div class="overflow-hidden transition overflow-ellipsis whitespace-nowrap max-w-[calc(100%_-_3rem)] text-black/75 dark:text-white/75">
                    {entry.data.prevTitle}
                </div>
                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
            </div>}
        </a>
    </div>

</MainGridLayout>

<style>
    .post-container :global(img) {
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }
    .post-container :global(img.loaded) {
        opacity: 1;
    }
</style>

<script define:vars={{ siteConfig }}>
    // 图片加载动画处理
    function setupImageLoading() {
        const markdownContent = document.querySelector('.markdown-content');
        if (!markdownContent) return;

        const images = markdownContent.querySelectorAll('img');
        
        images.forEach(img => {
            // 跳过已经处理过的图片
            if (img.parentElement.classList.contains('image-loading-wrapper')) return;

            // 创建包裹容器
            const wrapper = document.createElement('div');
            wrapper.className = 'relative image-loading-wrapper rounded-xl overflow-hidden my-4';
            wrapper.style.setProperty('--theme-hue', siteConfig.themeColor.hue);
            
            // 创建加载条
            const loadingBar = document.createElement('div');
            loadingBar.className = 'loading-bar absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-1 bg-gray-200 dark:bg-gray-700 z-10 rounded-full overflow-hidden';
            loadingBar.innerHTML = `<div class="loading-progress h-full w-8 bg-[oklch(0.70_0.14_var(--theme-hue))] animate-loading-progress rounded-full"></div>`;
            
            // 插入DOM
            img.parentNode.insertBefore(wrapper, img);
            wrapper.appendChild(loadingBar);
            wrapper.appendChild(img);

            // 设置图片初始状态
            img.style.opacity = '0';
            img.style.transition = 'opacity 0.5s ease-out';
            loadingBar.style.transition = 'opacity 0.5s ease-out';

            // 处理加载完成
            const handleLoad = () => {
                img.style.opacity = '1';
                loadingBar.style.opacity = '0';
                setTimeout(() => {
                    loadingBar.remove();
                }, 500);
            };

            if (img.complete) {
                handleLoad();
            } else {
                img.onload = handleLoad;
                img.onerror = () => {
                    loadingBar.remove();
                    img.style.opacity = '1';
                };
            }
        });
    }

    // 初始化
    setupImageLoading();
    
    // 支持 Swup 页面切换
    document.addEventListener('swup:contentReplaced', setupImageLoading);
</script>

<style is:global>
    @keyframes loading-progress {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(400%);
        }
    }

    .animate-loading-progress {
        animation: loading-progress 1.5s ease-in-out infinite;
    }
    
    /* 确保包裹容器继承原图的圆角等样式 */
    .markdown-content img {
        margin: 0 !important; /* 让wrapper来控制margin */
    }
</style>
