---
import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
import { Code } from 'astro-expressive-code/components';
import { isCustomDocsEnabled } from '@utils/feature';

// Example for folder structure
const folderStructureExample = `my-catalog/
  └── docs/
      ├── getting-started/
      │   ├── 01-introduction.mdx
      │   └── 02-quick-start.mdx
      ├── architecture-decisions/
      │   ├── 01-what-are-architecture-decisions.mdx
      │   ├── 02-how-to-create-architecture-decisions.mdx
      │   ├── published/
      │   │   ├── 01-adr-001-event-driven.mdx
      │   │   └── 02-adr-002-api-first.mdx
      │   └── drafts/
      │       ├── 01-adr-003-microservices.mdx
      │       └── 02-adr-004-monolith.mdx
      └`;
// Example MDX file content
const mdxFileExample = `---
title: Getting Started
summary: How to get started with our event-driven architecture
---

# Getting Started with our Event-Driven Architecture

This guide will help you understand how our services communicate using events.

## Prerequisites

- Understanding of basic messaging patterns
- Node.js installed on your machine

## Key Concepts

Events are the backbone of our architecture. They represent facts that have happened in our system.
`;

// Example config file
const configExample = `// eventcatalog.config.js
  
module.exports = {
  // Your existing config...
  
  customDocs: {
    sidebar: [
      {
        label: 'Getting Started',
        badge: {
          text: 'New', color: 'green'
        },
        collapsed: false,
        items: [
          { label: 'Introduction', slug: 'getting-started/01-introduction' },
          { label: 'Quick Start', slug: 'getting-started/02-quick-start' }
        ]
      },
      {
        label: 'Architecture Decisions',
        badge: {
          text: 'New', color: 'green'
        },
        collapsed: true,
        items: [
          { 
            label: 'What are Architecture Decisions?', 
            slug: 'architecture-decisions/01-what-are-architecture-decisions' 
          },
          { 
            label: 'How to Create Architecture Decisions', 
            slug: 'architecture-decisions/02-how-to-create-architecture-decisions' 
          },
          {
            label: 'Published ADRs',
            autogenerated: { 
              directory: 'architecture-decisions/published', 
              collapsed: true 
            }
          },
          {
            label: 'Draft ADRs',
            autogenerated: { 
              directory: 'architecture-decisions/drafts', 
              collapsed: true 
            }
          }
        ]
      }
    ]
  }
}`;

if (!isCustomDocsEnabled()) {
  return Astro.redirect('/docs/custom/feature');
}
---

<VerticalSideBarLayout title="Custom Documentation" showNestedSideBar={false}>
  <body class="min-h-screen font-inter bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text))]">
    <main class="container px-8 lg:px-8 mx-auto py-8 max-w-[80em]">
      <div class="mb-12">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
          <div>
            <div class="flex flex-wrap items-center gap-3 mb-3">
              <h1 class="text-4xl font-semibold text-[rgb(var(--ec-page-text))] font-inter">Custom Documentation</h1>
              <div
                class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] border border-[rgb(var(--ec-accent)/0.3)] shadow-xs"
              >
                Pro feature
              </div>
            </div>
            <p class="text-base mb-0 text-[rgb(var(--ec-page-text-muted))] max-w-3xl">
              Add custom documentation to EventCatalog to create a unified source of truth for your team. Document your
              architecture decisions, patterns, and guidelines.
            </p>
          </div>
          <div class="flex space-x-4 shrink-0">
            <a
              href="https://www.eventcatalog.dev/docs/development/bring-your-own-documentation/custom-pages/introduction"
              class="inline-flex items-center justify-center px-5 py-2 border border-[rgb(var(--ec-page-border))] text-sm font-medium rounded-md text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors"
            >
              Read documentation &rarr;
            </a>
            {
              !isCustomDocsEnabled() && (
                <a
                  href="https://www.eventcatalog.dev/pro/trial"
                  class="inline-flex items-center justify-center px-5 py-2 border border-transparent text-sm font-medium rounded-md text-[rgb(var(--ec-button-text))] bg-gradient-to-r from-[rgb(var(--ec-accent-gradient-from))] to-[rgb(var(--ec-accent-gradient-to))] hover:opacity-90 shadow-xs"
                >
                  Start 14-day trial
                </a>
              )
            }
          </div>
        </div>
      </div>

      <h2 class="text-2xl font-semibold mb-2 text-[rgb(var(--ec-page-text))]">Setup Guide</h2>
      <p class="text-[rgb(var(--ec-page-text-muted))] mb-8 max-w-3xl">
        Custom documentation let's you bring any documentation into EventCatalog. This is useful for documenting your architecture
        decisions, patterns, and guidelines. Follow these steps to get started:
      </p>

      <div class="space-y-10 mb-12">
        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
          <div class="flex items-start gap-4">
            <div
              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
            >
              1
            </div>
            <div class="w-full">
              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Create the content structure</h3>
              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                Create a folder structure in your directory to organize your documentation.
              </p>
              <Code code={folderStructureExample} lang="bash" frame="terminal" />
            </div>
          </div>
        </div>

        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
          <div class="flex items-start gap-4">
            <div
              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
            >
              2
            </div>
            <div class="w-full">
              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Add MDX files</h3>
              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">Create MDX files with frontmatter and markdown content.</p>
              <Code code={mdxFileExample} lang="mdx" frame="terminal" />
            </div>
          </div>
        </div>

        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
          <div class="flex items-start gap-4">
            <div
              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
            >
              3
            </div>
            <div class="w-full">
              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Update your eventcatalog.config.js file</h3>
              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                Add the customDocs configuration to your eventcatalog.config.js file to define your sidebar structure.
              </p>
              <Code code={configExample} lang="js" frame="terminal" />
              <p class="text-[rgb(var(--ec-page-text-muted))] mt-4">
                This configuration defines the sidebar structure for your custom documentation:
              </p>
              <ul class="list-disc list-inside text-[rgb(var(--ec-page-text-muted))] mt-2 ml-2 space-y-1">
                <li>
                  <strong>label</strong>: The display name for each sidebar section
                </li>
                <li>
                  <strong>badge</strong>: Optional badge to highlight new sections
                </li>
                <li>
                  <strong>collapsed</strong>: Whether the section is collapsed by default
                </li>
                <li>
                  <strong>autogenerated</strong>: Automatically generate sidebar items from a directory
                </li>
                <li>
                  <strong>slug</strong>: Direct link to a specific page
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="bg-[rgb(var(--ec-card-bg))] p-6 rounded-lg shadow-xs border border-[rgb(var(--ec-page-border))]">
          <div class="flex items-start gap-4">
            <div
              class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))] text-lg font-medium shrink-0 mt-1"
            >
              4
            </div>
            <div class="w-full">
              <h3 class="text-xl font-semibold text-[rgb(var(--ec-page-text))] mb-3">Restart EventCatalog</h3>
              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                After configuring your documentation, restart EventCatalog to see your custom documentation.
              </p>
              <div class="mb-4">
                <Code code="npm run dev" lang="bash" frame="terminal" />
              </div>
              <p class="text-[rgb(var(--ec-page-text-muted))] mb-4">
                Once restarted, you'll see your custom documentation displayed with the sidebar structure you defined:
              </p>
              <div class="border border-[rgb(var(--ec-page-border))] rounded-lg overflow-hidden">
                <img src="/images/custom-docs-placeholder.png" alt="Example of custom documentation interface" class="w-full" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</VerticalSideBarLayout>
)
