<?php
require_once __DIR__ . '/../MPHX/common.php';

// 验证管理员登录
$admin = is_admin_login();
if (!$admin) {
    header('Location: /admin/login.php');
    exit;
}

// 获取所有分类
$categories = array();
$res = $DB->query("SELECT * FROM `program_categories` ORDER BY `sort_order` ASC, `id` ASC");
while ($row = $DB->fetch($res)) {
    $categories[] = $row;
}
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>程序分类管理 - 后台管理系统</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/all.min.css">
    <link rel="stylesheet" href="css/style.css?v=2026040501">
    <style>
        .category-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border: 1px solid #e8eaed;
            border-radius: 6px;
            margin-bottom: 10px;
            background: #fff;
            transition: all 0.2s;
        }
        .category-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-color: #1a73e8;
        }
        .category-icon {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            background: #e8f0fe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1a73e8;
            font-size: 16px;
            margin-right: 12px;
        }
        .category-icon.blue {
            background: #e8f0fe;
            color: #5f6368;
        }
        .category-icon.green {
            background: #e8f0fe;
            color: #5f6368;
        }
        .category-icon.orange {
            background: #e8f0fe;
            color: #5f6368;
        }
        .category-icon.red {
            background: #e8f0fe;
            color: #5f6368;
        }
        .category-icon.cyan {
            background: #e8f0fe;
            color: #5f6368;
        }
        .category-icon.pink {
            background: #e8f0fe;
            color: #5f6368;
        }
        .category-icon {
            background: #e8f0fe;
            color: #5f6368;
        }
        .category-info {
            flex: 1;
        }
        .category-name {
            font-weight: 500;
            color: #202124;
            font-size: 14px;
        }
        .category-sort {
            font-size: 12px;
            color: #5f6368;
            margin-top: 2px;
        }
        .category-actions {
            display: flex;
            gap: 6px;
        }
        .icon-preview {
            width: 38px;
            height: 38px;
            border-radius: 6px;
            background: #e8f0fe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1a73e8;
            font-size: 16px;
            margin-left: 10px;
        }
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #5f6368;
        }
        .empty-state i {
            font-size: 48px;
            margin-bottom: 15px;
            color: #dadce0;
        }
        .form-row {
            display: flex;
            gap: 15px;
            align-items: flex-end;
        }
        .form-row .form-group {
            margin-bottom: 0;
        }
        .icon-categories {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e8eaed;
        }
        .icon-category {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 11px;
            cursor: pointer;
            background: #f1f3f4;
            color: #5f6368;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        .icon-category:hover {
            background: #e8f0fe;
            color: #1a73e8;
        }
        .icon-category.active {
            background: #1a73e8;
            color: #fff;
        }
        .icon-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 10px;
        }
        .icon-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 16px 10px;
            border: 1px solid #e8eaed;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            background: #fff;
            min-height: 85px;
        }
        .icon-item:hover {
            background: #e8f0fe;
            border-color: #1a73e8;
        }
        .icon-item i {
            font-size: 22px;
            color: #1a73e8;
            margin-bottom: 8px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e8f0fe;
            border-radius: 6px;
        }
        .icon-item:hover i {
            background: #1a73e8;
            color: #fff;
        }
        .icon-item span {
            font-size: 12px;
            color: #5f6368;
            text-align: center;
            word-break: break-all;
            line-height: 1.3;
        }
        .icon-item:hover span {
            color: #1a73e8;
        }
        @media (max-width: 768px) {
            .icon-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    </style>
</head>
<body>
    <div class="content-area">
        <!-- 页面标题 -->
        <div class="card">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3><i class="fas fa-folder-open"></i> 程序分类管理</h3>
                    <p class="text-muted" style="margin-top: -10px; margin-bottom: 0;">管理程序分类，用于在添加程序时选择分类</p>
                </div>
                <a href="migrate_categories.php" class="btn btn-info btn-sm"><i class="fas fa-sync-alt"></i> 按市面分类重新规划</a>
            </div>
        </div>

        <!-- 添加分类表单 -->
        <div class="card">
            <h5 style="font-size: 13px; font-weight: 500; margin-bottom: 15px; color: #202124;"><i class="fas fa-plus-circle" style="color: #1a73e8; margin-right: 6px;"></i> 添加新分类</h5>
            <form id="addCategoryForm">
                <div class="form-row">
                    <div class="form-group" style="flex: 2;">
                        <label for="catName">分类名称</label>
                        <input type="text" class="form-control form-control-sm" id="catName" name="name" placeholder="例如：WordPress" required>
                    </div>
                    <div class="form-group" style="flex: 2;">
                        <label for="catIcon">图标类名 <a href="javascript:void(0)" onclick="showIconLibrary('catIcon', 'iconPreview')" style="font-size: 11px; color: #1a73e8; margin-left: 5px;"><i class="fas fa-th"></i> 选择图标</a></label>
                        <div class="d-flex align-items-center">
                            <input type="text" class="form-control form-control-sm" id="catIcon" name="icon" placeholder="fa-wordpress" value="fa-folder">
                            <div class="icon-preview" id="iconPreview">
                                <i class="fas fa-folder"></i>
                            </div>
                        </div>
                        <small class="text-muted">Font Awesome 图标类名</small>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <label for="catSort">排序</label>
                        <input type="number" class="form-control form-control-sm" id="catSort" name="sort_order" placeholder="0" value="0">
                        <small class="text-muted">数字越小越靠前</small>
                    </div>
                    <div class="form-group" style="flex: 1;">
                        <button type="button" class="btn btn-primary btn-sm" onclick="addCategory()" style="width: 100%;">
                            <i class="fas fa-plus"></i> 添加
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 分类列表 -->
        <div class="card">
            <h5 style="font-size: 13px; font-weight: 500; margin-bottom: 15px; color: #202124;"><i class="fas fa-list" style="color: #1a73e8; margin-right: 6px;"></i> 分类列表</h5>
            <?php if (empty($categories)): ?>
            <div class="empty-state">
                <i class="fas fa-folder-open"></i>
                <p>暂无分类，请添加第一个分类</p>
            </div>
            <?php else: ?>
            <div id="categoryList">
                <?php
                // 根据图标类型分配颜色
                function getIconColorClass($icon) {
                    $icon = strtolower($icon);
                    // 电商类 - 橙色
                    if (strpos($icon, 'shopping') !== false || strpos($icon, 'cart') !== false || 
                        strpos($icon, 'store') !== false || strpos($icon, 'credit') !== false ||
                        strpos($icon, 'money') !== false || strpos($icon, 'cash') !== false ||
                        strpos($icon, 'tag') !== false || strpos($icon, 'barcode') !== false ||
                        strpos($icon, 'qrcode') !== false || strpos($icon, 'gift') !== false ||
                        strpos($icon, 'box') !== false || strpos($icon, 'shipping') !== false ||
                        $icon == 'fa-store' || $icon == 'fa-shopping-bag') {
                        return 'orange';
                    }
                    // 社交/论坛类 - 绿色
                    if (strpos($icon, 'comment') !== false || strpos($icon, 'user') !== false ||
                        strpos($icon, 'share') !== false || strpos($icon, 'hashtag') !== false ||
                        strpos($icon, 'at') !== false || strpos($icon, 'address-book') !== false) {
                        return 'green';
                    }
                    // 开发/代码类 - 蓝色
                    if (strpos($icon, 'code') !== false || strpos($icon, 'terminal') !== false ||
                        strpos($icon, 'bug') !== false || strpos($icon, 'laptop-code') !== false ||
                        strpos($icon, 'keyboard') !== false || strpos($icon, 'microchip') !== false ||
                        strpos($icon, 'memory') !== false || strpos($icon, 'usb') !== false ||
                        strpos($icon, 'plug') !== false || strpos($icon, 'sync') !== false ||
                        strpos($icon, 'spinner') !== false) {
                        return 'blue';
                    }
                    // 媒体类 - 粉色
                    if (strpos($icon, 'image') !== false || strpos($icon, 'photo') !== false ||
                        strpos($icon, 'music') !== false || strpos($icon, 'video') !== false ||
                        strpos($icon, 'film') !== false || strpos($icon, 'play') !== false ||
                        strpos($icon, 'pause') !== false || strpos($icon, 'camera') !== false ||
                        strpos($icon, 'microphone') !== false || strpos($icon, 'headphones') !== false) {
                        return 'pink';
                    }
                    // 文件类 - 青色
                    if (strpos($icon, 'folder') !== false || strpos($icon, 'file') !== false) {
                        return 'cyan';
                    }
                    // CMS/框架类 - 紫色（默认）
                    if (strpos($icon, 'wordpress') !== false || strpos($icon, 'drupal') !== false ||
                        strpos($icon, 'joomla') !== false || strpos($icon, 'magento') !== false ||
                        strpos($icon, 'shopify') !== false || strpos($icon, 'github') !== false ||
                        strpos($icon, 'gitlab') !== false || strpos($icon, 'bitbucket') !== false ||
                        strpos($icon, 'laravel') !== false || strpos($icon, 'angular') !== false ||
                        strpos($icon, 'react') !== false || strpos($icon, 'vue') !== false ||
                        strpos($icon, 'node') !== false || strpos($icon, 'npm') !== false ||
                        strpos($icon, 'docker') !== false || strpos($icon, 'aws') !== false) {
                        return '';
                    }
                    // 统计类 - 红色
                    if (strpos($icon, 'chart') !== false || strpos($icon, 'analytics') !== false ||
                        strpos($icon, 'poll') !== false || strpos($icon, 'tachometer') !== false ||
                        strpos($icon, 'gauge') !== false || strpos($icon, 'calculator') !== false) {
                        return 'red';
                    }
                    // 安全类 - 红色
                    if (strpos($icon, 'shield') !== false || strpos($icon, 'lock') !== false ||
                        strpos($icon, 'key') !== false || strpos($icon, 'fingerprint') !== false ||
                        strpos($icon, 'eye') !== false) {
                        return 'red';
                    }
                    // 工具类 - 蓝色
                    if (strpos($icon, 'tool') !== false || strpos($icon, 'wrench') !== false ||
                        strpos($icon, 'cog') !== false || strpos($icon, 'sliders') !== false ||
                        strpos($icon, 'magic') !== false || strpos($icon, 'hammer') !== false ||
                        strpos($icon, 'screwdriver') !== false || strpos($icon, 'ruler') !== false ||
                        strpos($icon, 'clipboard') !== false || strpos($icon, 'tasks') !== false) {
                        return 'blue';
                    }
                    // 数据库/云服务类 - 青色
                    if (strpos($icon, 'database') !== false || strpos($icon, 'server') !== false ||
                        strpos($icon, 'save') !== false || strpos($icon, 'table') !== false ||
                        strpos($icon, 'list') !== false || strpos($icon, 'cloud') !== false ||
                        strpos($icon, 'network') !== false || strpos($icon, 'wifi') !== false) {
                        return 'cyan';
                    }
                    // 办公类 - 橙色
                    if (strpos($icon, 'briefcase') !== false || strpos($icon, 'calendar') !== false ||
                        strpos($icon, 'clock') !== false || strpos($icon, 'envelope') !== false ||
                        strpos($icon, 'paper') !== false || strpos($icon, 'inbox') !== false ||
                        strpos($icon, 'archive') !== false || strpos($icon, 'sticky-note') !== false ||
                        strpos($icon, 'thumbtack') !== false || strpos($icon, 'paperclip') !== false) {
                        return 'orange';
                    }
                    // 默认紫色
                    return '';
                }
                foreach ($categories as $cat):
                    $colorClass = getIconColorClass($cat['icon']);
                ?>
                <div class="category-item" data-id="<?php echo $cat['id']; ?>">
                    <div class="category-icon <?php echo $colorClass; ?>">
                        <i class="fas <?php echo htmlspecialchars($cat['icon']); ?>"></i>
                    </div>
                    <div class="category-info">
                        <div class="category-name"><?php echo htmlspecialchars($cat['name']); ?></div>
                        <div class="category-sort">排序: <?php echo $cat['sort_order']; ?></div>
                    </div>
                    <div class="category-actions">
                        <button class="btn btn-sm btn-warning" onclick="editCategory(<?php echo $cat['id']; ?>, '<?php echo htmlspecialchars($cat['name']); ?>', '<?php echo htmlspecialchars($cat['icon']); ?>', <?php echo $cat['sort_order']; ?>)">
                            <i class="fas fa-edit"></i> 编辑
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deleteCategory(<?php echo $cat['id']; ?>, '<?php echo htmlspecialchars($cat['name']); ?>')">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <!-- 编辑分类模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" style="font-size: 14px;">编辑分类</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="editId">
                    <div class="form-group">
                        <label for="editName">分类名称</label>
                        <input type="text" class="form-control form-control-sm" id="editName" required>
                    </div>
                    <div class="form-group">
                        <label for="editIcon">图标类名 <a href="javascript:void(0)" onclick="showIconLibrary('editIcon', 'editIconPreview')" style="font-size: 11px; color: #1a73e8; margin-left: 5px;"><i class="fas fa-th"></i> 选择图标</a></label>
                        <div class="d-flex align-items-center">
                            <input type="text" class="form-control form-control-sm" id="editIcon">
                            <div class="icon-preview" id="editIconPreview">
                                <i class="fas fa-folder"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="editSort">排序</label>
                        <input type="number" class="form-control form-control-sm" id="editSort">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-sm" onclick="saveEditCategory()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 图标库模态框 -->
    <div class="modal fade" id="iconLibraryModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document" style="max-width: 600px;">
            <div class="modal-content" style="border-radius: 6px; border: 1px solid #e8eaed;">
                <div class="modal-header" style="background: #f8f9fa; border-bottom: 1px solid #e8eaed; padding: 12px 16px;">
                    <h5 class="modal-title" style="font-size: 14px; color: #202124; font-weight: 500;"><i class="fas fa-th" style="color: #1a73e8; margin-right: 6px;"></i> 选择图标</h5>
                    <button type="button" class="close" data-dismiss="modal" style="padding: 0; margin: 0;">
                        <span style="font-size: 20px; color: #5f6368;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="max-height: 500px; overflow-y: auto; padding: 16px;">
                    <input type="hidden" id="targetInput">
                    <input type="hidden" id="targetPreview">
                    <div class="mb-3">
                        <input type="text" class="form-control form-control-sm" id="iconSearch" placeholder="搜索图标..." onkeyup="filterIcons()" style="border-radius: 6px; border: 1px solid #e8eaed;">
                    </div>
                    <!-- 分类标签 -->
                    <div class="icon-categories mb-3">
                        <span class="icon-category active" data-category="all">全部</span>
                        <span class="icon-category" data-category="file">文件</span>
                        <span class="icon-category" data-category="cms">CMS</span>
                        <span class="icon-category" data-category="social">社交</span>
                        <span class="icon-category" data-category="shop">电商</span>
                        <span class="icon-category" data-category="content">内容</span>
                        <span class="icon-category" data-category="tool">工具</span>
                        <span class="icon-category" data-category="dev">开发</span>
                        <span class="icon-category" data-category="framework">框架</span>
                        <span class="icon-category" data-category="db">数据库</span>
                        <span class="icon-category" data-category="cloud">云服务</span>
                        <span class="icon-category" data-category="security">安全</span>
                        <span class="icon-category" data-category="chart">统计</span>
                        <span class="icon-category" data-category="media">媒体</span>
                        <span class="icon-category" data-category="office">办公</span>
                        <span class="icon-category" data-category="other">其他</span>
                    </div>
                    <div id="iconGrid" class="icon-grid"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script>
        // 常用图标库 - 带中文名称和分类
        var commonIcons = [
            // 文件夹/文件类
            {icon: 'folder', name: '文件夹', category: 'file'},
            {icon: 'folder-open', name: '打开文件夹', category: 'file'},
            {icon: 'file', name: '文件', category: 'file'},
            {icon: 'file-alt', name: '文档', category: 'file'},
            {icon: 'file-code', name: '代码文件', category: 'file'},
            {icon: 'file-archive', name: '压缩文件', category: 'file'},
            // 网站/CMS类
            {icon: 'wordpress', name: 'WordPress', category: 'cms'},
            {icon: 'drupal', name: 'Drupal', category: 'cms'},
            {icon: 'joomla', name: 'Joomla', category: 'cms'},
            {icon: 'magento', name: 'Magento', category: 'cms'},
            {icon: 'shopify', name: 'Shopify', category: 'cms'},
            {icon: 'github', name: 'GitHub', category: 'cms'},
            {icon: 'gitlab', name: 'GitLab', category: 'cms'},
            {icon: 'bitbucket', name: 'Bitbucket', category: 'cms'},
            // 论坛/社交类
            {icon: 'comments', name: '评论', category: 'social'},
            {icon: 'comment', name: '消息', category: 'social'},
            {icon: 'comment-dots', name: '对话', category: 'social'},
            {icon: 'comment-alt', name: '论坛', category: 'social'},
            {icon: 'users', name: '用户组', category: 'social'},
            {icon: 'user-friends', name: '好友', category: 'social'},
            {icon: 'user', name: '用户', category: 'social'},
            {icon: 'user-circle', name: '个人', category: 'social'},
            {icon: 'address-book', name: '通讯录', category: 'social'},
            {icon: 'share-alt', name: '分享', category: 'social'},
            {icon: 'hashtag', name: '话题', category: 'social'},
            {icon: 'at', name: '@', category: 'social'},
            // 电商类
            {icon: 'shopping-cart', name: '购物车', category: 'shop'},
            {icon: 'shopping-bag', name: '购物袋', category: 'shop'},
            {icon: 'store', name: '商店', category: 'shop'},
            {icon: 'credit-card', name: '信用卡', category: 'shop'},
            {icon: 'money-bill', name: '钞票', category: 'shop'},
            {icon: 'money-bill-wave', name: '支付', category: 'shop'},
            {icon: 'cash-register', name: '收银', category: 'shop'},
            {icon: 'receipt', name: '收据', category: 'shop'},
            {icon: 'tag', name: '标签', category: 'shop'},
            {icon: 'tags', name: '标签组', category: 'shop'},
            {icon: 'barcode', name: '条码', category: 'shop'},
            {icon: 'qrcode', name: '二维码', category: 'shop'},
            {icon: 'gift', name: '礼物', category: 'shop'},
            {icon: 'box', name: '包裹', category: 'shop'},
            {icon: 'shipping-fast', name: '快递', category: 'shop'},
            // 博客/内容类
            {icon: 'blog', name: '博客', category: 'content'},
            {icon: 'newspaper', name: '新闻', category: 'content'},
            {icon: 'rss', name: '订阅', category: 'content'},
            {icon: 'bookmark', name: '书签', category: 'content'},
            {icon: 'book', name: '书籍', category: 'content'},
            {icon: 'book-open', name: '打开的书', category: 'content'},
            {icon: 'readme', name: '文档', category: 'content'},
            {icon: 'scroll', name: '卷轴', category: 'content'},
            {icon: 'file-word', name: 'Word', category: 'content'},
            {icon: 'file-excel', name: 'Excel', category: 'content'},
            {icon: 'file-powerpoint', name: 'PPT', category: 'content'},
            {icon: 'file-pdf', name: 'PDF', category: 'content'},
            {icon: 'file-image', name: '图片文件', category: 'content'},
            {icon: 'file-video', name: '视频文件', category: 'content'},
            {icon: 'file-audio', name: '音频文件', category: 'content'},
            // 工具类
            {icon: 'tools', name: '工具', category: 'tool'},
            {icon: 'wrench', name: '扳手', category: 'tool'},
            {icon: 'cog', name: '设置', category: 'tool'},
            {icon: 'cogs', name: '齿轮', category: 'tool'},
            {icon: 'sliders-h', name: '滑块', category: 'tool'},
            {icon: 'magic', name: '魔法', category: 'tool'},
            {icon: 'hammer', name: '锤子', category: 'tool'},
            {icon: 'screwdriver', name: '螺丝刀', category: 'tool'},
            {icon: 'ruler', name: '尺子', category: 'tool'},
            {icon: 'pencil-ruler', name: '设计', category: 'tool'},
            {icon: 'layer-group', name: '图层', category: 'tool'},
            {icon: 'sitemap', name: '结构', category: 'tool'},
            {icon: 'tasks', name: '任务', category: 'tool'},
            {icon: 'clipboard', name: '剪贴板', category: 'tool'},
            {icon: 'clipboard-list', name: '清单', category: 'tool'},
            {icon: 'clipboard-check', name: '完成', category: 'tool'},
            // 开发类
            {icon: 'code', name: '代码', category: 'dev'},
            {icon: 'code-branch', name: '分支', category: 'dev'},
            {icon: 'terminal', name: '终端', category: 'dev'},
            {icon: 'laptop-code', name: '编程', category: 'dev'},
            {icon: 'bug', name: 'Bug', category: 'dev'},
            {icon: 'rocket', name: '火箭', category: 'dev'},
            {icon: 'keyboard', name: '键盘', category: 'dev'},
            {icon: 'microchip', name: '芯片', category: 'dev'},
            {icon: 'memory', name: '内存', category: 'dev'},
            {icon: 'hdd', name: '硬盘', category: 'dev'},
            {icon: 'compact-disc', name: '光盘', category: 'dev'},
            {icon: 'usb', name: 'USB', category: 'dev'},
            {icon: 'plug', name: '插头', category: 'dev'},
            {icon: 'power-off', name: '电源', category: 'dev'},
            {icon: 'sync', name: '同步', category: 'dev'},
            {icon: 'spinner', name: '加载', category: 'dev'},
            // 框架类
            {icon: 'laravel', name: 'Laravel', category: 'framework'},
            {icon: 'angular', name: 'Angular', category: 'framework'},
            {icon: 'react', name: 'React', category: 'framework'},
            {icon: 'vuejs', name: 'Vue', category: 'framework'},
            {icon: 'node', name: 'Node.js', category: 'framework'},
            {icon: 'npm', name: 'NPM', category: 'framework'},
            {icon: 'yarn', name: 'Yarn', category: 'framework'},
            {icon: 'gulp', name: 'Gulp', category: 'framework'},
            {icon: 'grunt', name: 'Grunt', category: 'framework'},
            {icon: 'sass', name: 'Sass', category: 'framework'},
            {icon: 'less', name: 'Less', category: 'framework'},
            {icon: 'css3', name: 'CSS3', category: 'framework'},
            {icon: 'html5', name: 'HTML5', category: 'framework'},
            {icon: 'js', name: 'JavaScript', category: 'framework'},
            {icon: 'java', name: 'Java', category: 'framework'},
            {icon: 'python', name: 'Python', category: 'framework'},
            {icon: 'php', name: 'PHP', category: 'framework'},
            {icon: 'docker', name: 'Docker', category: 'framework'},
            {icon: 'aws', name: 'AWS', category: 'framework'},
            {icon: 'google', name: 'Google', category: 'framework'},
            {icon: 'apple', name: 'Apple', category: 'framework'},
            {icon: 'android', name: 'Android', category: 'framework'},
            {icon: 'linux', name: 'Linux', category: 'framework'},
            {icon: 'ubuntu', name: 'Ubuntu', category: 'framework'},
            {icon: 'centos', name: 'CentOS', category: 'framework'},
            {icon: 'fedora', name: 'Fedora', category: 'framework'},
            {icon: 'redhat', name: 'RedHat', category: 'framework'},
            {icon: 'suse', name: 'SUSE', category: 'framework'},
            {icon: 'jenkins', name: 'Jenkins', category: 'framework'},
            {icon: 'jira', name: 'Jira', category: 'framework'},
            {icon: 'confluence', name: 'Confluence', category: 'framework'},
            {icon: 'trello', name: 'Trello', category: 'framework'},
            {icon: 'slack', name: 'Slack', category: 'framework'},
            {icon: 'discord', name: 'Discord', category: 'framework'},
            {icon: 'skype', name: 'Skype', category: 'framework'},
            {icon: 'whatsapp', name: 'WhatsApp', category: 'framework'},
            {icon: 'telegram', name: 'Telegram', category: 'framework'},
            {icon: 'weixin', name: '微信', category: 'framework'},
            {icon: 'weibo', name: '微博', category: 'framework'},
            {icon: 'qq', name: 'QQ', category: 'framework'},
            // 数据库类
            {icon: 'database', name: '数据库', category: 'db'},
            {icon: 'server', name: '服务器', category: 'db'},
            {icon: 'save', name: '保存', category: 'db'},
            {icon: 'table', name: '表格', category: 'db'},
            {icon: 'columns', name: '列', category: 'db'},
            {icon: 'list-ul', name: '列表', category: 'db'},
            {icon: 'list-ol', name: '序号', category: 'db'},
            // 云服务类
            {icon: 'cloud', name: '云', category: 'cloud'},
            {icon: 'cloud-upload-alt', name: '上传', category: 'cloud'},
            {icon: 'cloud-download-alt', name: '下载', category: 'cloud'},
            {icon: 'cloud-meatball', name: '云存储', category: 'cloud'},
            {icon: 'network-wired', name: '网络', category: 'cloud'},
            {icon: 'wifi', name: 'WiFi', category: 'cloud'},
            {icon: 'broadcast-tower', name: '广播', category: 'cloud'},
            {icon: 'satellite', name: '卫星', category: 'cloud'},
            {icon: 'satellite-dish', name: '雷达', category: 'cloud'},
            // 安全类
            {icon: 'shield-alt', name: '盾牌', category: 'security'},
            {icon: 'lock', name: '锁定', category: 'security'},
            {icon: 'unlock', name: '解锁', category: 'security'},
            {icon: 'key', name: '钥匙', category: 'security'},
            {icon: 'user-shield', name: '用户保护', category: 'security'},
            {icon: 'user-lock', name: '用户锁定', category: 'security'},
            {icon: 'user-secret', name: '保密', category: 'security'},
            {icon: 'fingerprint', name: '指纹', category: 'security'},
            {icon: 'eye', name: '查看', category: 'security'},
            {icon: 'eye-slash', name: '隐藏', category: 'security'},
            // 统计类
            {icon: 'chart-line', name: '折线图', category: 'chart'},
            {icon: 'chart-bar', name: '柱状图', category: 'chart'},
            {icon: 'chart-pie', name: '饼图', category: 'chart'},
            {icon: 'chart-area', name: '面积图', category: 'chart'},
            {icon: 'analytics', name: '分析', category: 'chart'},
            {icon: 'poll', name: '投票', category: 'chart'},
            {icon: 'tachometer-alt', name: '仪表盘', category: 'chart'},
            {icon: 'gauge', name: '仪表', category: 'chart'},
            {icon: 'percentage', name: '百分比', category: 'chart'},
            {icon: 'calculator', name: '计算器', category: 'chart'},
            // 媒体类
            {icon: 'image', name: '图片', category: 'media'},
            {icon: 'images', name: '图库', category: 'media'},
            {icon: 'photo-video', name: '媒体', category: 'media'},
            {icon: 'music', name: '音乐', category: 'media'},
            {icon: 'video', name: '视频', category: 'media'},
            {icon: 'film', name: '电影', category: 'media'},
            {icon: 'play', name: '播放', category: 'media'},
            {icon: 'pause', name: '暂停', category: 'media'},
            {icon: 'stop', name: '停止', category: 'media'},
            {icon: 'youtube', name: 'YouTube', category: 'media'},
            {icon: 'vimeo', name: 'Vimeo', category: 'media'},
            {icon: 'tiktok', name: 'TikTok', category: 'media'},
            {icon: 'instagram', name: 'Instagram', category: 'media'},
            {icon: 'twitter', name: 'Twitter', category: 'media'},
            {icon: 'facebook', name: 'Facebook', category: 'media'},
            {icon: 'linkedin', name: 'LinkedIn', category: 'media'},
            // 办公类
            {icon: 'briefcase', name: '公文包', category: 'office'},
            {icon: 'calendar', name: '日历', category: 'office'},
            {icon: 'calendar-alt', name: '日历2', category: 'office'},
            {icon: 'clock', name: '时钟', category: 'office'},
            {icon: 'envelope', name: '邮件', category: 'office'},
            {icon: 'paper-plane', name: '发送', category: 'office'},
            {icon: 'inbox', name: '收件箱', category: 'office'},
            {icon: 'archive', name: '归档', category: 'office'},
            {icon: 'folder-plus', name: '新建文件夹', category: 'office'},
            {icon: 'folder-minus', name: '删除文件夹', category: 'office'},
            {icon: 'sticky-note', name: '便签', category: 'office'},
            {icon: 'thumbtack', name: '图钉', category: 'office'},
            {icon: 'paperclip', name: '回形针', category: 'office'},
            // 其他常用
            {icon: 'globe', name: '地球', category: 'other'},
            {icon: 'language', name: '语言', category: 'other'},
            {icon: 'map', name: '地图', category: 'other'},
            {icon: 'map-marker-alt', name: '定位', category: 'other'},
            {icon: 'flag', name: '旗帜', category: 'other'},
            {icon: 'star', name: '星星', category: 'other'},
            {icon: 'heart', name: '爱心', category: 'other'},
            {icon: 'thumbs-up', name: '点赞', category: 'other'},
            {icon: 'check', name: '勾选', category: 'other'},
            {icon: 'check-circle', name: '确认', category: 'other'},
            {icon: 'info-circle', name: '信息', category: 'other'},
            {icon: 'question-circle', name: '帮助', category: 'other'},
            {icon: 'exclamation-circle', name: '警告', category: 'other'},
            {icon: 'exclamation-triangle', name: '错误', category: 'other'},
            {icon: 'bell', name: '铃铛', category: 'other'},
            {icon: 'bullhorn', name: '喇叭', category: 'other'},
            {icon: 'home', name: '首页', category: 'other'},
            {icon: 'building', name: '建筑', category: 'other'},
            {icon: 'hospital', name: '医院', category: 'other'},
            {icon: 'hotel', name: '酒店', category: 'other'},
            {icon: 'car', name: '汽车', category: 'other'},
            {icon: 'bus', name: '公交', category: 'other'},
            {icon: 'plane', name: '飞机', category: 'other'},
            {icon: 'train', name: '火车', category: 'other'},
            {icon: 'phone', name: '电话', category: 'other'},
            {icon: 'mobile-alt', name: '手机', category: 'other'},
            {icon: 'gamepad', name: '游戏', category: 'other'},
            {icon: 'trophy', name: '奖杯', category: 'other'},
            {icon: 'camera', name: '相机', category: 'other'},
            {icon: 'microphone', name: '麦克风', category: 'other'},
            {icon: 'headphones', name: '耳机', category: 'other'},
            {icon: 'search', name: '搜索', category: 'other'},
            {icon: 'filter', name: '筛选', category: 'other'},
            {icon: 'edit', name: '编辑', category: 'other'},
            {icon: 'trash', name: '删除', category: 'other'},
            {icon: 'download', name: '下载', category: 'other'},
            {icon: 'upload', name: '上传', category: 'other'},
            {icon: 'link', name: '链接', category: 'other'},
            {icon: 'sun', name: '太阳', category: 'other'},
            {icon: 'moon', name: '月亮', category: 'other'},
            {icon: 'fire', name: '火焰', category: 'other'}
        ];

        // 当前选中的分类
        var currentCategory = 'all';

        // 显示图标库
        function showIconLibrary(inputId, previewId) {
            $('#targetInput').val(inputId);
            $('#targetPreview').val(previewId);
            $('#iconSearch').val('');
            currentCategory = 'all';
            $('.icon-category').removeClass('active');
            $('.icon-category[data-category="all"]').addClass('active');
            renderIcons(commonIcons);
            $('#iconLibraryModal').modal('show');
        }

        // 渲染图标网格
        function renderIcons(icons) {
            var html = '';
            icons.forEach(function(item) {
                html += '<div class="icon-item" onclick="selectIcon(\'' + item.icon + '\')">';
                html += '<i class="fas fa-' + item.icon + '"></i>';
                html += '<span>' + item.name + '</span>';
                html += '</div>';
            });
            $('#iconGrid').html(html);
        }

        // 筛选图标
        function filterIcons() {
            var keyword = $('#iconSearch').val().toLowerCase();
            var filtered = commonIcons;
            
            // 先按分类筛选
            if (currentCategory !== 'all') {
                filtered = filtered.filter(function(item) {
                    return item.category === currentCategory;
                });
            }
            
            // 再按关键词筛选
            if (keyword) {
                filtered = filtered.filter(function(item) {
                    return item.name.indexOf(keyword) !== -1 || item.icon.indexOf(keyword) !== -1;
                });
            }
            
            renderIcons(filtered);
        }

        // 分类标签点击事件
        $(document).on('click', '.icon-category', function() {
            $('.icon-category').removeClass('active');
            $(this).addClass('active');
            currentCategory = $(this).data('category');
            filterIcons();
        });

        // 选择图标
        function selectIcon(icon) {
            var inputId = $('#targetInput').val();
            var previewId = $('#targetPreview').val();
            $('#' + inputId).val('fa-' + icon);
            $('#' + previewId).html('<i class="fas fa-' + icon + '"></i>');
            $('#iconLibraryModal').modal('hide');
        }

        // 图标预览
        $('#catIcon').on('input', function() {
            var icon = $(this).val() || 'fa-folder';
            $('#iconPreview').html('<i class="fas ' + icon + '"></i>');
        });

        $('#editIcon').on('input', function() {
            var icon = $(this).val() || 'fa-folder';
            $('#editIconPreview').html('<i class="fas ' + icon + '"></i>');
        });

        // 添加分类
        function addCategory() {
            var name = $('#catName').val().trim();
            var icon = $('#catIcon').val().trim() || 'fa-folder';
            var sort = $('#catSort').val() || 0;

            if (!name) {
                alert('请输入分类名称');
                return;
            }

            $.ajax({
                type: 'POST',
                url: 'ajax.php',
                data: {
                    egn: 'add_category',
                    name: name,
                    icon: icon,
                    sort_order: sort
                },
                dataType: 'json',
                success: function(data) {
                    alert(data.code);
                    if (data.code == '添加成功') {
                        location.reload();
                    }
                },
                error: function() {
                    alert('操作失败，请重试');
                }
            });
        }

        // 编辑分类
        function editCategory(id, name, icon, sort) {
            $('#editId').val(id);
            $('#editName').val(name);
            $('#editIcon').val(icon);
            $('#editSort').val(sort);
            $('#editIconPreview').html('<i class="fas ' + icon + '"></i>');
            $('#editModal').modal('show');
        }

        // 保存编辑
        function saveEditCategory() {
            var id = $('#editId').val();
            var name = $('#editName').val().trim();
            var icon = $('#editIcon').val().trim() || 'fa-folder';
            var sort = $('#editSort').val() || 0;

            if (!name) {
                alert('请输入分类名称');
                return;
            }

            $.ajax({
                type: 'POST',
                url: 'ajax.php',
                data: {
                    egn: 'edit_category',
                    id: id,
                    name: name,
                    icon: icon,
                    sort_order: sort
                },
                dataType: 'json',
                success: function(data) {
                    alert(data.code);
                    if (data.code == '编辑成功') {
                        $('#editModal').modal('hide');
                        location.reload();
                    }
                },
                error: function() {
                    alert('操作失败，请重试');
                }
            });
        }

        // 删除分类
        function deleteCategory(id, name) {
            if (!confirm('确定要删除分类 "' + name + '" 吗？\n注意：删除后，已使用该分类的程序将显示为"其他"分类。')) {
                return;
            }

            $.ajax({
                type: 'POST',
                url: 'ajax.php',
                data: {
                    egn: 'delete_category',
                    id: id
                },
                dataType: 'json',
                success: function(data) {
                    alert(data.code);
                    if (data.code == '删除成功') {
                        location.reload();
                    }
                },
                error: function() {
                    alert('操作失败，请重试');
                }
            });
        }
    </script>
</body>
</html>
