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

// Enable prerendering for this dynamic route
export const prerender = true;

// Generate static paths for all documentation pages
export async function getStaticPaths() {
  const docs = await getCollection('docs');
  return docs.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

// Get the documentation entry from props
const { entry } = Astro.props;
const { Content } = await entry.render();
---

<MainLayout title={entry.data.title}>
  <main class="max-w-5xl mx-auto px-4 py-12">
    <div class="sticky top-4 z-10 mb-6">
      <a
        href="/docs/"
        class="inline-flex items-center gap-2 px-3 py-1.5 rounded-md bg-card text-foreground hover:bg-muted transition-colors border border-border focus:ring-2 focus:ring-ring outline-none"
      >
        <span aria-hidden="true">&larr;</span> Back to Documentation
      </a>
    </div>
    <article class="bg-card rounded-2xl shadow-lg p-6 border border-border">
      <div class="prose prose-neutral dark:prose-invert prose-code:bg-muted prose-code:text-foreground prose-pre:bg-muted prose-pre:text-foreground prose-pre:rounded-lg prose-pre:p-4 prose-table:rounded-lg prose-table:bg-muted prose-th:text-foreground prose-td:text-muted-foreground prose-blockquote:border-l-4 prose-blockquote:border-muted prose-blockquote:bg-muted/50 prose-blockquote:p-4">
        <Content />
      </div>
    </article>
    <script type="module">
      // Mermaid diagram rendering for code blocks
      import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
      mermaid.initialize({ startOnLoad: false, theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default' });
      function renderMermaidDiagrams() {
        document.querySelectorAll('pre code.language-mermaid').forEach((block, i) => {
          const parent = block.parentElement;
          if (!parent) return;
          const code = block.textContent;
          const id = `mermaid-diagram-${i}`;
          const container = document.createElement('div');
          container.className = 'my-6';
          container.id = id;
          parent.replaceWith(container);
          mermaid.render(id, code, (svgCode) => {
            container.innerHTML = svgCode;
          });
        });
      }
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', renderMermaidDiagrams);
      } else {
        renderMermaidDiagrams();
      }
    </script>
  </main>
</MainLayout>
