---
import { createMarkdownProcessor } from '@astrojs/markdown-remark';
import BaseLayout from '../../layouts/BaseLayout.astro';
import TerminalWindow from '../../components/ui/TerminalWindow.astro';
import CommandPrompt from '../../components/ui/CommandPrompt.astro';
import ResponsiveImage from '../../components/ui/ResponsiveImage.astro';
import TableOfContents from '../../components/TableOfContents.astro';
import RelatedPosts from '../../components/RelatedPosts.astro';
import ReadingProgress from '../../components/ReadingProgress.astro';
import Lightbox from '../../components/Lightbox.astro';
import CodeCopyButton from '../../components/CodeCopyButton.astro';
import Comments from '../../components/Comments.astro';
import ParagraphComments from '../../components/ParagraphComments.astro';
import QRCode from 'qrcode';
import {
  apiClient,
  DEFAULT_SITE_SETTINGS,
  resolvePublicApiBaseUrl,
} from '../../lib/api/client';
import { formatReadTime, getI18n } from '../../lib/i18n';
import {
  buildArticleFaqs,
  buildArticleHighlights,
  buildArticlePreviewParagraphs,
  buildArticleSynopsis,
  resolvePostUpdatedAt,
} from '../../lib/seo';
import type { PopularPostHighlight } from '../../lib/types';
import {
  buildCategoryUrl,
  buildTagUrl,
  getAccentVars,
  getCategoryTheme,
  getPostTypeColor,
  getPostTypeTheme,
  getTagTheme,
  resolveFileRef,
} from '../../lib/utils';

export const prerender = false;

const { slug } = Astro.params;

let post = null;
let siteSettings = DEFAULT_SITE_SETTINGS;
const analyticsEndpoint = `${resolvePublicApiBaseUrl(Astro.url)}/analytics/content`;
let homeData: Awaited<ReturnType<typeof apiClient.getHomePageData>> | null = null;
let postLookupFailed = false;

const [postResult, siteSettingsResult, homeDataResult] = await Promise.allSettled([
  apiClient.getPostBySlug(slug ?? ''),
  apiClient.getSiteSettings(),
  apiClient.getHomePageData(),
]);

if (postResult.status === 'fulfilled') {
  post = postResult.value;
} else {
  postLookupFailed = true;
  console.error('API Error:', postResult.reason);
}

if (siteSettingsResult.status === 'fulfilled') {
  siteSettings = siteSettingsResult.value;
} else {
  console.error('Site settings API Error:', siteSettingsResult.reason);
}

if (homeDataResult.status === 'fulfilled') {
  homeData = homeDataResult.value;
  if (siteSettingsResult.status !== 'fulfilled') {
    siteSettings = homeData.siteSettings;
  }
} else {
  console.error('Home data API Error:', homeDataResult.reason);
}

if (!post) {
  return new Response(null, {
    status: postLookupFailed ? 503 : 404,
    headers: postLookupFailed ? { 'Retry-After': '120' } : undefined,
  });
}

if (slug && post.slug !== slug) {
  return Astro.redirect(`/articles/${post.slug}`, 301);
}

