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

export async function getStaticPaths() {
  const docs = await getCollection('docs');
  return docs.map((entry) => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();
const currentSlug = entry.slug;

const sections = [
  {
    title: 'Getting Started',
    items: [
      { label: 'Installation', slug: 'getting-started/installation' },
      { label: 'Quick Start', slug: 'getting-started/quickstart' },
      { label: 'Setup', slug: 'getting-started/setup' },
      { label: 'Configuration', slug: 'getting-started/configuration' },
    ],
  },
  {
    title: 'Workflows',
    items: [
      { label: 'Deep Research', slug: 'workflows/deep-research' },
      { label: 'Literature Review', slug: 'workflows/literature-review' },
      { label: 'Peer Review', slug: 'workflows/review' },
      { label: 'Code Audit', slug: 'workflows/audit' },
      { label: 'Replication', slug: 'workflows/replication' },
      { label: 'Source Comparison', slug: 'workflows/compare' },
      { label: 'Draft Writing', slug: 'workflows/draft' },
      { label: 'Autoresearch', slug: 'workflows/autoresearch' },
      { label: 'Watch', slug: 'workflows/watch' },
    ],
  },
  {
    title: 'Agents',
    items: [
      { label: 'Researcher', slug: 'agents/researcher' },
      { label: 'Reviewer', slug: 'agents/reviewer' },
      { label: 'Writer', slug: 'agents/writer' },
      { label: 'Verifier', slug: 'agents/verifier' },
    ],
  },
  {
    title: 'Tools',
    items: [
      { label: 'AlphaXiv', slug: 'tools/alphaxiv' },
      { label: 'Web Search', slug: 'tools/web-search' },
      { label: 'Session Search', slug: 'tools/session-search' },
      { label: 'Preview', slug: 'tools/preview' },
    ],
  },
  {
    title: 'Reference',
    items: [
      { label: 'CLI Commands', slug: 'reference/cli-commands' },
      { label: 'Slash Commands', slug: 'reference/slash-commands' },
      { label: 'Package Stack', slug: 'reference/package-stack' },
    ],
  },
];
---

<Layout title={`${entry.data.title} — Feynman Docs`} description={entry.data.description} active="docs">
  <div class="max-w-6xl mx-auto px-6">
    <div class="flex gap-8">
      <aside id="sidebar" class="w-64 shrink-0 h-[calc(100vh-3.5rem)] sticky top-14 overflow-y-auto py-6 pr-4 hidden lg:block border-r border-border">
        {sections.map((section) => (
          <div class="mb-6">
            <div class="text-xs font-semibold text-primary uppercase tracking-wider px-3 mb-2">{section.title}</div>
            {section.items.map((item) => (
              <a
                href={`/docs/${item.slug}`}
                class:list={[
                  'block px-3 py-1.5 text-sm border-l-[2px] transition-colors',
                  currentSlug === item.slug
                    ? 'border-primary text-foreground'
                    : 'border-transparent text-muted-foreground hover:text-foreground',
                ]}
              >
                {item.label}
              </a>
            ))}
          </div>
        ))}
      </aside>

      <button id="mobile-menu-btn" class="lg:hidden fixed bottom-6 right-6 z-40 p-3 rounded-full bg-primary text-primary-foreground shadow-lg" aria-label="Toggle sidebar">
        <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

      <div id="mobile-overlay" class="hidden fixed inset-0 bg-black/50 z-30 lg:hidden"></div>

      <article class="flex-1 min-w-0 py-8 max-w-3xl">
        <h1 class="text-3xl font-bold mb-8 tracking-tight">{entry.data.title}</h1>
        <div class="prose">
          <Content />
        </div>
      </article>
    </div>
  </div>

  <script is:inline>
    (function() {
      function init() {
        var btn = document.getElementById('mobile-menu-btn');
        var sidebar = document.getElementById('sidebar');
        var overlay = document.getElementById('mobile-overlay');
        if (btn && sidebar && overlay) {
          function toggle() {
            sidebar.classList.toggle('hidden');
            sidebar.classList.toggle('fixed');
            sidebar.classList.toggle('inset-0');
            sidebar.classList.toggle('z-40');
            sidebar.classList.toggle('bg-background');
            sidebar.classList.toggle('w-full');
            sidebar.classList.toggle('p-6');
            overlay.classList.toggle('hidden');
          }
          btn.addEventListener('click', toggle);
          overlay.addEventListener('click', toggle);
        }

        document.querySelectorAll('.prose pre').forEach(function(pre) {
          if (pre.querySelector('.copy-code')) return;
          var copyBtn = document.createElement('button');
          copyBtn.className = 'copy-code';
          copyBtn.setAttribute('aria-label', 'Copy code');
          copyBtn.innerHTML = '<svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
          pre.appendChild(copyBtn);
          copyBtn.addEventListener('click', function() {
            var code = pre.querySelector('code');
            var text = code ? code.textContent : pre.textContent;
            navigator.clipboard.writeText(text);
            copyBtn.innerHTML = '<svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg>';
            setTimeout(function() {
              copyBtn.innerHTML = '<svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
            }, 2000);
          });
        });
      }
      init();
      document.addEventListener('astro:after-swap', init);
    })();
  </script>
</Layout>
