---
// Artalk 评论挂载（Phase 0 已部署 @ https://wait4x.online/artalk）
// 懒加载：进入视口才拉 Artalk.js，长文页不为其付首屏成本
interface Props {
  pageKey: string;   // 评论流键：中英双语页共用同一 slug（评论不分裂）
  pageTitle: string;
}
const { pageKey, pageTitle } = Astro.props;
---

<div id="artalk-container" data-page-key={pageKey} data-page-title={pageTitle}></div>

<script>
  const el = document.getElementById('artalk-container');
  if (el) {
    const mount = () => {
      if (document.getElementById('artalk-lib')) return initArtalk();
      const s = document.createElement('script');
      s.id = 'artalk-lib';
      s.src = 'https://wait4x.online/artalk/dist/Artalk.js';
      s.onload = initArtalk;
      document.head.appendChild(s);
    };
    const initArtalk = () => {
      const lib = (window as unknown as { Artalk?: { init: (o: object) => void } }).Artalk;
      lib?.init({
        el: '#artalk-container',
        server: 'https://wait4x.online/artalk',
        site: 'wait4x.online',  // 须与 Artalk 服务端 site_default 一致（曾因此 404）
        pageKey: el.dataset.pageKey,
        pageTitle: el.dataset.pageTitle,
        locale: 'zh-CN',
      });
    };
    // 进入视口 ~200px 前挂载；无 IO 环境直接挂
    if ('IntersectionObserver' in window) {
      new IntersectionObserver(
        (entries, obs) => { if (entries.some((e) => e.isIntersecting)) { obs.disconnect(); mount(); } },
        { rootMargin: '200px' }
      ).observe(el);
    } else mount();
  }
</script>