const typeColor = getPostTypeColor(post.type || 'article');
const typeTheme = getPostTypeTheme(post.type || 'article');
const categoryTheme = getCategoryTheme(post.category);
const contentText = post.content || post.description || '';
const wordCount = contentText.length;
const readTimeMinutes = Math.ceil(wordCount / 300);
const { locale, t } = getI18n(Astro);
const isEnglish = locale.startsWith('en');
const articleMarkdown = contentText.replace(/^#\s+.+\r?\n+/, '');
const paragraphCommentsEnabled = siteSettings.comments.paragraphsEnabled;
const articleCopy = isEnglish
  ? {
      digestBadge: 'quick brief',
      digestKicker: 'reading preview',
      digestTitle: 'Read this first',
      digestDescription:
        'A short overview of the article so readers can quickly grasp the key points before sharing or saving it.',
      highlightsTitle: 'Key takeaways',
      faqTitle: 'Quick FAQ',
      sourceTitle: 'Page details',
      readTime: 'Read time',
      insightCount: 'Key points',
      faqCount: 'FAQ',
      updated: 'Updated',
      category: 'Category',
      canonical: 'Permalink',
      keywords: 'Keywords',
      copySummary: 'Copy digest',
      copySuccess: 'Digest copied',
      copyFailed: 'Copy failed',
      shareSummary: 'Share digest',
      shareSuccess: 'Share panel opened',
      shareFallback: 'Share text copied',
      shareFailed: 'Share failed',
      shareChannelsTitle: 'Share options',
      shareChannelsDescription:
        'Copy the overview or permalink, or continue sharing through the channels below.',
      shareToX: 'Share to X',
      shareToTelegram: 'Share to Telegram',
      shareToWeChat: 'WeChat scan',
      qrModalTitle: 'Scan with WeChat',
      qrModalDescription: 'Scan this QR code in WeChat to continue reading the article on mobile.',
      qrModalHint: 'When you want to send the article to someone else, copying the permalink below is usually the easiest option.',
      downloadQr: 'Download QR',
      downloadQrStarted: 'QR download started',
      qrOpened: 'WeChat QR ready',
      floatingToolsTitle: 'Quick actions',
      copyPermalinkSuccess: 'Permalink copied',
      copyPermalinkFailed: 'Permalink copy failed',
      toastSuccessTitle: 'Done',
      toastErrorTitle: 'Action failed',
      toastInfoTitle: 'Ready',
    }
  : {
      digestBadge: '文章导读',
      digestKicker: '阅读前速览',
      digestTitle: '先看重点',
      digestDescription: '先用几句话帮你抓住这篇文章的重点，方便快速浏览、收藏或转发。',
      highlightsTitle: '关键信息',
      faqTitle: '快速问答',
      sourceTitle: '页面信息',
      readTime: '阅读时长',
      insightCount: '重点条数',
      faqCount: '问答条数',
      updated: '最近更新',
      category: '归档分类',
      canonical: '固定链接',
      keywords: '关键词',
      copySummary: '复制摘要',
      copySuccess: '摘要已复制',
      copyFailed: '复制失败',
      shareSummary: '分享摘要',
      shareSuccess: '已打开分享面板',
      shareFallback: '分享文案已复制',
      shareFailed: '分享失败',
      shareChannelsTitle: '分享方式',
      shareChannelsDescription: '可以直接复制摘要、固定链接，或通过常用渠道继续转发。',
      shareToX: '分享到 X',
      shareToTelegram: '分享到 Telegram',
      shareToWeChat: '微信扫一扫',
      qrModalTitle: '微信扫一扫',
      qrModalDescription: '用微信扫一扫，就能在手机上继续阅读这篇文章。',
      qrModalHint: '发给别人时，优先复制固定链接，对方打开会更方便。',
      downloadQr: '下载二维码',
      downloadQrStarted: '二维码开始下载',
      qrOpened: '微信二维码已打开',
      floatingToolsTitle: '快捷操作',
      copyPermalinkSuccess: '固定链接已复制',
      copyPermalinkFailed: '固定链接复制失败',
      toastSuccessTitle: '操作完成',
      toastErrorTitle: '操作失败',
      toastInfoTitle: '已准备好',
    };

const markdownProcessor = await createMarkdownProcessor();
const renderedContent = await markdownProcessor.render(articleMarkdown);
const siteBaseUrl = (siteSettings.siteUrl || new URL(Astro.request.url).origin).replace(/\/$/, '');
const canonicalUrl = post.canonicalUrl || new URL(`/articles/${post.slug}`, siteBaseUrl).toString();
const ogImage = post.ogImage || `/og/${post.slug}.svg`;
const wechatShareQrEnabled = Boolean(siteSettings.seo.wechatShareQrEnabled);
const noindex = Boolean(post.noindex || post.visibility === 'unlisted');
const publishedAt = post.publishAt || post.createdAt || `${post.date}T00:00:00Z`;
const updatedAt = resolvePostUpdatedAt(post);
const updatedAtIso = new Date(updatedAt).toISOString();
const updatedAtLabel = Number.isNaN(new Date(updatedAt).valueOf())
  ? updatedAt
  : new Date(updatedAt).toLocaleDateString(locale, {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
    });
const articleSynopsis = buildArticleSynopsis(post, 220);
const articlePreviewParagraphs = buildArticlePreviewParagraphs(post, 3, 110);
const articleHighlights = buildArticleHighlights(post, 3);
const articleFaqs = buildArticleFaqs(post, {
  locale,
  summary: articleSynopsis,
  readTimeMinutes,
});
const digestStats = [
  {
    label: articleCopy.readTime,
    value: `${Math.max(readTimeMinutes, 1)}m`,
  },
  {
    label: articleCopy.insightCount,
    value: String(articleHighlights.length || 1),
  },
  {
    label: articleCopy.keywords,
    value: String(post.tags?.length || 0),
  },
];
const articleDigestClipboardText = [
  post.title,
  articleSynopsis,
  articleHighlights.length
    ? `${articleCopy.highlightsTitle}:\n${articleHighlights.map((item, index) => `${index + 1}. ${item}`).join('\n')}`
    : '',
  `${articleCopy.canonical}: ${canonicalUrl}`,
]
  .filter(Boolean)
  .join('\n\n');
const articleDigestShareText = [post.title, articleSynopsis, canonicalUrl].filter(Boolean).join('\n\n');
const articleShareTeaser = [post.title, articleHighlights[0] || articleSynopsis]
  .filter(Boolean)
  .join(' — ')
  .slice(0, 220);
const xShareUrl = `https://x.com/intent/tweet?text=${encodeURIComponent(articleShareTeaser)}&url=${encodeURIComponent(canonicalUrl)}`;
const telegramShareUrl = `https://t.me/share/url?url=${encodeURIComponent(canonicalUrl)}&text=${encodeURIComponent(articleShareTeaser)}`;
let wechatShareQrSvg = '';
let wechatShareQrPngDataUrl = '';
if (wechatShareQrEnabled) {
  try {
    wechatShareQrSvg = await QRCode.toString(canonicalUrl, {
      type: 'svg',
      margin: 1,
      width: 240,
      color: {
        dark: '#111827',
        light: '#ffffff',
      },
    });
    wechatShareQrPngDataUrl = await QRCode.toDataURL(canonicalUrl, {
      margin: 1,
      width: 420,
      color: {
        dark: '#111827',
        light: '#ffffff',
      },
    });
  } catch (error) {
    console.error('WeChat QR generation error:', error);
  }
}
const hotRelatedPosts = (homeData?.popularPosts ?? [])
  .filter((item): item is PopularPostHighlight & { post: NonNullable<PopularPostHighlight['post']> } => Boolean(item.post))
  .filter((item) => item.slug !== post.slug)
  .map((item) => {
    const sharedTags = item.post.tags.filter((tag) => post.tags.includes(tag));
    const sameCategory = item.post.category === post.category;
    const sameType = item.post.type === post.type;
    const relevance = (sameCategory ? 4 : 0) + sharedTags.length * 3 + (sameType ? 1 : 0);
    const popularityScore =
      item.pageViews + item.readCompletes * 2 + item.avgProgressPercent / 20;

    return {
      ...item,
      sharedTags,
      sameCategory,
      relevance,
      popularityScore,
      finalScore: relevance * 100 + popularityScore,
    };
  })
  .filter((item) => item.relevance > 0)
  .sort((left, right) => {
    return (
      right.finalScore - left.finalScore ||
      right.pageViews - left.pageViews ||
      right.readCompletes - left.readCompletes
    );
  })
  .slice(0, 3);
const articleJsonLd = {
  '@context': 'https://schema.org',
  '@type': post.type === 'article' ? 'BlogPosting' : 'Article',
  headline: post.title,
  description: post.description,
  abstract: articleSynopsis,
  image: [new URL(ogImage, siteBaseUrl).toString()],
  mainEntityOfPage: canonicalUrl,
  url: canonicalUrl,
  datePublished: publishedAt,
  dateModified: updatedAtIso,
  author: {
    '@type': 'Person',
    name: siteSettings.ownerName,
  },
  publisher: {
    '@type': 'Organization',
    name: siteSettings.siteName,
    logo: siteSettings.ownerAvatarUrl
      ? {
          '@type': 'ImageObject',
          url: siteSettings.ownerAvatarUrl,
        }
      : undefined,
  },
  articleSection: post.category,
  keywords: post.tags,
  inLanguage: locale,
  isAccessibleForFree: true,
  wordCount,
  timeRequired: `PT${Math.max(readTimeMinutes, 1)}M`,
};
const faqJsonLd = articleFaqs.length
  ? {
      '@context': 'https://schema.org',
      '@type': 'FAQPage',
      mainEntity: articleFaqs.map((item) => ({
        '@type': 'Question',
        name: item.question,
        acceptedAnswer: {
          '@type': 'Answer',
          text: item.answer,
        },
      })),
    }
  : undefined;
const breadcrumbJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    {
      '@type': 'ListItem',
      position: 1,
      name: siteSettings.siteName,
      item: siteBaseUrl,
    },
    {
      '@type': 'ListItem',
      position: 2,
      name: 'Articles',
      item: new URL('/articles', siteBaseUrl).toString(),
    },
    {
      '@type': 'ListItem',
      position: 3,
      name: post.title,
      item: canonicalUrl,
    },
  ],
};
---

