---
import BaseLayout from '../layouts/BaseLayout.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 FriendLinkCard from '../components/FriendLinkCard.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 type { AppFriendLink } from '../lib/api/client';
import type { 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;

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>> = [];
let apiError: string | null = null;
const { locale, t } = getI18n(Astro);

try {
  const [settings, posts, rawTags, rawFriendLinks, nextCategories] = await Promise.all([
    api.getSiteSettings(),
    api.getPosts(),
    api.getTags(),
    api.getFriendLinks(),
    api.getCategories(),
  ]);

  siteSettings = settings;
  allPosts = posts;
  tags = rawTags.map(tag => tag.name);
  friendLinks = rawFriendLinks.filter(friend => friend.status === 'approved');
  categories = nextCategories;

  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 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 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 navLinks = [
  { icon: 'fa-file-code', text: t('nav.articles'), href: '/articles' },
  { icon: 'fa-folder', text: t('nav.categories'), href: '/categories' },
  { 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' },
  { icon: 'fa-user-secret', text: t('nav.about'), href: '/about' },
  ...(siteSettings.ai.enabled ? [{ icon: 'fa-robot', text: t('nav.ask'), href: '/ask' }] : []),
];
---

<BaseLayout title={siteSettings.siteTitle} description={siteSettings.siteDescription} siteSettings={siteSettings}>
  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <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">
          <div class="min-w-0">
            <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>

          <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.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 class="ml-4 mt-4 home-nav-strip">
          {navLinks.map(link => (
            <a href={link.href} class="home-nav-pill">
              <i class={`fas ${link.icon} text-[11px]`}></i>
              <span>{link.text}</span>
            </a>
          ))}
        </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 id="discover" class="mb-6 px-4">
        <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', 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">{postTypeFilters.find((item) => item.id === selectedType)?.name || selectedType}</span>
            </span>
            <span
              id="home-active-category"
              class:list={['terminal-chip terminal-chip--accent', !selectedCategory && 'hidden']}
              style={selectedCategory ? getAccentVars(getCategoryTheme(selectedCategory)) : undefined}
            >
              <i class="fas fa-folder-open text-[10px]"></i>
              <span id="home-active-category-text">{selectedCategory}</span>
            </span>
            <span
              id="home-active-tag"
              class:list={['terminal-chip terminal-chip--accent', !selectedTag && 'hidden']}
              style={selectedTag ? getAccentVars(getTagTheme(selectedTag)) : undefined}
            >
              <i class="fas fa-hashtag text-[10px]"></i>
              <span id="home-active-tag-text">{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 class="mb-6 px-4">
          <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="flex items-center gap-2 mb-2">
                <span class="px-2 py-0.5 text-xs rounded bg-[var(--primary)] text-[var(--terminal-bg)] font-bold">{t('home.pinned')}</span>
                <span class="terminal-chip terminal-chip--accent text-[10px] py-1 px-2" 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="text-sm text-[var(--text-secondary)] mb-2">{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" class="mb-10 px-4">
        <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 class="border-t border-[var(--border-color)] my-8"></div>

      <div id="friends" class="mb-8 px-4">
        <CommandPrompt command={t('home.promptFriends')} />
        <div class="ml-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {friendLinks.map(friend => (
            <FriendLinkCard friend={friend} />
          ))}
        </div>
        <div class="mt-6 ml-4">
          <ViewMoreLink href="/friends" text={t('common.viewAllLinks')} command="cd ~/friends" />
        </div>
      </div>

      <div class="border-t border-[var(--border-color)] my-8"></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>
    </TerminalWindow>
  </div>
</BaseLayout>

<script
  is:inline
  define:vars={{
    previewLimit,
    categoryAccentMap,
    tagAccentMap,
    initialHomeState: {
      type: selectedType,
      category: selectedCategory,
      tag: selectedTag,
    },
  }}
>
  (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');

    promptApi = window.__termiCommandPrompt;

    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 || '',
    };

    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 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 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);
      }

      syncActiveButtons();
      syncActiveSummary();
      syncPostTagSelection();
      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();
    });

    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);
  })();
</script>