---
import type { MarkdownHeading } from 'astro';
import Layout from './Layout.astro';
import Icon from '../components/Icon.astro';
import CTA from '../components/CTA.astro';
import { formatDate, isoDate, readingTimeOf, type BlogPost } from '../lib/blog';

interface Props {
  post: BlogPost;
  prev?: BlogPost;
  next?: BlogPost;
  headings?: MarkdownHeading[];
}
const { post, prev, next, headings = [] } = Astro.props;
const { title, description, pubDate, updatedDate, author, tags } = post.data;
const reading = readingTimeOf(post);
const chapters = headings.filter((h) => h.depth === 2);

const siteOrigin = (Astro.site ?? new URL('https://warmbly.com')).toString().replace(/\/$/, '');
const canonical = new URL(Astro.url.pathname, Astro.site ?? 'https://warmbly.com').toString();

const articleJsonLd = {
  '@context': 'https://schema.org',
  '@type': 'BlogPosting',
  headline: title,
  description,
  image: `${siteOrigin}/og-image.png`,
  datePublished: pubDate.toISOString(),
  dateModified: (updatedDate ?? pubDate).toISOString(),
  author:
    author === 'Warmbly team'
      ? { '@id': `${siteOrigin}#org` }
      : { '@type': 'Person', name: author },
  publisher: { '@id': `${siteOrigin}#org` },
  mainEntityOfPage: { '@type': 'WebPage', '@id': canonical },
  isAccessibleForFree: true,
};