<BaseLayout
  title={post.title}
  description={post.description}
  siteSettings={siteSettings}
  canonical={canonicalUrl}
  noindex={noindex}
  ogImage={ogImage}
  ogType="article"
  twitterCard="summary_large_image"
  jsonLd={[articleJsonLd, breadcrumbJsonLd, faqJsonLd].filter(Boolean)}
>
  <Fragment slot="head">
    <meta property="article:published_time" content={publishedAt} />
    <meta property="article:modified_time" content={updatedAtIso} />
    <meta property="article:section" content={post.category} />
    {post.tags.map((tag) => <meta property="article:tag" content={tag} />)}
  </Fragment>
  <ReadingProgress />
  <Lightbox />
  <CodeCopyButton />

  <div class="mx-auto max-w-[1660px] px-4 py-8 sm:px-6 lg:px-8" data-article-slug={post.slug}>
    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_17.5rem] 2xl:grid-cols-[minmax(0,1fr)_18.5rem]">
      <div class="min-w-0 flex-1">
        <TerminalWindow title={`~/articles/${post.slug}`} class="w-full">
          <div class="px-4 pb-2">
            <div class="terminal-panel ml-4 mt-4 space-y-5">
              <div class="flex flex-wrap items-start justify-between gap-4">
                <div class="space-y-4">
                  <a href="/articles" class="terminal-link-arrow">
                    <i class="fas fa-arrow-left"></i>
                    <span>{t('article.backToArticles')}</span>
                  </a>

                  <div class="flex flex-wrap items-center gap-2">
                    <span class="terminal-kicker">
                      <i class="fas fa-file-code"></i>
                      {t('article.documentSession')}
                    </span>
                    <span class="terminal-chip terminal-chip--accent" style={getAccentVars(typeTheme)}>
                      <span class="h-2.5 w-2.5 rounded-full" style={`background-color: ${typeColor}`}></span>
                      {post.type === 'article' ? t('common.article') : t('common.tweet')}
                    </span>
                    <a
                      href={buildCategoryUrl(post.category)}
                      class="terminal-chip terminal-chip--accent"
                      style={getAccentVars(categoryTheme)}
                    >
                      <i class="fas fa-folder-tree"></i>
                      {post.category}
                    </a>
                  </div>
                </div>

                <div class="flex flex-wrap gap-2">
                  <span class="terminal-stat-pill">
                    <i class="far fa-calendar text-[var(--primary)]"></i>
                    {post.date}
                  </span>
                  <span class="terminal-stat-pill">
                    <i class="far fa-clock text-[var(--primary)]"></i>
                    {formatReadTime(locale, readTimeMinutes, t)}
                  </span>
                  <span class="terminal-stat-pill">
                    <i class="fas fa-font text-[var(--primary)]"></i>
                    {t('common.characters', { count: wordCount })}
                  </span>
                </div>
              </div>

              <div class="space-y-3">
                <h1 class="text-3xl font-bold tracking-tight text-[var(--title-color)] sm:text-4xl">{post.title}</h1>
                <p class="max-w-3xl text-base leading-8 text-[var(--text-secondary)]">{post.description}</p>
              </div>

              <section class="grid items-start gap-5 xl:grid-cols-[minmax(0,1.62fr)_minmax(16.5rem,0.78fr)] 2xl:grid-cols-[minmax(0,1.8fr)_minmax(17rem,0.82fr)]">
                <div class="relative overflow-hidden rounded-[28px] border border-[var(--border-color)] bg-[linear-gradient(135deg,rgba(var(--primary-rgb),0.12),rgba(var(--secondary-rgb),0.05)_46%,rgba(var(--bg-rgb),0.92))] p-5 sm:p-6">
                  <div class="absolute inset-y-0 left-0 w-1 rounded-full bg-[var(--primary)]/80"></div>
                  <div class="absolute right-0 top-0 h-36 w-36 rounded-full bg-[var(--primary)]/10 blur-3xl"></div>
                  <div class="absolute bottom-0 right-10 h-24 w-24 rounded-full bg-[var(--secondary)]/10 blur-3xl"></div>
                  <div class="relative space-y-4">
                    <div class="flex flex-wrap items-center gap-2">
                      <span class="inline-flex items-center gap-2 rounded-full border border-[var(--primary)]/20 bg-[var(--primary)]/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.24em] text-[var(--primary)]">
                        <i class="fas fa-sparkles text-[10px]"></i>
                        {articleCopy.digestBadge}
                      </span>
                      <span class="terminal-kicker">
                        <i class="fas fa-book-open"></i>
                        {articleCopy.digestKicker}
                      </span>
                    </div>

                    <div class="space-y-3">
                      <h2 class="text-xl font-semibold text-[var(--title-color)] sm:text-2xl">{articleCopy.digestTitle}</h2>
                      <p class="max-w-3xl text-sm leading-7 text-[var(--text-secondary)]">{articleCopy.digestDescription}</p>
                    </div>

                    <div class="rounded-[24px] border border-[var(--border-color)]/70 bg-[var(--terminal-bg)]/88 p-5 shadow-[0_20px_55px_rgba(15,23,42,0.08)]">
                      <div class="space-y-3">
                        {articlePreviewParagraphs.map((paragraph) => (
                          <p class="text-[15px] leading-8 text-[var(--title-color)]">{paragraph}</p>
                        ))}
                      </div>
                    </div>

                    <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
                      <div class="flex flex-wrap gap-2">
                        <button
                          type="button"
                          class="terminal-action-button"
                          data-article-digest-copy
                          data-default-label={articleCopy.copySummary}
                          data-success-label={articleCopy.copySuccess}
                          data-failed-label={articleCopy.copyFailed}
                        >
                          <i class="fas fa-copy"></i>
                          <span>{articleCopy.copySummary}</span>
                        </button>
                        <button
                          type="button"
                          class="terminal-action-button terminal-action-button-primary"
                          data-article-digest-share
                          data-default-label={articleCopy.shareSummary}
                          data-success-label={articleCopy.shareSuccess}
                          data-fallback-label={articleCopy.shareFallback}
                          data-failed-label={articleCopy.shareFailed}
                        >
                          <i class="fas fa-share-nodes"></i>
                          <span>{articleCopy.shareSummary}</span>
                        </button>
                      </div>
                      <p
                        class="min-h-[1.25rem] text-xs text-[var(--text-tertiary)]"
                        data-article-digest-status
                        aria-live="polite"
                      ></p>
                    </div>

                    <div class="grid gap-3 xl:grid-cols-[minmax(0,1.18fr)_minmax(13rem,0.82fr)]">
                      <div class="rounded-2xl border border-[var(--border-color)]/70 bg-[var(--terminal-bg)]/72 px-4 py-3">
                        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                          <div class="space-y-1">
                            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-[var(--text-tertiary)]">
                              {articleCopy.shareChannelsTitle}
                            </p>
                            <p class="text-xs leading-6 text-[var(--text-secondary)]">
                              {articleCopy.shareChannelsDescription}
                            </p>
                          </div>
                          <div class="flex flex-wrap gap-2">
                            <a
                              href={xShareUrl}
                              target="_blank"
                              rel="noopener noreferrer nofollow"
                              class="terminal-action-button"
                              data-article-share-link
                            >
                              <i class="fab fa-twitter"></i>
                              <span>{articleCopy.shareToX}</span>
                            </a>
                            <a
                              href={telegramShareUrl}
                              target="_blank"
                              rel="noopener noreferrer nofollow"
                              class="terminal-action-button"
                              data-article-share-link
                            >
                              <i class="fab fa-telegram-plane"></i>
                              <span>{articleCopy.shareToTelegram}</span>
                            </a>
                            {wechatShareQrEnabled && wechatShareQrSvg && (
                              <button
                                type="button"
                                class="terminal-action-button"
                                data-article-wechat-qr-open
                              >
                                <i class="fab fa-weixin"></i>
                                <span>{articleCopy.shareToWeChat}</span>
                              </button>
                            )}
                          </div>
                        </div>
                      </div>

                      <div class="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
                        {digestStats.map((item) => (
                          <div class="rounded-2xl border border-[var(--border-color)]/75 bg-[var(--terminal-bg)]/78 px-4 py-3">
                            <div class="text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">{item.label}</div>
                            <div class="mt-2 text-2xl font-semibold text-[var(--title-color)]">{item.value}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="space-y-4">
                  <div class="rounded-[24px] border border-[var(--border-color)]/75 bg-[var(--terminal-bg)]/86 p-5 shadow-[0_18px_42px_rgba(15,23,42,0.06)]">
                    <h3 class="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--text-tertiary)]">
                      {articleCopy.sourceTitle}
                    </h3>
                    <dl class="mt-4 space-y-4 text-sm">
                      <div>
                        <dt class="text-[var(--text-tertiary)]">{articleCopy.updated}</dt>
                        <dd class="mt-1 text-[var(--title-color)]">{updatedAtLabel}</dd>
                      </div>
                      <div>
                        <dt class="text-[var(--text-tertiary)]">{articleCopy.category}</dt>
                        <dd class="mt-1">
                          <a
                            href={buildCategoryUrl(post.category)}
                            class="text-[var(--title-color)] underline decoration-dotted underline-offset-4 hover:text-[var(--primary)]"
                          >
                            {post.category}
                          </a>
                        </dd>
                      </div>
                      <div>
                        <dt class="text-[var(--text-tertiary)]">{articleCopy.canonical}</dt>
                        <dd class="mt-1 break-all font-mono text-xs leading-6 text-[var(--title-color)]">{canonicalUrl}</dd>
                      </div>
                      <div>
                        <dt class="text-[var(--text-tertiary)]">{articleCopy.keywords}</dt>
                        <dd class="mt-2 flex flex-wrap gap-2">
                          {post.tags.map((tag) => (
                            <a
                              href={buildTagUrl(tag)}
                              class="terminal-chip terminal-chip--accent px-2.5 py-1 text-xs"
                              style={getAccentVars(getTagTheme(tag))}
                            >
                              <i class="fas fa-hashtag text-[10px]"></i>
                              {tag}
                            </a>
                          ))}
                        </dd>
                      </div>
                    </dl>
                  </div>

                  {articleHighlights.length > 0 && (
                    <div class="rounded-[24px] border border-[var(--border-color)]/75 bg-[var(--terminal-bg)]/86 p-5 shadow-[0_18px_42px_rgba(15,23,42,0.06)]">
                      <h3 class="text-sm font-semibold uppercase tracking-[0.22em] text-[var(--text-tertiary)]">
                        {articleCopy.highlightsTitle}
                      </h3>
                      <div class="mt-4 space-y-3">
                        {articleHighlights.map((item, index) => (
                          <div class="flex items-start gap-3 rounded-2xl border border-[var(--border-color)]/80 bg-[var(--bg)]/58 px-4 py-3">
                            <span class="mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[var(--primary)]/10 text-[11px] font-semibold text-[var(--primary)]">
                              {index + 1}
                            </span>
                            <p class="text-sm leading-7 text-[var(--title-color)]">{item}</p>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              </section>

              {post.tags?.length > 0 && (
                <div class="flex flex-wrap gap-2">
                  {post.tags.map(tag => (
                    <a
                      href={buildTagUrl(tag)}
                      class="terminal-filter"
                      style={getAccentVars(getTagTheme(tag))}
                    >
                      <i class="fas fa-hashtag"></i>
                      <span>{tag}</span>
                    </a>
                  ))}
                </div>
              )}
            </div>
          </div>

          <div class="px-4 pb-2">
            <CommandPrompt command={`preview article --slug ${post.slug}`} />

            <div class="ml-4 mt-4 space-y-6">
              {post.image && (
                <div class="terminal-panel-muted overflow-hidden">
                  <ResponsiveImage
                    src={resolveFileRef(post.image)}
                    alt={post.title}
                    pictureClass="block"
                    imgClass="w-full h-auto rounded-xl border border-[var(--border-color)] cursor-zoom-in"
                    widths={[640, 960, 1280, 1600, 1920]}
                    sizes="(min-width: 1280px) 60rem, 100vw"
                    loading="eager"
                    fetchpriority="high"
                    lightbox={true}
                  />
                </div>
              )}

              {post.images && post.images.length > 0 && (
                <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
                  {post.images.map((image, index) => (
                    <div class="terminal-panel-muted overflow-hidden">
                      <ResponsiveImage
                        src={resolveFileRef(image)}
                        alt={`${post.title} 图片 ${index + 1}`}
                        pictureClass="block h-full w-full"
                        imgClass="h-full w-full rounded-xl border border-[var(--border-color)] object-cover cursor-zoom-in"
                        widths={[480, 720, 960, 1280]}
                        sizes="(min-width: 1280px) 30vw, (min-width: 640px) 45vw, 100vw"
                        lightbox={true}
                      />
                    </div>
                  ))}
                </div>
              )}

              {paragraphCommentsEnabled && (
                <ParagraphComments postSlug={post.slug} class="mb-4" siteSettings={siteSettings} />
              )}

              <div class="terminal-document article-content" set:html={renderedContent.code}></div>
            </div>
          </div>

          <div class="px-4 py-6">
            <div class="terminal-panel-muted ml-4 mt-4 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-end">
              <div class="flex flex-wrap gap-2">
                <a href="/articles" class="terminal-action-button">
                  <i class="fas fa-list"></i>
                  <span>{t('common.backToIndex')}</span>
                </a>
                <button
                  class="terminal-action-button terminal-action-button-primary"
                  data-article-permalink-copy
                  data-default-label={t('common.copyPermalink')}
                  data-success-label={articleCopy.copyPermalinkSuccess}
                  data-failed-label={articleCopy.copyPermalinkFailed}
                >
                  <i class="fas fa-link"></i>
                  <span>{t('common.copyPermalink')}</span>
                </button>
              </div>
            </div>
          </div>
        </TerminalWindow>

        <RelatedPosts
          currentSlug={post.slug}
          currentCategory={post.category}
          currentTags={post.tags}
        />

        {hotRelatedPosts.length > 0 && (
          <section class="terminal-panel mt-8">
            <div class="space-y-5">
              <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                <div class="space-y-3">
                  <span class="terminal-kicker">
                    <i class="fas fa-fire"></i>
                    {t('relatedPosts.hotKicker')}
                  </span>
                  <div class="terminal-section-title">
                    <span class="terminal-section-icon">
                      <i class="fas fa-chart-line"></i>
                    </span>
                    <div>
                      <h3 class="text-xl font-semibold text-[var(--title-color)]">{t('relatedPosts.hotTitle')}</h3>
                      <p class="text-sm text-[var(--text-secondary)]">
                        {t('relatedPosts.hotDescription')}
                      </p>
                    </div>
                  </div>
                </div>

                <span class="terminal-stat-pill">
                  <i class="fas fa-signal text-[var(--primary)]"></i>
                  {t('relatedPosts.linked', { count: hotRelatedPosts.length })}
                </span>
              </div>

              <div class="grid gap-4 md:grid-cols-3">
                {hotRelatedPosts.map((item) => (
                  <a
                    href={`/articles/${item.slug}`}
                    class="terminal-panel-muted terminal-panel-accent terminal-interactive-card group flex h-full flex-col gap-4 p-4"
                    style={getAccentVars(getPostTypeTheme(item.post.type))}
                  >
                    {item.post.image ? (
                      <div class="overflow-hidden rounded-xl border border-[var(--border-color)]">
                        <ResponsiveImage
                          src={resolveFileRef(item.post.image)}
                          alt={item.post.title}
                          pictureClass="block"
                          imgClass="aspect-[16/9] w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
                          widths={[320, 480, 640, 960]}
                          sizes="(min-width: 1280px) 18rem, (min-width: 768px) 30vw, 100vw"
                        />
                      </div>
                    ) : null}

                    <div class="space-y-3">
                      <div class="flex flex-wrap items-center gap-2">
                        <span class="terminal-chip terminal-chip--accent px-2.5 py-1 text-xs" style={getAccentVars(getPostTypeTheme(item.post.type))}>
                          {item.post.type === 'article' ? t('common.article') : t('common.tweet')}
                        </span>
                        <span class="terminal-chip terminal-chip--accent px-2.5 py-1 text-xs" style={getAccentVars(getCategoryTheme(item.post.category))}>
                          <i class="fas fa-folder-tree text-[11px]"></i>
                          {item.post.category}
                        </span>
                      </div>

                      <h4 class="text-base font-semibold text-[var(--title-color)] group-hover:text-[var(--primary)]">
                        {item.post.title}
                      </h4>
                      <p class="text-sm leading-7 text-[var(--text-secondary)]">{item.post.description}</p>
                    </div>

                    <div class="mt-auto flex flex-wrap gap-2 pt-1">
                      <span class="terminal-stat-pill px-2.5 py-1 text-xs">
                        <i class="fas fa-eye text-[var(--primary)]"></i>
                        {t('home.views')}: {item.pageViews}
                      </span>
                      <span class="terminal-stat-pill px-2.5 py-1 text-xs">
                        <i class="fas fa-check-double text-[var(--primary)]"></i>
                        {t('home.completes')}: {item.readCompletes}
                      </span>
                      <span class="terminal-stat-pill px-2.5 py-1 text-xs">
                        <i class="fas fa-chart-line text-[var(--primary)]"></i>
                        {t('home.avgProgress')}: {Math.round(item.avgProgressPercent)}%
                      </span>
                    </div>

                    {item.sharedTags.length > 0 && (
                      <div class="flex flex-wrap gap-2">
                        {item.sharedTags.slice(0, 3).map((tag) => (
                          <span class="terminal-chip terminal-chip--accent px-2.5 py-1 text-xs" style={getAccentVars(getTagTheme(tag))}>
                            <i class="fas fa-hashtag text-[11px]"></i>
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </a>
                ))}
              </div>
            </div>
          </section>
        )}

        <section class="mt-8">
          <Comments postSlug={post.slug} class="terminal-panel" siteSettings={siteSettings} />
        </section>
      </div>

      <TableOfContents>
        <div slot="before-nav" class="terminal-panel-muted space-y-3">
          <span class="terminal-kicker">
            <i class="fas fa-bolt"></i>
            {articleCopy.floatingToolsTitle}
          </span>

          <div
            class:list={[
              'grid gap-2',
              wechatShareQrEnabled && wechatShareQrSvg ? 'grid-cols-4' : 'grid-cols-3',
            ]}
          >
            <button
              type="button"
              class="flex h-11 w-full items-center justify-center rounded-2xl border border-[var(--border-color)]/70 bg-[var(--bg)]/75 text-[var(--text-secondary)] transition hover:border-[var(--primary)] hover:text-[var(--primary)]"
              data-article-floating-action="digest-copy"
              title={articleCopy.copySummary}
              aria-label={articleCopy.copySummary}
            >
              <i class="fas fa-copy text-sm"></i>
            </button>
            <button
              type="button"
              class="flex h-11 w-full items-center justify-center rounded-2xl border border-[var(--border-color)]/70 bg-[var(--bg)]/75 text-[var(--text-secondary)] transition hover:border-[var(--primary)] hover:text-[var(--primary)]"
              data-article-floating-action="digest-share"
              title={articleCopy.shareSummary}
              aria-label={articleCopy.shareSummary}
            >
              <i class="fas fa-share-nodes text-sm"></i>
            </button>
            {wechatShareQrEnabled && wechatShareQrSvg && (
              <button
                type="button"
                class="flex h-11 w-full items-center justify-center rounded-2xl border border-[var(--border-color)]/70 bg-[var(--bg)]/75 text-[var(--text-secondary)] transition hover:border-[var(--primary)] hover:text-[var(--primary)]"
                data-article-floating-action="wechat-qr"
                title={articleCopy.shareToWeChat}
                aria-label={articleCopy.shareToWeChat}
              >
                <i class="fab fa-weixin text-sm"></i>
              </button>
            )}
            <button
              type="button"
              class="flex h-11 w-full items-center justify-center rounded-2xl border border-[var(--border-color)]/70 bg-[var(--bg)]/75 text-[var(--text-secondary)] transition hover:border-[var(--primary)] hover:text-[var(--primary)]"
              data-article-floating-action="permalink-copy"
              title={t('common.copyPermalink')}
              aria-label={t('common.copyPermalink')}
            >
              <i class="fas fa-link text-sm"></i>
            </button>
          </div>
        </div>
      </TableOfContents>
    </div>
  </div>

  {wechatShareQrEnabled && wechatShareQrSvg && (
    <div
      class="fixed inset-0 z-[160] hidden bg-black/70 backdrop-blur-sm"
      data-article-wechat-qr-modal
      aria-hidden="true"
    >
      <div class="flex min-h-screen items-center justify-center p-4">
        <div class="w-full max-w-4xl rounded-[32px] border border-[var(--border-color)]/70 bg-[var(--terminal-bg)] p-5 shadow-[0_30px_90px_rgba(15,23,42,0.36)] sm:p-7">
          <div class="flex items-start justify-between gap-4">
            <div class="space-y-2">
              <span class="terminal-kicker">
                <i class="fab fa-weixin"></i>
                {articleCopy.shareToWeChat}
              </span>
              <div>
                <h3 class="text-2xl font-semibold text-[var(--title-color)]">{articleCopy.qrModalTitle}</h3>
                <p class="mt-2 max-w-2xl text-sm leading-7 text-[var(--text-secondary)]">
                  {articleCopy.qrModalDescription}
                </p>
              </div>
            </div>

            <button
              type="button"
              class="flex h-11 w-11 items-center justify-center rounded-2xl border border-[var(--border-color)] bg-[var(--terminal-bg)] text-[var(--text-secondary)] transition hover:border-[var(--primary)] hover:text-[var(--primary)]"
              data-article-wechat-qr-close
              aria-label={t('common.close')}
            >
              <i class="fas fa-xmark text-base"></i>
            </button>
          </div>

          <div class="mt-6 grid gap-6 lg:grid-cols-[260px_minmax(0,1fr)]">
            <div class="mx-auto w-full max-w-[260px] rounded-[28px] border border-[var(--border-color)]/80 bg-white p-5 shadow-[0_18px_45px_rgba(15,23,42,0.12)]">
              <div class="overflow-hidden rounded-2xl" set:html={wechatShareQrSvg}></div>
            </div>

            <div class="space-y-4">
              <div class="rounded-2xl border border-[var(--border-color)]/70 bg-[var(--header-bg)] p-5">
                <div class="text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">
                  {articleCopy.canonical}
                </div>
                <p class="mt-3 break-all font-mono text-sm leading-7 text-[var(--title-color)]">{canonicalUrl}</p>
              </div>

              <div class="rounded-2xl border border-[var(--border-color)]/70 bg-[var(--header-bg)] p-5">
                <div class="text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">
                  {articleCopy.digestTitle}
                </div>
                <p class="mt-3 text-base font-semibold leading-7 text-[var(--title-color)]">{post.title}</p>
                <p class="mt-3 text-sm leading-7 text-[var(--text-secondary)]">{articleSynopsis}</p>
                <p class="mt-3 text-sm leading-7 text-[var(--text-secondary)]">{articleCopy.qrModalHint}</p>
              </div>

              <div class="flex flex-wrap gap-2">
                <button
                  type="button"
                  class="terminal-action-button terminal-action-button-primary"
                  data-article-permalink-copy
                  data-default-label={t('common.copyPermalink')}
                  data-success-label={articleCopy.copyPermalinkSuccess}
                  data-failed-label={articleCopy.copyPermalinkFailed}
                >
                  <i class="fas fa-link"></i>
                  <span>{t('common.copyPermalink')}</span>
                </button>
                <a
                  href={wechatShareQrPngDataUrl}
                  download={`${post.slug}-wechat-share-qr.png`}
                  class="terminal-action-button"
                  data-article-qr-download
                >
                  <i class="fas fa-download"></i>
                  <span>{articleCopy.downloadQr}</span>
                </a>
                <button
                  type="button"
                  class="terminal-action-button"
                  data-article-wechat-qr-close
                >
                  <i class="fas fa-xmark"></i>
                  <span>{t('common.close')}</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )}

  <div
    class="pointer-events-none fixed bottom-5 right-5 z-[70] w-[min(22rem,calc(100vw-1.5rem))] translate-y-4 opacity-0 transition-all duration-300"
    data-article-digest-toast
    data-title-success={articleCopy.toastSuccessTitle}
    data-title-error={articleCopy.toastErrorTitle}
    data-title-info={articleCopy.toastInfoTitle}
    aria-live="polite"
    aria-atomic="true"
  >
    <div class="rounded-2xl border border-emerald-500/25 bg-[var(--terminal-bg)]/96 p-4 shadow-[0_18px_50px_rgba(15,23,42,0.18)] backdrop-blur">
      <div class="flex items-start gap-3">
        <span
          class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-emerald-500/12 text-emerald-400"
          data-article-digest-toast-icon
        >
          <i class="fas fa-check"></i>
        </span>
        <div class="min-w-0">
          <p class="text-sm font-semibold text-[var(--title-color)]" data-article-digest-toast-title>
            {articleCopy.toastSuccessTitle}
          </p>
          <p class="mt-1 text-sm leading-6 text-[var(--text-secondary)]" data-article-digest-toast-message></p>
        </div>
      </div>
    </div>
  </div>
</BaseLayout>

<script
  is:inline
  define:vars={{
    analyticsEndpoint,
    postSlug: post.slug,
    articleDigestClipboardText,
    articleDigestShareText,
    articleCanonicalUrl: canonicalUrl,
    articleTitle: post.title,
    articleCopyQrOpened: articleCopy.qrOpened,
    articleCopyDownloadQrStarted: articleCopy.downloadQrStarted,
  }}
>
  (() => {
    const endpoint = analyticsEndpoint;
    const sessionStorageKey = `termi:content-session:${postSlug}`;
    const startedAt = Date.now();
    let sentPageView = false;
    let lastReportedProgress = 0;
    const digestCopyButton = document.querySelector('[data-article-digest-copy]');
    const digestShareButton = document.querySelector('[data-article-digest-share]');
    const permalinkCopyButtons = document.querySelectorAll('[data-article-permalink-copy]');
    const floatingActionButtons = document.querySelectorAll('[data-article-floating-action]');
    const wechatQrModal = document.querySelector('[data-article-wechat-qr-modal]');
    const wechatQrOpenButtons = document.querySelectorAll('[data-article-wechat-qr-open]');
    const wechatQrCloseButtons = document.querySelectorAll('[data-article-wechat-qr-close]');
    const wechatQrDownloadButtons = document.querySelectorAll('[data-article-qr-download]');
    const digestStatus = document.querySelector('[data-article-digest-status]');
    const digestToast = document.querySelector('[data-article-digest-toast]');
    const digestToastIcon = document.querySelector('[data-article-digest-toast-icon]');
    const digestToastTitle = document.querySelector('[data-article-digest-toast-title]');
    const digestToastMessage = document.querySelector('[data-article-digest-toast-message]');
    let digestToastTimer = 0;

    function ensureSessionId() {
      try {
        const existing = window.sessionStorage.getItem(sessionStorageKey);
        if (existing) return existing;
        const nextId = crypto.randomUUID();
        window.sessionStorage.setItem(sessionStorageKey, nextId);
        return nextId;
      } catch {
        return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
      }
    }

    function getProgressPercent() {
      const doc = document.documentElement;
      const scrollTop = window.scrollY || doc.scrollTop || 0;
      const scrollHeight = Math.max(doc.scrollHeight - window.innerHeight, 1);
      return Math.max(0, Math.min(100, Math.round((scrollTop / scrollHeight) * 100)));
    }

    function getReferrerHost() {
      try {
        return document.referrer ? new URL(document.referrer).host : '';
      } catch {
        return '';
      }
    }

    function normalizeSource(value) {
      const source = String(value || '').trim().toLowerCase();
      if (!source) return 'direct';
      if (source.includes('chatgpt') || source.includes('openai')) return 'chatgpt-search';
      if (source.includes('perplexity')) return 'perplexity';
      if (source.includes('copilot') || source.includes('bing')) return 'copilot-bing';
      if (source.includes('gemini')) return 'gemini';
      if (source.includes('google')) return 'google';
      if (source.includes('claude')) return 'claude';
      if (source.includes('duckduckgo')) return 'duckduckgo';
      if (source.includes('kagi')) return 'kagi';
      return source;
    }

    function buildTrackingMetadata() {
      const currentUrl = new URL(window.location.href);
      const utmSource = currentUrl.searchParams.get('utm_source')?.trim() || '';
      const utmMedium = currentUrl.searchParams.get('utm_medium')?.trim() || '';
      const utmCampaign = currentUrl.searchParams.get('utm_campaign')?.trim() || '';
      const utmTerm = currentUrl.searchParams.get('utm_term')?.trim() || '';
      const utmContent = currentUrl.searchParams.get('utm_content')?.trim() || '';
      const referrerHost = getReferrerHost();

      return {
        pageType: 'article',
        referrerHost: referrerHost || undefined,
        utmSource: utmSource || undefined,
        utmMedium: utmMedium || undefined,
        utmCampaign: utmCampaign || undefined,
        utmTerm: utmTerm || undefined,
        utmContent: utmContent || undefined,
        landingSource: normalizeSource(utmSource || referrerHost),
      };
    }

    function setDigestStatus(message) {
      if (!digestStatus) return;
      digestStatus.textContent = message || '';
    }

    function showDigestToast(message, type = 'success') {
      if (!digestToast || !digestToastIcon || !digestToastTitle || !digestToastMessage) return;

      const title =
        digestToast.getAttribute(`data-title-${type}`) ||
        digestToast.getAttribute('data-title-success') ||
        '';

      digestToastTitle.textContent = title;
      digestToastMessage.textContent = message || '';
      digestToast.classList.remove('opacity-0', 'translate-y-4');

      digestToastIcon.className = 'flex h-9 w-9 shrink-0 items-center justify-center rounded-xl';
      const iconElement = digestToastIcon.querySelector('i');
      if (iconElement) {
        iconElement.className =
          type === 'error'
            ? 'fas fa-triangle-exclamation'
            : type === 'info'
              ? 'fas fa-share-nodes'
              : 'fas fa-check';
      }

      const toastCard = digestToast.firstElementChild;
      toastCard?.classList.remove('border-emerald-500/25', 'border-rose-500/25', 'border-sky-500/25');
      digestToastIcon.classList.remove(
        'bg-emerald-500/12',
        'text-emerald-400',
        'bg-rose-500/12',
        'text-rose-400',
        'bg-sky-500/12',
        'text-sky-400',
      );

      if (type === 'error') {
        toastCard?.classList.add('border-rose-500/25');
        digestToastIcon.classList.add('bg-rose-500/12', 'text-rose-400');
      } else if (type === 'info') {
        toastCard?.classList.add('border-sky-500/25');
        digestToastIcon.classList.add('bg-sky-500/12', 'text-sky-400');
      } else {
        toastCard?.classList.add('border-emerald-500/25');
        digestToastIcon.classList.add('bg-emerald-500/12', 'text-emerald-400');
      }

      window.clearTimeout(digestToastTimer);
      digestToastTimer = window.setTimeout(() => {
        digestToast.classList.add('opacity-0', 'translate-y-4');
      }, 2200);
    }

    function setDigestButtonState(button, iconClass, label) {
      if (!button) return;
      button.innerHTML = `<i class="${iconClass}"></i><span>${label}</span>`;
    }

    function resetDigestButton(button, fallbackIconClass) {
      if (!button) return;
      const defaultLabel = button.getAttribute('data-default-label') || '';
      setDigestButtonState(button, fallbackIconClass, defaultLabel);
    }

    async function writeClipboardText(value) {
      await navigator.clipboard.writeText(value);
    }

    async function handleDigestCopy(button = digestCopyButton) {
      const successLabel = button?.getAttribute('data-success-label') || '';
      const failedLabel = button?.getAttribute('data-failed-label') || '';
      try {
        await writeClipboardText(articleDigestClipboardText);
        setDigestButtonState(button, 'fas fa-check', successLabel);
        setDigestStatus(successLabel);
        showDigestToast(successLabel, 'success');
      } catch {
        setDigestButtonState(button, 'fas fa-triangle-exclamation', failedLabel);
        setDigestStatus(failedLabel);
        showDigestToast(failedLabel, 'error');
      } finally {
        window.setTimeout(() => {
          resetDigestButton(button, 'fas fa-copy');
        }, 1800);
      }
    }

    async function handleDigestShare(button = digestShareButton) {
      const successLabel = button?.getAttribute('data-success-label') || '';
      const fallbackLabel = button?.getAttribute('data-fallback-label') || '';
      const failedLabel = button?.getAttribute('data-failed-label') || '';
      try {
        if (navigator.share) {
          await navigator.share({
            title: articleTitle,
            text: articleDigestShareText,
            url: articleCanonicalUrl,
          });
          setDigestButtonState(button, 'fas fa-check', successLabel);
          setDigestStatus(successLabel);
          showDigestToast(successLabel, 'success');
        } else {
          await writeClipboardText(articleDigestShareText);
          setDigestButtonState(button, 'fas fa-copy', fallbackLabel);
          setDigestStatus(fallbackLabel);
          showDigestToast(fallbackLabel, 'info');
        }
      } catch (error) {
        if (error instanceof DOMException && error.name === 'AbortError') {
          resetDigestButton(button, 'fas fa-share-nodes');
          return;
        }

        setDigestButtonState(button, 'fas fa-triangle-exclamation', failedLabel);
        setDigestStatus(failedLabel);
        showDigestToast(failedLabel, 'error');
      } finally {
        window.setTimeout(() => {
          resetDigestButton(button, 'fas fa-share-nodes');
        }, 1800);
      }
    }

    async function handlePermalinkCopy(button = permalinkCopyButtons[0]) {
      const successLabel = button?.getAttribute('data-success-label') || '';
      const failedLabel = button?.getAttribute('data-failed-label') || '';

      try {
        await writeClipboardText(window.location.href);
        setDigestButtonState(button, 'fas fa-check', successLabel);
        setDigestStatus(successLabel);
        showDigestToast(successLabel, 'success');
      } catch {
        setDigestButtonState(button, 'fas fa-triangle-exclamation', failedLabel);
        setDigestStatus(failedLabel);
        showDigestToast(failedLabel, 'error');
      } finally {
        window.setTimeout(() => {
          resetDigestButton(button, 'fas fa-link');
        }, 1800);
      }
    }

    function openWechatQrModal() {
      if (!wechatQrModal) return;
      wechatQrModal.classList.remove('hidden');
      wechatQrModal.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
      setDigestStatus(articleCopyQrOpened);
      showDigestToast(articleCopyQrOpened, 'info');
    }

    function closeWechatQrModal() {
      if (!wechatQrModal) return;
      wechatQrModal.classList.add('hidden');
      wechatQrModal.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
    }

    digestCopyButton?.addEventListener('click', async () => {
      await handleDigestCopy();
    });

    digestShareButton?.addEventListener('click', async () => {
      await handleDigestShare();
    });

    permalinkCopyButtons.forEach((button) => {
      button.addEventListener('click', async () => {
        await handlePermalinkCopy(button);
      });
    });

    document.querySelectorAll('[data-article-share-link]').forEach((link) => {
      link.addEventListener('click', () => {
        const label = link.textContent?.trim() || '';
        if (!label) return;
        setDigestStatus(label);
        showDigestToast(label, 'info');
      });
    });

    wechatQrOpenButtons.forEach((button) => {
      button.addEventListener('click', () => {
        openWechatQrModal();
      });
    });

    wechatQrCloseButtons.forEach((button) => {
      button.addEventListener('click', () => {
        closeWechatQrModal();
      });
    });

    wechatQrDownloadButtons.forEach((button) => {
      button.addEventListener('click', () => {
        setDigestStatus(articleCopyDownloadQrStarted);
        showDigestToast(articleCopyDownloadQrStarted, 'info');
      });
    });

    wechatQrModal?.addEventListener('click', (event) => {
      if (event.target === wechatQrModal) {
        closeWechatQrModal();
      }
    });

    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && wechatQrModal && !wechatQrModal.classList.contains('hidden')) {
        closeWechatQrModal();
      }
    });

    floatingActionButtons.forEach((button) => {
      button.addEventListener('click', async () => {
        const action = button.getAttribute('data-article-floating-action');
        button.classList.add('border-[var(--primary)]', 'text-[var(--primary)]');
        window.setTimeout(() => {
          button.classList.remove('border-[var(--primary)]', 'text-[var(--primary)]');
        }, 1400);

        if (action === 'digest-copy') {
          await handleDigestCopy();
          return;
        }

        if (action === 'digest-share') {
          await handleDigestShare();
          return;
        }

        if (action === 'wechat-qr') {
          openWechatQrModal();
          return;
        }

        if (action === 'permalink-copy') {
          await handlePermalinkCopy(permalinkCopyButtons[0]);
        }
      });
    });

    function sendEvent(eventType, extras = {}, useBeacon = false) {
      const payload = JSON.stringify({
        event_type: eventType,
        path: `${window.location.pathname}${window.location.search}`,
        post_slug: postSlug,
        session_id: ensureSessionId(),
        referrer: document.referrer || undefined,
        metadata: buildTrackingMetadata(),
        ...extras,
      });

      if (useBeacon && navigator.sendBeacon) {
        navigator.sendBeacon(endpoint, new Blob([payload], { type: 'application/json' }));
        return;
      }

      fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: payload,
        keepalive: true,
      }).catch(() => undefined);
    }

    function reportProgress(forceComplete = false) {
      const progress = forceComplete ? 100 : getProgressPercent();
      const durationMs = Date.now() - startedAt;
      const eventType = forceComplete || progress >= 95 ? 'read_complete' : 'read_progress';

      if (!forceComplete && progress <= lastReportedProgress + 9) {
        return;
      }

      lastReportedProgress = Math.max(lastReportedProgress, progress);
      sendEvent(
        eventType,
        {
          progress_percent: progress,
          duration_ms: durationMs,
          metadata: {
            ...buildTrackingMetadata(),
            viewportHeight: window.innerHeight,
          },
        },
        eventType === 'read_complete',
      );
    }

    if (!sentPageView) {
      sentPageView = true;
      sendEvent('page_view', {
        metadata: {
          ...buildTrackingMetadata(),
          title: document.title,
        },
      });
    }

    window.addEventListener('scroll', () => {
      reportProgress(false);
    }, { passive: true });

    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        reportProgress(getProgressPercent() >= 95);
      }
    });

    window.addEventListener('pagehide', () => {
      reportProgress(getProgressPercent() >= 95);
    });
  })();
</script>