---
import BaseLayout from './BaseLayout.astro';

interface Props {
  title: string;
  description: string;
  pubDate: Date;
  tags?: string[];
  day?: number;
}

const { title, description, pubDate, tags = [], day } = Astro.props;

const formatted = pubDate.toLocaleDateString('en-GB', {
  day: 'numeric', month: 'long', year: 'numeric'
});
---

<BaseLayout title={title} description={description}>
  <article class="post-wrapper">
    <div class="post-hero container">
      {day && (
        <div class="day-badge font-mono">
          <span class="text-muted">entry_</span>{String(day).padStart(3, '0')}
        </div>
      )}
      <h1 class="post-title">{title}</h1>
      <p class="post-description text-muted">{description}</p>
      <div class="post-meta">
        <time class="font-mono text-muted" datetime={pubDate.toISOString()}>{formatted}</time>
        <div class="post-tags">
          {tags.map(tag => <span class="tag">{tag}</span>)}
        </div>
      </div>
    </div>

    <hr class="glow-divider" />

    <div class="post-body container">
      <div class="prose">
        <slot />
      </div>
      <aside class="post-sidebar">
        <div class="card sidebar-card">
          <p class="font-display" style="font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">On this page</p>
          <div id="toc-placeholder" class="font-mono text-muted" style="font-size:0.78rem">
            <!-- populated by JS -->
          </div>
        </div>
        {tags.length > 0 && (
          <div class="card sidebar-card" style="margin-top:1rem">
            <p class="font-display" style="font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem">Tags</p>
            <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
              {tags.map(tag => <span class="tag">{tag}</span>)}
            </div>
          </div>
        )}
        <a href="/blog" class="btn btn-primary" style="margin-top:1rem;width:100%;justify-content:center">← All posts</a>
      </aside>
    </div>
  </article>
</BaseLayout>

<script>
  // Auto-generate TOC from headings
  const toc = document.getElementById('toc-placeholder');
  if (toc) {
    const headings = document.querySelectorAll('.prose h2, .prose h3');
    if (headings.length === 0) {
      toc.textContent = '—';
    } else {
      headings.forEach((h, i) => {
        if (!h.id) h.id = `heading-${i}`;
        const a = document.createElement('a');
        a.href = `#${h.id}`;
        a.textContent = (h.tagName === 'H3' ? '  · ' : '') + h.textContent;
        a.style.cssText = 'display:block;color:var(--text-muted);margin-bottom:0.4rem;font-size:0.75rem;transition:color 150ms';
        a.addEventListener('mouseenter', () => a.style.color = 'var(--petronas-teal)');
        a.addEventListener('mouseleave', () => a.style.color = 'var(--text-muted)');
        toc.appendChild(a);
      });
    }
  }
</script>

<style>
  .post-wrapper { padding-top: 8rem; padding-bottom: 4rem; }

  .post-hero { max-width: 900px; }

  .day-badge {
    font-size: 0.85rem;
    color: var(--petronas-teal);
    margin-bottom: 1rem;
    letter-spacing: 0.08em;
  }

  .post-title { margin-bottom: 1rem; }

  .post-description {
    font-size: 1.15rem;
    max-width: 65ch;
    margin-bottom: 1.5rem;
  }

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

  .post-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }

  .post-body {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 4rem;
    align-items: start;
  }

  .sidebar-card { position: sticky; top: 6rem; }

  @media (max-width: 900px) {
    .post-body { grid-template-columns: 1fr; }
    .post-sidebar { display: none; }
  }
</style>
