---
import { getCollection } from 'astro:content';
import BaseLayout from '../../layouts/BaseLayout.astro';

export async function getStaticPaths() {
  const posts = await getCollection('blog', ({ data }) => !data.draft);
  const tags  = [...new Set(posts.flatMap(p => p.data.tags ?? []))];

  return tags.map(tag => ({
    params: { tag },
    props:  {
      tag,
      posts: posts
        .filter(p => p.data.tags?.includes(tag))
        .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()),
    },
  }));
}

const { tag, posts } = Astro.props;
---

<BaseLayout title={`#${tag}`} description={`All posts tagged ${tag}`}>
  <div class="tag-page">
    <div class="container page-hero">
      <a href="/blog" class="back-link font-mono">← all posts</a>
      <div class="accent-line" style="margin-top:1rem"></div>
      <h1>
        <span class="text-muted" style="font-weight:400">#</span>{tag}
      </h1>
      <p class="text-muted font-mono" style="font-size:0.85rem;margin-top:0.5rem">
        {posts.length} {posts.length === 1 ? 'entry' : 'entries'}
      </p>
    </div>

    <div class="container post-list">
      {posts.map(post => (
        <article class="card post-row">
          <a href={`/blog/${post.id}`} class="post-row-link">
            <div class="post-row-left">
              {post.data.day && (
                <div class="font-mono" style="font-size:0.7rem;color:var(--petronas-teal);letter-spacing:0.1em;margin-bottom:0.3rem">
                  entry_{String(post.data.day).padStart(3,'0')}
                </div>
              )}
              <h2 class="post-row-title">{post.data.title}</h2>
              <p class="text-muted post-row-desc">{post.data.description}</p>
              <div class="post-row-meta">
                <time class="font-mono text-muted" style="font-size:0.72rem">
                  {post.data.pubDate.toLocaleDateString('en-GB', { day:'numeric', month:'short', year:'numeric' })}
                </time>
                <div style="display:flex;gap:0.35rem;flex-wrap:wrap">
                  {(post.data.tags ?? []).map((t: string) => (
                    <a href={`/tags/${t}`} class="tag">{t}</a>
                  ))}
                </div>
              </div>
            </div>
            <div class="post-row-arrow text-accent font-display">→</div>
          </a>
        </article>
      ))}
    </div>
  </div>
</BaseLayout>

<style>
  .tag-page    { padding-top: 8rem; padding-bottom: 4rem; }
  .page-hero   { margin-bottom: 3rem; }

  .back-link {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    transition: color 150ms;
  }
  .back-link:hover { color: var(--petronas-teal); }

  .post-list   { display: flex; flex-direction: column; gap: 1rem; }
  .post-row    { padding: 0; }

  .post-row-link {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    color: inherit;
  }

  .post-row-left    { flex: 1; }
  .post-row-title   { font-size: 1.05rem; margin-bottom: 0.4rem; transition: color 150ms; }
  .post-row:hover .post-row-title { color: var(--petronas-teal); }
  .post-row-desc    { font-size: 0.85rem; line-height: 1.55; margin-bottom: 0.75rem; }

  .post-row-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .post-row-arrow {
    font-size: 1.5rem;
    opacity: 0.3;
    transition: opacity 150ms, transform 150ms;
    flex-shrink: 0;
  }
  .post-row:hover .post-row-arrow { opacity: 1; transform: translateX(4px); }
</style>