const neighbors = [
  prev ? { label: 'Previously', post: prev } : null,
  next ? { label: 'Up next', post: next } : null,
].filter(Boolean) as { label: string; post: BlogPost }[];
---
<Layout title={`${title} | Warmbly Blog`} description={description} ogType="article" jsonLd={articleJsonLd}>
  <!-- TOP BAR: sticky under the site header, carries the reading progress -->
  <div class="sticky top-14 z-30 bg-white/90 backdrop-blur-md border-b border-[color:var(--border)]">
    <div class="container-page py-3 flex items-center justify-between text-[11.5px] font-mono">
      <a href="/blog/" class="inline-flex items-center gap-1.5 text-muted-foreground hover:text-foreground transition-colors">
        <Icon name="arrowRight" size={11} class="rotate-180" />
        Blog
      </a>
      <div class="flex items-center gap-4 text-muted-foreground">
        <span class="hidden sm:inline">{isoDate(pubDate)}</span>
        <span class="hidden sm:inline w-1 h-1 rounded-full bg-[color:var(--border)]"></span>
        <span>{reading}</span>
        {updatedDate && <span class="hidden md:inline w-1 h-1 rounded-full bg-[color:var(--border)]"></span>}
        {updatedDate && <span class="hidden md:inline">Updated {isoDate(updatedDate)}</span>}
      </div>
    </div>
    <div class="reading-progress" data-reading-progress></div>
  </div>

  <article class="bg-white">
    <!-- HEADER -->
    <header class="border-b border-[color:var(--border)]">
      <div class="container-page py-12 md:py-16">
        <div class="max-w-[820px]">
          <div class="flex items-center gap-3 flex-wrap mb-4">
            <span class="text-[10.5px] uppercase tracking-[0.22em] font-mono text-[#0284c7]">Blog</span>
            {tags.map((tag) => (
              <a href={`/blog/tag/${tag}/`} class="inline-flex items-center h-5 px-2 rounded-full text-[10.5px] font-mono uppercase tracking-[0.1em] bg-sky-50 text-sky-700 hover:bg-sky-100 transition-colors">{tag}</a>
            ))}
          </div>
          <h1 class="text-[36px] md:text-[52px] font-semibold tracking-[-0.03em] leading-[1.05] text-heading">{title}</h1>
          <p class="mt-4 text-[16px] md:text-[17px] text-foreground/70 max-w-2xl leading-relaxed">{description}</p>
          <div class="mt-6 flex items-center gap-3 text-[12.5px] text-muted-foreground">
            <img src="/brand/social-avatar.jpg" alt="" width="24" height="24" class="w-6 h-6 rounded-full ring-1 ring-[color:var(--border)]" loading="lazy" />
            <span class="font-medium text-foreground/80">{author}</span>
            <span class="w-1 h-1 rounded-full bg-[color:var(--border)]"></span>
            <time datetime={pubDate.toISOString()}>{formatDate(pubDate)}</time>
          </div>
        </div>
      </div>
    </header>

    <!-- BODY: prose column + sticky right rail -->
    <div class="container-page py-12 md:py-16">
      <div class="grid lg:grid-cols-[minmax(0,1fr)_240px] xl:grid-cols-[minmax(0,1fr)_260px] gap-12 xl:gap-16 items-start">
        <div class="article-prose max-w-[720px] min-w-0" data-article-body>
          <slot />
        </div>

        <!-- RIGHT RAIL -->
        <aside class="hidden lg:flex flex-col gap-7 sticky top-[6.25rem]">
          {chapters.length > 0 && (
            <div>
              <div class="text-[10.5px] uppercase tracking-[0.22em] font-mono text-muted-foreground mb-4">On this page</div>
              <ol class="space-y-px text-[13px]" data-chapter-rail>
                {chapters.map((h, i) => (
                  <li>
                    <a
                      href={`#${h.slug}`}
                      data-chapter-link={h.slug}
                      class="group flex items-baseline gap-3 py-1.5 px-2 -mx-2 rounded-md transition-colors duration-300 ease-out text-foreground/60 hover:text-[#0369a1]"
                    >
                      <span class="font-mono text-[10.5px] w-5 shrink-0 text-muted-foreground/55">{String(i + 1).padStart(2, '0')}</span>
                      <span class="leading-snug line-clamp-2">{h.text}</span>
                    </a>
                  </li>
                ))}
              </ol>
            </div>
          )}

          <div class={chapters.length > 0 ? 'pt-6 border-t border-[color:var(--border)]' : ''}>
            <div class="text-[10.5px] uppercase tracking-[0.22em] font-mono text-muted-foreground mb-4">About this post</div>
            <dl class="space-y-3 text-[12.5px]">
              <div class="flex items-baseline justify-between gap-3">
                <dt class="font-mono text-[11px] text-muted-foreground">Published</dt>
                <dd class="text-foreground/75">{formatDate(pubDate)}</dd>
              </div>
              {updatedDate && (
                <div class="flex items-baseline justify-between gap-3">
                  <dt class="font-mono text-[11px] text-muted-foreground">Updated</dt>
                  <dd class="text-foreground/75">{formatDate(updatedDate)}</dd>
                </div>
              )}
              <div class="flex items-baseline justify-between gap-3">
                <dt class="font-mono text-[11px] text-muted-foreground">Length</dt>
                <dd class="text-foreground/75">{reading}</dd>
              </div>
              <div class="flex items-baseline justify-between gap-3">
                <dt class="font-mono text-[11px] text-muted-foreground">By</dt>
                <dd class="text-foreground/75">{author}</dd>
              </div>
            </dl>
            {tags.length > 0 && (
              <div class="mt-4 flex items-center gap-2 flex-wrap">
                {tags.map((tag) => (
                  <a href={`/blog/tag/${tag}/`} class="inline-flex items-center h-5 px-2 rounded-full text-[10.5px] font-mono uppercase tracking-[0.1em] bg-sky-50 text-sky-700 hover:bg-sky-100 transition-colors">{tag}</a>
                ))}
              </div>
            )}
          </div>

          <div class="pt-6 border-t border-[color:var(--border)]">
            <div class="text-[10.5px] uppercase tracking-[0.22em] font-mono text-muted-foreground mb-4">Keep reading</div>
            <div class="flex flex-col gap-2.5">
              {neighbors.map(({ post: n }) => (
                <a href={`/blog/${n.id}/`} class="group text-[13px] leading-snug text-foreground/70 hover:text-[#0369a1] transition-colors">
                  {n.data.title}
                </a>
              ))}
              <a href="/blog/" class="text-[13px] leading-snug text-foreground/70 hover:text-[#0369a1] transition-colors">All posts</a>
            </div>
            <a href="/blog/rss.xml" class="mt-5 inline-flex items-center gap-2 text-[11.5px] font-mono text-[#0369a1] hover:text-[#075985]">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M4 11a9 9 0 0 1 9 9" /><path d="M4 4a16 16 0 0 1 16 16" /><circle cx="5" cy="19" r="1" />
              </svg>
              Subscribe via RSS
            </a>
          </div>
        </aside>
      </div>
    </div>

    <!-- PREVIOUS / NEXT -->
    {neighbors.length > 0 && (
      <footer class="border-t border-[color:var(--border)]">
        <div class="container-page py-12">
          <div class="text-[10.5px] uppercase tracking-[0.22em] font-mono text-muted-foreground mb-5">More from the blog</div>
          <div class="grid sm:grid-cols-2 gap-3">
            {neighbors.map(({ label, post: n }) => (
              <a href={`/blog/${n.id}/`} class="group flex items-center justify-between p-5 rounded-[12px] bg-[color:var(--surface-2)] ring-1 ring-[color:var(--border)] hover:ring-[#0284c7]/40 hover:bg-white transition-all">
                <div class="min-w-0">
                  <div class="text-[10.5px] font-mono text-muted-foreground">{label} · {isoDate(n.data.pubDate)}</div>
                  <div class="mt-1 text-[15px] font-semibold text-heading group-hover:text-[#0369a1] transition-colors leading-snug">{n.data.title}</div>
                </div>
                <Icon name="arrowRight" size={14} class="shrink-0 ml-4 text-muted-foreground group-hover:text-[#0369a1] group-hover:translate-x-0.5 transition-all" />
              </a>
            ))}
          </div>
        </div>
      </footer>
    )}
  </article>

  <CTA />

  <script is:inline>
    // Reading progress, hover anchors on H2s, and rail scroll-spy.
    // Markdown headings already have server-generated ids.
    (function () {
      var body = document.querySelector('[data-article-body]');
      var bar = document.querySelector('[data-reading-progress]');

      if (body) {
        body.querySelectorAll('h2[id]').forEach(function (h2) {
          var a = document.createElement('a');
          a.href = '#' + h2.id;
          a.className = 'heading-anchor';
          a.textContent = '#';
          a.setAttribute('aria-label', 'Link to this section');
          h2.appendChild(a);
        });
      }

      if (body && bar) {
        var raf = 0;
        var update = function () {
          var rect = body.getBoundingClientRect();
          var total = rect.height - window.innerHeight;
          var read = Math.min(Math.max(-rect.top, 0), Math.max(total, 1));
          bar.style.width = (total > 0 ? (read / total) * 100 : 100) + '%';
        };
        update();
        window.addEventListener('scroll', function () {
          if (raf) return;
          raf = requestAnimationFrame(function () { raf = 0; update(); });
        }, { passive: true });
      }

      // Scroll-spy for the right rail.
      var links = Array.prototype.slice.call(document.querySelectorAll('[data-chapter-link]'));
      if (body && links.length) {
        var h2s = Array.prototype.slice.call(body.querySelectorAll('h2[id]'));
        var baseClass = 'group flex items-baseline gap-3 py-1.5 px-2 -mx-2 rounded-md transition-colors duration-300 ease-out';
        var currentId = null;
        var setActive = function (id) {
          if (id === currentId) return;
          currentId = id;
          links.forEach(function (l) {
            var active = l.getAttribute('data-chapter-link') === id;
            l.className = baseClass + (active ? ' text-[#0369a1] font-semibold' : ' text-foreground/60 hover:text-[#0369a1]');
          });
        };
        var onScroll = function () {
          var probe = window.innerHeight * 0.35;
          var active = h2s.length ? h2s[0].id : null;
          for (var i = 0; i < h2s.length; i++) {
            var rect = h2s[i].getBoundingClientRect();
            if (rect.top - probe <= 0) active = h2s[i].id; else break;
          }
          if (active) setActive(active);
        };
        onScroll();
        var raf2 = 0;
        window.addEventListener('scroll', function () {
          if (raf2) return;
          raf2 = requestAnimationFrame(function () { raf2 = 0; onScroll(); });
        }, { passive: true });
      }
    })();
  </script>
</Layout>
