import { promises as fs } from 'fs';
import path from 'path';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

async function getMarkdownContent() {
  // process.cwd() is the root of the Next.js project (the 'frontend' directory)
  const mdPath = path.join(process.cwd(), '..', 'docs', 'design.md');
  try {
    const content = await fs.readFile(mdPath, 'utf8');
    return content;
  } catch (error) {
    console.error("Failed to read design.md:", error);
    return "# 文档加载失败\n\n无法读取 `docs/design.md` 文件。请检查文件是否存在以及服务器权限。";
  }
}

export default async function DocsPage() {
  const content = await getMarkdownContent();

  return (
    <div className="container mx-auto py-6 space-y-6">
      <header className="space-y-2">
        <h1 className="text-3xl font-bold">系统设计文档</h1>
        <p className="text-muted-foreground">
          这是系统核心功能与架构的技术设计文档，随功能迭代而更新。
        </p>
      </header>
      <Card>
        <CardContent className="p-6">
          <article className="prose prose-zinc max-w-none dark:prose-invert">
            <ReactMarkdown
              remarkPlugins={[remarkGfm]}
              components={{
                h1: ({node, ...props}) => <h1 className="text-3xl font-bold mb-4 mt-8 border-b pb-2" {...props} />,
                h2: ({node, ...props}) => <h2 className="text-2xl font-bold mb-3 mt-6 border-b pb-2" {...props} />,
                h3: ({node, ...props}) => <h3 className="text-xl font-semibold mb-2 mt-4" {...props} />,
                p: ({node, ...props}) => <p className="mb-4 leading-7" {...props} />,
                ul: ({node, ...props}) => <ul className="list-disc list-inside mb-4 space-y-2" {...props} />,
                ol: ({node, ...props}) => <ol className="list-decimal list-inside mb-4 space-y-2" {...props} />,
                li: ({node, ...props}) => <li className="ml-4" {...props} />,
                code: ({node, inline, className, children, ...props}: any) => {
                  const match = /language-(\w+)/.exec(className || '');
                  return !inline ? (
                    <code className={className} {...props}>
                      {children}
                    </code>
                  ) : (
                    <code className="bg-muted px-1.5 py-1 rounded text-sm font-mono" {...props}>
                      {children}
                    </code>
                  );
                },
                pre: ({children}) => <pre className="bg-muted p-4 rounded my-4 overflow-x-auto">{children}</pre>,
                table: ({node, ...props}) => <div className="overflow-x-auto my-4"><table className="border-collapse border border-border w-full" {...props} /></div>,
                th: ({node, ...props}) => <th className="border border-border px-4 py-2 bg-muted font-semibold text-left" {...props} />,
                td: ({node, ...props}) => <td className="border border-border px-4 py-2" {...props} />,
                a: ({node, ...props}) => <a className="text-primary underline hover:text-primary/80" {...props} />,
              }}
            >
              {content}
            </ReactMarkdown>
          </article>
        </CardContent>
      </Card>
    </div>
  );
}