---
import DocsSidebar from '../components/DocsSidebar.astro';

interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
const currentPath = Astro.url.pathname;
---

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description || 'AI Terminal Assistant 文档'} />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title} - AI Terminal Assistant</title>
  </head>
  <body class="bg-gray-950 text-gray-100 antialiased">
    <!-- Navigation -->
    <nav class="fixed top-0 left-0 right-0 z-50 border-b border-gray-800 bg-gray-950/80 backdrop-blur-sm">
      <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
        <a href="/" class="text-xl font-bold text-white">
          <span class="text-primary-400">AI</span> Terminal Assistant
        </a>
        <div class="flex items-center gap-6">
          <a href="/" class="text-sm text-gray-400 transition hover:text-white">首页</a>
          <a href="/docs" class="text-sm text-white">文档</a>
          <a
            href="https://github.com"
            target="_blank"
            class="rounded-lg bg-gray-800 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-700"
          >
            GitHub
          </a>
        </div>
      </div>
    </nav>

    <!-- Main Layout -->
    <div class="flex pt-16">
      <!-- Sidebar -->
      <aside class="fixed left-0 top-16 bottom-0 w-64 overflow-y-auto border-r border-gray-800 bg-gray-950 p-6">
        <DocsSidebar currentPath={currentPath} />
      </aside>

      <!-- Content -->
      <main class="ml-64 flex-1 min-h-screen">
        <div class="mx-auto max-w-4xl px-8 py-12">
          <article class="prose prose-invert prose-gray max-w-none">
            <slot />
          </article>
        </div>
      </main>
    </div>
  </body>
</html>

<style is:global>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

  html {
    font-family: 'Inter', system-ui, sans-serif;
    scroll-behavior: smooth;
  }

  ::selection {
    background: rgba(14, 165, 233, 0.3);
  }

  /* Prose 样式覆盖 */
  .prose h1 {
    @apply text-3xl font-bold text-white mb-4 pb-4 border-b border-gray-800;
  }

  .prose h2 {
    @apply text-2xl font-semibold text-white mt-10 mb-4;
  }

  .prose h3 {
    @apply text-xl font-semibold text-white mt-8 mb-3;
  }

  .prose h4 {
    @apply text-lg font-semibold text-white mt-6 mb-2;
  }

  .prose p {
    @apply text-gray-300 leading-relaxed mb-4;
  }

  .prose ul, .prose ol {
    @apply text-gray-300 mb-4 pl-6;
  }

  .prose li {
    @apply mb-2;
  }

  .prose code {
    @apply bg-gray-800 text-primary-400 px-1.5 py-0.5 rounded text-sm;
  }

  .prose pre {
    @apply bg-gray-900 border border-gray-800 rounded-lg p-4 overflow-x-auto mb-4;
  }

  .prose pre code {
    @apply bg-transparent p-0 text-gray-300;
  }

  .prose a {
    @apply text-primary-400 hover:text-primary-300 transition;
  }

  .prose table {
    @apply w-full border-collapse mb-4;
  }

  .prose th {
    @apply bg-gray-800 text-white text-left px-4 py-2 border border-gray-700;
  }

  .prose td {
    @apply text-gray-300 px-4 py-2 border border-gray-800;
  }

  .prose blockquote {
    @apply border-l-4 border-primary-500 bg-gray-900/50 px-4 py-2 italic text-gray-400 mb-4;
  }

  .prose hr {
    @apply border-gray-800 my-8;
  }

  .prose strong {
    @apply text-white font-semibold;
  }
</style>
