<?php
// 安装检测
if (!file_exists(__DIR__ . '/install.lock') && basename($_SERVER['PHP_SELF']) !== 'install.php') {
    header('Location: install.php');
    exit;
}

require_once 'config.php';

$current_user = currentUser();
$site_name = getSiteConfig('site_name') ?? '麟泓授权系统';

// ========== SVG 图标配置 ==========
$svg_icons = [
    'docs'        => 'https://api.iconify.design/mdi:book-open-page-variant.svg?color=%23667eea',
    'install'     => 'https://api.iconify.design/mdi:download.svg?color=%2310b981',
    'step1'       => 'https://api.iconify.design/mdi:file-document.svg?color=%23f59e0b',
    'step2'       => 'https://api.iconify.design/mdi:server.svg?color=%233b82f6',
    'step3'       => 'https://api.iconify.design/mdi:key.svg?color=%238b5cf6',
    'step4'       => 'https://api.iconify.design/mdi:database.svg?color=%23ec4899',
    'step5'       => 'https://api.iconify.design/mdi:account.svg?color=%2306b6d4',
    'step6'       => 'https://api.iconify.design/mdi:check-circle.svg?color=%2310b981',
    'check'       => 'https://api.iconify.design/mdi:check.svg?color=%2310b981',
    'warning'     => 'https://api.iconify.design/mdi:alert.svg?color=%23f59e0b',
    'error'       => 'https://api.iconify.design/mdi:close-circle.svg?color=%23ef4444',
    'info'        => 'https://api.iconify.design/mdi:information.svg?color=%233b82f6',
    'php'         => 'https://api.iconify.design/mdi:language-php.svg?color=%23777bb4',
    'mysql'       => 'https://api.iconify.design/mdi:database.svg?color=%234479a1',
    'folder'      => 'https://api.iconify.design/mdi:folder.svg?color=%23f59e0b',
    'lock'        => 'https://api.iconify.design/mdi:lock.svg?color=%23ef4444',
    'web'         => 'https://api.iconify.design/mdi:web.svg?color=%233b82f6',
    'code'        => 'https://api.iconify.design/mdi:code-tags.svg?color=%23667eea',
    'question'    => 'https://api.iconify.design/mdi:help-circle.svg?color=%238b5cf6',
    'success'     => 'https://api.iconify.design/mdi:check-circle-outline.svg?color=%2310b981',
    'arrow'       => 'https://api.iconify.design/mdi:arrow-right.svg?color=%23667eea',
];
?>
<?php include 'modules/home/header.php'; ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术文档 - <?php echo htmlspecialchars($site_name); ?></title>
    <meta name="description" content="麟泓授权系统安装向导与部署指南">
    <link rel="stylesheet" href="/assets/css/style.css">
    <link rel="stylesheet" href="/assets/css/dark.css" id="dark-theme" disabled>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        .docs-container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 40px 20px;
        }
        
        /* 页面标题 */
        .page-header {
            text-align: center;
            margin-bottom: 50px;
        }
        
        .page-header .header-icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 20px;
        }
        
        .page-header h1 {
            font-size: 38px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 12px;
        }
        
        .page-header p {
            font-size: 18px;
            color: var(--text-secondary);
        }
        
        /* 快速导航 */
        .quick-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            margin-bottom: 50px;
            padding: 20px;
            background: var(--bg-primary);
            border-radius: 60px;
            border: 1px solid var(--border-color);
        }
        
        .quick-nav a {
            padding: 10px 20px;
            background: var(--bg-secondary);
            color: var(--text-primary);
            text-decoration: none;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .quick-nav a:hover {
            background: var(--primary-color);
            color: white;
        }
        
        .quick-nav a img {
            width: 18px;
            height: 18px;
        }
        
        .quick-nav a:hover img {
            filter: brightness(0) invert(1);
        }
        
        /* 内容卡片 */
        .doc-section {
            background: var(--bg-primary);
            border-radius: 28px;
            padding: 36px;
            margin-bottom: 30px;
            border: 1px solid var(--border-color);
        }
        
        .section-header {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 2px solid var(--border-color);
        }
        
        .section-header img {
            width: 40px;
            height: 40px;
        }
        
        .section-header h2 {
            font-size: 26px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        /* 安装步骤 */
        .steps-container {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .step-card {
            display: flex;
            gap: 24px;
            padding: 24px;
            background: var(--bg-secondary);
            border-radius: 20px;
            transition: all 0.3s;
        }
        
        .step-card:hover {
            background: var(--bg-primary);
            box-shadow: var(--shadow-md);
        }
        
        .step-icon {
            width: 64px;
            height: 64px;
            flex-shrink: 0;
            background: white;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
        }
        
        .step-icon img {
            width: 36px;
            height: 36px;
        }
        
        .step-content {
            flex: 1;
        }
        
        .step-title {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .step-number {
            width: 32px;
            height: 32px;
            background: var(--primary-color);
            color: white;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 16px;
        }
        
        .step-title h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .step-desc {
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 16px;
            font-size: 15px;
        }
        
        .step-detail {
            background: white;
            border-radius: 14px;
            padding: 16px 20px;
            margin-top: 12px;
        }
        
        .step-detail p {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
            color: var(--text-primary);
        }
        
        .step-detail img {
            width: 18px;
            height: 18px;
        }
        
        .step-detail code {
            background: var(--bg-secondary);
            padding: 2px 8px;
            border-radius: 8px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 13px;
        }
        
        /* 环境要求表格 */
        .requirements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
        }
        
        .req-card {
            background: var(--bg-secondary);
            border-radius: 18px;
            padding: 24px;
            display: flex;
            align-items: center;
            gap: 18px;
        }
        
        .req-card img {
            width: 48px;
            height: 48px;
        }
        
        .req-info h4 {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        
        .req-info p {
            color: var(--text-secondary);
            font-size: 15px;
        }
        
        .req-badge {
            margin-left: auto;
            padding: 6px 14px;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 500;
        }
        
        .req-badge.required {
            background: #fee2e2;
            color: #dc2626;
        }
        
        .req-badge.recommend {
            background: #fef3c7;
            color: #d97706;
        }
        
        /* 常见问题 */
        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        
        .faq-item {
            background: var(--bg-secondary);
            border-radius: 18px;
            overflow: hidden;
        }
        
        .faq-question {
            padding: 20px 24px;
            display: flex;
            align-items: center;
            gap: 14px;
            cursor: pointer;
            transition: background 0.2s;
        }
        
        .faq-question:hover {
            background: var(--bg-primary);
        }
        
        .faq-question img {
            width: 24px;
            height: 24px;
        }
        
        .faq-question span {
            flex: 1;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .faq-question .faq-icon {
            font-size: 20px;
            color: var(--text-muted);
            transition: transform 0.3s;
        }
        
        .faq-item.active .faq-question .faq-icon {
            transform: rotate(180deg);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 24px;
        }
        
        .faq-item.active .faq-answer {
            max-height: 300px;
            padding: 0 24px 20px 62px;
        }
        
        .faq-answer p {
            color: var(--text-secondary);
            line-height: 1.7;
        }
        
        .faq-answer code {
            background: var(--bg-primary);
            padding: 2px 8px;
            border-radius: 6px;
            font-family: monospace;
        }
        
        /* 提示卡片 */
        .tip-card {
            background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
            border-radius: 20px;
            padding: 24px 30px;
            display: flex;
            align-items: center;
            gap: 20px;
            color: #0369a1;
        }
        
        .tip-card img {
            width: 44px;
            height: 44px;
        }
        
        .tip-card p {
            font-size: 15px;
            line-height: 1.7;
        }
        
        .tip-card a {
            color: #0369a1;
            font-weight: 600;
            text-decoration: underline;
        }
        
        /* 目录权限表格 */
        .perm-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .perm-table th,
        .perm-table td {
            padding: 14px 16px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .perm-table th {
            background: var(--bg-secondary);
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .perm-table td {
            color: var(--text-secondary);
        }
        
        .perm-table code {
            background: var(--bg-secondary);
            padding: 4px 10px;
            border-radius: 6px;
            font-family: monospace;
        }
        
        /* 响应式 */
        @media (max-width: 768px) {
            .page-header h1 { font-size: 30px; }
            .doc-section { padding: 24px 18px; }
            .step-card { flex-direction: column; }
            .quick-nav { border-radius: 30px; }
            .req-card { flex-wrap: wrap; }
            .tip-card { flex-direction: column; text-align: center; }
        }
    </style>
</head>
<body>
    <div class="front-container">
        <main class="front-main">
            <div class="docs-container">
                <!-- 页面标题 -->
                <div class="page-header">
                    <img src="<?php echo $svg_icons['docs']; ?>" alt="文档" class="header-icon">
                    <h1>技术文档</h1>
                    <p>麟泓授权系统安装向导与部署指南</p>
                </div>
                
                <!-- 快速导航 -->
                <div class="quick-nav">
                    <a href="#install">
                        <img src="<?php echo $svg_icons['install']; ?>" alt="安装">
                        安装向导
                    </a>
                    <a href="#requirements">
                        <img src="<?php echo $svg_icons['step2']; ?>" alt="环境">
                        环境要求
                    </a>
                    <a href="#permissions">
                        <img src="<?php echo $svg_icons['folder']; ?>" alt="权限">
                        目录权限
                    </a>
                    <a href="#faq">
                        <img src="<?php echo $svg_icons['question']; ?>" alt="FAQ">
                        常见问题
                    </a>
                </div>
                
                <!-- 安装向导 -->
                <section id="install" class="doc-section">
                    <div class="section-header">
                        <img src="<?php echo $svg_icons['install']; ?>" alt="安装">
                        <h2>安装向导</h2>
                    </div>
                    
                    <div class="steps-container">
                        <!-- 步骤 1 -->
                        <div class="step-card">
                            <div class="step-icon">
                                <img src="<?php echo $svg_icons['step1']; ?>" alt="步骤1">
                            </div>
                            <div class="step-content">
                                <div class="step-title">
                                    <span class="step-number">1</span>
                                    <h3>阅读许可协议</h3>
                                </div>
                                <div class="step-desc">
                                    访问 <code>/install.php</code> 启动安装向导，仔细阅读软件许可协议，勾选同意后进入下一步。
                                </div>
                                <div class="step-detail">
                                    <p>
                                        <img src="<?php echo $svg_icons['check']; ?>" alt="">
                                        <span>请确保已阅读并理解协议内容</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 步骤 2 -->
                        <div class="step-card">
                            <div class="step-icon">
                                <img src="<?php echo $svg_icons['step2']; ?>" alt="步骤2">
                            </div>
                            <div class="step-content">
                                <div class="step-title">
                                    <span class="step-number">2</span>
                                    <h3>环境检查</h3>
                                </div>
                                <div class="step-desc">
                                    系统自动检测服务器环境，包括 PHP 版本、必需扩展、目录权限等。
                                </div>
                                <div class="step-detail">
                                    <p>
                                        <img src="<?php echo $svg_icons['php']; ?>" alt="">
                                        <span>PHP 版本需 ≥ 8.0</span>
                                    </p>
                                    <p>
                                        <img src="<?php echo $svg_icons['mysql']; ?>" alt="">
                                        <span>必需扩展：mysqli、curl、json、session、zip、gd、fileinfo</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 步骤 3 -->
                        <div class="step-card">
                            <div class="step-icon">
                                <img src="<?php echo $svg_icons['step3']; ?>" alt="步骤3">
                            </div>
                            <div class="step-content">
                                <div class="step-title">
                                    <span class="step-number">3</span>
                                    <h3>授权验证</h3>
                                </div>
                                <div class="step-desc">
                                    输入您购买获得的授权码，系统将连接授权中心验证有效性。
                                </div>
                                <div class="step-detail">
                                    <p>
                                        <img src="<?php echo $svg_icons['lock']; ?>" alt="">
                                        <span>授权码格式：XXXX-XXXX-XXXX-XXXX</span>
                                    </p>
                                    <p>
                                        <img src="<?php echo $svg_icons['web']; ?>" alt="">
                                        <span>系统自动获取当前域名进行绑定</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 步骤 4 -->
                        <div class="step-card">
                            <div class="step-icon">
                                <img src="<?php echo $svg_icons['step4']; ?>" alt="步骤4">
                            </div>
                            <div class="step-content">
                                <div class="step-title">
                                    <span class="step-number">4</span>
                                    <h3>数据库配置</h3>
                                </div>
                                <div class="step-desc">
                                    填写数据库连接信息，系统将自动创建数据表。
                                </div>
                                <div class="step-detail">
                                    <p>
                                        <img src="<?php echo $svg_icons['mysql']; ?>" alt="">
                                        <span>数据库主机（默认 localhost）</span>
                                    </p>
                                    <p>
                                        <img src="<?php echo $svg_icons['mysql']; ?>" alt="">
                                        <span>数据库名、用户名、密码</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 步骤 5 -->
                        <div class="step-card">
                            <div class="step-icon">
                                <img src="<?php echo $svg_icons['step5']; ?>" alt="步骤5">
                            </div>
                            <div class="step-content">
                                <div class="step-title">
                                    <span class="step-number">5</span>
                                    <h3>设置管理员</h3>
                                </div>
                                <div class="step-desc">
                                    创建系统管理员账号，用于登录后台管理。
                                </div>
                                <div class="step-detail">
                                    <p>
                                        <img src="<?php echo $svg_icons['step5']; ?>" alt="">
                                        <span>用户名、密码（至少6位）</span>
                                    </p>
                                    <p>
                                        <img src="<?php echo $svg_icons['step5']; ?>" alt="">
                                        <span>管理员邮箱（用于接收通知）</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 步骤 6 -->
                        <div class="step-card">
                            <div class="step-icon">
                                <img src="<?php echo $svg_icons['step6']; ?>" alt="步骤6">
                            </div>
                            <div class="step-content">
                                <div class="step-title">
                                    <span class="step-number">6</span>
                                    <h3>完成安装</h3>
                                </div>
                                <div class="step-desc">
                                    系统自动导入数据库、生成配置文件、注册站点。安装完成后可访问前台首页或登录后台。
                                </div>
                                <div class="step-detail">
                                    <p>
                                        <img src="<?php echo $svg_icons['success']; ?>" alt="">
                                        <span>安装成功后生成 <code>install.lock</code> 文件防止重复安装</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 环境要求 -->
                <section id="requirements" class="doc-section">
                    <div class="section-header">
                        <img src="<?php echo $svg_icons['step2']; ?>" alt="环境">
                        <h2>环境要求</h2>
                    </div>
                    
                    <div class="requirements-grid">
                        <div class="req-card">
                            <img src="<?php echo $svg_icons['php']; ?>" alt="PHP">
                            <div class="req-info">
                                <h4>PHP</h4>
                                <p>≥ 8.0</p>
                            </div>
                            <span class="req-badge required">必须</span>
                        </div>
                        <div class="req-card">
                            <img src="<?php echo $svg_icons['mysql']; ?>" alt="MySQL">
                            <div class="req-info">
                                <h4>MySQL</h4>
                                <p>≥ 5.7</p>
                            </div>
                            <span class="req-badge required">必须</span>
                        </div>
                        <div class="req-card">
                            <img src="<?php echo $svg_icons['web']; ?>" alt="Web">
                            <div class="req-info">
                                <h4>Web Server</h4>
                                <p>Nginx / Apache</p>
                            </div>
                            <span class="req-badge recommend">推荐</span>
                        </div>
                    </div>
                    
                    <h4 style="margin: 30px 0 20px; color: var(--text-primary);">必需 PHP 扩展</h4>
                    <div style="display: flex; flex-wrap: wrap; gap: 12px;">
                        <?php foreach (['mysqli', 'curl', 'json', 'session', 'zip', 'gd', 'fileinfo'] as $ext): ?>
                        <span style="background: var(--bg-secondary); padding: 8px 18px; border-radius: 30px; font-size: 14px;">
                            <?php echo $ext; ?>
                        </span>
                        <?php endforeach; ?>
                    </div>
                </section>
                
                <!-- 目录权限 -->
                <section id="permissions" class="doc-section">
                    <div class="section-header">
                        <img src="<?php echo $svg_icons['folder']; ?>" alt="权限">
                        <h2>目录权限</h2>
                    </div>
                    
                    <p style="color: var(--text-secondary); margin-bottom: 20px;">
                        以下目录需要写入权限（Linux 系统建议 755，必要时可设为 777）：
                    </p>
                    
                    <table class="perm-table">
                        <thead>
                            <tr>
                                <th>目录/文件</th>
                                <th>所需权限</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><code>/assets/uploads/</code></td>
                                <td>755 / 777</td>
                                <td>上传文件存储目录</td>
                            </tr>
                            <tr>
                                <td><code>/cache/</code></td>
                                <td>755 / 777</td>
                                <td>缓存文件目录</td>
                            </tr>
                            <tr>
                                <td><code>/storage/logs/</code></td>
                                <td>755 / 777</td>
                                <td>日志存储目录</td>
                            </tr>
                            <tr>
                                <td><code>/config.php</code></td>
                                <td>644 / 666</td>
                                <td>配置文件（安装时生成）</td>
                            </tr>
                            <tr>
                                <td><code>/version.php</code></td>
                                <td>644 / 666</td>
                                <td>版本文件（安装时生成）</td>
                            </tr>
                        </tbody>
                    </table>
                </section>
                
                <!-- 常见问题 -->
                <section id="faq" class="doc-section">
                    <div class="section-header">
                        <img src="<?php echo $svg_icons['question']; ?>" alt="FAQ">
                        <h2>常见问题</h2>
                    </div>
                    
                    <div class="faq-list">
                        <div class="faq-item">
                            <div class="faq-question" onclick="toggleFAQ(this)">
                                <img src="<?php echo $svg_icons['question']; ?>" alt="Q">
                                <span>安装时提示"环境检查未通过"怎么办？</span>
                                <span class="faq-icon">▼</span>
                            </div>
                            <div class="faq-answer">
                                <p>根据提示检查缺失的 PHP 扩展，联系服务器管理员安装。常用命令：<br>
                                <code>apt install php8.0-mysqli php8.0-curl php8.0-zip php8.0-gd</code></p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question" onclick="toggleFAQ(this)">
                                <img src="<?php echo $svg_icons['question']; ?>" alt="Q">
                                <span>授权码验证失败怎么办？</span>
                                <span class="faq-icon">▼</span>
                            </div>
                            <div class="faq-answer">
                                <p>请检查：<br>
                                1. 授权码是否正确输入（注意大小写）<br>
                                2. 授权码是否已被其他域名使用<br>
                                3. 网络是否能访问授权中心 <code>https://auth.lhwks.top</code><br>
                                4. 联系客服确认授权码状态</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question" onclick="toggleFAQ(this)">
                                <img src="<?php echo $svg_icons['question']; ?>" alt="Q">
                                <span>安装后访问页面空白/报错？</span>
                                <span class="faq-icon">▼</span>
                            </div>
                            <div class="faq-answer">
                                <p>1. 检查 <code>/storage/logs/</code> 目录下的错误日志<br>
                                2. 确认 <code>config.php</code> 数据库配置正确<br>
                                3. 检查 PHP 版本是否 ≥ 8.0<br>
                                4. 确保所有文件完整上传</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question" onclick="toggleFAQ(this)">
                                <img src="<?php echo $svg_icons['question']; ?>" alt="Q">
                                <span>如何重置管理员密码？</span>
                                <span class="faq-icon">▼</span>
                            </div>
                            <div class="faq-answer">
                                <p>在数据库中执行以下 SQL（替换新密码的哈希值）：<br>
                                <code>UPDATE users SET password = '新密码哈希' WHERE username = 'admin';</code><br>
                                可使用在线工具生成 bcrypt 哈希值。</p>
                            </div>
                        </div>
                    </div>
                </section>
                
                <!-- 提示卡片 -->
                <div class="tip-card">
                    <img src="<?php echo $svg_icons['info']; ?>" alt="提示">
                    <p>
                        <strong>需要帮助？</strong> 如果您在安装过程中遇到任何问题，欢迎查看
                        <a href="/modules/home/version.php">版本信息</a> 或
                        <a href="/modules/home/contact.php">联系技术支持</a>，
                        我们的团队将竭诚为您服务。
                    </p>
                </div>
            </div>
        </main>
        
        <!-- 底部 -->
        <footer class="footer">
            <div class="footer-logo">
                <img src="<?php echo htmlspecialchars(getSiteConfig('site_logo') ?? '/assets/uploads/logo.png'); ?>" alt="Logo">
            </div>
            <div class="footer-links">
                <a href="/">首页</a>
                <a href="/download.php">源码下载</a>
                <a href="/docs.php">技术文档</a>
                <a href="/modules/home/contact.php">联系我们</a>
            </div>
            <div class="footer-copyright">
                <?php echo htmlspecialchars(getSiteConfig('site_copyright') ?? '© 2026 麟泓网科室'); ?>
            </div>
        </footer>
    </div>
    
    <script>
        function toggleFAQ(element) {
            const faqItem = element.closest('.faq-item');
            faqItem.classList.toggle('active');
        }
    </script>
</body>
</html>