---
import { postConfig } from "@/config";


interface Props {
    path: string;
}

const config = {
    ...postConfig.comment.twikoo,
    el: "#tcomment",
    path: Astro.props.path,
};
---

<div id="tcomment"></div>
<script>
    import "@/plugins/twikoo-scroll-protection";
</script>
<script is:inline define:vars={{ config }}>
    // 动态创建配置对象
    function createTwikooConfig() {
        return {
            ...config,
            el: '#tcomment'
        };
    }

    // 加载 Twikoo 脚本
    function loadTwikooScript() {
        return new Promise((resolve, reject) => {
            if (typeof twikoo !== 'undefined') {
                resolve();
                return;
            }
            const script = document.createElement('script');
            script.src = '/assets/js/twikoo.all.min.js';
            script.async = true;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    // 初始化 Twikoo
    async function initTwikoo() {
        const commentEl = document.getElementById('tcomment');
        if (!commentEl) return;
        try {
            await loadTwikooScript();
            if (typeof twikoo !== 'undefined') {
                commentEl.innerHTML = '';
                const dynamicConfig = createTwikooConfig();
                console.log('[Twikoo] 初始化配置:', dynamicConfig);
                await twikoo.init(dynamicConfig);
                console.log('[Twikoo] 初始化完成');
            }
        } catch (error) {
            console.error('[Twikoo] 加载或初始化失败:', error);
        }
    }

    // 使用 Intersection Observer 延迟加载
    function setupLazyLoad() {
        const commentEl = document.getElementById('tcomment');
        if (!commentEl) return;

        const observer = new IntersectionObserver((entries) => {
            if (entries[0].isIntersecting) {
                initTwikoo();
                observer.disconnect();
            }
        }, { rootMargin: '200px' }); // 提前 200px 开始加载

        observer.observe(commentEl);
    }

    // 页面加载或切换时设置延迟加载
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', setupLazyLoad);
    } else {
        setupLazyLoad();
    }

    // Swup 页面切换后重新设置
    if (window.swup && window.swup.hooks) {
        window.swup.hooks.on('content:replace', setupLazyLoad);
    } else {
        document.addEventListener('swup:enable', function() {
            if (window.swup && window.swup.hooks) {
                window.swup.hooks.on('content:replace', setupLazyLoad);
            }
        });
    }

    // 自定义事件监听
    document.addEventListener('twilight:page:loaded', setupLazyLoad);
</script>