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

const allPosts = (await getCollection('blog', ({ data }) => !data.draft))
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

// Group by tags for sidebar
const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
---

<BaseLayout title="Blog" description="Sysadmin chronicles — HPC, homelab, and everything in between">
  <div class="blog-page">
    <div class="blog-hero container">
      <div class="accent-line"></div>
      <h1>The <span class="text-accent">Log</span></h1>
      <p class="text-muted font-mono" style="font-size:0.9rem;margin-top:0.5rem">
        {allPosts.length} entries · HPC · homelab · infra · ops
      </p>
    </div>

    <div class="blog-layout container">
      <div class="post-list">
        {allPosts.map((post, i) => (
          <article class="post-row card">
            <a href={`/blog/${post.id}`} class="post-row-link">

              {/* Top row: entry badge + title stacked over description */}
              <div class="post-row-top">
                <div class="post-row-left">
                  {post.data.day && (
                    <div class="post-row-day font-mono">
                      entry_{String(post.data.day).padStart(3,'0')}
                    </div>
                  )}
                  <h2 class="post-row-title">{post.data.title}</h2>
                </div>
                <p class="text-muted post-row-desc">{post.data.description}</p>
              </div>

              {/* Bottom row: date + tags inline + MORE button */}
              <div class="post-row-meta">
                <time class="font-mono text-muted post-row-date">
                  {post.data.pubDate.toLocaleDateString('en-GB', {day:'numeric', month:'short', year:'numeric'})}
                </time>
                <div class="post-row-tags">
                  {(post.data.tags ?? []).map((t: string) => (
                    <a href={`/tags/${t}`} class="tag" onclick="event.stopPropagation()">{t}</a>
                  ))}
                </div>
                <a href={`/blog/${post.id}`} >
                <div class="post-row-more font-mono">MORE &rarr;</div>
                </a>
              </div>

            </a>
          </article>
        ))}
      </div>

      <!-- Sidebar -->
      <aside class="blog-sidebar">
        <div class="card" style="position:sticky;top:5.5rem">
          <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem">Navigate</p>
          <div style="display:flex;flex-direction:column;gap:0.35rem">
            <a href="/" class="text-muted font-mono" style="font-size:0.8rem">← Home</a>
            <a href="/homelab" class="text-muted font-mono" style="font-size:0.8rem">Homelab status</a>
            <a href="/hardware" class="text-muted font-mono" style="font-size:0.8rem">Hardware list</a>
          </div>
          <hr class="glow-divider" style="margin:1.5rem 0" />
          <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">Tags</p>

          <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
            {allTags.map(t => <a href={`/tags/${t}`} class="tag">{t}</a>)}
          </div>
          <hr class="glow-divider" style="margin:1.5rem 0" />
          <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">Posts</p>
          <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
            {allPosts.map(t => <a href={`/blog/${t}`} class="blog">{t}</a>)}
          </div>
        </div>
      </aside>
    </div>
  </div>
</BaseLayout>

<style>
  .blog-page { padding-top: 8rem; }

  .blog-hero { margin-bottom: 3.5rem; }

  .blog-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 3rem;
    align-items: start;
  }

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

  .post-row { padding: 0; }

  .post-row-link {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    color: inherit;
  }

  /* * FIXED: Top section now stacks the title and description in 2 rows 
   */
  .post-row-top {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .post-row-left { display: flex; flex-direction: column; gap: 0.25rem; }

  .post-row-day {
    font-size: 0.68rem;
    color: var(--petronas-teal);
    letter-spacing: 0.1em;
    opacity: 0.8;
  }

  .post-row-title {
    font-size: 1rem;
    line-height: 1.35;
    transition: color var(--transition-fast);
  }
  .post-row:hover .post-row-title { color: var(--petronas-teal); }

  .post-row-desc {
    font-size: 0.85rem;
    line-height: 1.55;
  }

  /* Bottom section: date + tags + button all on one line */
  .post-row-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
  }

  .post-row-date {
    font-size: 0.7rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .post-row-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    flex: 1;
  }

  /* * FIXED: Force the tag contents to center perfectly 
   * (You can move this to your global CSS file if `.tag` is shared globally)
   */
  .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
  }

  /* * FIXED: Replaced arrow with a styled 'MORE' button
   */
  .post-row-more {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-muted);
    transition: all var(--transition-fast);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 20px;
    display: flex;
    align-items: center;
  }
  .post-row:hover .post-row-more { 
    border-color: var(--petronas-teal);
    color: var(--petronas-teal);
  }

  @media (max-width: 768px) {
    .blog-layout  { grid-template-columns: 1fr; }
    .blog-sidebar { display: none; }
    .post-row-meta { flex-wrap: wrap; }
    .post-row-more { margin-left: 0; } /* Optional: push button to left on mobile if wrapped */
  }
</style>