import React from 'react';
import { DocsComponent } from './index';
import { mockMarks, generateMarkWithType } from '../mock/collection';

// 创建一些示例文档数据
const createSampleDocs = () => {
  const markdownDoc = generateMarkWithType('markdown');
  markdownDoc.title = '项目介绍';
  markdownDoc.description = '了解我们的项目背景和目标';
  markdownDoc.tags = ['介绍', '项目'];
  markdownDoc.data = {
    content: `# 欢迎使用文档系统

这是一个现代化的文档展示系统，现在使用 **marked** 库进行 Markdown 渲染。

## 主要功能

- **响应式设计**: 适配各种屏幕尺寸
- **左侧导航**: 清晰的文档结构  
- **Markdown支持**: 使用 marked 库，支持 GitHub Flavored Markdown
- **多种内容类型**: 支持文本、代码、图片等多种内容

## 技术特性

### 样式设计
使用了现代化的CSS设计，包括：

1. 清新的配色方案
2. 优雅的阴影和边框
3. 流畅的过渡动画

### 功能特性

> **提示**: 这是一个引用块，展示了 marked 的渲染能力

- [x] 点击导航自动切换内容
- [x] 加载状态提示
- [x] 标签和日期显示
- [ ] 响应式布局

## 代码示例

### TypeScript 代码

\`\`\`typescript
import { DocsComponent } from './docs';
import { mockMarks } from './mock/collection';

const App: React.FC = () => {
  return <DocsComponent dataSource={mockMarks} />;
};
\`\`\`

### 内联代码

使用 \`marked\` 库可以更好地处理 Markdown 语法。

## 表格支持

| 功能 | 状态 | 描述 |
|------|------|------|
| Markdown | ✅ | 完整支持 |
| 代码高亮 | ✅ | 语法高亮 |
| 表格 | ✅ | GFM 表格 |
| 任务列表 | ✅ | 支持复选框 |

## 链接和图片

- 外部链接: [GitHub](https://github.com)
- 图片支持: ![示例](https://via.placeholder.com/150)

---

希望你喜欢这个使用 **marked** 的文档系统！🎉`
  };

  const apiDoc = generateMarkWithType('markdown');
  apiDoc.title = 'API 文档';
  apiDoc.description = 'API接口使用说明和示例';
  apiDoc.tags = ['API', '开发'];
  apiDoc.data = {
    content: `# API 文档

## 🔐 用户认证

### 登录接口

**请求地址**: \`POST /api/auth/login\`

**请求参数**:

| 参数 | 类型 | 必填 | 描述 |
|------|------|------|------|
| username | string | ✅ | 用户名 |
| password | string | ✅ | 密码 |

**响应示例**:

\`\`\`json
{
  "code": 200,
  "message": "success",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIs...",
    "user": {
      "id": 1,
      "username": "admin",
      "email": "admin@example.com"
    }
  }
}
\`\`\`

## 📊 数据操作

### 获取列表

**请求地址**: \`GET /api/data/list\`

**查询参数**:

- \`page\`: 页码 (默认: 1)
- \`size\`: 每页数量 (默认: 10) 
- \`keyword\`: 搜索关键词

### 创建数据

**请求地址**: \`POST /api/data/create\`

**请求体**:

\`\`\`json
{
  "title": "标题",
  "content": "内容", 
  "tags": ["tag1", "tag2"]
}
\`\`\`

## ⚠️ 错误码

| 错误码 | 描述 | 解决方案 |
|--------|------|----------|
| 400 | 请求参数错误 | 检查请求参数格式 |
| 401 | 未授权 | 重新登录获取 token |
| 403 | 禁止访问 | 检查用户权限 |
| 500 | 服务器错误 | 联系技术支持 |

> **注意**: 所有 API 请求都需要在 Header 中包含 \`Authorization: Bearer <token>\`

更多 API 详情请参考 [完整文档](https://docs.example.com) 📖`
  };

  const codeDoc = generateMarkWithType('code');
  codeDoc.title = '代码示例';
  codeDoc.description = '常用的代码片段和最佳实践';
  codeDoc.tags = ['代码', '示例'];
  codeDoc.data = {
    code: `// React Hook 示例
import { useState, useEffect, useCallback } from 'react';

const useDocuments = (initialData = []) => {
  const [docs, setDocs] = useState(initialData);
  const [loading, setLoading] = useState(false);
  const [selectedId, setSelectedId] = useState(null);

  // 获取文档列表
  const fetchDocs = useCallback(async () => {
    setLoading(true);
    try {
      const response = await fetch('/api/docs');
      const data = await response.json();
      setDocs(data);
    } catch (error) {
      console.error('Failed to fetch docs:', error);
    } finally {
      setLoading(false);
    }
  }, []);

  // 选择文档
  const selectDoc = useCallback((id) => {
    setSelectedId(id);
  }, []);

  useEffect(() => {
    fetchDocs();
  }, [fetchDocs]);

  return {
    docs,
    loading,
    selectedId,
    selectDoc,
    refetch: fetchDocs
  };
};

export default useDocuments;`,
    language: 'typescript'
  };

  const configDoc = generateMarkWithType('json');
  configDoc.title = '配置说明';
  configDoc.description = '系统配置项说明和默认值';
  configDoc.tags = ['配置', '设置'];

  return [markdownDoc, apiDoc, codeDoc, configDoc];
};

// 示例组件
export const DocsExample: React.FC = () => {
  const sampleDocs = createSampleDocs();
  
  return (
    <div style={{ height: '100vh' }}>
      <DocsComponent dataSource={sampleDocs} />
    </div>
  );
};

export default DocsExample;