---
import Layout from '../layouts/Layout.astro';
import fs from 'node:fs';
import path from 'node:path';
import { marked } from 'marked';

// Read post.md from project root
const postPath = path.resolve(process.cwd(), '../post.md');
const markdown = fs.readFileSync(postPath, 'utf-8');

// Extract h2 and h3 headings for TOC
const tocEntries: { text: string; slug: string; level: number }[] = [];
const headingRegex = /^(#{2,3})\s+(.+)$/gm;
let match;
while ((match = headingRegex.exec(markdown)) !== null) {
  const text = match[2];
  const slug = text.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
  tocEntries.push({ text, slug, level: match[1].length });
}

// Custom renderer to add ids to headings
const renderer = new marked.Renderer();
renderer.heading = function({ text, depth }: { text: string; depth: number }) {
  const slug = text.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
  const tag = `h${depth}`;
  return `<${tag} id="${slug}">${text}</${tag}>`;
};

const html = marked(markdown, { renderer }) as string;
---

<Layout title="mandex — About">
  <div class="flex-1 flex flex-col min-h-0 overflow-y-auto" id="about-scroll-container">
    <!-- Back link -->
    <div
      class="shrink-0 px-5 py-2.5 border-b"
      style="border-color: var(--color-border);"
    >
      <a
        href="/"
        class="inline-flex items-center gap-1.5 text-[13px] font-mono transition-opacity hover:opacity-70"
        style="color: var(--color-text-secondary);"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
          <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
        </svg>
        Back
      </a>
    </div>

    <!-- Header -->
    <div class="shrink-0 px-5 py-5 border-b" style="border-color: var(--color-border);">
      <div class="flex items-center gap-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: var(--color-text-tertiary);">
          <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
        </svg>
        <span
          class="text-[11px] font-mono font-medium uppercase tracking-widest"
          style="color: var(--color-text-tertiary);"
        >
          About
        </span>
      </div>
    </div>

    <!-- Two-column layout -->
    <div class="flex flex-1 min-h-0">
      <!-- TOC sidebar (20%) -->
      <aside class="hidden md:flex shrink-0 basis-[20%] border-r overflow-y-auto justify-end" style="border-color: var(--color-border);">
        <nav class="sticky top-0 py-8 px-8 w-full max-w-xs">
          <ul class="space-y-3">
            {tocEntries.map((entry) => (
              <li>
                <a
                  href={`#${entry.slug}`}
                  class={`toc-link text-[14px] font-mono block py-0.5 transition-colors ${entry.level === 3 ? 'pl-3' : ''}`}
                  style="color: var(--color-text-tertiary);"
                  data-level={entry.level}
                >
                  {entry.text}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      </aside>

      <!-- Content (80%) -->
      <div class="basis-[80%] flex-1 min-w-0 overflow-y-auto px-5 md:px-8 py-8" id="about-content">
        <div class="prose" set:html={html} />
      </div>
    </div>
  </div>

  <script is:inline>
    (function() {
      var headings = document.querySelectorAll('.prose h2[id], .prose h3[id]');
      var tocLinks = document.querySelectorAll('.toc-link');

      if (!headings.length || !tocLinks.length) return;

      var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            tocLinks.forEach(function(link) {
              var isActive = link.getAttribute('href') === '#' + entry.target.id;
              link.style.color = isActive ? 'var(--color-text)' : 'var(--color-text-tertiary)';
              link.style.borderLeft = isActive ? '2px solid var(--color-text)' : '2px solid transparent';
              link.style.paddingLeft = isActive ? '8px' : '8px';
            });
          }
        });
      }, {
        rootMargin: '-80px 0px -60% 0px',
        threshold: 0
      });

      headings.forEach(function(h) { observer.observe(h); });

      // Initialize border style on all links
      tocLinks.forEach(function(link) {
        link.style.borderLeft = '2px solid transparent';
        link.style.paddingLeft = '8px';
      });
    })();
  </script>
</Layout>
