<?php
// 包含配置文件
require_once 'config.php';

// 使用config.php中的数据库连接
if (!isset($conn) || !$conn instanceof mysqli) {
    die('数据库连接失败，请检查配置文件。');
}

// 创建测试公告数据
$testAnnouncement = [
    'title' => 'Markdown公告测试',
    'content' => "# Markdown公告测试

这是一个**Markdown格式**的公告示例。

## 支持的Markdown特性
- **粗体文本**：使用双星号包裹
- *斜体文本*：使用星号包裹
- 列表：使用-或*开头
- 链接：[访问示例网站](https://example.com)
- 代码块：

```php
// PHP代码示例
function hello() {
    echo 'Hello, Markdown!';
}
```

## 表格示例
| 功能 | 描述 |
|------|------|
| 粗体 | 文本更醒目 |
| 斜体 | 文本更柔和 |
| 列表 | 内容分点展示 |
| 代码 | 保留格式显示 |

## 引用
> 这是一段引用文本
> 可以有多行引用",
    'created_at' => date('Y-m-d H:i:s')
];

// 模拟历史公告数据
$testHistoryAnnouncements = [
    [
        'title' => '测试公告一',
        'content' => "# 测试公告一

**重要提示**：这是第一条测试公告。

- 支持Markdown格式
- 可以包含各种元素

```javascript
console.log('第一条测试公告');
```",
        'created_at' => date('Y-m-d H:i:s', strtotime('-1 day'))
    ],
    [
        'title' => '测试公告二',
        'content' => "# 测试公告二

*这是第二条测试公告*，使用了不同的Markdown格式。

- 列表项一
- 列表项二
- 列表项三",
        'created_at' => date('Y-m-d H:i:s', strtotime('-2 days'))
    ]
];
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>公告Markdown支持测试 - <?php echo APP_STORE_NAME; ?></title>
    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义CSS -->
    <link rel="stylesheet" href="styles.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/css/all.min.css">
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="/js/sweetalert.js/dist/sweetalert2.min.css">
    <script src="/js/sweetalert.js/dist/sweetalert2.all.min.js"></script>
    <!-- Marked.js 用于Markdown解析 -->
    <script src="js/marked.js"></script>
    <!-- Fluent Design 模糊效果 -->
    <style>
        .blur-bg {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.5);
        }
        .page-transition {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .announcement-item {
            margin-bottom: 2rem;
            padding: 1rem;
            border: 1px solid #e9ecef;
            border-radius: 0.3rem;
        }
        .announcement-item h3 {
            margin-bottom: 0.5rem;
            color: #343a40;
        }
        .date {
            color: #6c757d;
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }
        .content {
            color: #495057;
            line-height: 1.6;
        }
    </style>
</head>
<body class="page-transition">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light blur-bg">
        <div class="container">
            <a href="index.php"><img src="/favicon.jpeg" alt="Logo" style="height: 30px; margin-right: 10px; border-radius: var(--border-radius);"></a>
            <a class="navbar-brand" href="index.php">返回首页</a>
        </div>
    </nav>

    <div class="container mt-4">
        <h1 class="text-center">公告Markdown支持测试</h1>
        <p class="text-center">此页面用于测试首页公告和历史公告的Markdown支持功能。</p>
        
        <div class="row mt-4">
            <div class="col-md-12">
                <button class="btn btn-primary mb-4" onclick="showMarkdownInfo()">
                    <i class="fas fa-info-circle"></i> 了解Markdown
                </button>
            </div>
        </div>

        <!-- 首页公告预览 -->
        <div class="row mt-6">
            <div class="col-md-12">
                <h2>首页公告预览</h2>
                <div class="alert alert-info blur-bg">
                    <h4 class="alert-heading"><?php echo htmlspecialchars($testAnnouncement['title']); ?></h4>
                    <p class="text-muted small">发布时间: <?php echo date('Y-m-d H:i', strtotime($testAnnouncement['created_at'])); ?></p>
                    <div id="home-announcement-content"><?php echo htmlspecialchars($testAnnouncement['content']); ?></div>
                </div>
            </div>
        </div>

        <!-- 历史公告预览 -->
        <div class="row mt-8">
            <div class="col-md-12">
                <h2>历史公告预览</h2>
                <div class="announcements-list">
                    <?php foreach($testHistoryAnnouncements as $announcement): ?>
                        <div class="announcement-item">
                            <h3><?php echo htmlspecialchars($announcement['title']); ?></h3>
                            <p class="date"><?php echo htmlspecialchars($announcement['created_at']); ?></p>
                            <div class="content history-content"><?php echo htmlspecialchars($announcement['content']); ?></div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <!-- 原始Markdown文本显示 -->
        <div class="row mt-8">
            <div class="col-md-12">
                <h2>原始Markdown文本</h2>
                <div class="card">
                    <div class="card-body">
                        <pre class="bg-light p-3 rounded"><code><?php echo htmlspecialchars($testAnnouncement['content']); ?></code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 解析Markdown内容
        document.addEventListener('DOMContentLoaded', function() {
            // 解析首页公告
            const homeAnnouncement = document.getElementById('home-announcement-content');
            if (homeAnnouncement) {
                homeAnnouncement.innerHTML = marked.parse(homeAnnouncement.textContent);
            }
            
            // 解析历史公告
            const historyContents = document.querySelectorAll('.history-content');
            historyContents.forEach(function(element) {
                element.innerHTML = marked.parse(element.textContent);
            });
        });

        // 显示Markdown信息弹窗
        function showMarkdownInfo() {
            Swal.fire({
                title: '<strong>Markdown支持说明</strong>',
                icon: 'info',
                html: `
                    <p>公告内容现已支持Markdown语法。</p>
                    <h5 class="mt-3">支持的Markdown语法:</h5>
                    <ul style="text-align: left;">
                        <li><strong>粗体文本</strong>: 使用**双星号**包裹</li>
                        <li><em>斜体文本</em>: 使用*星号*包裹</li>
                        <li><h1>标题</h1>: 使用#号开头</li>
                        <li>列表: 使用-或*开头</li>
                        <li>代码块: 使用```包裹代码</li>
                        <li>链接: [链接文本](链接地址)</li>
                        <li>表格: 使用|分隔单元格</li>
                        <li>引用: 使用>开头</li>
                    </ul>
                `,
                showCloseButton: true,
                focusConfirm: false,
                confirmButtonText: '我明白了',
                confirmButtonAriaLabel: '关闭对话框'
            });
        }
    </script>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="js/bootstrap.bundle.js"></script>
</body>
</html>