---
import BaseLayout from '../layouts/BaseLayout.astro';
import DiscoveryBrief from '../components/seo/DiscoveryBrief.astro';
import PageViewTracker from '../components/seo/PageViewTracker.astro';
import SharePanel from '../components/seo/SharePanel.astro';
import TerminalWindow from '../components/ui/TerminalWindow.astro';
import CommandPrompt from '../components/ui/CommandPrompt.astro';
import FilterPill from '../components/ui/FilterPill.astro';
import PostCard from '../components/PostCard.astro';
import ViewMoreLink from '../components/ui/ViewMoreLink.astro';
import StatsList from '../components/StatsList.astro';
import TechStackList from '../components/TechStackList.astro';
import { terminalConfig } from '../lib/config/terminal';
import { api, DEFAULT_SITE_SETTINGS } from '../lib/api/client';
import { formatReadTime, getI18n } from '../lib/i18n';
import { buildDiscoveryHighlights, buildFaqJsonLd, buildPageFaqs, buildPostItemList, compactJsonLd } from '../lib/seo';
import type { AppFriendLink } from '../lib/api/client';
import type { ContentOverview, ContentWindowHighlight, PopularPostHighlight, Post } from '../lib/types';
import { getAccentVars, getCategoryTheme, getPostTypeTheme, getTagTheme } from '../lib/utils';

export const prerender = false;

const url = new URL(Astro.request.url);
const selectedType = url.searchParams.get('type') || 'all';
const selectedTag = url.searchParams.get('tag') || '';
const selectedCategory = url.searchParams.get('category') || '';
const normalizedSelectedTag = selectedTag.trim().toLowerCase();
const normalizedSelectedCategory = selectedCategory.trim().toLowerCase();
const previewLimit = 5;
const popularPreviewLimit = 4;
const DEFAULT_HOME_RANGE_KEY = '7d';

let siteSettings = DEFAULT_SITE_SETTINGS;
let allPosts: Post[] = [];
let recentPosts: Post[] = [];
let filteredPostsCount = 0;
let pinnedPost: Post | null = null;
let tags: string[] = [];
let friendLinks: AppFriendLink[] = [];
let categories: Awaited<ReturnType<typeof api.getCategories>> = [];
const createEmptyContentRange = (key: string, label: string, days: number): ContentWindowHighlight => ({
  key,
  label,
  days,
  overview: {
    pageViews: 0,
    readCompletes: 0,
    avgReadProgress: 0,
    avgReadDurationMs: undefined,
  },
  popularPosts: [],
});
let contentRanges: ContentWindowHighlight[] = [
  createEmptyContentRange('24h', '24h', 1),
  createEmptyContentRange('7d', '7d', 7),
  createEmptyContentRange('30d', '30d', 30),
];
let contentOverview: ContentOverview = {
  totalPageViews: 0,
  pageViewsLast24h: 0,
  pageViewsLast7d: 0,
  totalReadCompletes: 0,
  readCompletesLast7d: 0,
  avgReadProgressLast7d: 0,
  avgReadDurationMsLast7d: undefined,
};
let apiError: string | null = null;
const { locale, t } = getI18n(Astro);
const isEnglish = locale.startsWith('en');

const formatDurationMs = (value: number | undefined) => {
  if (!value || value <= 0) return locale === 'en' ? 'N/A' : '暂无';
  if (value < 1000) return `${Math.round(value)} ms`;

  const seconds = value / 1000;
  if (seconds < 60) {
    return locale === 'en'
      ? `${seconds.toFixed(seconds >= 10 ? 0 : 1)}s`
      : `${seconds.toFixed(seconds >= 10 ? 0 : 1)} 秒`;
  }

  const minutes = Math.floor(seconds / 60);
  const restSeconds = Math.round(seconds % 60);
  return locale === 'en' ? `${minutes}m ${restSeconds}s` : `${minutes} 分 ${restSeconds} 秒`;
};

const formatProgressPercent = (value: number) => `${Math.round(value)}%`;

try {
  const homeData = await api.getHomePageData();

  siteSettings = homeData.siteSettings;
  allPosts = homeData.posts;
  tags = homeData.tags.map(tag => tag.name);
  friendLinks = homeData.friendLinks.filter(friend => friend.status === 'approved');
  categories = homeData.categories;
  contentRanges = homeData.contentRanges;
  contentOverview = homeData.contentOverview;

  const filteredPosts = allPosts.filter(post => {
    const normalizedCategory = post.category?.trim().toLowerCase() || '';
    if (selectedType !== 'all' && post.type !== selectedType) return false;
    if (selectedCategory && normalizedCategory !== normalizedSelectedCategory) return false;
    if (selectedTag && !post.tags.some(tag => tag.trim().toLowerCase() === normalizedSelectedTag)) return false;
    return true;
  });

  recentPosts = filteredPosts.slice(0, previewLimit);
  filteredPostsCount = filteredPosts.length;
  pinnedPost = allPosts.find(post => post.pinned) || null;
} catch (error) {
  apiError = error instanceof Error ? error.message : t('common.apiUnavailable');
  console.error('API Error:', error);
}

const systemStats = [
  { label: t('common.posts'), value: String(allPosts.length) },
  { label: t('common.tags'), value: String(tags.length) },
  { label: t('common.categories'), value: String(categories.length) },
  { label: t('common.friends'), value: String(friendLinks.length) },
];
const heroGlanceStats = [
  { label: t('common.posts'), value: String(allPosts.length), icon: 'fa-file-alt' },
  { label: t('common.categories'), value: String(categories.length), icon: 'fa-folder-open' },
  { label: t('common.tags'), value: String(tags.length), icon: 'fa-hashtag' },
];

const techStack = siteSettings.techStack.map(name => ({ name }));
const tagFrequency = new Map<string, number>();

for (const post of allPosts) {
  for (const tag of post.tags) {
    tagFrequency.set(tag, (tagFrequency.get(tag) ?? 0) + 1);
  }
}

const tagEntries = tags
  .map(name => ({
    name,
    count: tagFrequency.get(name) ?? 0,
  }))
  .sort((left, right) => right.count - left.count || left.name.localeCompare(right.name));

const getTagCloudStyle = (name: string) => {
  return getAccentVars(getTagTheme(name));
};
const matchesSelectedFilters = (post: Post) => {
  const normalizedCategory = post.category?.trim().toLowerCase() || '';
  if (selectedType !== 'all' && post.type !== selectedType) return false;
  if (selectedCategory && normalizedCategory !== normalizedSelectedCategory) return false;
  if (selectedTag && !post.tags.some(tag => tag.trim().toLowerCase() === normalizedSelectedTag)) return false;
  return true;
};
const activeContentRange =
  contentRanges.find((range) => range.key === DEFAULT_HOME_RANGE_KEY) ??
  contentRanges[0] ??
  createEmptyContentRange(DEFAULT_HOME_RANGE_KEY, DEFAULT_HOME_RANGE_KEY, 7);
