<!-- Markdown에서는 이렇게 해야 하지만... -->
> ⚠️ **주의**: 이 설정은 프로덕션에서 사용하지 마세요.

<!-- MDX에서는 이렇게 쓸 수 있습니다 -->
<Callout type="warning" title="주의">
이 설정은 프로덕션에서 사용하지 마세요.
</Callout>

// 개별 MDX 파일
interface MDXFile {
  slug: string;
  title: string;
  description?: string;
  order?: number;
  path: string;
  content: string;
}

// 중첩 디렉토리를 지원하는 트리 노드
interface MDXFileNode {
  type: 'file' | 'directory';
  name: string;
  slug: string;
  title: string;
  description?: string;
  order?: number;
  path: string;
  content?: string;
  children?: MDXFileNode[];
  fullPath: string[];
}

export async function getMDXFile(filePath: string): Promise<MDXFile | null> {
  const fullPath = path.join(CONTENT_DIR, filePath);

  if (!(await pathExists(fullPath))) {
    return null;
  }

  const fileContents = await fs.readFile(fullPath, 'utf8');
  const { data, content } = matter(fileContents);
  const frontmatter = data as MDXFrontmatter;

  return {
    slug: path.basename(filePath, '.mdx'),
    title: frontmatter.title || path.basename(filePath, '.mdx'),
    description: frontmatter.description,
    order: frontmatter.order || 0,
    path: filePath,
    content: await sanitizeMDXContent(content),
  };
}

export async function buildMDXTree(
  basePath: string,
  currentPath: string[] = []
): Promise<MDXFileNode[]> {
  const fullPath = path.join(CONTENT_DIR, ...currentPath);
  const dirents = await fs.readdir(fullPath, { withFileTypes: true });
  const nodes: MDXFileNode[] = [];

  // MDX 파일 처리
  const files = dirents.filter(
    (d) => d.isFile() && d.name.endsWith('.mdx')
  );
  for (const file of files) {
    const mdxFile = await getMDXFile([...currentPath, file.name].join('/'));
    if (mdxFile) {
      nodes.push({
        type: 'file',
        slug: path.basename(file.name, '.mdx'),
        // ... 나머지 필드
      });
    }
  }

  // 하위 디렉토리 재귀 처리
  const directories = dirents.filter((d) => d.isDirectory());
  for (const dir of directories) {
    const children = await buildMDXTree(basePath, [...currentPath, dir.name]);
    const indexFile = await getMDXFile(
      [...currentPath, dir.name, 'index.mdx'].join('/')
    );
    nodes.push({
      type: 'directory',
      title: indexFile?.title || formatTitle(dir.name),
      children,
      // ... 나머지 필드
    });
  }

  return sortByOrderAndName(nodes);
}

// sanitizeMDXContent 핵심 로직
// 정규식으로 코드 블록 JSX 태그 내부를 매칭한 후:
const htmlEscaped = codeContent
  .replace(/&/g, '&')   // & → &
  .replace(/</g, '&lt;')    // < → &lt;
  .replace(/>/g, '&gt;')    // > → &gt;
  .replace(/\{/g, '&#123;') // { → &#123;
  .replace(/\}/g, '&#125;') // } → &#125;

export default async function DocsPage({ params }: PageProps) {
  const { slug } = await params;

  if (!slug || slug.length === 0) {
    notFound();
  }

  const pathType = await getPathType(slug);

  if (pathType === null) {
    notFound();
  }

  if (pathType === 'file') {
    const mdxContent = await getMDXContentByPath(slug);
    if (!mdxContent) notFound();
    return <DocumentPage mdxContent={mdxContent} />;
  }

  if (pathType === 'directory') {
    const tree = await buildMDXTree('', slug);
    const files = tree.filter(node => node.type === 'file').map(/* ... */);
    const directories = tree.filter(node => node.type === 'directory');
    return (
      <SectionIndexPage
        section={slug[slug.length - 1]}
        files={files}
        directories={directories}
        currentPath={slug}
      />
    );
  }

  notFound();
}

export async function getPathType(
  pathArray: string[]
): Promise<'file' | 'directory' | null> {
  const filePath = path.join(CONTENT_DIR, ...pathArray);

  if (await pathExists(`${filePath}.mdx`)) return 'file';
  if (await pathExists(filePath)) {
    const s = await fs.stat(filePath);
    if (s.isDirectory()) return 'directory';
  }

  return null;
}

export async function generateStaticParams() {
  const nestedSections = await getAllMDXNestedSections();
  const params: Array<{ slug: string[] }> = [];

  function collectPaths(nodes: any[], currentPath: string[] = []): void {
    for (const node of nodes) {
      const nodePath = [...currentPath, node.slug];
      params.push({ slug: nodePath });

      if (node.type === 'directory' && node.children?.length > 0) {
        collectPaths(node.children, nodePath);
      }
    }
  }

  for (const section of nestedSections) {
    params.push({ slug: [section.section] });
    collectPaths(section.tree, [section.section]);
  }

  return params;
}

export function MDXRenderer({ content }: { content: string }) {
  const components = { /* 컴포넌트 매핑 */ };

  return (
    <div className="mdx-content prose prose-slate dark:prose-invert max-w-none">
      <MDXRemote
        source={content}
        components={components}
        options={{
          blockJS: false,
          mdxOptions: {
            remarkPlugins: [remarkCjkFriendly, remarkGfm],
            rehypePlugins: [
              [rehypeRaw, {
                passThrough: [
                  'mdxFlowExpression',
                  'mdxJsxFlowElement',
                  'mdxJsxTextElement',
                  'mdxTextExpression',
                  'mdxjsEsm'
                ]
              }]
            ],
            development: false,
            format: 'mdx',
          },
        }}
      />
    </div>
  );
}

// mermaid.tsx (클라이언트 컴포넌트)
"use client";

let mermaidInitialized = false;
function ensureMermaidInit() {
  if (mermaidInitialized) return;
  mermaid.initialize({
    startOnLoad: false,
    theme: 'default',
    securityLevel: 'loose',
    fontFamily: 'ui-sans-serif, system-ui, sans-serif',
  });
  mermaidInitialized = true;
}

// MDX 문서에서의 사용 예시
<Icon name="AlertTriangle" size={20} />

<!-- 영어: 정상 동작 -->
This is **bold** text.

<!-- 한글: 렌더링 실패 -->
이것은 **굵은** 텍스트입니다.

<!-- 한글: 이렇게 공백을 넣어야 동작하지만 어색함 -->
이것은 **굵은** 텍스트 입니다.

// mdx-renderer.tsx
import remarkCjkFriendly from 'remark-cjk-friendly';

// remarkPlugins 배열에서 remarkGfm보다 먼저 적용
remarkPlugins: [remarkCjkFriendly, remarkGfm],

// icon.tsx
import { AlertTriangle, Info, CheckCircle, /* ... */ } from 'lucide-react';

export const LUCIDE_ICONS = {
  AlertTriangle,
  Info,
  CheckCircle,
  // ... 필요한 아이콘만 포함
};

rehypePlugins: [
  [rehypeRaw, {
    passThrough: [
      'mdxFlowExpression',
      'mdxJsxFlowElement',
      'mdxJsxTextElement',
      'mdxTextExpression',
      'mdxjsEsm'
    ]
  }]
],