---
import { apiClient } from '../lib/api/client';
import { getI18n } from '../lib/i18n';
import { getAccentVars, getCategoryTheme, getPostTypeTheme, getTagTheme } from '../lib/utils';

interface Props {
  currentSlug: string;
  currentCategory: string;
  currentTags: string[];
}

const { currentSlug, currentCategory, currentTags } = Astro.props;
const { t } = getI18n(Astro);

const allPosts = await apiClient.getPosts();

const relatedPosts = allPosts
  .filter(post => post.slug !== currentSlug)
  .map(post => {
    let score = 0;

    if (post.category === currentCategory) {
      score += 3;
    }

    const sharedTags = post.tags.filter(tag => currentTags.includes(tag));
    score += sharedTags.length * 2;

    return { ...post, score, sharedTags };
  })
  .sort((a, b) => b.score - a.score)
  .slice(0, 3);
---

{relatedPosts.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-diagram-project"></i>
            {t('relatedPosts.kicker')}
          </span>
          <div class="terminal-section-title">
            <span class="terminal-section-icon">
              <i class="fas fa-share-nodes"></i>
            </span>
            <div>
              <h3 class="text-xl font-semibold text-[var(--title-color)]">{t('relatedPosts.title')}</h3>
              <p class="text-sm text-[var(--text-secondary)]">
                {t('relatedPosts.description')}
              </p>
            </div>
          </div>
        </div>

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

      <div class="grid gap-4 md:grid-cols-3">
        {relatedPosts.map(post => (
          <a
            href={`/articles/${post.slug}`}
            class="terminal-panel-muted terminal-panel-accent terminal-interactive-card group flex h-full flex-col gap-3 p-4"
            style={getAccentVars(getPostTypeTheme(post.type))}
          >
            <div class="flex items-start justify-between gap-3">
              <div class="space-y-2">
                <span class="terminal-chip terminal-chip--accent px-2.5 py-1 text-xs" style={getAccentVars(getPostTypeTheme(post.type))}>
                  {post.type === 'article' ? t('common.article') : t('common.tweet')}
                </span>
                <h4 class="text-base font-semibold text-[var(--title-color)] group-hover:text-[var(--primary)]">
                  {post.title}
                </h4>
              </div>
              <i class="fas fa-arrow-up-right-from-square text-sm text-[var(--text-tertiary)] transition-colors group-hover:text-[var(--primary)]"></i>
            </div>

            <p class="text-sm leading-7 text-[var(--text-secondary)]">{post.description}</p>

            <div class="mt-auto flex flex-wrap items-center gap-2 pt-2">
              <span class="terminal-stat-pill px-2.5 py-1 text-xs">
                <i class="far fa-calendar text-[var(--primary)]"></i>
                {post.date}
              </span>
              <span class="terminal-chip terminal-chip--accent px-2.5 py-1 text-xs" style={getAccentVars(getCategoryTheme(post.category))}>
                <i class="fas fa-folder-tree text-[11px]"></i>
                {post.category}
              </span>
              {post.sharedTags.length > 0 && (
                post.sharedTags.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>
)}