const popularRangeCards = contentRanges.flatMap((range) =>
  range.popularPosts
    .filter((item): item is PopularPostHighlight & { post: Post } => Boolean(item.post))
    .map((item, index) => ({
      rangeKey: range.key,
      rank: index + 1,
      item,
      post: item.post,
    })),
);
const popularRangeOptions = contentRanges.map((range) => ({
  key: range.key,
  label: range.label,
}));
const initialPopularCount = popularRangeCards.filter(
  ({ rangeKey, post }) => rangeKey === activeContentRange.key && matchesSelectedFilters(post),
).length;
const initialPopularVisibleKeys = new Set(
  popularRangeCards
    .filter(({ rangeKey, post }) => rangeKey === activeContentRange.key && matchesSelectedFilters(post))
    .sort((left, right) => {
      const scoreDiff = right.item.pageViews - left.item.pageViews;
      if (scoreDiff !== 0) return scoreDiff;
      return right.item.readCompletes - left.item.readCompletes;
    })
    .slice(0, popularPreviewLimit)
    .map(({ rangeKey, post }) => `${rangeKey}:${post.slug}`),
);
const sidebarFriendLinks = friendLinks.slice(0, 3);
const buildHomeUrl = ({
  type = selectedType,
  tag = selectedTag,
  category = selectedCategory,
}: {
  type?: string;
  tag?: string;
  category?: string;
}) => {
  const params = new URLSearchParams();
  if (type && type !== 'all') params.set('type', type);
  if (category) params.set('category', category);
  if (tag) params.set('tag', tag);
  const query = params.toString();
  return query ? `/?${query}` : '/';
};
const homeTagHrefPrefix = `${buildHomeUrl({ tag: '' })}${buildHomeUrl({ tag: '' }).includes('?') ? '&' : '?'}tag=`;
const hasActiveFilters = selectedType !== 'all' || Boolean(selectedCategory) || Boolean(selectedTag);
const previewCount = Math.min(filteredPostsCount, previewLimit);
const categoryAccentMap = Object.fromEntries(
  categories.map((category) => [category.name.trim().toLowerCase(), getAccentVars(getCategoryTheme(category.name))])
);
const tagAccentMap = Object.fromEntries(
  tagEntries.map((tag) => [tag.name.trim().toLowerCase(), getAccentVars(getTagTheme(tag.name))])
);
const initialPinnedVisible = pinnedPost ? matchesSelectedFilters(pinnedPost) : false;

const postTypeFilters = [
  { id: 'all', name: t('common.all'), icon: 'fa-stream' },
  { id: 'article', name: t('common.article'), icon: 'fa-file-alt' },
  { id: 'tweet', name: t('common.tweet'), icon: 'fa-comment-dots' }
];
const activeFilterLabels = [
  selectedType !== 'all' ? `type=${selectedType}` : '',
  selectedCategory ? `category=${selectedCategory}` : '',
  selectedTag ? `tag=${selectedTag}` : '',
].filter(Boolean);
const discoverPrompt = hasActiveFilters
  ? t('home.promptDiscoverFiltered', { filters: activeFilterLabels.join(' · ') })
  : t('home.promptDiscoverDefault');
const postsPrompt = hasActiveFilters
  ? t('home.promptPostsFiltered', { count: previewCount, filters: activeFilterLabels.join(' · ') })
  : t('home.promptPostsDefault', { count: previewCount });
const siteBaseUrl = (siteSettings.siteUrl || new URL(Astro.request.url).origin).replace(/\/$/, '');
const homeJsonLd = [
  {
    '@context': 'https://schema.org',
    '@type': 'CollectionPage',
    name: siteSettings.siteTitle,
    description: siteSettings.siteDescription,
    url: siteBaseUrl,
    inLanguage: locale,
  },
  {
    '@context': 'https://schema.org',
    '@type': 'ItemList',
    name: `${siteSettings.siteName} recent posts`,
    itemListElement: buildPostItemList(recentPosts, siteBaseUrl),
  },
];
const homeShareCopy = isEnglish
  ? {
      badge: 'site entry',
      title: 'Share the homepage',
      description:
        'Use the homepage as the canonical top-level entry for people and AI search to branch into articles, taxonomies, reviews, and profile context.',
    }
  : {
      badge: '入口页',
      title: '把首页甩出去',
      description: '不知道发什么时，先发这个入口。轻松、不剧透，还挺省心。',
    };
const homeShareSummary = isEnglish
  ? 'A light entry point for curious visitors. Click around and let the rest reveal itself.'
  : '这是一个适合顺手转发的小入口，先逛逛，细节留到点开再说。';
const homeSidebarCopy = isEnglish
  ? {
      quickLinks: 'Quick links',
      quickLinksDesc: 'Keep the main channels pinned on the right so you can switch context without losing reading flow.',
      quickLinksMore: 'More channels',
      popularTitle: 'Hot now',
      popularDesc: 'Track the most-read content in the selected window.',
      friendsTitle: 'Friend links',
      friendsDesc: 'A few recommended sites from the blogroll.',
      statsTitle: 'Site stats',
      statsDesc: 'A compact snapshot of current site scale.',
      aiBriefTitle: 'AI site brief',
    }
  : {
      quickLinks: '快速入口',
      quickLinksDesc: '常用入口都放这儿，手别忙，点就行。',
      quickLinksMore: '更多频道',
      popularTitle: '最近热门',
      popularDesc: '看看最近是谁在悄悄抢镜。',
      friendsTitle: '友情链接',
      friendsDesc: '隔壁摊位也许也有好东西。',
      statsTitle: '站点概览',
      statsDesc: '轻量围观一下站内气氛，不必知道太多。',
      aiBriefTitle: '站点便签',
    };
const primaryQuickLinks = [
  { icon: 'fa-file-code', text: t('nav.articles'), href: '/articles' },
  { icon: 'fa-folder', text: t('nav.categories'), href: '/categories' },
  { icon: 'fa-user-secret', text: t('nav.about'), href: '/about' },
  ...(siteSettings.ai.enabled ? [{ icon: 'fa-robot', text: t('nav.ask'), href: '/ask' }] : []),
];
const secondaryQuickLinks = [
  { icon: 'fa-tags', text: t('nav.tags'), href: '/tags' },
  { icon: 'fa-stream', text: t('nav.timeline'), href: '/timeline' },
  { icon: 'fa-star', text: t('nav.reviews'), href: '/reviews' },
  { icon: 'fa-link', text: t('nav.friends'), href: '/friends' },
];
const homeBriefHighlights = buildDiscoveryHighlights([
  siteSettings.siteDescription,
  siteSettings.heroSubtitle,
  siteSettings.ownerBio,
  `${t('common.posts')}: ${allPosts.length}`,
  `${t('common.categories')}: ${categories.length}`,
  `${t('common.tags')}: ${tags.length}`,
]);
const homeFaqs = buildPageFaqs({
  locale,
  pageTitle: siteSettings.siteTitle,
  summary: siteSettings.heroSubtitle || siteSettings.siteDescription,
  primaryLabel: isEnglish ? 'homepage' : '首页',
  primaryUrl: siteBaseUrl,
  relatedLinks: [
    { label: t('nav.articles'), url: `${siteBaseUrl}/articles` },
    { label: t('nav.categories'), url: `${siteBaseUrl}/categories` },
    { label: t('nav.about'), url: `${siteBaseUrl}/about` },
  ],
  signals: homeBriefHighlights,
});
const homeFaqJsonLd = buildFaqJsonLd(homeFaqs);
---

