---
import BaseLayout from './BaseLayout.astro';
import Header from '../components/Header.astro';
import Sidebar from '../components/Sidebar.astro';
import Footer from '../components/Footer.astro';
import TableOfContents from '../components/TableOfContents.astro';
import { NAV_SECTIONS } from '../navigation';

interface Props {
  title: string;
  description?: string;
  currentSlug?: string;
  updatedAt?: Date;
  prevPage?: { title: string; slug: string } | null;
  nextPage?: { title: string; slug: string } | null;
}

const { title, description, currentSlug, updatedAt, prevPage, nextPage } = Astro.props;

// Derive section name from the URL path for Pagefind metadata
const sectionDir = currentSlug?.split('/')[0] || '';
const navSection = NAV_SECTIONS.find(s => s.dir === sectionDir);
const section = navSection?.title || 'Docs';

const editUrl = currentSlug
  ? `https://github.com/bradygaster/squad/edit/dev/docs/src/content/docs/${currentSlug}.md`
  : null;
---

<BaseLayout title={title} description={description}>
  <Header />
  <div class="docs-layout">
    <Sidebar currentSlug={currentSlug} />
    <main class="flex-1 min-w-0">
      <div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
        <div class="lg:flex lg:gap-8">
          <div class="flex-1 min-w-0">
            <article class="prose" data-pagefind-body data-pagefind-meta={`section:${section}`}>
              <slot />
            </article>

            {updatedAt && (
              <p class="mt-4 text-xs text-surface-500 dark:text-surface-400">
                Last updated: {updatedAt.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
              </p>
            )}

            <!-- Prev/Next navigation -->
            {(prevPage || nextPage) && (
              <nav class="mt-8 pt-6 border-t border-surface-200 dark:border-surface-700 flex justify-between gap-4" aria-label="Page navigation" data-pagefind-ignore>
                {prevPage ? (
                  <a href={`${import.meta.env.BASE_URL}docs/${prevPage.slug}/`} class="flex items-center gap-2 text-sm text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors">
                    <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
                    </svg>
                    <span>{prevPage.title}</span>
                  </a>
                ) : <span />}
                {nextPage && (
                  <a href={`${import.meta.env.BASE_URL}docs/${nextPage.slug}/`} class="flex items-center gap-2 text-sm text-surface-500 dark:text-surface-400 hover:text-squad-600 dark:hover:text-squad-400 transition-colors ml-auto">
                    <span>{nextPage.title}</span>
                    <svg class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                    </svg>
                  </a>
                )}
              </nav>
            )}

            <!-- Edit this page -->
            {editUrl && (
              <div class="mt-6 pt-4 border-t border-surface-200 dark:border-surface-700" data-pagefind-ignore>
                <a
                  href={editUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  class="edit-this-page inline-flex items-center gap-1.5 text-xs text-surface-400 dark:text-surface-500 hover:text-squad-600 dark:hover:text-squad-400 transition-colors"
                >
                  <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                  Edit this page on GitHub
                </a>
              </div>
            )}
          </div>

          <!-- Right column ToC (wide screens) -->
          <aside class="hidden lg:block w-56 shrink-0" data-pagefind-ignore>
            <TableOfContents />
          </aside>
        </div>
      </div>
      <Footer />
    </main>
  </div>
</BaseLayout>