<BaseLayout
  title={siteSettings.siteTitle}
  description={siteSettings.siteDescription}
  siteSettings={siteSettings}
  canonical="/"
  noindex={hasActiveFilters}
  jsonLd={compactJsonLd([...homeJsonLd, homeFaqJsonLd])}
>
  <PageViewTracker pageType="home" entityId="homepage" />
  <div class="mx-auto max-w-[1480px] px-4 py-6 sm:px-6 lg:px-8">
    <TerminalWindow title={terminalConfig.title} class="w-full">
      <div class="mb-5 px-4 overflow-x-auto">
        <pre class="font-mono text-xs sm:text-sm text-[var(--primary)] whitespace-pre">{terminalConfig.asciiArt}</pre>
      </div>

      <div class="mb-6 px-4">
        <CommandPrompt command={t('home.promptWelcome')} />
        <div class="ml-4 home-hero-shell home-hero-shell--panel">
          <div class="home-hero-copy">
            <span class="terminal-kicker w-fit">
              <i class="fas fa-terminal"></i>
              home / overview
            </span>
            <p class="mb-1 text-lg font-bold text-[var(--primary)]">{siteSettings.heroTitle}</p>
            <p class="text-sm leading-6 text-[var(--text-secondary)]">{siteSettings.heroSubtitle}</p>

            <div class="home-hero-glance">
              {heroGlanceStats.map((item) => (
                <div class="home-hero-glance-item">
                  <span class="home-hero-glance-icon">
                    <i class={`fas ${item.icon} text-[11px]`}></i>
                  </span>
                  <div class="min-w-0">
                    <div class="text-[11px] uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{item.label}</div>
                    <div class="text-sm font-semibold text-[var(--title-color)]">{item.value}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div class="home-hero-meta">
            <span class="terminal-stat-pill">
              <i class="fas fa-file-alt text-[10px]"></i>
              <span id="home-results-count">{t('common.resultsCount', { count: filteredPostsCount })}</span>
            </span>
            {siteSettings.subscriptions.popupEnabled && (
              <button type="button" class="terminal-subtle-link" data-subscription-popup-open>
                <i class="fas fa-envelope text-[11px]"></i>
                <span>订阅更新</span>
              </button>
            )}
            {siteSettings.ai.enabled && (
              <a href="/ask" class="terminal-subtle-link">
                <i class="fas fa-robot text-[11px]"></i>
                <span>{t('nav.ask')}</span>
              </a>
            )}
          </div>
        </div>

      </div>

      {apiError && (
        <div class="mb-8 px-4">
          <div class="ml-4 p-4 rounded-lg border border-[var(--danger)]/20 bg-[var(--danger)]/10 text-[var(--danger)] text-sm">
            {apiError}
          </div>
        </div>
      )}

      <div class="grid gap-6 px-4 xl:grid-cols-[minmax(0,1fr)_320px] 2xl:grid-cols-[minmax(0,1fr)_340px]">
        <div class="min-w-0 space-y-6">
          <div id="discover">
            <CommandPrompt promptId="home-discover-prompt" command={discoverPrompt} />
            <div class="ml-4 terminal-panel home-discovery-shell">
              <div class="home-discovery-head">
                <div class="home-taxonomy-copy">
                  <span class="terminal-kicker">
                    <i class="fas fa-sliders-h"></i>
                    <span>home filters</span>
                  </span>
                  <div>
                    <h2 class="text-xl font-bold text-[var(--title-color)]">{t('common.browsePosts')}</h2>
                    <p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">
                      {t('common.categoriesCount', { count: categories.length })} · {t('common.tagsCount', { count: tags.length })} · <span id="home-discovery-results">{t('common.resultsCount', { count: filteredPostsCount })}</span>
                    </p>
                  </div>
                </div>

                <div class="home-discovery-actions">
                  <a id="home-clear-filters" href="/" class:list={['terminal-link-arrow', !hasActiveFilters && 'hidden']}>
                    <span>{t('common.clearFilters')}</span>
                    <i class="fas fa-rotate-left text-xs"></i>
                  </a>
                  <ViewMoreLink href="/articles" text={t('common.viewAllArticles')} command="cd ~/articles" />
                </div>
              </div>

              <div class="home-filter-toolbar">
                {postTypeFilters.map(filter => (
                  <FilterPill
                    tone={filter.id === 'all' ? 'neutral' : 'accent'}
                    active={selectedType === filter.id}
                    href={buildHomeUrl({ type: filter.id, category: selectedCategory, tag: selectedTag })}
                    data-home-type-filter={filter.id}
                    style={filter.id === 'all' ? undefined : getAccentVars(getPostTypeTheme(filter.id))}
                  >
                    <i class={`fas ${filter.icon}`}></i>
                    <span>{filter.name}</span>
                  </FilterPill>
                ))}
              </div>

              <div id="home-active-filters" class:list={['home-active-filter-row', !hasActiveFilters && 'hidden']}>
                <span id="home-active-type" class:list={['terminal-chip max-w-full min-w-0', selectedType === 'all' && 'hidden']}>
                  <i id="home-active-type-icon" class={`fas ${postTypeFilters.find((item) => item.id === selectedType)?.icon || 'fa-stream'} text-[10px]`}></i>
                  <span id="home-active-type-text" class="min-w-0 truncate">{postTypeFilters.find((item) => item.id === selectedType)?.name || selectedType}</span>
                </span>
                <span
                  id="home-active-category"
                  class:list={['terminal-chip terminal-chip--accent max-w-full min-w-0', !selectedCategory && 'hidden']}
                  style={selectedCategory ? getAccentVars(getCategoryTheme(selectedCategory)) : undefined}
                >
                  <i class="fas fa-folder-open text-[10px]"></i>
                  <span id="home-active-category-text" class="min-w-0 truncate">{selectedCategory}</span>
                </span>
                <span
                  id="home-active-tag"
                  class:list={['terminal-chip terminal-chip--accent max-w-full min-w-0', !selectedTag && 'hidden']}
                  style={selectedTag ? getAccentVars(getTagTheme(selectedTag)) : undefined}
                >
                  <i class="fas fa-hashtag text-[10px]"></i>
                  <span id="home-active-tag-text" class="min-w-0 truncate">{selectedTag}</span>
                </span>
              </div>

              <div class="home-discovery-grid">
                <section id="categories" class="home-discovery-panel">
                  <div class="home-discovery-panel__head">
                    <h3 class="text-sm font-semibold text-[var(--title-color)]">{t('nav.categories')}</h3>
                    <span class="terminal-stat-pill">{categories.length}</span>
                  </div>
                  <div class="home-category-grid home-category-grid--compact">
                    {categories.map(category => (
                      <a
                        href={buildHomeUrl({
                          category: normalizedSelectedCategory === category.name.trim().toLowerCase() ? '' : category.name,
                          tag: selectedTag,
                        })}
                        data-home-category-filter={category.name}
                        class:list={[
                          'home-category-card terminal-panel-accent terminal-interactive-card group',
                          normalizedSelectedCategory === category.name.trim().toLowerCase() && 'is-active'
                        ]}
                        style={getAccentVars(getCategoryTheme(category.name))}
                      >
                        <div class="home-category-card__icon terminal-accent-icon">
                          <i class="fas fa-folder-open"></i>
                        </div>
                        <div class="min-w-0 flex flex-1 items-center justify-between gap-3">
                          <h3 class="truncate text-sm font-semibold text-[var(--title-color)] transition-colors group-hover:text-[var(--accent-color,var(--primary))]">
                            {category.name}
                          </h3>
                          <span class="terminal-stat-pill terminal-stat-pill--accent shrink-0" style={getAccentVars(getCategoryTheme(category.name))}>
                            <span>{category.count ?? 0}</span>
                          </span>
                        </div>
                      </a>
                    ))}
                  </div>
                </section>

                <section id="tags" class="home-discovery-panel home-tag-shell">
                  <div class="home-discovery-panel__head">
                    <h3 class="text-sm font-semibold text-[var(--title-color)]">{t('nav.tags')}</h3>
                    <span class="terminal-stat-pill">{tags.length}</span>
                  </div>
                  <div class="home-tag-cloud">
                    {tagEntries.map((tag) => (
                      <a
                        href={buildHomeUrl({
                          tag: normalizedSelectedTag === tag.name.trim().toLowerCase() ? '' : tag.name,
                          category: selectedCategory,
                        })}
                        data-home-tag-filter={tag.name}
                        class:list={[
                          'home-tag-cloud__item',
                          normalizedSelectedTag === tag.name.trim().toLowerCase() && 'is-active'
                        ]}
                        style={getTagCloudStyle(tag.name)}
                      >
                        <span class="home-tag-cloud__hash">#</span>
                        <span>{tag.name}</span>
                        <span class="home-tag-cloud__count">{tag.count}</span>
                      </a>
                    ))}
                  </div>
                </section>
              </div>
            </div>
          </div>

          {pinnedPost && (
            <div>
              <CommandPrompt command={t('home.promptPinned')} />
              <div id="home-pinned-wrap" class:list={['ml-4', !initialPinnedVisible && 'hidden']}>
                <div class="terminal-panel terminal-panel-accent terminal-interactive-card p-4" style={getAccentVars(getPostTypeTheme(pinnedPost.type))}>
                  <div class="mb-2 flex items-center gap-2">
                    <span class="rounded bg-[var(--primary)] px-2 py-0.5 text-xs font-bold text-[var(--terminal-bg)]">{t('home.pinned')}</span>
                    <span class="terminal-chip terminal-chip--accent px-2 py-1 text-[10px]" style={getAccentVars(getPostTypeTheme(pinnedPost.type))}>
                      {pinnedPost.type === 'article' ? t('common.article') : t('common.tweet')}
                    </span>
                    <a href={`/articles/${pinnedPost.slug}`} class="text-lg font-bold text-[var(--title-color)] transition hover:text-[var(--primary)]">
                      {pinnedPost.title}
                    </a>
                  </div>
                  <p class="mb-2 text-sm text-[var(--text-secondary)]">{pinnedPost.date} | {t('common.readTime')}: {formatReadTime(locale, pinnedPost.readTime, t)}</p>
                  <p class="text-[var(--text-secondary)]">{pinnedPost.description}</p>
                  <div class="mt-4">
                    <a href={`/articles/${pinnedPost.slug}`} class="terminal-action-button inline-flex">
                      <i class="fas fa-angle-right"></i>
                      <span>{t('common.readMore')}</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          )}

          <div id="posts">
            <CommandPrompt promptId="home-posts-prompt" command={postsPrompt} />
            <div class="ml-4">
              {allPosts.length > 0 ? (
                <div id="home-posts-list" class="divide-y divide-[var(--border-color)]">
                  {allPosts.map((post) => {
                    const matchesCurrentFilter = matchesSelectedFilters(post);
                    const filteredIndex = matchesCurrentFilter
                      ? allPosts.filter(matchesSelectedFilters).findIndex((item) => item.slug === post.slug)
                      : -1;
                    const isVisible = matchesCurrentFilter && filteredIndex < previewLimit;

                    return (
                      <div
                        data-home-post-card
                        data-home-type={post.type}
                        data-home-category={post.category?.trim().toLowerCase() || ''}
                        data-home-tags={post.tags.map((tag) => tag.trim().toLowerCase()).join('|')}
                        data-home-pinned={post.pinned ? 'true' : 'false'}
                        data-home-slug={post.slug}
                        class:list={[!isVisible && 'hidden']}
                      >
                        <PostCard post={post} selectedTag={selectedTag} tagHrefPrefix={homeTagHrefPrefix} />
                      </div>
                    );
                  })}
                </div>
              ) : (
                <div id="home-posts-empty" class="terminal-empty">
                  <p class="text-base font-semibold text-[var(--title-color)]">{t('articlesPage.emptyTitle')}</p>
                  <p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">{t('articlesPage.emptyDescription')}</p>
                  <div class="mt-4 flex flex-wrap justify-center gap-2">
                    <a href="/" class="terminal-subtle-link">
                      <i class="fas fa-rotate-left text-[11px]"></i>
                      <span>{t('common.clearFilters')}</span>
                    </a>
                    <a href="/articles" class="terminal-subtle-link">
                      <i class="fas fa-file-code text-[11px]"></i>
                      <span>{t('common.viewAllArticles')}</span>
                    </a>
                  </div>
                </div>
              )}
              {allPosts.length > 0 && (
                <div id="home-posts-empty" class:list={['terminal-empty', recentPosts.length > 0 && 'hidden']}>
                  <p class="text-base font-semibold text-[var(--title-color)]">{t('articlesPage.emptyTitle')}</p>
                  <p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">{t('articlesPage.emptyDescription')}</p>
                  <div class="mt-4 flex flex-wrap justify-center gap-2">
                    <a href="/" class="terminal-subtle-link">
                      <i class="fas fa-rotate-left text-[11px]"></i>
                      <span>{t('common.clearFilters')}</span>
                    </a>
                    <a href="/articles" class="terminal-subtle-link">
                      <i class="fas fa-file-code text-[11px]"></i>
                      <span>{t('common.viewAllArticles')}</span>
                    </a>
                  </div>
                </div>
              )}
              <div class="mt-4">
                <ViewMoreLink href="/articles" text={t('common.viewAllArticles')} command="cd ~/articles" />
              </div>
            </div>
          </div>
        </div>

        <aside class="home-sidebar-stack">
          <section class="terminal-panel home-sidebar-card home-sidebar-card--quickmenu space-y-4 xl:sticky xl:top-24">
            <div class="space-y-1">
              <span class="terminal-kicker w-fit">
                <i class="fas fa-compass"></i>
                quick menu
              </span>
              <h3 class="text-lg font-semibold text-[var(--title-color)]">{homeSidebarCopy.quickLinks}</h3>
              <p class="text-sm leading-6 text-[var(--text-secondary)]">{homeSidebarCopy.quickLinksDesc}</p>
            </div>
            <div class="home-sidebar-grid">
              {primaryQuickLinks.map(link => (
                <a
                  href={link.href}
                  class="home-sidebar-link group flex min-w-0 items-center gap-3 rounded-2xl border border-[var(--border-color)] bg-[var(--terminal-bg)]/75 px-3 py-2.5 text-sm text-[var(--title-color)] transition hover:-translate-y-0.5 hover:border-[var(--primary)] hover:text-[var(--primary)]"
                >
                  <span class="home-sidebar-link__icon">
                    <i class={`fas ${link.icon} text-[11px]`}></i>
                  </span>
                  <span class="min-w-0 flex-1 truncate font-medium">{link.text}</span>
                  <i class="fas fa-arrow-right text-[10px] text-[var(--text-tertiary)] transition-transform duration-200 group-hover:translate-x-0.5 group-hover:text-[var(--primary)]"></i>
                </a>
              ))}
            </div>

            <div class="space-y-1 border-t border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] pt-4">
              <h4 class="text-sm font-semibold text-[var(--title-color)]">{homeSidebarCopy.quickLinksMore}</h4>
            </div>

            <div class="grid gap-2 sm:grid-cols-2 xl:grid-cols-2">
              {secondaryQuickLinks.map(link => (
                <a
                  href={link.href}
                  class="home-sidebar-mini-link group flex min-w-0 items-center gap-2.5 rounded-xl border border-[var(--border-color)] bg-[var(--terminal-bg)]/72 px-3 py-2 text-xs text-[var(--text-secondary)] transition hover:-translate-y-0.5 hover:border-[var(--primary)] hover:text-[var(--primary)]"
                >
                  <span class="home-sidebar-mini-link__icon">
                    <i class={`fas ${link.icon} text-[10px]`}></i>
                  </span>
                  <span class="min-w-0 flex-1 truncate font-medium">{link.text}</span>
                </a>
              ))}
            </div>
          </section>

          <SharePanel
            shareTitle={siteSettings.siteTitle}
            summary={homeShareSummary}
            canonicalUrl={siteBaseUrl}
            badge={homeShareCopy.badge}
            title={homeShareCopy.title}
            description={homeShareCopy.description}
            wechatShareQrEnabled={siteSettings.seo.wechatShareQrEnabled}
            variant="compact"
          />

          <section class="terminal-panel home-sidebar-card space-y-4">
            <div class="flex items-start justify-between gap-3">
              <div>
                <span class="terminal-kicker w-fit">
                  <i class="fas fa-fire"></i>
                  traffic
                </span>
                <h3 class="text-lg font-semibold text-[var(--title-color)]">{homeSidebarCopy.popularTitle}</h3>
                <p class="mt-1 text-sm leading-6 text-[var(--text-secondary)]">{homeSidebarCopy.popularDesc}</p>
              </div>
              <span id="home-popular-count" class="terminal-stat-pill">{initialPopularCount}</span>
            </div>

            <div class="home-popular-rangebar">
              {popularRangeOptions.map((option) => (
                <button
                  type="button"
                  data-home-popular-range={option.key}
                  class:list={[
                    'home-popular-range',
                    option.key === activeContentRange.key && 'is-active'
                  ]}
                >
                  <i class="fas fa-clock text-[10px]"></i>
                  <span>{option.label}</span>
                </button>
              ))}
            </div>

            <div id="home-popular-list" class="space-y-3">
              {popularRangeCards.map(({ rangeKey, rank, item, post }) => (
                <a
                  href={`/articles/${post.slug}`}
                  data-home-popular-card
                  data-home-range={rangeKey}
                  data-home-type={post.type}
                  data-home-category={post.category?.trim().toLowerCase() || ''}
                  data-home-tags={post.tags.map((tag) => tag.trim().toLowerCase()).join('|')}
                  data-home-slug={post.slug}
                  data-home-popular-views={item.pageViews}
                  data-home-popular-completes={item.readCompletes}
                  class:list={[
                    'home-sidebar-popular block rounded-2xl border border-[var(--border-color)] bg-[var(--terminal-bg)]/72 p-3 transition hover:-translate-y-0.5 hover:border-[var(--primary)]',
                    !initialPopularVisibleKeys.has(`${rangeKey}:${post.slug}`) && 'hidden'
                  ]}
                  style={getAccentVars(getPostTypeTheme(post.type))}
                >
                  <div class="flex items-start gap-3">
                    <span class="home-sidebar-popular__rank">
                      <span data-home-popular-rank-label>{rank}</span>
                    </span>
                    <div class="min-w-0 flex-1">
                      <div class="flex flex-wrap items-center gap-2">
                        <span class="terminal-chip terminal-chip--accent px-2 py-1 text-[10px]" style={getAccentVars(getPostTypeTheme(post.type))}>
                          {post.type === 'article' ? t('common.article') : t('common.tweet')}
                        </span>
                        <span class="terminal-chip terminal-chip--accent px-2 py-1 text-[10px]" style={getAccentVars(getCategoryTheme(post.category))}>
                          {post.category}
                        </span>
                      </div>
                      <h4 class="mt-2 line-clamp-2 text-sm font-semibold leading-6 text-[var(--title-color)]">{post.title}</h4>
                      <div class="home-sidebar-popular__metrics">
                        <span>{t('home.views')}: {item.pageViews}</span>
                        <span>{t('home.completes')}: {item.readCompletes}</span>
                        <span>{t('home.avgProgress')}: {formatProgressPercent(item.avgProgressPercent)}</span>
                      </div>
                    </div>
                  </div>
                </a>
              ))}
            </div>

            <div id="home-popular-empty" class:list={['terminal-empty py-6', initialPopularCount > 0 && 'hidden']}>
              <p class="text-sm leading-6 text-[var(--text-secondary)]">{t('home.hotNowEmpty')}</p>
            </div>
          </section>

          <section class="terminal-panel home-sidebar-card space-y-4">
            <div class="flex items-start justify-between gap-3">
              <div>
                <span class="terminal-kicker w-fit">
                  <i class="fas fa-chart-simple"></i>
                  stats
                </span>
                <h3 class="text-lg font-semibold text-[var(--title-color)]">{homeSidebarCopy.statsTitle}</h3>
                <p class="mt-1 text-sm leading-6 text-[var(--text-secondary)]">{homeSidebarCopy.statsDesc}</p>
              </div>
              <span id="home-stats-window-pill" class="terminal-stat-pill">{activeContentRange.label}</span>
            </div>

            <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-2">
              <div class="home-sidebar-stat home-sidebar-stat--metric rounded-2xl border border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] p-4">
                <p class="text-xs uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{t('home.views')}</p>
                <p id="home-reading-views-value" class="mt-3 text-2xl font-semibold text-[var(--title-color)]">{activeContentRange.overview.pageViews}</p>
                <p class="mt-2 text-xs text-[var(--text-secondary)]">{t('home.totalViews')}: {contentOverview.totalPageViews}</p>
              </div>
              <div class="home-sidebar-stat home-sidebar-stat--metric rounded-2xl border border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] p-4">
                <p class="text-xs uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{t('home.completes')}</p>
                <p id="home-reading-completes-value" class="mt-3 text-2xl font-semibold text-[var(--title-color)]">{activeContentRange.overview.readCompletes}</p>
                <p class="mt-2 text-xs text-[var(--text-secondary)]">{t('home.totalCompletes')}: {contentOverview.totalReadCompletes}</p>
              </div>
              <div class="home-sidebar-stat home-sidebar-stat--metric rounded-2xl border border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] p-4">
                <p class="text-xs uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{t('home.avgProgress')}</p>
                <p id="home-reading-progress-value" class="mt-3 text-2xl font-semibold text-[var(--title-color)]">{formatProgressPercent(activeContentRange.overview.avgReadProgress)}</p>
                <p id="home-reading-window-meta" class="mt-2 text-xs text-[var(--text-secondary)]">{t('home.statsWindowLabel', { label: activeContentRange.label })}</p>
              </div>
              <div class="home-sidebar-stat home-sidebar-stat--metric rounded-2xl border border-[color:color-mix(in_oklab,var(--primary)_10%,var(--border-color))] p-4">
                <p class="text-xs uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{t('home.avgDuration')}</p>
                <p id="home-reading-duration-value" class="mt-3 text-2xl font-semibold text-[var(--title-color)]">{formatDurationMs(activeContentRange.overview.avgReadDurationMs)}</p>
                <p class="mt-2 text-xs text-[var(--text-secondary)]">{t('common.posts')}: {allPosts.length}</p>
              </div>
            </div>

            <div class="home-sidebar-meta-list">
              {systemStats.slice(0, 4).map((item) => (
                <div class="home-sidebar-meta-item">
                  <span class="text-[11px] uppercase tracking-[0.18em] text-[var(--text-tertiary)]">{item.label}</span>
                  <span class="text-sm font-semibold text-[var(--title-color)]">{item.value}</span>
                </div>
              ))}
            </div>
          </section>

          {sidebarFriendLinks.length > 0 && (
            <section class="terminal-panel home-sidebar-card space-y-4">
              <div class="space-y-1">
                <span class="terminal-kicker w-fit">
                  <i class="fas fa-link"></i>
                  network
                </span>
                <h3 class="text-lg font-semibold text-[var(--title-color)]">{homeSidebarCopy.friendsTitle}</h3>
                <p class="text-sm leading-6 text-[var(--text-secondary)]">{homeSidebarCopy.friendsDesc}</p>
              </div>

              <div class="space-y-3">
                {sidebarFriendLinks.map((friend) => (
                  <a
                    href={friend.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    class="home-sidebar-friend group flex items-start gap-3 rounded-2xl border border-[var(--border-color)] bg-[var(--terminal-bg)]/75 p-3 transition hover:-translate-y-0.5 hover:border-[var(--primary)]"
                  >
                    {friend.avatar ? (
                      <img
                        src={friend.avatar}
                        alt={friend.name}
                        class="h-10 w-10 shrink-0 rounded-xl border border-[var(--border-color)] object-cover bg-[var(--code-bg)]"
                        loading="lazy"
                        decoding="async"
                      />
                    ) : (
                      <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-[var(--border-color)] bg-[var(--code-bg)] text-sm font-bold text-[var(--primary)]">
                        {friend.name.charAt(0).toUpperCase()}
                      </span>
                    )}
                    <div class="min-w-0 flex-1">
                      <div class="flex items-center gap-2">
                        <span class="truncate text-sm font-semibold text-[var(--title-color)] group-hover:text-[var(--primary)]">
                          {friend.name}
                        </span>
                        <i class="fas fa-arrow-up-right-from-square text-[10px] text-[var(--text-tertiary)] opacity-0 transition-opacity group-hover:opacity-100"></i>
                      </div>
                      {friend.description && (
                        <p class="mt-1 line-clamp-2 text-xs leading-6 text-[var(--text-secondary)]">
                          {friend.description}
                        </p>
                      )}
                    </div>
                  </a>
                ))}
              </div>

              <ViewMoreLink href="/friends" text={t('common.viewAllLinks')} command="cd ~/friends" />
            </section>
          )}
        </aside>
      </div>

      <div class="my-8 border-t border-[var(--border-color)]"></div>

      <div id="about" class="px-4">
        <CommandPrompt command={t('home.promptAbout')} />
        <div class="ml-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h3 class="text-lg font-bold mb-3 text-[var(--title-color)]">{t('home.about')}</h3>
              <p class="text-[var(--text-secondary)] mb-4">{siteSettings.ownerBio}</p>

              <h3 class="text-lg font-bold mb-3 text-[var(--title-color)]">{t('home.techStack')}</h3>
              <TechStackList items={techStack} />
            </div>

            <div>
              <h3 class="text-lg font-bold mb-3 text-[var(--title-color)]">{t('home.systemStatus')}</h3>
              <StatsList stats={systemStats} />
            </div>
          </div>
        </div>
      </div>

      <div class="my-8 border-t border-[var(--border-color)]"></div>

      <div id="site-brief" class="px-4 pb-2">
        <div class="ml-4">
          <DiscoveryBrief
            badge={isEnglish ? 'site brief' : homeSidebarCopy.aiBriefTitle}
            kicker="geo / overview"
            title={isEnglish ? 'AI-readable site brief' : '给 AI 看的站点摘要'}
            summary={siteSettings.heroSubtitle || siteSettings.siteDescription}
            highlights={homeBriefHighlights}
            faqs={homeFaqs}
          />
        </div>
      </div>
    </TerminalWindow>
  </div>
</BaseLayout>

<script
  is:inline
  define:vars={{
    previewLimit,
    popularPreviewLimit,
    categoryAccentMap,
    tagAccentMap,
    contentRangesPayload: contentRanges.map((range) => ({
      key: range.key,
      label: range.label,
      days: range.days,
      overview: range.overview,
    })),
    initialHomeState: {
      type: selectedType,
      category: selectedCategory,
      tag: selectedTag,
      range: activeContentRange.key,
    },
  }}
>
  (function() {
    /** @type {Window['__termiCommandPrompt']} */
    let promptApi;

    const t = window.__termiTranslate;
    const typeButtons = Array.from(document.querySelectorAll('[data-home-type-filter]'));
    const categoryButtons = Array.from(document.querySelectorAll('[data-home-category-filter]'));
    const tagButtons = Array.from(document.querySelectorAll('[data-home-tag-filter]'));
    const postCards = Array.from(document.querySelectorAll('[data-home-post-card]'));
    const postsRoot = document.getElementById('posts');
    const resultsCount = document.getElementById('home-results-count');
    const discoveryResults = document.getElementById('home-discovery-results');
    const clearFilters = document.getElementById('home-clear-filters');
    const activeFilters = document.getElementById('home-active-filters');
    const activeType = document.getElementById('home-active-type');
    const activeTypeIcon = document.getElementById('home-active-type-icon');
    const activeTypeText = document.getElementById('home-active-type-text');
    const activeCategory = document.getElementById('home-active-category');
    const activeCategoryText = document.getElementById('home-active-category-text');
    const activeTag = document.getElementById('home-active-tag');
    const activeTagText = document.getElementById('home-active-tag-text');
    const emptyState = document.getElementById('home-posts-empty');
    const pinnedWrap = document.getElementById('home-pinned-wrap');
    const popularCards = Array.from(document.querySelectorAll('[data-home-popular-card]'));
    const popularEmpty = document.getElementById('home-popular-empty');
    const popularList = document.getElementById('home-popular-list');
    const popularCount = document.getElementById('home-popular-count');
    const popularRangeButtons = Array.from(document.querySelectorAll('[data-home-popular-range]'));
    const readingWindowPill = document.getElementById('home-stats-window-pill');
    const readingViewsValue = document.getElementById('home-reading-views-value');
    const readingCompletesValue = document.getElementById('home-reading-completes-value');
    const readingProgressValue = document.getElementById('home-reading-progress-value');
    const readingDurationValue = document.getElementById('home-reading-duration-value');
    const readingWindowMeta = document.getElementById('home-reading-window-meta');

    promptApi = window.__termiCommandPrompt;
    const contentRanges = Array.isArray(contentRangesPayload) ? contentRangesPayload : [];
    const contentRangesMap = contentRanges.reduce((map, item) => {
      if (item?.key) {
        map[item.key] = item;
      }
      return map;
    }, {});

    const typeMeta = {
      all: { icon: 'fa-stream', label: t('common.all') },
      article: { icon: 'fa-file-alt', label: t('common.article') },
      tweet: { icon: 'fa-comment-dots', label: t('common.tweet') },
    };

    const state = {
      type: initialHomeState.type || 'all',
      category: initialHomeState.category || '',
      tag: initialHomeState.tag || '',
      range: initialHomeState.range || '7d',
    };

    function getActiveRange() {
      return contentRangesMap[state.range] || contentRanges[0] || {
        key: '7d',
        label: '7d',
        days: 7,
        overview: {
          pageViews: 0,
          readCompletes: 0,
          avgReadProgress: 0,
          avgReadDurationMs: undefined,
        },
      };
    }

    function syncPopularRangeButtons() {
      popularRangeButtons.forEach((button) => {
        button.classList.toggle(
          'is-active',
          (button.getAttribute('data-home-popular-range') || '7d') === state.range
        );
      });
    }

    function sortPopularCards(cards) {
      return [...cards].sort((left, right) => {
        const leftViews = Number(left.getAttribute('data-home-popular-views') || '0');
        const rightViews = Number(right.getAttribute('data-home-popular-views') || '0');
        if (rightViews !== leftViews) {
          return rightViews - leftViews;
        }

        const leftCompletes = Number(left.getAttribute('data-home-popular-completes') || '0');
        const rightCompletes = Number(right.getAttribute('data-home-popular-completes') || '0');
        if (rightCompletes !== leftCompletes) {
          return rightCompletes - leftCompletes;
        }

        return String(left.getAttribute('data-home-slug') || '').localeCompare(
          String(right.getAttribute('data-home-slug') || '')
        );
      });
    }

    function getActiveTokens() {
      return [
        state.type !== 'all' ? `type=${state.type}` : '',
        state.category ? `category=${state.category}` : '',
        state.tag ? `tag=${state.tag}` : '',
      ].filter(Boolean);
    }

    function syncPromptText(total) {
      const tokens = getActiveTokens();
      const discoverCommand = tokens.length
        ? t('home.promptDiscoverFiltered', { filters: tokens.join(' · ') })
        : t('home.promptDiscoverDefault');
      const postsCommand = tokens.length
        ? t('home.promptPostsFiltered', { count: Math.min(total, previewLimit), filters: tokens.join(' · ') })
        : t('home.promptPostsDefault', { count: Math.min(total, previewLimit) });
      promptApi?.set?.('home-discover-prompt', discoverCommand, { typing: false });
      promptApi?.set?.('home-posts-prompt', postsCommand, { typing: false });
    }

    function syncRangeMetrics(filteredPopularCount) {
      const activeRange = getActiveRange();

      if (popularCount) {
        popularCount.textContent = String(filteredPopularCount);
      }
      if (readingWindowPill) {
        readingWindowPill.textContent = activeRange.label || state.range;
      }
      if (readingViewsValue) {
        readingViewsValue.textContent = String(activeRange.overview?.pageViews ?? 0);
      }
      if (readingCompletesValue) {
        readingCompletesValue.textContent = String(activeRange.overview?.readCompletes ?? 0);
      }
      if (readingProgressValue) {
        readingProgressValue.textContent = `${Math.round(activeRange.overview?.avgReadProgress ?? 0)}%`;
      }
      if (readingDurationValue) {
        const durationValue = activeRange.overview?.avgReadDurationMs;
        if (!durationValue || durationValue <= 0) {
          readingDurationValue.textContent = document.documentElement.lang === 'en' ? 'N/A' : '暂无';
        } else if (durationValue < 1000) {
          readingDurationValue.textContent = `${Math.round(durationValue)} ms`;
        } else {
          const seconds = durationValue / 1000;
          if (seconds < 60) {
            readingDurationValue.textContent =
              document.documentElement.lang === 'en'
                ? `${seconds.toFixed(seconds >= 10 ? 0 : 1)}s`
                : `${seconds.toFixed(seconds >= 10 ? 0 : 1)} 秒`;
          } else {
            const minutes = Math.floor(seconds / 60);
            const restSeconds = Math.round(seconds % 60);
            readingDurationValue.textContent =
              document.documentElement.lang === 'en'
                ? `${minutes}m ${restSeconds}s`
                : `${minutes} 分 ${restSeconds} 秒`;
          }
        }
      }
      if (readingWindowMeta) {
        readingWindowMeta.textContent = t('home.statsWindowLabel', {
          label: activeRange.label || state.range,
        });
      }
    }

    function updateUrl() {
      const params = new URLSearchParams();
      if (state.type && state.type !== 'all') params.set('type', state.type);
      if (state.category) params.set('category', state.category);
      if (state.tag) params.set('tag', state.tag);
      const nextUrl = params.toString() ? `/?${params.toString()}` : '/';
      window.history.replaceState({}, '', nextUrl);
    }

    function syncActiveButtons() {
      typeButtons.forEach((button) => {
        button.classList.toggle('is-active', (button.getAttribute('data-home-type-filter') || 'all') === state.type);
      });

      categoryButtons.forEach((button) => {
        const value = (button.getAttribute('data-home-category-filter') || '').trim().toLowerCase();
        const activeValue = state.category.trim().toLowerCase();
        button.classList.toggle('is-active', Boolean(activeValue) && value === activeValue);
      });

      tagButtons.forEach((button) => {
        const value = (button.getAttribute('data-home-tag-filter') || '').trim().toLowerCase();
        const activeValue = state.tag.trim().toLowerCase();
        button.classList.toggle('is-active', Boolean(activeValue) && value === activeValue);
      });
    }

    function syncActiveSummary() {
      const hasActive = state.type !== 'all' || Boolean(state.category) || Boolean(state.tag);

      activeFilters?.classList.toggle('hidden', !hasActive);
      clearFilters?.classList.toggle('hidden', !hasActive);

      if (activeType && activeTypeIcon && activeTypeText) {
        const typeInfo = typeMeta[state.type] || typeMeta.all;
        activeType.classList.toggle('hidden', state.type === 'all');
        activeTypeIcon.className = `fas ${typeInfo.icon} text-[10px]`;
        activeTypeText.textContent = typeInfo.label;
      }

      if (activeCategory && activeCategoryText) {
        activeCategory.classList.toggle('hidden', !state.category);
        activeCategoryText.textContent = state.category;
        if (state.category) {
          activeCategory.setAttribute('style', categoryAccentMap[String(state.category).trim().toLowerCase()] || '');
        } else {
          activeCategory.removeAttribute('style');
        }
      }

      if (activeTag && activeTagText) {
        activeTag.classList.toggle('hidden', !state.tag);
        activeTagText.textContent = state.tag;
        if (state.tag) {
          activeTag.setAttribute('style', tagAccentMap[String(state.tag).trim().toLowerCase()] || '');
        } else {
          activeTag.removeAttribute('style');
        }
      }
    }

    function syncPostTagSelection() {
      if (!postsRoot) return;

      const activeValue = state.tag.trim().toLowerCase();
      const tagLinks = postsRoot.querySelectorAll('a[href*="tag="]');

      tagLinks.forEach((link) => {
        const href = link.getAttribute('href') || '';
        let tagValue = '';

        try {
          tagValue = new URL(href, window.location.origin).searchParams.get('tag')?.trim().toLowerCase() || '';
        } catch {
          tagValue = '';
        }

        link.classList.toggle('is-active', Boolean(activeValue) && tagValue === activeValue);
      });
    }

    function applyHomeFilters(pushHistory = true) {
      const filtered = postCards.filter((card) => {
        const type = card.getAttribute('data-home-type') || '';
        const category = (card.getAttribute('data-home-category') || '').trim().toLowerCase();
        const tags = `|${(card.getAttribute('data-home-tags') || '').trim().toLowerCase()}|`;
        const typeMatch = state.type === 'all' || type === state.type;
        const categoryMatch = !state.category || category === state.category.trim().toLowerCase();
        const tagMatch = !state.tag || tags.includes(`|${state.tag.trim().toLowerCase()}|`);
        return typeMatch && categoryMatch && tagMatch;
      });

      postCards.forEach((card) => card.classList.add('hidden'));
      filtered.slice(0, previewLimit).forEach((card) => card.classList.remove('hidden'));
      const filteredPopular = popularCards.filter((card) => {
        const range = card.getAttribute('data-home-range') || '7d';
        const type = card.getAttribute('data-home-type') || '';
        const category = (card.getAttribute('data-home-category') || '').trim().toLowerCase();
        const tags = `|${(card.getAttribute('data-home-tags') || '').trim().toLowerCase()}|`;
        const rangeMatch = range === state.range;
        const typeMatch = state.type === 'all' || type === state.type;
        const categoryMatch = !state.category || category === state.category.trim().toLowerCase();
        const tagMatch = !state.tag || tags.includes(`|${state.tag.trim().toLowerCase()}|`);
        return rangeMatch && typeMatch && categoryMatch && tagMatch;
      });
      const sortedPopular = sortPopularCards(filteredPopular);
      popularCards.forEach((card) => card.classList.add('hidden'));
      sortedPopular.slice(0, popularPreviewLimit).forEach((card, index) => {
        card.classList.remove('hidden');
        const rankLabel = card.querySelector('[data-home-popular-rank-label]');
        if (rankLabel) {
          rankLabel.textContent = String(index + 1);
        }
        popularList?.appendChild(card);
      });

      const total = filtered.length;
      const hasPinned = filtered.some((card) => card.getAttribute('data-home-pinned') === 'true');

      if (resultsCount) {
        resultsCount.textContent = t('common.resultsCount', { count: total });
      }
      if (discoveryResults) {
        discoveryResults.textContent = t('common.resultsCount', { count: total });
      }
      if (emptyState) {
        emptyState.classList.toggle('hidden', total > 0);
      }
      if (pinnedWrap) {
        pinnedWrap.classList.toggle('hidden', !hasPinned);
      }
      if (popularEmpty) {
        popularEmpty.classList.toggle('hidden', filteredPopular.length > 0);
      }

      syncActiveButtons();
      syncActiveSummary();
      syncPostTagSelection();
      syncPopularRangeButtons();
      syncRangeMetrics(filteredPopular.length);
      syncPromptText(total);

      if (pushHistory) {
        updateUrl();
      }
    }

    typeButtons.forEach((button) => {
      button.addEventListener('click', (event) => {
        event.preventDefault();
        state.type = button.getAttribute('data-home-type-filter') || 'all';
        applyHomeFilters();
      });
    });

    categoryButtons.forEach((button) => {
      button.addEventListener('click', (event) => {
        event.preventDefault();
        const nextValue = button.getAttribute('data-home-category-filter') || '';
        const normalizedCurrent = state.category.trim().toLowerCase();
        state.category = normalizedCurrent === nextValue.trim().toLowerCase() ? '' : nextValue;
        applyHomeFilters();
      });
    });

    tagButtons.forEach((button) => {
      button.addEventListener('click', (event) => {
        event.preventDefault();
        const nextValue = button.getAttribute('data-home-tag-filter') || '';
        const normalizedCurrent = state.tag.trim().toLowerCase();
        state.tag = normalizedCurrent === nextValue.trim().toLowerCase() ? '' : nextValue;
        applyHomeFilters();
      });
    });

    clearFilters?.addEventListener('click', (event) => {
      event.preventDefault();
      state.type = 'all';
      state.category = '';
      state.tag = '';
      applyHomeFilters();
    });

    popularRangeButtons.forEach((button) => {
      button.addEventListener('click', () => {
        state.range = button.getAttribute('data-home-popular-range') || '7d';
        applyHomeFilters(false);
      });
    });

    postsRoot?.addEventListener('click', (event) => {
      const target = event.target instanceof Element ? event.target.closest('a[href*="tag="]') : null;
      if (!target) return;

      const href = target.getAttribute('href') || '';

      try {
        const nextTag = new URL(href, window.location.origin).searchParams.get('tag') || '';
        if (!nextTag) return;
        event.preventDefault();
        const normalizedCurrent = state.tag.trim().toLowerCase();
        state.tag = normalizedCurrent === nextTag.trim().toLowerCase() ? '' : nextTag;
        applyHomeFilters();
      } catch {
        return;
      }
    });

    applyHomeFilters(false);
    document.body?.setAttribute('data-home-interactive-ready', 'true');
    window.__termiHomeReady = true;
  })();
</script>