@extends('admin.layouts.admin')

@section('title', '集合管理')

@section('page-title', '集合管理')

@push('styles')
<style>
    .collection-card {
        cursor: pointer;
        transition: all 0.2s;
    }
    .collection-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .collection-card.active {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
    }

    /* 树形结构样式 */
    .tree-container {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        min-height: 400px;
    }
    .tree-node {
        position: relative;
        padding: 0.5rem;
        margin: 0.25rem 0;
    }
    .tree-node-content {
        display: flex;
        align-items: center;
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 6px;
        padding: 0.75rem 1rem;
        transition: all 0.2s;
    }
    .tree-node-content:hover {
        border-color: #667eea;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .tree-node-content.selected {
        border-color: #667eea;
        background: #f8f9ff;
    }
    .tree-node-content.disabled {
        opacity: 0.5;
        background: #f5f5f5;
    }
    .tree-node-toggle {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #6c757d;
        flex-shrink: 0;
    }
    .tree-node-toggle:hover {
        color: #495057;
    }
    .tree-node-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        margin-right: 0.75rem;
        flex-shrink: 0;
    }
    .tree-node-icon.banner { background: #e3f2fd; color: #1976d2; }
    .tree-node-icon.banner-half { background: #e3f2fd; color: #1565c0; }
    .tree-node-icon.banner-third { background: #e3f2fd; color: #0d47a1; }
    .tree-node-icon.banner-fourth { background: #e3f2fd; color: #0d47a1; }
    .tree-node-icon.section { background: #f3e5f5; color: #7b1fa2; }
    .tree-node-icon.category { background: #e8f5e9; color: #388e3c; }
    .tree-node-icon.campaign { background: #fff3e0; color: #f57c00; }
    .tree-node-icon.card { background: #e0f7fa; color: #00838f; }
    .tree-node-icon.card-half { background: #e0f7fa; color: #006064; }
    .tree-node-icon.card-third { background: #e0f7fa; color: #004d40; }
    .tree-node-icon.card-fourth { background: #e0f7fa; color: #00695c; }
    .tree-node-icon.carousel { background: #fce4ec; color: #c2185b; }
    .tree-node-icon.applepay_redirect { background: #f1f8e9; color: #558b2f; }
    .tree-node-icon.default { background: #eceff1; color: #546e7a; }

    .tree-node-info {
        flex: 1;
        min-width: 0;
    }
    .tree-node-title {
        font-weight: 500;
        color: #212529;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tree-node-meta {
        font-size: 0.75rem;
        color: #6c757d;
    }
    .tree-node-actions {
        display: flex;
        gap: 0.25rem;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .tree-node-content:hover .tree-node-actions {
        opacity: 1;
    }
    .tree-node-actions .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    .tree-children {
        margin-left: 2rem;
        border-left: 2px dashed #dee2e6;
        padding-left: 0.5rem;
    }
    .tree-children.collapsed {
        display: none;
    }

    /* SortableJS 拖拽样式 */
    .sortable-ghost {
        opacity: 0.4;
    }
    .sortable-drag {
        opacity: 1;
    }
    .sortable-chosen {
        background: #f8f9ff;
    }

    /* 空状态 */
    .tree-empty {
        text-align: center;
        padding: 3rem;
        color: #6c757d;
    }

    /* 节点编辑表单 */
    .node-form-group {
        margin-bottom: 1rem;
    }
    .node-form-group label {
        font-weight: 500;
        margin-bottom: 0.25rem;
        display: block;
    }

    /* 状态徽章 */
    .status-badge {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }

    /* Offer 搜索结果样式 */
    .offer-search-item {
        transition: all 0.2s;
    }
    .offer-search-item:hover {
        background: #f8f9fa;
        border-color: #667eea !important;
    }

    /* 保存按钮闪烁效果 */
    .btn-warning.save-btn {
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.7; }
        100% { opacity: 1; }
    }

    /* 渠道标签删除按钮样式 */
    #channelTabs .nav-item {
        position: relative;
    }
    #channelTabs .channel-close-btn {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        opacity: 0.5;
        transition: opacity 0.2s, transform 0.2s;
        padding: 2px;
        width: 18px;
        height: 18px;
        font-size: 0.75rem;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
    }
    #channelTabs .nav-item:hover .channel-close-btn {
        opacity: 0.8;
    }
    #channelTabs .channel-close-btn:hover {
        opacity: 1 !important;
        transform: translateY(-50%) scale(1.1);
        background-color: rgba(0, 0, 0, 0.2);
    }
    #channelTabs .nav-link.active ~ .channel-close-btn {
        background-color: rgba(255, 255, 255, 0.2);
    }
    #channelTabs .nav-link.active ~ .channel-close-btn:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }
    #channelTabs .nav-link {
        padding-right: 2rem;
    }
</style>
@endpush

@section('content')
<div class="row">
    <!-- 左侧：集合列表 -->
    <div class="col-md-4 col-lg-3">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-folder-open me-2"></i>集合列表</span>
                <button class="btn btn-primary btn-sm" onclick="showCreateCollectionModal()">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
            <div class="card-body p-2">
                <!-- 搜索框 -->
                <div class="input-group input-group-sm mb-2">
                    <input type="text" class="form-control" id="collectionSearchInput" placeholder="搜索集合..." onkeypress="if(event.key==='Enter') searchCollections()">
                    <button class="btn btn-outline-secondary" type="button" onclick="searchCollections()">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="card-body p-0" id="collectionList">
                <div class="text-center py-4 text-muted">
                    <i class="fas fa-spinner fa-spin"></i> 加载中...
                </div>
            </div>
            <div class="card-footer p-2" id="collectionPagination" style="display: none;">
                <div class="d-flex justify-content-between align-items-center">
                    <small class="text-muted" id="collectionCount">共 0 个集合</small>
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-secondary" id="prevPageBtn" onclick="loadCollectionsPage(currentPage - 1)" disabled>
                            <i class="fas fa-chevron-left"></i>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" disabled>
                            <span id="pageInfo">1/1</span>
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="nextPageBtn" onclick="loadCollectionsPage(currentPage + 1)" disabled>
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧：节点树编辑器 -->
    <div class="col-md-8 col-lg-9">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>
                    <i class="fas fa-sitemap me-2"></i>
                    <span id="currentCollectionName">请选择一个集合</span>
                </span>
                <div id="treeActions" style="display: none;">
                    <button class="btn btn-primary btn-sm me-2" onclick="saveAllNodes()" id="saveNodesBtn">
                        <i class="fas fa-save me-1"></i>保存
                    </button>
                    <button class="btn btn-success btn-sm me-2" onclick="addRootNode()">
                        <i class="fas fa-plus me-1"></i>添加节点
                    </button>
                    <button class="btn btn-outline-info btn-sm me-2" onclick="showCollectionJsonModal()">
                        <i class="fas fa-code me-1"></i>JSON
                    </button>
                    <button class="btn btn-outline-secondary btn-sm me-2" onclick="expandAll()">
                        <i class="fas fa-expand-alt me-1"></i>展开全部
                    </button>
                    <button class="btn btn-outline-secondary btn-sm" onclick="collapseAll()">
                        <i class="fas fa-compress-alt me-1"></i>折叠全部
                    </button>
                </div>
            </div>
            <div class="card-body" id="channelTabsContainer" style="display: none;">
                <!-- 渠道选择和Tab -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <ul class="nav nav-tabs flex-grow-1 border-0" id="channelTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="default-tab" data-bs-toggle="tab" data-bs-target="#default-tab-pane" type="button" role="tab" onclick="switchChannel(null)">
                                默认内容
                            </button>
                        </li>
                    </ul>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-primary dropdown-toggle" type="button" id="addChannelDropdown" data-bs-toggle="dropdown">
                            <i class="fas fa-plus me-1"></i>添加渠道
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end" id="issuerDropdownMenu">
                            <li><a class="dropdown-item disabled">加载中...</a></li>
                        </ul>
                    </div>
                </div>

                <!-- Tab内容区 -->
                <div class="tab-content" id="channelTabContent">
                    <div class="tab-pane fade show active" id="default-tab-pane" role="tabpanel">
                        <div class="tree-container" id="treeContainer">
                            <div class="tree-empty">
                                <i class="fas fa-mouse-pointer fa-3x mb-3"></i>
                                <p>请从左侧选择一个集合开始编辑</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 创建/编辑集合模态框 -->
<div class="modal fade" id="collectionModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="collectionModalTitle">创建集合</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="collectionId">
                <div class="mb-3">
                    <label class="form-label">Code <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="collectionCode" placeholder="如: home_carousel">
                    <small class="text-muted">唯一标识符，用于API调用</small>
                </div>
                <div class="mb-3">
                    <label class="form-label">名称 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="collectionName" placeholder="如: 首页轮播图">
                </div>
                <div class="mb-3">
                    <label class="form-label">描述</label>
                    <textarea class="form-control" id="collectionDescription" rows="3"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveCollection()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 创建/编辑节点模态框 -->
<div class="modal fade" id="nodeModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="nodeModalTitle">添加节点</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="nodeId">
                <input type="hidden" id="nodeParentId">

                <div class="row">
                    <div class="col-md-6">
                        <div class="node-form-group">
                            <label>类型 <span class="text-danger">*</span></label>
                            <select class="form-select" id="nodeType">
                                <option value="default">默认 (Default)</option>
                                <option value="banner">标题图 (Banner)</option>
                                <option value="banner-half">标题图-半屏 (Banner Half)</option>
                                <option value="banner-third">标题图-三分 (Banner Third)</option>
                                <option value="banner-fourth">标题图-四分 (Banner Fourth)</option>
                                <option value="section">分区 (Section)</option>
                                <option value="category">分类 (Category)</option>
                                <option value="campaign">活动 (Campaign)</option>
                                <option value="card">卡片 (Card)</option>
                                <option value="card-half">卡片-半屏 (Card Half)</option>
                                <option value="card-third">卡片-三分 (Card Third)</option>
                                <option value="card-fourth">卡片-四分 (Card Fourth)</option>
                                <option value="carousel">轮播图 (Carousel)</option>
                                <option value="applepay_redirect">Apple Pay跳转 (Apple Pay Redirect)</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="node-form-group">
                            <label>状态</label>
                            <select class="form-select" id="nodeStatus">
                                <option value="1">显示</option>
                                <option value="0">隐藏</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="node-form-group">
                    <label>标题 <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="nodeTitle" placeholder="节点标题">
                </div>

                <div class="node-form-group">
                    <label>副标题</label>
                    <input type="text" class="form-control" id="nodeSubtitle" placeholder="节点副标题">
                </div>

                <!-- 关联内容区域（banner 和 card 类型显示） -->
                <div id="associationGroup" style="display: none;">
                    <!-- 关联类型选择 -->
                    <div class="node-form-group">
                        <label>关联类型</label>
                        <select class="form-select" id="associationType" onchange="toggleAssociationSearch()">
                            <option value="">不关联</option>
                            <option value="offer">礼遇 (Offer)</option>
                            <option value="campaign">活动 (Campaign)</option>
                        </select>
                    </div>

                    <!-- Offer 搜索区域 -->
                    <div class="node-form-group" id="offerSearchGroup" style="display: none;">
                        <label>搜索礼遇 <span class="text-muted">(选择后自动填充信息)</span></label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="offerSearchInput" placeholder="输入关键词搜索礼遇...">
                            <button class="btn btn-outline-secondary" type="button" onclick="searchOffers()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        <input type="hidden" id="nodeOfferOid">
                        <div id="offerSearchResults" class="mt-2" style="max-height: 200px; overflow-y: auto;"></div>
                        <div id="selectedOfferInfo" class="mt-2" style="display: none;">
                            <div class="alert alert-info py-2 mb-0">
                                <small><i class="fas fa-check-circle me-1"></i>已选择: <span id="selectedOfferName"></span></small>
                                <button type="button" class="btn-close btn-sm float-end" onclick="clearSelectedOffer()"></button>
                            </div>
                        </div>
                    </div>

                    <!-- Campaign 搜索区域 -->
                    <div class="node-form-group" id="campaignSearchGroup" style="display: none;">
                        <label>搜索活动 <span class="text-muted">(选择后自动填充信息)</span></label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="campaignSearchInput" placeholder="输入关键词搜索活动...">
                            <button class="btn btn-outline-secondary" type="button" onclick="searchCampaigns()">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                        <input type="hidden" id="nodeCampaignId">
                        <div id="campaignSearchResults" class="mt-2" style="max-height: 200px; overflow-y: auto;"></div>
                        <div id="selectedCampaignInfo" class="mt-2" style="display: none;">
                            <div class="alert alert-info py-2 mb-0">
                                <small><i class="fas fa-check-circle me-1"></i>已选择: <span id="selectedCampaignName"></span></small>
                                <button type="button" class="btn-close btn-sm float-end" onclick="clearSelectedCampaign()"></button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="node-form-group">
                    <label>图片</label>
                    <!-- 图片预览 -->
                    <div class="mb-2">
                        <img id="nodeImagePreview" class="border rounded"
                            style="display: none; max-width: 200px; max-height: 150px; object-fit: contain; background: #f8f9fa;">
                    </div>
                    <div class="d-grid gap-2">
                        <!-- 文件上传 -->
                        <input type="file" class="form-control" id="nodeImageFile" accept="image/*,.svg"
                            onchange="uploadNodeImage(this)">
                        <!-- URL 输入 -->
                        <div class="input-group">
                            <input type="text" class="form-control" id="nodeImageUrl" placeholder="或输入图片URL">
                            <button type="button" class="btn btn-outline-secondary" onclick="previewImageFromUrl()">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                        <!-- 操作按钮 -->
                        <div class="btn-group btn-group-sm" role="group" id="nodeImageActions" style="display: none;">
                            <button type="button" class="btn btn-outline-danger"
                                onclick="clearNodeImage()">
                                <i class="fas fa-trash"></i> 清除图片
                            </button>
                        </div>
                    </div>
                    <small class="text-muted">支持 JPEG, PNG, GIF, WebP, SVG 格式，最大 5MB</small>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="node-form-group">
                            <label>H5 链接</label>
                            <input type="text" class="form-control" id="nodeLinkH5" placeholder="/path 或 https://...">
                            <small class="text-muted">H5端跳转路径或外部链接</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="node-form-group">
                            <label>小程序链接</label>
                            <input type="text" class="form-control" id="nodeLinkMiniapp" placeholder="/pages/...">
                            <small class="text-muted">小程序端跳转路径</small>
                        </div>
                    </div>
                </div>

                <!-- 白名单用户管理 -->
                <div class="node-form-group">
                    <label>白名单用户</label>
                    <div class="card">
                        <div class="card-body py-2">
                            <!-- 全局白名单控制 -->
                            <div class="mb-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="nodeGlobalWhitelist" onchange="updateNodeWhitelistConfig()">
                                    <label class="form-check-label" for="nodeGlobalWhitelist">
                                        启用全局白名单
                                    </label>
                                    <small class="form-text text-muted d-block">勾选后，在全局白名单中的用户都可以查看此节点</small>
                                </div>
                            </div>

                            <!-- 手机号输入 -->
                            <div class="mb-2">
                                <label class="form-label small">添加手机号到白名单</label>
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" id="nodePhoneInput"
                                        placeholder="输入11位手机号后按回车添加"
                                        pattern="1[3-9]\d{9}"
                                        onkeypress="if(event.key==='Enter') {addPhoneToNodeWhitelist(this.value); this.value=''; event.preventDefault();}">
                                    <button type="button" class="btn btn-outline-secondary"
                                        onclick="const input=document.getElementById('nodePhoneInput'); addPhoneToNodeWhitelist(input.value); input.value='';">添加</button>
                                </div>
                            </div>
                            <div id="nodeWhitelistTags" class="mb-2">
                                <!-- 白名单用户标签会在这里显示 -->
                            </div>
                            <small class="text-muted">留空表示所有用户可见此节点</small>
                        </div>
                    </div>
                    <textarea class="form-control mt-2" id="nodeWhitelist" rows="3"
                        style="display: none;" placeholder="JSON格式的白名单配置"></textarea>
                    <button type="button" class="btn btn-sm btn-outline-secondary mt-2"
                        onclick="toggleNodeWhitelistJson()">
                        <i class="fas fa-code"></i> 查看/编辑JSON
                    </button>
                </div>

                <!-- 渠道继承控制（仅默认内容可配置） -->
                <div class="node-form-group" id="nodeNotInheritableGroup" style="display: none;">
                    <div class="card border-warning">
                        <div class="card-body py-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="nodeNotInheritable">
                                <label class="form-check-label" for="nodeNotInheritable">
                                    <strong>不被渠道继承</strong>
                                </label>
                                <small class="form-text text-muted d-block">
                                    <i class="fas fa-exclamation-triangle text-warning me-1"></i>
                                    开启后，此节点（及其子节点）在创建新的渠道定制内容时将不会被复制，且其他非定制渠道将不会显示此节点
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- JSON 编辑区域 -->
                <div id="nodeJsonEditorArea" class="node-form-group" style="display: none;">
                    <div class="alert alert-info py-2 mb-2">
                        <i class="fas fa-info-circle me-1"></i>
                        JSON 模式：包含当前节点及所有子节点，可直接编辑或复制整个分支配置
                    </div>
                    <textarea class="form-control font-monospace" id="nodeJsonEditor" rows="18" style="font-size: 12px;"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary me-auto" onclick="toggleNodeJsonEditor()">
                    <i class="fas fa-code"></i> <span id="jsonEditorBtnText">切换JSON模式</span>
                </button>
                <button type="button" class="btn btn-outline-info" id="copyNodeJsonBtn" style="display: none;" onclick="copyNodeJson()">
                    <i class="fas fa-copy"></i> 复制JSON
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="saveNode()">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteMessage">确定要删除吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 集合JSON编辑模态框 -->
<div class="modal fade" id="collectionJsonModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-code me-2"></i>集合JSON配置
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info py-2 mb-3">
                    <i class="fas fa-info-circle me-1"></i>
                    包含整个集合的所有节点配置，可以复制导出或粘贴导入
                </div>
                <div class="mb-2">
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="collectionJsonMode" id="collectionJsonModeReadonly" value="readonly" checked onchange="toggleCollectionJsonMode()">
                        <label class="form-check-label" for="collectionJsonModeReadonly">
                            只读模式
                        </label>
                    </div>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="collectionJsonMode" id="collectionJsonModeEdit" value="edit" onchange="toggleCollectionJsonMode()">
                        <label class="form-check-label" for="collectionJsonModeEdit">
                            编辑模式
                        </label>
                    </div>
                </div>
                <textarea class="form-control font-monospace" id="collectionJsonEditor" rows="20" style="font-size: 12px;" readonly></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" onclick="copyCollectionJson()">
                    <i class="fas fa-copy me-1"></i>复制JSON
                </button>
                <button type="button" class="btn btn-outline-primary" onclick="formatCollectionJson()">
                    <i class="fas fa-magic me-1"></i>格式化
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveCollectionJsonBtn" style="display: none;" onclick="saveCollectionJson()">
                    <i class="fas fa-save me-1"></i>应用更改
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- CryptoJS for phone hashing -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<!-- SortableJS for drag and drop -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
// 全局状态
let collections = [];
let nodeWhitelist = { entries: [], global: false }; // 当前编辑节点的白名单
let currentCollection = null;
let expandedNodes = new Set();
let hasUnsavedChanges = false;
let originalNodes = null; // 保存原始节点数据用于比较
let sortableInstances = []; // 存储所有 Sortable 实例

// 分页状态
let currentPage = 1;
let pageSize = 20;
let totalCollections = 0;
let totalPages = 0;
let searchKeyword = '';

// 渠道状态
let issuers = []; // 发卡行列表
let currentChannel = null; // 当前选中的渠道（null表示默认内容）
let channelNodes = {}; // 各渠道的节点缓存 { 'BOC': [...], 'CMB': [...] }

// 获取当前正在编辑的节点数组
function getCurrentNodes() {
    if (currentChannel) {
        return channelNodes[currentChannel] || [];
    } else {
        return currentCollection?.nodes || [];
    }
}

// 设置当前正在编辑的节点数组
function setCurrentNodes(nodes) {
    if (currentChannel) {
        channelNodes[currentChannel] = nodes;
    } else {
        if (currentCollection) {
            currentCollection.nodes = nodes;
        }
    }
}

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    loadIssuers();

    // 尝试恢复上次的状态
    const savedPage = localStorage.getItem('collection_currentPage');
    const savedCollectionId = localStorage.getItem('collection_selectedId');
    const savedChannel = localStorage.getItem('collection_currentChannel');

    if (savedPage) {
        currentPage = parseInt(savedPage);
    }

    loadCollections().then(() => {
        // 加载完列表后，如果有保存的集合ID，自动选中
        if (savedCollectionId) {
            const collectionId = parseInt(savedCollectionId);
            // 检查这个集合是否存在于当前列表中
            const collection = collections.find(c => c.id === collectionId);
            if (collection) {
                selectCollection(collectionId, savedChannel);
            } else {
                // 如果不在当前页，尝试加载该集合
                selectCollection(collectionId, savedChannel);
            }
        }
    });

    // 监听类型变化
    document.getElementById('nodeType').addEventListener('change', function() {
        toggleAssociationGroup(this.value);
    });

    // 监听搜索框回车
    document.getElementById('offerSearchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchOffers();
        }
    });

    document.getElementById('campaignSearchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            searchCampaigns();
        }
    });

    // 页面离开提醒
    window.addEventListener('beforeunload', function(e) {
        if (hasUnsavedChanges) {
            e.preventDefault();
            e.returnValue = '您有未保存的更改，确定要离开吗？';
            return e.returnValue;
        }
    });
});

// 加载集合列表
async function loadCollections() {
    return loadCollectionsPage(currentPage || 1);
}

// 加载指定页码的集合
async function loadCollectionsPage(page) {
    try {
        currentPage = page;

        // 保存当前页码到localStorage
        localStorage.setItem('collection_currentPage', currentPage);

        // 构建查询参数
        const params = new URLSearchParams();
        params.append('page', page);
        params.append('pageSize', pageSize);
        params.append('sortField', 'id');
        params.append('sortOrder', 'desc');

        if (searchKeyword) {
            params.append('keyword', searchKeyword);
        }

        // 显示加载状态
        const container = document.getElementById('collectionList');
        container.innerHTML = '<div class="text-center py-4 text-muted"><i class="fas fa-spinner fa-spin"></i> 加载中...</div>';

        const response = await adminFetch(`/api/admin/collections/api?${params.toString()}`);
        const result = await response.json();

        if (result.success) {
            collections = result.data;

            // 更新分页信息
            if (result.pagination) {
                currentPage = result.pagination.current;
                totalCollections = result.pagination.total;
                totalPages = Math.ceil(totalCollections / pageSize);
            }

            renderCollectionList();
            updatePagination();
        }
    } catch (error) {
        console.error('加载集合失败:', error);
        showToast('加载集合失败', 'error');
    }
}

// 搜索集合
function searchCollections() {
    searchKeyword = document.getElementById('collectionSearchInput').value.trim();
    loadCollectionsPage(1);
}

// 更新分页控件
function updatePagination() {
    const paginationDiv = document.getElementById('collectionPagination');
    const prevBtn = document.getElementById('prevPageBtn');
    const nextBtn = document.getElementById('nextPageBtn');
    const pageInfo = document.getElementById('pageInfo');
    const countInfo = document.getElementById('collectionCount');

    // 显示分页控件
    paginationDiv.style.display = totalCollections > 0 ? 'block' : 'none';

    // 更新计数信息
    countInfo.textContent = `共 ${totalCollections} 个集合`;

    // 更新页码信息
    pageInfo.textContent = `${currentPage}/${totalPages || 1}`;

    // 更新按钮状态
    prevBtn.disabled = currentPage <= 1;
    nextBtn.disabled = currentPage >= totalPages;
}

// 渲染集合列表
function renderCollectionList() {
    const container = document.getElementById('collectionList');

    if (collections.length === 0) {
        container.innerHTML = `
            <div class="text-center py-4 text-muted">
                <i class="fas fa-folder-open fa-2x mb-2"></i>
                <p class="mb-0">暂无集合</p>
            </div>
        `;
        return;
    }

    container.innerHTML = collections.map(c => {
        // 获取渠道列表
        const channelContents = c.channel_contents || {};
        const channelCodes = Object.keys(channelContents);
        const channelBadges = channelCodes.length > 0
            ? `<div class="mt-1">${channelCodes.map(code => {
                const issuer = issuers.find(i => i.code === code);
                const name = issuer ? issuer.name : code;
                return `<span class="badge bg-secondary me-1" style="font-size: 0.65rem;" title="${name}">${code}</span>`;
            }).join('')}</div>`
            : '';

        return `
            <div class="collection-card p-3 border-bottom ${currentCollection?.id === c.id ? 'active' : ''}"
                 onclick="selectCollection(${c.id})">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="flex-grow-1">
                        <div class="fw-bold">${escapeHtml(c.name)}</div>
                        <small class="text-muted">${escapeHtml(c.code)}</small>
                        ${channelBadges}
                    </div>
                    <div class="dropdown">
                        <button class="btn btn-link btn-sm text-muted p-0" data-bs-toggle="dropdown" onclick="event.stopPropagation()">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#" onclick="event.preventDefault(); editCollection(${c.id})">
                                <i class="fas fa-edit me-2"></i>编辑
                            </a></li>
                            <li><a class="dropdown-item text-danger" href="#" onclick="event.preventDefault(); deleteCollection(${c.id})">
                                <i class="fas fa-trash me-2"></i>删除
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        `;
    }).join('');
}

// 选择集合
async function selectCollection(id, targetChannel = null) {
    // 如果有未保存的更改，提示用户
    if (hasUnsavedChanges) {
        if (!confirm('当前有未保存的更改，是否放弃更改并切换集合？')) {
            return;
        }
    }

    // 重置渠道状态
    currentChannel = null;
    channelNodes = {};

    try {
        const response = await adminFetch(`/api/admin/collections/${id}`);
        const result = await response.json();

        if (result.success) {
            currentCollection = result.data;
            originalNodes = JSON.parse(JSON.stringify(currentCollection.nodes || []));

            // 保存当前选中的集合ID到localStorage
            localStorage.setItem('collection_selectedId', id);

            // 初始化渠道nodes
            const channelContents = currentCollection.channel_contents || {};
            Object.keys(channelContents).forEach(channelCode => {
                if (channelContents[channelCode].nodes) {
                    channelNodes[channelCode] = JSON.parse(JSON.stringify(channelContents[channelCode].nodes));
                }
            });

            hasUnsavedChanges = false;
            updateSaveButtonState();
            document.getElementById('currentCollectionName').textContent = currentCollection.name;
            document.getElementById('treeActions').style.display = 'flex';
            document.getElementById('channelTabsContainer').style.display = 'block';

            // 重置所有tabs（保留默认tab）
            const tabsContainer = document.getElementById('channelTabs');
            const tabContent = document.getElementById('channelTabContent');

            // 清除所有渠道tabs
            const channelTabs = tabsContainer.querySelectorAll('li:not(:first-child)');
            channelTabs.forEach(tab => tab.remove());

            const channelPanes = tabContent.querySelectorAll('.tab-pane:not(:first-child)');
            channelPanes.forEach(pane => pane.remove());

            // 重新创建已配置的渠道tabs
            Object.keys(channelContents).forEach(channelCode => {
                const issuer = issuers.find(i => i.code === channelCode);
                if (issuer) {
                    addChannelTabSilent(channelCode, issuer.name);
                }
            });

            // 默认展开所有节点
            expandedNodes.clear();
            getAllNodeIds(currentCollection.nodes || []).forEach(id => expandedNodes.add(id));

            // 如果有目标渠道且该渠道存在，切换到该渠道tab
            if (targetChannel && channelContents[targetChannel]) {
                const channelTab = document.getElementById(`channel-${targetChannel}-tab`);
                if (channelTab) {
                    channelTab.click();
                } else {
                    document.getElementById('default-tab').click();
                }
            } else {
                // 切换到默认tab
                document.getElementById('default-tab').click();
            }

            renderTree();
            renderCollectionList();
            renderIssuerDropdown();
        }
    } catch (error) {
        console.error('加载集合详情失败:', error);
        showToast('加载集合详情失败', 'error');
    }
}

// 更新保存按钮状态
function updateSaveButtonState() {
    const btn = document.getElementById('saveNodesBtn');
    if (hasUnsavedChanges) {
        btn.classList.remove('btn-primary');
        btn.classList.add('btn-warning');
        btn.innerHTML = '<i class="fas fa-save me-1"></i>保存 *';
    } else {
        btn.classList.remove('btn-warning');
        btn.classList.add('btn-primary');
        btn.innerHTML = '<i class="fas fa-save me-1"></i>保存';
    }
}

// 标记有未保存的更改
function markAsChanged() {
    hasUnsavedChanges = true;
    updateSaveButtonState();
}

// 保存所有节点到服务器（包括渠道内容）
async function saveAllNodes() {
    if (!currentCollection) {
        showToast('请先选择一个集合', 'error');
        return;
    }

    try {
        // 保存默认节点
        const defaultResponse = await adminFetch(`/api/admin/collections/${currentCollection.id}/nodes`, {
            method: 'PUT',
            body: JSON.stringify({ nodes: currentCollection.nodes || [] })
        });

        const defaultResult = await defaultResponse.json();

        if (!defaultResult.success) {
            showToast(defaultResult.message || '保存默认内容失败', 'error');
            return;
        }

        // 保存各渠道内容
        const channelCodes = Object.keys(channelNodes);
        for (const channelCode of channelCodes) {
            const channelResponse = await adminFetch(`/api/admin/collections/${currentCollection.id}/channels/${channelCode}`, {
                method: 'PUT',
                body: JSON.stringify({ nodes: channelNodes[channelCode] || [] })
            });

            const channelResult = await channelResponse.json();

            if (!channelResult.success) {
                showToast(`保存渠道${channelCode}失败：${channelResult.message}`, 'error');
                return;
            }
        }

        showToast('保存成功', 'success');
        originalNodes = JSON.parse(JSON.stringify(currentCollection.nodes || []));
        hasUnsavedChanges = false;
        updateSaveButtonState();

        // 重新加载集合以获取最新的channel_contents
        selectCollection(currentCollection.id);
    } catch (error) {
        console.error('保存节点失败:', error);
        showToast('保存失败', 'error');
    }
}

// 渲染节点树（支持渠道）
function renderTree(container = null, nodes = null) {
    // 如果没有指定容器，根据当前渠道选择正确的容器
    if (!container) {
        if (currentChannel) {
            // 渠道Tab的容器
            container = document.getElementById(`tree-${currentChannel}`);
        } else {
            // 默认Tab的容器
            container = document.getElementById('treeContainer');
        }
    }

    // 如果容器不存在，退出
    if (!container) {
        console.error('容器不存在，无法渲染树');
        return;
    }

    // 如果没有指定nodes，使用当前渠道的nodes
    if (nodes === null) {
        nodes = getCurrentNodes();
    }

    if (!currentCollection || !nodes || nodes.length === 0) {
        container.innerHTML = `
            <div class="tree-empty">
                <i class="fas fa-plus-circle fa-3x mb-3"></i>
                <p>暂无节点，点击上方"添加节点"开始创建</p>
            </div>
        `;
        return;
    }

    container.innerHTML = renderNodes(nodes);
    initDragAndDrop();
}

// 递归渲染节点
function renderNodes(nodes, level = 0) {
    return nodes.map(node => {
        const hasChildren = node.nodes && node.nodes.length > 0;
        const isExpanded = expandedNodes.has(node.id);
        const isDisabled = node.status === 0;

        return `
            <div class="tree-node" data-id="${node.id}">
                <div class="tree-node-content ${isDisabled ? 'disabled' : ''}">
                    <div class="tree-node-toggle" onclick="toggleNode('${node.id}')">
                        ${hasChildren ? `<i class="fas fa-chevron-${isExpanded ? 'down' : 'right'}"></i>` : '<span style="width:16px"></span>'}
                    </div>
                    <div class="tree-node-icon ${node.type}">
                        <i class="fas ${getNodeIcon(node.type)}"></i>
                    </div>
                    <div class="tree-node-info">
                        <div class="tree-node-title">
                            ${escapeHtml(node.title || '(未命名)')}
                            ${isDisabled ? '<span class="badge bg-secondary status-badge ms-2">隐藏</span>' : ''}
                            ${getWhitelistBadge(node.whitelist)}
                        </div>
                        <div class="tree-node-meta">
                            ${node.type} ${node.subtitle ? '· ' + escapeHtml(node.subtitle) : ''}
                        </div>
                    </div>
                    <div class="tree-node-actions">
                        <button class="btn btn-outline-success btn-sm" onclick="addChildNode('${node.id}')" title="添加子节点">
                            <i class="fas fa-plus"></i>
                        </button>
                        <button class="btn btn-outline-secondary btn-sm" onclick="duplicateNode('${node.id}')" title="复制节点">
                            <i class="fas fa-copy"></i>
                        </button>
                        <button class="btn btn-outline-info btn-sm" onclick="copyNodeJsonToClipboard('${node.id}')" title="复制JSON">
                            <i class="fas fa-code"></i>
                        </button>
                        <button class="btn btn-outline-primary btn-sm" onclick="editNode('${node.id}')" title="编辑">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-outline-danger btn-sm" onclick="deleteNode('${node.id}')" title="删除">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
                ${hasChildren ? `
                    <div class="tree-children ${isExpanded ? '' : 'collapsed'}">
                        ${renderNodes(node.nodes, level + 1)}
                    </div>
                ` : ''}
            </div>
        `;
    }).join('');
}

// 获取节点图标
function getNodeIcon(type) {
    const icons = {
        'banner': 'fa-image',
        'banner-half': 'fa-columns',
        'banner-third': 'fa-th-large',
        'banner-fourth': 'fa-th',
        'section': 'fa-layer-group',
        'category': 'fa-folder',
        'campaign': 'fa-bullhorn',
        'card': 'fa-id-card',
        'card-half': 'fa-address-card',
        'card-third': 'fa-grip-horizontal',
        'card-fourth': 'fa-grip-vertical',
        'carousel': 'fa-images',
        'applepay_redirect': 'fa-credit-card',
        'default': 'fa-cube'
    };
    return icons[type] || icons.default;
}

// 获取白名单徽章
function getWhitelistBadge(whitelist) {
    if (!whitelist) return '';

    const entries = whitelist.entries || [];
    const globalEnabled = whitelist.global || false;

    if (entries.length === 0 && !globalEnabled) {
        return '';
    }

    let badgeText = '';
    if (entries.length > 0) {
        badgeText = `${entries.length}人`;
    }
    if (globalEnabled) {
        badgeText += (badgeText ? ' + ' : '') + '全局';
    }

    return `<span class="badge bg-warning status-badge ms-1" title="白名单限制"><i class="fas fa-lock me-1"></i>${badgeText}</span>`;
}

// 切换节点展开/折叠
function toggleNode(nodeId) {
    if (expandedNodes.has(nodeId)) {
        expandedNodes.delete(nodeId);
    } else {
        expandedNodes.add(nodeId);
    }
    renderTree();
}

// 获取所有节点ID（递归）
function getAllNodeIds(nodes) {
    let ids = [];
    nodes.forEach(node => {
        ids.push(node.id);
        if (node.nodes && node.nodes.length > 0) {
            ids = ids.concat(getAllNodeIds(node.nodes));
        }
    });
    return ids;
}

// 展开全部
function expandAll() {
    getAllNodeIds(currentCollection?.nodes || []).forEach(id => expandedNodes.add(id));
    renderTree();
}

// 折叠全部
function collapseAll() {
    expandedNodes.clear();
    renderTree();
}

// 显示创建集合模态框
function showCreateCollectionModal() {
    document.getElementById('collectionModalTitle').textContent = '创建集合';
    document.getElementById('collectionId').value = '';
    document.getElementById('collectionCode').value = '';
    document.getElementById('collectionName').value = '';
    document.getElementById('collectionDescription').value = '';
    document.getElementById('collectionCode').disabled = false;

    new bootstrap.Modal(document.getElementById('collectionModal')).show();
}

// 编辑集合
function editCollection(id) {
    const collection = collections.find(c => c.id === id);
    if (!collection) return;

    document.getElementById('collectionModalTitle').textContent = '编辑集合';
    document.getElementById('collectionId').value = collection.id;
    document.getElementById('collectionCode').value = collection.code;
    document.getElementById('collectionName').value = collection.name;
    document.getElementById('collectionDescription').value = collection.description || '';
    document.getElementById('collectionCode').disabled = true;

    new bootstrap.Modal(document.getElementById('collectionModal')).show();
}

// 保存集合
async function saveCollection() {
    const id = document.getElementById('collectionId').value;
    const data = {
        code: document.getElementById('collectionCode').value.trim(),
        name: document.getElementById('collectionName').value.trim(),
        description: document.getElementById('collectionDescription').value.trim()
    };

    if (!data.code || !data.name) {
        showToast('请填写必填字段', 'error');
        return;
    }

    try {
        const url = id ? `/api/admin/collections/${id}` : '/api/admin/collections';
        const method = id ? 'PUT' : 'POST';

        const response = await adminFetch(url, {
            method,
            body: JSON.stringify(data)
        });

        const result = await response.json();

        if (result.success) {
            bootstrap.Modal.getInstance(document.getElementById('collectionModal')).hide();
            showToast(id ? '更新成功' : '创建成功', 'success');

            // 创建新集合跳到第一页，编辑集合保持当前页
            if (id) {
                loadCollectionsPage(currentPage);
                if (currentCollection?.id === parseInt(id)) {
                    selectCollection(id);
                }
            } else {
                loadCollectionsPage(1);
            }
        } else {
            showToast(result.message || '保存失败', 'error');
        }
    } catch (error) {
        console.error('保存集合失败:', error);
        showToast('保存失败', 'error');
    }
}

// 删除集合
function deleteCollection(id) {
    const collection = collections.find(c => c.id === id);
    if (!collection) return;

    document.getElementById('deleteMessage').textContent = `确定要删除集合 "${collection.name}" 吗？此操作不可恢复。`;
    document.getElementById('confirmDeleteBtn').onclick = async () => {
        try {
            const response = await adminFetch(`/api/admin/collections/${id}`, {
                method: 'DELETE'
            });

            const result = await response.json();

            if (result.success) {
                bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
                showToast('删除成功', 'success');

                if (currentCollection?.id === id) {
                    currentCollection = null;
                    document.getElementById('currentCollectionName').textContent = '请选择一个集合';
                    document.getElementById('treeActions').style.display = 'none';
                    document.getElementById('treeContainer').innerHTML = `
                        <div class="tree-empty">
                            <i class="fas fa-mouse-pointer fa-3x mb-3"></i>
                            <p>请从左侧选择一个集合开始编辑</p>
                        </div>
                    `;
                    // 清除localStorage中的选中状态
                    localStorage.removeItem('collection_selectedId');
                    localStorage.removeItem('collection_currentChannel');
                }

                // 删除后刷新当前页，如果当前页没数据了则回到上一页
                const totalAfterDelete = totalCollections - 1;
                const maxPage = Math.ceil(totalAfterDelete / pageSize) || 1;
                const targetPage = currentPage > maxPage ? maxPage : currentPage;
                loadCollectionsPage(targetPage);
            } else {
                showToast(result.message || '删除失败', 'error');
            }
        } catch (error) {
            console.error('删除集合失败:', error);
            showToast('删除失败', 'error');
        }
    };

    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// 添加根节点
function addRootNode() {
    showNodeModal(null, null);
}

// 添加子节点
function addChildNode(parentId) {
    showNodeModal(null, parentId);
}

// 编辑节点
function editNode(nodeId) {
    const nodes = getCurrentNodes();
    const node = findNode(nodes, nodeId);
    if (!node) return;

    showNodeModal(node, null);
}

// 查找节点
function findNode(nodes, nodeId) {
    for (const node of nodes) {
        if (node.id === nodeId) return node;
        if (node.nodes && node.nodes.length > 0) {
            const found = findNode(node.nodes, nodeId);
            if (found) return found;
        }
    }
    return null;
}

// 查找父节点
function findParentNode(nodes, nodeId, parent = null) {
    for (const node of nodes) {
        if (node.id === nodeId) {
            return parent;
        }
        if (node.nodes && node.nodes.length > 0) {
            const found = findParentNode(node.nodes, nodeId, node);
            if (found !== undefined) {
                return found;
            }
        }
    }
    return undefined;
}

// 显示节点模态框
function showNodeModal(node, parentId) {
    const isEdit = !!node;

    // 重置 JSON 编辑器状态
    resetJsonEditorState();

    document.getElementById('nodeModalTitle').textContent = isEdit ? '编辑节点' : '添加节点';
    document.getElementById('nodeId').value = node?.id || '';
    document.getElementById('nodeParentId').value = parentId || '';
    document.getElementById('nodeType').value = node?.type || 'default';
    document.getElementById('nodeStatus').value = node?.status ?? 1;
    document.getElementById('nodeTitle').value = node?.title || '';
    document.getElementById('nodeSubtitle').value = node?.subtitle || '';
    document.getElementById('nodeImageUrl').value = node?.image_url || '';
    document.getElementById('nodeLinkH5').value = node?.link_h5 || '';
    document.getElementById('nodeLinkMiniapp').value = node?.link_miniapp || '';

    // 初始化图片预览
    initializeImagePreview(node?.image_url);

    // 清空文件输入
    document.getElementById('nodeImageFile').value = '';

    // 初始化白名单
    initializeNodeWhitelist(node?.whitelist);

    // 处理关联内容字段
    document.getElementById('nodeOfferOid').value = node?.offer_oid || '';
    document.getElementById('nodeCampaignId').value = node?.campaign_id || '';
    document.getElementById('offerSearchInput').value = '';
    document.getElementById('campaignSearchInput').value = '';
    document.getElementById('offerSearchResults').innerHTML = '';
    document.getElementById('campaignSearchResults').innerHTML = '';

    // 设置关联类型
    if (node?.offer_oid) {
        document.getElementById('associationType').value = 'offer';
        document.getElementById('selectedOfferInfo').style.display = 'block';
        document.getElementById('selectedOfferName').textContent = node?.title || `Offer ${node.offer_oid}`;
        document.getElementById('selectedCampaignInfo').style.display = 'none';
    } else if (node?.campaign_id) {
        document.getElementById('associationType').value = 'campaign';
        document.getElementById('selectedCampaignInfo').style.display = 'block';
        document.getElementById('selectedCampaignName').textContent = node?.title || `Campaign #${node.campaign_id}`;
        document.getElementById('selectedOfferInfo').style.display = 'none';
    } else {
        document.getElementById('associationType').value = '';
        document.getElementById('selectedOfferInfo').style.display = 'none';
        document.getElementById('selectedCampaignInfo').style.display = 'none';
    }

    // 初始化"不被渠道继承"字段（仅在默认内容编辑时显示）
    const isDefaultChannel = currentChannel === null || currentChannel === 'visa';
    const notInheritableGroup = document.getElementById('nodeNotInheritableGroup');
    if (isDefaultChannel) {
        notInheritableGroup.style.display = 'block';
        document.getElementById('nodeNotInheritable').checked = node?.notInheritable || false;
    } else {
        notInheritableGroup.style.display = 'none';
        document.getElementById('nodeNotInheritable').checked = false;
    }

    // 根据类型显示/隐藏关联内容区域
    toggleAssociationGroup(node?.type || 'default');
    toggleAssociationSearch();

    new bootstrap.Modal(document.getElementById('nodeModal')).show();
}

// 切换关联内容区域显示
function toggleAssociationGroup(type) {
    const associationGroup = document.getElementById('associationGroup');
    const bannerTypes = ['banner', 'banner-half', 'banner-third', 'banner-fourth'];
    const cardTypes = ['card', 'card-half', 'card-third', 'card-fourth'];
    const supportedTypes = [...bannerTypes, ...cardTypes];

    if (supportedTypes.includes(type)) {
        associationGroup.style.display = 'block';
    } else {
        associationGroup.style.display = 'none';
        // 重置关联类型
        document.getElementById('associationType').value = '';
        toggleAssociationSearch();
    }
}

// 切换关联搜索区域（Offer 或 Campaign）
function toggleAssociationSearch() {
    const associationType = document.getElementById('associationType').value;
    const offerGroup = document.getElementById('offerSearchGroup');
    const campaignGroup = document.getElementById('campaignSearchGroup');

    offerGroup.style.display = associationType === 'offer' ? 'block' : 'none';
    campaignGroup.style.display = associationType === 'campaign' ? 'block' : 'none';

    // 清除另一个选项的数据
    if (associationType === 'offer') {
        clearSelectedCampaign();
    } else if (associationType === 'campaign') {
        clearSelectedOffer();
    } else {
        clearSelectedOffer();
        clearSelectedCampaign();
    }
}

// 搜索 offers
async function searchOffers() {
    const keyword = document.getElementById('offerSearchInput').value.trim();
    if (!keyword) {
        showToast('请输入搜索关键词', 'error');
        return;
    }

    const resultsContainer = document.getElementById('offerSearchResults');
    resultsContainer.innerHTML = '<div class="text-center text-muted py-2"><i class="fas fa-spinner fa-spin"></i> 搜索中...</div>';

    try {
        const url = `/api/admin/offers/api?search=${encodeURIComponent(keyword)}&per_page=10`;
        console.log('Searching offers with URL:', url);
        const response = await adminFetch(url);
        const result = await response.json();
        console.log('Search result:', result);

        if (result.success && result.data.length > 0) {
            resultsContainer.innerHTML = result.data.map(offer => {
                // 转义单引号以安全传递给 onclick
                const title = (offer.merchant_name || offer.title || '').replace(/'/g, "\\'");
                const subtitle = (offer.subtitle || offer.offer_short_title || '').replace(/'/g, "\\'");
                const imageUrl = (offer.thumbnail_url || offer.banner_url || offer.brand_logo_url || offer.detail_image_url || '').replace(/'/g, "\\'");
                const oid = (offer.oid || '').replace(/'/g, "\\'");

                // 如果没有 oid（非 vmorc 的 offer），跳过或使用 id 作为临时标识
                const offerOid = oid || `id_${offer.id}`;

                return `
                    <div class="offer-search-item border rounded p-2 mb-2" style="cursor: pointer;" onclick="selectOffer('${offerOid}', '${title}', '${subtitle}', '${imageUrl}')">
                        <div class="d-flex align-items-center">
                            ${offer.thumbnail_url || offer.brand_logo_url ? `<img src="${offer.thumbnail_url || offer.brand_logo_url}" class="me-2" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;" onerror="this.style.display='none'">` : ''}
                            <div class="flex-grow-1 overflow-hidden">
                                <div class="fw-bold text-truncate">${escapeHtml(offer.merchant_name || offer.title || '未命名')}</div>
                                <small class="text-muted text-truncate d-block">${escapeHtml(offer.subtitle || offer.offer_short_title || '')}</small>
                            </div>
                            <span class="badge ${offer.oid ? 'bg-success' : 'bg-secondary'} ms-2" title="${offer.oid || '无OID'}">${offer.oid ? offer.oid.substring(0, 16) : '#' + offer.id}</span>
                        </div>
                    </div>
                `;
            }).join('');
        } else {
            resultsContainer.innerHTML = '<div class="text-center text-muted py-2">未找到匹配的礼遇</div>';
        }
    } catch (error) {
        console.error('搜索礼遇失败:', error);
        resultsContainer.innerHTML = '<div class="text-center text-danger py-2">搜索失败</div>';
    }
}

// 选择 offer
function selectOffer(oid, title, subtitle, imageUrl) {
    document.getElementById('nodeOfferOid').value = oid;
    document.getElementById('nodeTitle').value = title;
    document.getElementById('nodeSubtitle').value = subtitle;
    document.getElementById('nodeImageUrl').value = imageUrl;
    // 使用 oid 生成链接
    document.getElementById('nodeLinkH5').value = `/offer/${oid}`;
    document.getElementById('nodeLinkMiniapp').value = `/offer-detail/index?oid=${oid}`;

    // 更新图片预览
    initializeImagePreview(imageUrl);

    document.getElementById('selectedOfferInfo').style.display = 'block';
    document.getElementById('selectedOfferName').textContent = title || `Offer ${oid}`;
    document.getElementById('offerSearchResults').innerHTML = '';
    document.getElementById('offerSearchInput').value = '';

    showToast('已选择礼遇并自动填充信息', 'success');
}

// 清除选择的 offer
function clearSelectedOffer() {
    document.getElementById('nodeOfferOid').value = '';
    document.getElementById('selectedOfferInfo').style.display = 'none';
    document.getElementById('selectedOfferName').textContent = '';
}

// 搜索 campaigns
async function searchCampaigns() {
    const keyword = document.getElementById('campaignSearchInput').value.trim();
    if (!keyword) {
        showToast('请输入搜索关键词', 'error');
        return;
    }

    const resultsContainer = document.getElementById('campaignSearchResults');
    resultsContainer.innerHTML = '<div class="text-center text-muted py-2"><i class="fas fa-spinner fa-spin"></i> 搜索中...</div>';

    try {
        const url = `/api/admin/campaigns/search?keyword=${encodeURIComponent(keyword)}&is_test=0&per_page=10`;
        const response = await adminFetch(url);
        const result = await response.json();

        if (result.success && result.data.length > 0) {
            resultsContainer.innerHTML = result.data.map(campaign => {
                const name = (campaign.name || '').replace(/'/g, "\\'");
                const bannerUrl = (campaign.banner_image_url || '').replace(/'/g, "\\'");
                const id = campaign.id;
                const acampaignId = (campaign.acampaign_id || '').replace(/'/g, "\\'");

                return `
                    <div class="offer-search-item border rounded p-2 mb-2" style="cursor: pointer;" onclick="selectCampaign(${id}, '${acampaignId}', '${name}', '${bannerUrl}')">
                        <div class="d-flex align-items-center">
                            ${campaign.banner_image_url ? `<img src="${campaign.banner_image_url}" class="me-2" style="width: 40px; height: 40px; object-fit: cover; border-radius: 4px;" onerror="this.style.display='none'">` : ''}
                            <div class="flex-grow-1 overflow-hidden">
                                <div class="fw-bold text-truncate">${escapeHtml(campaign.name || '未命名')}</div>
                                <small class="text-muted text-truncate d-block">${escapeHtml(campaign.description || '')}</small>
                            </div>
                            <span class="badge bg-success ms-2">${acampaignId || '#' + id}</span>
                        </div>
                    </div>
                `;
            }).join('');
        } else {
            resultsContainer.innerHTML = '<div class="text-center text-muted py-2">未找到匹配的活动</div>';
        }
    } catch (error) {
        console.error('搜索活动失败:', error);
        resultsContainer.innerHTML = '<div class="text-center text-danger py-2">搜索失败</div>';
    }
}

// 选择 campaign
function selectCampaign(id, acampaignId, name, bannerUrl) {
    document.getElementById('nodeCampaignId').value = id;
    document.getElementById('nodeTitle').value = name;
    document.getElementById('nodeSubtitle').value = '';
    document.getElementById('nodeImageUrl').value = bannerUrl;

    // 使用 acampaign_id 生成链接
    if (acampaignId) {
        document.getElementById('nodeLinkH5').value = `/campaign/${acampaignId}`;
        document.getElementById('nodeLinkMiniapp').value = `/campaign/detail/index?campaignId=${acampaignId}`;
    } else {
        // 如果没有 acampaign_id，使用 id
        document.getElementById('nodeLinkH5').value = `/campaign/${id}`;
        document.getElementById('nodeLinkMiniapp').value = `/campaign/detail/index?campaignId=${id}`;
    }

    // 更新图片预览
    initializeImagePreview(bannerUrl);

    document.getElementById('selectedCampaignInfo').style.display = 'block';
    document.getElementById('selectedCampaignName').textContent = name || `Campaign #${id}`;
    document.getElementById('campaignSearchResults').innerHTML = '';
    document.getElementById('campaignSearchInput').value = '';

    showToast('已选择活动并自动填充信息', 'success');
}

// 清除选择的 campaign
function clearSelectedCampaign() {
    document.getElementById('nodeCampaignId').value = '';
    document.getElementById('selectedCampaignInfo').style.display = 'none';
    document.getElementById('selectedCampaignName').textContent = '';
}

// 生成 UUID
function generateUUID() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        const r = Math.random() * 16 | 0;
        const v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

// 保存节点（本地操作，不直接发送到服务器）
function saveNode() {
    const nodeId = document.getElementById('nodeId').value;
    const parentId = document.getElementById('nodeParentId').value;

    let data;
    let hasChildren = false;

    // 如果在 JSON 编辑模式，从 JSON 编辑器获取数据（包含子节点）
    if (isJsonEditorMode) {
        try {
            data = JSON.parse(document.getElementById('nodeJsonEditor').value);
            hasChildren = data.nodes && data.nodes.length > 0;
        } catch (e) {
            showToast('JSON 格式错误，请检查后重试', 'error');
            return;
        }
    } else {
        // 从全局白名单状态获取白名单配置
        let whitelist = null;
        if (nodeWhitelist.entries.length > 0 || nodeWhitelist.global) {
            whitelist = {
                entries: nodeWhitelist.entries,
                global: nodeWhitelist.global
            };
        }

        data = {
            type: document.getElementById('nodeType').value,
            status: parseInt(document.getElementById('nodeStatus').value),
            title: document.getElementById('nodeTitle').value.trim(),
            subtitle: document.getElementById('nodeSubtitle').value.trim(),
            image_url: document.getElementById('nodeImageUrl').value.trim(),
            link_h5: document.getElementById('nodeLinkH5').value.trim(),
            link_miniapp: document.getElementById('nodeLinkMiniapp').value.trim(),
            whitelist: whitelist,
            offer_oid: document.getElementById('nodeOfferOid').value.trim() || null,
            campaign_id: document.getElementById('nodeCampaignId').value.trim() || null
        };

        // 仅在默认内容（visa渠道）时保存 notInheritable 字段
        if (currentChannel === null || currentChannel === 'visa') {
            const notInheritable = document.getElementById('nodeNotInheritable').checked;
            // 明确设置值，确保取消勾选时能正确保存为 false
            data.notInheritable = notInheritable;
        }
    }

    if (!data.title) {
        showToast('请填写标题', 'error');
        return;
    }

    // 获取当前正在编辑的节点数组
    let nodes = getCurrentNodes();
    if (!nodes || nodes.length === 0) {
        nodes = [];
    }

    if (nodeId) {
        // 更新现有节点
        if (isJsonEditorMode && hasChildren) {
            // JSON 模式下，完整替换节点（包括子节点）
            replaceNodeInTree(nodes, nodeId, data);
        } else {
            // 表单模式下，只更新当前节点属性，保留原有子节点
            updateNodeInTree(nodes, nodeId, data);
        }
    } else {
        // 添加新节点
        const newNode = {
            ...data,
            id: data.id || generateUUID(),
            nodes: data.nodes || []
        };

        // 确保所有子节点都有 ID
        ensureNodeIds(newNode);

        if (parentId) {
            // 添加为子节点
            addNodeToParent(nodes, parentId, newNode);
        } else {
            // 添加到根级别
            nodes.push(newNode);
        }
    }

    // 保存回当前编辑的节点数组
    setCurrentNodes(nodes);

    bootstrap.Modal.getInstance(document.getElementById('nodeModal')).hide();
    showToast(nodeId ? '节点已更新' : '节点已添加', 'success');
    markAsChanged();
    renderTree();
}

// 完整替换节点（包括子节点）
function replaceNodeInTree(nodes, nodeId, newData) {
    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === nodeId) {
            // 保留原有 ID，完整替换其他内容
            nodes[i] = {
                ...newData,
                id: nodeId
            };
            // 确保所有子节点都有 ID
            ensureNodeIds(nodes[i]);
            return true;
        }
        if (nodes[i].nodes && nodes[i].nodes.length > 0) {
            if (replaceNodeInTree(nodes[i].nodes, nodeId, newData)) {
                return true;
            }
        }
    }
    return false;
}

// 确保节点及其子节点都有 ID
function ensureNodeIds(node) {
    if (!node.id) {
        node.id = generateUUID();
    }
    if (node.nodes && node.nodes.length > 0) {
        node.nodes.forEach(child => ensureNodeIds(child));
    }
}

// 复制节点JSON到剪贴板
function copyNodeJsonToClipboard(nodeId) {
    const nodes = getCurrentNodes();
    const node = findNode(nodes, nodeId);
    if (!node) {
        showToast('节点不存在', 'error');
        return;
    }

    const jsonText = JSON.stringify(node, null, 2);

    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(jsonText).then(() => {
            showToast('JSON已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            fallbackCopyToClipboard(jsonText);
        });
    } else {
        fallbackCopyToClipboard(jsonText);
    }
}

// 复制节点（包括子节点）
function duplicateNode(nodeId) {
    let nodes = getCurrentNodes();
    const node = findNode(nodes, nodeId);
    if (!node) {
        showToast('节点不存在', 'error');
        return;
    }

    // 深拷贝节点
    const nodeCopy = JSON.parse(JSON.stringify(node));

    // 为复制的节点及所有子节点生成新 ID
    regenerateNodeIds(nodeCopy);

    // 修改标题以区分
    nodeCopy.title = (nodeCopy.title || '') + ' (副本)';

    // 找到父节点并在原节点后插入
    const parentNode = findParentNode(nodes, nodeId);

    if (parentNode === null) {
        // 原节点在根级别
        const index = nodes.findIndex(n => n.id === nodeId);
        if (index !== -1) {
            nodes.splice(index + 1, 0, nodeCopy);
        }
    } else if (parentNode) {
        // 原节点有父节点
        const index = parentNode.nodes.findIndex(n => n.id === nodeId);
        if (index !== -1) {
            parentNode.nodes.splice(index + 1, 0, nodeCopy);
        }
    }

    // 保存回当前节点数组
    setCurrentNodes(nodes);

    showToast('节点已复制', 'success');
    markAsChanged();
    renderTree();
}

// 为节点及其所有子节点重新生成 ID
function regenerateNodeIds(node) {
    node.id = generateUUID();
    if (node.nodes && node.nodes.length > 0) {
        node.nodes.forEach(child => regenerateNodeIds(child));
    }
}

// 在树中更新节点
function updateNodeInTree(nodes, nodeId, data) {
    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === nodeId) {
            // 保留 id 和 nodes 子节点
            nodes[i] = {
                ...nodes[i],
                ...data,
                id: nodeId,
                nodes: nodes[i].nodes || []
            };
            return true;
        }
        if (nodes[i].nodes && nodes[i].nodes.length > 0) {
            if (updateNodeInTree(nodes[i].nodes, nodeId, data)) {
                return true;
            }
        }
    }
    return false;
}

// 添加节点到父节点
function addNodeToParent(nodes, parentId, newNode) {
    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === parentId) {
            if (!nodes[i].nodes) {
                nodes[i].nodes = [];
            }
            nodes[i].nodes.push(newNode);
            return true;
        }
        if (nodes[i].nodes && nodes[i].nodes.length > 0) {
            if (addNodeToParent(nodes[i].nodes, parentId, newNode)) {
                return true;
            }
        }
    }
    return false;
}

// 从树中删除节点
function deleteNodeFromTree(nodes, nodeId) {
    for (let i = 0; i < nodes.length; i++) {
        if (nodes[i].id === nodeId) {
            nodes.splice(i, 1);
            return true;
        }
        if (nodes[i].nodes && nodes[i].nodes.length > 0) {
            if (deleteNodeFromTree(nodes[i].nodes, nodeId)) {
                return true;
            }
        }
    }
    return false;
}

// 删除节点（本地操作）
function deleteNode(nodeId) {
    const nodes = getCurrentNodes();
    const node = findNode(nodes, nodeId);
    if (!node) return;

    const hasChildren = node.nodes && node.nodes.length > 0;
    document.getElementById('deleteMessage').textContent = hasChildren
        ? `确定要删除节点 "${node.title}" 及其所有子节点吗？`
        : `确定要删除节点 "${node.title}" 吗？`;

    document.getElementById('confirmDeleteBtn').onclick = () => {
        const nodes = getCurrentNodes();
        deleteNodeFromTree(nodes, nodeId);
        setCurrentNodes(nodes);
        bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
        showToast('节点已删除', 'success');
        markAsChanged();
        renderTree();
    };

    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// 拖拽功能
// 使用 SortableJS 初始化拖拽
function initDragAndDrop() {
    // 销毁旧的实例
    sortableInstances.forEach(instance => instance.destroy());
    sortableInstances = [];

    // 根据当前渠道选择正确的容器
    let treeContainer;
    if (currentChannel) {
        treeContainer = document.getElementById(`tree-${currentChannel}`);
    } else {
        treeContainer = document.getElementById('treeContainer');
    }

    // 为根容器初始化
    if (treeContainer) {
        initSortableForContainer(treeContainer, null);

        // 为该容器内的所有子容器初始化
        treeContainer.querySelectorAll('.tree-children').forEach(container => {
            const parentNode = container.closest('.tree-node');
            const parentId = parentNode ? parentNode.dataset.id : null;
            initSortableForContainer(container, parentId);
        });
    }
}

function initSortableForContainer(container, parentId) {
    const sortable = new Sortable(container, {
        group: 'nested',
        animation: 150,
        fallbackOnBody: true,
        swapThreshold: 0.65,
        ghostClass: 'sortable-ghost',
        chosenClass: 'sortable-chosen',
        dragClass: 'sortable-drag',

        // 只允许拖动 tree-node
        draggable: '.tree-node',

        // 拖动手柄
        handle: '.tree-node-content',

        onEnd: function(evt) {
            handleSortableEnd(evt);
        }
    });

    sortableInstances.push(sortable);
}

function handleSortableEnd(evt) {
    const draggedId = evt.item.dataset.id;
    const newParentElement = evt.to.closest('.tree-node');
    const newParentId = newParentElement ? newParentElement.dataset.id : null;
    const newIndex = evt.newIndex;

    console.log('拖拽完成:', {
        draggedId,
        newParentId: newParentId || 'root',
        newIndex
    });

    // 重新构建节点树
    rebuildNodesFromDOM();

    // 标记为已修改
    markAsChanged();

    // 重新渲染（保持当前状态）
    renderTree();

    showToast('节点已移动', 'success');
}

// 从 DOM 重新构建节点树
function rebuildNodesFromDOM() {
    // 根据当前渠道选择正确的容器
    let treeContainer;
    if (currentChannel) {
        treeContainer = document.getElementById(`tree-${currentChannel}`);
    } else {
        treeContainer = document.getElementById('treeContainer');
    }

    if (treeContainer) {
        const nodes = buildNodesFromContainer(treeContainer);
        setCurrentNodes(nodes);
    }
}

function buildNodesFromContainer(container) {
    const result = [];
    const children = container.querySelectorAll(':scope > .tree-node');

    children.forEach(nodeElement => {
        const nodeId = nodeElement.dataset.id;
        const nodes = getCurrentNodes();
        const nodeData = findNodeRecursive(nodes, nodeId);

        if (nodeData) {
            // 深拷贝节点数据
            const nodeCopy = JSON.parse(JSON.stringify(nodeData));

            // 查找子节点容器
            const childrenContainer = nodeElement.querySelector(':scope > .tree-children');
            if (childrenContainer) {
                nodeCopy.nodes = buildNodesFromContainer(childrenContainer);
            } else {
                nodeCopy.nodes = [];
            }

            result.push(nodeCopy);
        }
    });

    return result;
}

function findNodeRecursive(nodes, nodeId) {
    for (const node of nodes) {
        if (node.id === nodeId) {
            return node;
        }
        if (node.nodes && node.nodes.length > 0) {
            const found = findNodeRecursive(node.nodes, nodeId);
            if (found) return found;
        }
    }
    return null;
}

// 工具函数
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

// 过滤掉标记为"不被渠道继承"的节点（递归）
function filterInheritableNodes(nodes) {
    if (!Array.isArray(nodes)) return [];

    return nodes.filter(node => {
        // 如果节点标记为不被渠道继承，则跳过（包括其所有子节点）
        if (node.notInheritable === true) {
            return false;
        }
        return true;
    }).map(node => {
        // 递归处理子节点
        if (node.nodes && node.nodes.length > 0) {
            return {
                ...node,
                nodes: filterInheritableNodes(node.nodes)
            };
        }
        return node;
    });
}

function showToast(message, type = 'info') {
    // 简单的 toast 提示
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : 'info'} position-fixed`;
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 200px;';
    toast.innerHTML = `
        <div class="d-flex align-items-center">
            <i class="fas fa-${type === 'error' ? 'exclamation-circle' : type === 'success' ? 'check-circle' : 'info-circle'} me-2"></i>
            ${escapeHtml(message)}
        </div>
    `;
    document.body.appendChild(toast);

    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// ==================== 白名单管理函数 ====================

// 初始化节点白名单
function initializeNodeWhitelist(whitelist) {
    try {
        let parsedWhitelist;
        if (typeof whitelist === 'string') {
            parsedWhitelist = JSON.parse(whitelist || '{}');
        } else if (typeof whitelist === 'object' && whitelist !== null) {
            parsedWhitelist = whitelist;
        } else {
            parsedWhitelist = {};
        }

        // 初始化白名单数据
        nodeWhitelist = {
            entries: parsedWhitelist.entries || [],
            global: parsedWhitelist.global || false
        };

        // 设置全局白名单复选框状态
        const globalCheckbox = document.getElementById('nodeGlobalWhitelist');
        if (globalCheckbox) {
            globalCheckbox.checked = nodeWhitelist.global;
        }

        // 重置 JSON 编辑区域
        const textarea = document.getElementById('nodeWhitelist');
        const tagsContainer = document.getElementById('nodeWhitelistTags').parentElement.parentElement;
        if (textarea) textarea.style.display = 'none';
        if (tagsContainer) tagsContainer.style.display = 'block';

        renderNodeWhitelistTags();
        updateNodeWhitelistConfig();
    } catch (e) {
        console.warn('Failed to parse node whitelist:', e);
        nodeWhitelist = { entries: [], global: false };

        const globalCheckbox = document.getElementById('nodeGlobalWhitelist');
        if (globalCheckbox) globalCheckbox.checked = false;

        renderNodeWhitelistTags();
        updateNodeWhitelistConfig();
    }
}

// 添加手机号到节点白名单
function addPhoneToNodeWhitelist(phone) {
    if (!phone || !phone.trim()) return;

    phone = phone.trim();

    // 验证手机号格式
    if (!/^1[3-9]\d{9}$/.test(phone)) {
        showToast('请输入正确的11位手机号', 'warning');
        return;
    }

    // 检查是否已存在
    const hashedMobile = CryptoJS.SHA256(phone).toString();
    const existingEntry = nodeWhitelist.entries.find(entry => entry.hashed_mobile === hashedMobile);
    if (existingEntry) {
        showToast('该手机号已存在于白名单中', 'warning');
        return;
    }

    // 创建新条目
    const phoneDisplay = phone.substring(0, 3) + '****' + phone.substring(phone.length - 4);
    const newEntry = {
        hashed_mobile: hashedMobile,
        phone_display: phoneDisplay,
        uid: null,
        nickname: null
    };

    nodeWhitelist.entries.push(newEntry);
    renderNodeWhitelistTags();
    updateNodeWhitelistConfig();
    showToast('手机号已添加', 'success');
}

// 从白名单删除条目
function removeFromNodeWhitelist(index) {
    if (index >= 0 && index < nodeWhitelist.entries.length) {
        nodeWhitelist.entries.splice(index, 1);
        renderNodeWhitelistTags();
        updateNodeWhitelistConfig();
    }
}

// 渲染白名单条目标签
function renderNodeWhitelistTags() {
    const container = document.getElementById('nodeWhitelistTags');
    if (!container) return;

    const entries = nodeWhitelist.entries || [];
    const globalEnabled = nodeWhitelist.global || false;

    if (entries.length === 0 && !globalEnabled) {
        container.innerHTML = '<small class="text-muted">暂无白名单设置</small>';
        return;
    }

    let html = '';

    // 显示全局白名单状态
    if (globalEnabled) {
        html += `<span class="badge bg-success me-1 mb-1" style="font-size: 0.8em;">
            <i class="fas fa-globe"></i> 全局白名单已启用
        </span>`;
    }

    // 显示具体条目
    entries.forEach((entry, index) => {
        const userInfo = entry.uid ? `${entry.nickname || '用户'} (${entry.uid})` : '待注册';
        const badgeClass = entry.uid ? 'bg-info' : 'bg-secondary';

        html += `<span class="badge ${badgeClass} me-1 mb-1" style="font-size: 0.8em;">
            ${escapeHtml(entry.phone_display)} - ${escapeHtml(userInfo)}
            <button type="button" class="btn-close btn-close-white ms-1" style="font-size: 0.6em;" onclick="removeFromNodeWhitelist(${index})"></button>
        </span>`;
    });

    container.innerHTML = html;
}

// 更新白名单配置（更新隐藏的 textarea）
function updateNodeWhitelistConfig() {
    const textarea = document.getElementById('nodeWhitelist');
    const checkbox = document.getElementById('nodeGlobalWhitelist');

    if (!textarea) return;

    // 从复选框获取全局白名单状态
    if (checkbox) {
        nodeWhitelist.global = checkbox.checked;
    }

    const whitelistConfig = {
        entries: nodeWhitelist.entries || [],
        global: nodeWhitelist.global || false
    };

    textarea.value = JSON.stringify(whitelistConfig, null, 2);
}

// 切换白名单 JSON 编辑模式
function toggleNodeWhitelistJson() {
    const textarea = document.getElementById('nodeWhitelist');
    const tagsContainer = document.getElementById('nodeWhitelistTags').parentElement.parentElement;

    if (textarea.style.display === 'none') {
        // 显示JSON编辑器
        textarea.style.display = 'block';
        tagsContainer.style.display = 'none';

        // 尝试解析JSON并同步到白名单对象
        try {
            const config = JSON.parse(textarea.value || '{}');
            nodeWhitelist.entries = config.entries || [];
            nodeWhitelist.global = config.global || false;

            // 同步全局白名单状态
            const globalCheckbox = document.getElementById('nodeGlobalWhitelist');
            if (globalCheckbox) {
                globalCheckbox.checked = nodeWhitelist.global;
            }
        } catch (e) {
            console.warn('Invalid JSON in node whitelist textarea');
        }
    } else {
        // 显示可视化编辑器
        textarea.style.display = 'none';
        tagsContainer.style.display = 'block';

        // 尝试解析JSON并重建标签
        try {
            const config = JSON.parse(textarea.value || '{}');
            nodeWhitelist.entries = config.entries || [];
            nodeWhitelist.global = config.global || false;

            // 同步全局白名单状态
            const globalCheckbox = document.getElementById('nodeGlobalWhitelist');
            if (globalCheckbox) {
                globalCheckbox.checked = nodeWhitelist.global;
            }

            renderNodeWhitelistTags();
        } catch (e) {
            showToast('JSON格式错误，无法解析', 'error');
        }
    }
}

// ==================== 图片上传管理函数 ====================

// 初始化图片预览
function initializeImagePreview(imageUrl) {
    const preview = document.getElementById('nodeImagePreview');
    const actions = document.getElementById('nodeImageActions');

    if (imageUrl && imageUrl.trim()) {
        preview.src = imageUrl;
        preview.style.display = 'block';
        preview.onerror = function() {
            this.style.display = 'none';
            showToast('图片加载失败', 'warning');
        };
        actions.style.display = 'flex';
    } else {
        preview.src = '';
        preview.style.display = 'none';
        actions.style.display = 'none';
    }
}

// 上传节点图片
async function uploadNodeImage(fileInput) {
    const file = fileInput.files[0];
    if (!file) return;

    // 验证文件大小
    if (file.size > 5 * 1024 * 1024) {
        showToast('图片大小不能超过 5MB', 'error');
        fileInput.value = '';
        return;
    }

    const formData = new FormData();
    formData.append('image', file);

    const preview = document.getElementById('nodeImagePreview');
    const urlInput = document.getElementById('nodeImageUrl');
    const actions = document.getElementById('nodeImageActions');

    // 显示上传中状态
    urlInput.value = '正在上传...';
    fileInput.disabled = true;

    try {
        // 使用原生 fetch 来上传文件，因为 FormData 需要浏览器自动设置 Content-Type
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        const response = await fetch('/api/admin/collections/upload-image', {
            method: 'POST',
            body: formData,
            credentials: 'include',
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': csrfToken
            }
        });

        const result = await response.json();

        fileInput.disabled = false;
        fileInput.value = '';

        if (result.success) {
            // 显示图片预览
            preview.src = result.url;
            preview.style.display = 'block';
            preview.onerror = function() {
                this.style.display = 'none';
            };

            // 设置URL
            urlInput.value = result.url;

            // 显示操作按钮
            actions.style.display = 'flex';

            showToast('图片上传成功', 'success');
        } else {
            urlInput.value = '';
            showToast('图片上传失败: ' + (result.message || '未知错误'), 'error');
        }
    } catch (error) {
        console.error('上传图片失败:', error);
        fileInput.disabled = false;
        fileInput.value = '';
        urlInput.value = '';
        showToast('图片上传失败', 'error');
    }
}

// 从 URL 预览图片
function previewImageFromUrl() {
    const urlInput = document.getElementById('nodeImageUrl');
    const url = urlInput.value.trim();

    if (!url) {
        showToast('请输入图片 URL', 'warning');
        return;
    }

    initializeImagePreview(url);
}

// 清除节点图片
function clearNodeImage() {
    const preview = document.getElementById('nodeImagePreview');
    const urlInput = document.getElementById('nodeImageUrl');
    const fileInput = document.getElementById('nodeImageFile');
    const actions = document.getElementById('nodeImageActions');

    preview.src = '';
    preview.style.display = 'none';
    urlInput.value = '';
    fileInput.value = '';
    actions.style.display = 'none';
}

// ==================== JSON 编辑器函数 ====================

let isJsonEditorMode = false;
let currentEditingNodeId = null; // 当前编辑的节点ID

// 从表单获取节点数据（不包含子节点）
function getNodeDataFromForm() {
    // 获取白名单配置
    let whitelist = null;
    if (nodeWhitelist.entries.length > 0 || nodeWhitelist.global) {
        whitelist = {
            entries: nodeWhitelist.entries,
            global: nodeWhitelist.global
        };
    }

    return {
        type: document.getElementById('nodeType').value,
        status: parseInt(document.getElementById('nodeStatus').value),
        title: document.getElementById('nodeTitle').value.trim(),
        subtitle: document.getElementById('nodeSubtitle').value.trim(),
        image_url: document.getElementById('nodeImageUrl').value.trim(),
        link_h5: document.getElementById('nodeLinkH5').value.trim(),
        link_miniapp: document.getElementById('nodeLinkMiniapp').value.trim(),
        whitelist: whitelist,
        offer_oid: document.getElementById('nodeOfferOid').value.trim() || null
    };
}

// 获取完整节点数据（包含子节点）
function getFullNodeDataForJson() {
    const nodeId = document.getElementById('nodeId').value;

    if (nodeId) {
        // 编辑现有节点 - 获取该节点及其所有子节点
        const existingNode = findNode(currentCollection.nodes, nodeId);
        if (existingNode) {
            // 深拷贝节点，然后用表单数据更新当前节点的属性（不包括子节点）
            const fullNode = JSON.parse(JSON.stringify(existingNode));
            const formData = getNodeDataFromForm();
            // 更新当前节点属性，保留 id 和 nodes
            Object.assign(fullNode, formData, { id: fullNode.id, nodes: fullNode.nodes });
            return fullNode;
        }
    }

    // 新建节点 - 只返回表单数据
    const formData = getNodeDataFromForm();
    formData.nodes = [];
    return formData;
}

// 设置表单数据从 JSON 对象
function setNodeDataToForm(data) {
    document.getElementById('nodeType').value = data.type || 'default';
    document.getElementById('nodeStatus').value = data.status ?? 1;
    document.getElementById('nodeTitle').value = data.title || '';
    document.getElementById('nodeSubtitle').value = data.subtitle || '';
    document.getElementById('nodeImageUrl').value = data.image_url || '';
    document.getElementById('nodeLinkH5').value = data.link_h5 || '';
    document.getElementById('nodeLinkMiniapp').value = data.link_miniapp || '';
    document.getElementById('nodeOfferOid').value = data.offer_oid || '';
    document.getElementById('nodeCampaignId').value = data.campaign_id || '';

    // 初始化图片预览
    initializeImagePreview(data.image_url);

    // 初始化白名单
    initializeNodeWhitelist(data.whitelist);

    // 设置关联类型
    if (data.offer_oid) {
        document.getElementById('associationType').value = 'offer';
        document.getElementById('selectedOfferInfo').style.display = 'block';
        document.getElementById('selectedOfferName').textContent = data.title || `Offer ${data.offer_oid}`;
        document.getElementById('selectedCampaignInfo').style.display = 'none';
    } else if (data.campaign_id) {
        document.getElementById('associationType').value = 'campaign';
        document.getElementById('selectedCampaignInfo').style.display = 'block';
        document.getElementById('selectedCampaignName').textContent = data.title || `Campaign #${data.campaign_id}`;
        document.getElementById('selectedOfferInfo').style.display = 'none';
    } else {
        document.getElementById('associationType').value = '';
        document.getElementById('selectedOfferInfo').style.display = 'none';
        document.getElementById('selectedCampaignInfo').style.display = 'none';
    }

    // 根据类型显示/隐藏关联内容区域
    toggleAssociationGroup(data.type || 'default');
    toggleAssociationSearch();
}

// 切换 JSON 编辑器模式
function toggleNodeJsonEditor() {
    const formBody = document.querySelector('#nodeModal .modal-body');
    const jsonArea = document.getElementById('nodeJsonEditorArea');
    const jsonEditor = document.getElementById('nodeJsonEditor');
    const btnText = document.getElementById('jsonEditorBtnText');
    const copyBtn = document.getElementById('copyNodeJsonBtn');

    // 获取所有表单组（不包括 JSON 编辑区域）
    const formGroups = formBody.querySelectorAll('.row, .node-form-group:not(#nodeJsonEditorArea)');

    if (!isJsonEditorMode) {
        // 切换到 JSON 模式
        // 同步表单数据到 JSON（包含子节点）
        const nodeData = getFullNodeDataForJson();
        jsonEditor.value = JSON.stringify(nodeData, null, 2);

        // 隐藏表单，显示 JSON 编辑器
        formGroups.forEach(el => el.style.display = 'none');
        jsonArea.style.display = 'block';
        copyBtn.style.display = 'inline-block';
        btnText.textContent = '切换表单模式';

        isJsonEditorMode = true;
    } else {
        // 切换到表单模式
        // 尝试解析 JSON 并同步到表单（只同步当前节点属性，子节点会在保存时处理）
        try {
            const jsonData = JSON.parse(jsonEditor.value);
            setNodeDataToForm(jsonData);

            // 显示表单，隐藏 JSON 编辑器
            formGroups.forEach(el => el.style.display = '');
            jsonArea.style.display = 'none';
            copyBtn.style.display = 'none';
            btnText.textContent = '切换JSON模式';

            isJsonEditorMode = false;
        } catch (e) {
            showToast('JSON 格式错误，请检查后重试', 'error');
            console.error('JSON parse error:', e);
        }
    }
}

// 复制节点 JSON 到剪贴板
function copyNodeJson() {
    const jsonEditor = document.getElementById('nodeJsonEditor');
    const jsonText = jsonEditor.value;

    // 尝试验证 JSON 格式
    try {
        JSON.parse(jsonText);
    } catch (e) {
        showToast('JSON 格式错误，无法复制', 'error');
        return;
    }

    // 复制到剪贴板
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(jsonText).then(() => {
            showToast('已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            fallbackCopyToClipboard(jsonText);
        });
    } else {
        fallbackCopyToClipboard(jsonText);
    }
}

// 兼容性复制方法
function fallbackCopyToClipboard(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed';
    textarea.style.left = '-9999px';
    document.body.appendChild(textarea);
    textarea.select();
    try {
        document.execCommand('copy');
        showToast('已复制到剪贴板', 'success');
    } catch (err) {
        showToast('复制失败，请手动复制', 'error');
    }
    document.body.removeChild(textarea);
}

// 重置 JSON 编辑器状态（在打开模态框时调用）
function resetJsonEditorState() {
    const formBody = document.querySelector('#nodeModal .modal-body');
    const jsonArea = document.getElementById('nodeJsonEditorArea');
    const btnText = document.getElementById('jsonEditorBtnText');
    const copyBtn = document.getElementById('copyNodeJsonBtn');
    const formGroups = formBody.querySelectorAll('.row, .node-form-group');

    // 重置为表单模式
    formGroups.forEach(el => el.style.display = '');
    jsonArea.style.display = 'none';
    copyBtn.style.display = 'none';
    btnText.textContent = '切换JSON模式';
    isJsonEditorMode = false;
}

// ==================== 集合JSON编辑功能 ====================

// 显示集合JSON模态框
function showCollectionJsonModal() {
    if (!currentCollection) {
        showToast('请先选择一个集合', 'error');
        return;
    }

    const jsonEditor = document.getElementById('collectionJsonEditor');
    const readonlyRadio = document.getElementById('collectionJsonModeReadonly');
    const editRadio = document.getElementById('collectionJsonModeEdit');
    const saveBtn = document.getElementById('saveCollectionJsonBtn');

    // 重置为只读模式
    readonlyRadio.checked = true;
    editRadio.checked = false;
    jsonEditor.readOnly = true;
    saveBtn.style.display = 'none';

    // 生成JSON（只包含nodes，不包含其他字段）
    const jsonData = {
        nodes: currentCollection.nodes || []
    };

    jsonEditor.value = JSON.stringify(jsonData, null, 2);

    new bootstrap.Modal(document.getElementById('collectionJsonModal')).show();
}

// 切换集合JSON编辑模式
function toggleCollectionJsonMode() {
    const jsonEditor = document.getElementById('collectionJsonEditor');
    const editRadio = document.getElementById('collectionJsonModeEdit');
    const saveBtn = document.getElementById('saveCollectionJsonBtn');

    if (editRadio.checked) {
        jsonEditor.readOnly = false;
        saveBtn.style.display = 'inline-block';
    } else {
        jsonEditor.readOnly = true;
        saveBtn.style.display = 'none';
    }
}

// 复制集合JSON到剪贴板
function copyCollectionJson() {
    const jsonEditor = document.getElementById('collectionJsonEditor');
    const jsonText = jsonEditor.value;

    // 尝试验证JSON格式
    try {
        JSON.parse(jsonText);
    } catch (e) {
        showToast('JSON格式错误，无法复制', 'error');
        return;
    }

    // 复制到剪贴板
    if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(jsonText).then(() => {
            showToast('已复制到剪贴板', 'success');
        }).catch(err => {
            console.error('复制失败:', err);
            fallbackCopyToClipboard(jsonText);
        });
    } else {
        fallbackCopyToClipboard(jsonText);
    }
}

// 格式化集合JSON
function formatCollectionJson() {
    const jsonEditor = document.getElementById('collectionJsonEditor');

    try {
        const jsonData = JSON.parse(jsonEditor.value);
        jsonEditor.value = JSON.stringify(jsonData, null, 2);
        showToast('格式化成功', 'success');
    } catch (e) {
        showToast('JSON格式错误，无法格式化', 'error');
        console.error('JSON parse error:', e);
    }
}

// 保存集合JSON更改
function saveCollectionJson() {
    if (!currentCollection) {
        showToast('请先选择一个集合', 'error');
        return;
    }

    const jsonEditor = document.getElementById('collectionJsonEditor');

    try {
        const jsonData = JSON.parse(jsonEditor.value);

        // 验证必须有nodes字段
        if (!jsonData.nodes || !Array.isArray(jsonData.nodes)) {
            showToast('JSON必须包含nodes数组字段', 'error');
            return;
        }

        // 确保所有节点都有ID
        jsonData.nodes.forEach(node => ensureNodeIds(node));

        // 更新当前渠道的nodes
        if (currentChannel) {
            channelNodes[currentChannel] = jsonData.nodes;
        } else {
            currentCollection.nodes = jsonData.nodes;
        }

        // 关闭模态框
        bootstrap.Modal.getInstance(document.getElementById('collectionJsonModal')).hide();

        // 重新渲染树
        renderTree();

        // 标记有未保存的更改
        markAsChanged();

        showToast('JSON已应用，请点击保存按钮保存更改', 'success');
    } catch (e) {
        showToast('JSON格式错误，请检查后重试', 'error');
        console.error('JSON parse error:', e);
    }
}

// ==================== 渠道管理功能 ====================

// 加载发卡行列表
async function loadIssuers() {
    try {
        const response = await adminFetch('/api/admin/collections/issuers');
        const result = await response.json();

        if (result.success) {
            issuers = result.data;
            renderIssuerDropdown();
        }
    } catch (error) {
        console.error('加载发卡行列表失败:', error);
    }
}

// 渲染发卡行下拉列表
function renderIssuerDropdown() {
    const dropdown = document.getElementById('issuerDropdownMenu');

    if (issuers.length === 0) {
        dropdown.innerHTML = '<li><a class="dropdown-item disabled">暂无发卡行</a></li>';
        return;
    }

    // 获取已添加的渠道列表
    const addedChannels = [];
    const channelTabs = document.querySelectorAll('#channelTabs .nav-item');
    channelTabs.forEach(tab => {
        const tabButton = tab.querySelector('.nav-link');
        if (tabButton && tabButton.id !== 'default-tab') {
            // 从 id="channel-BOC-tab" 中提取 "BOC"
            const match = tabButton.id.match(/^channel-(.+)-tab$/);
            if (match) {
                addedChannels.push(match[1]);
            }
        }
    });

    // 过滤出未添加的渠道
    const availableIssuers = issuers.filter(issuer => !addedChannels.includes(issuer.code));

    if (availableIssuers.length === 0) {
        dropdown.innerHTML = '<li><a class="dropdown-item disabled">所有渠道已添加</a></li>';
        return;
    }

    dropdown.innerHTML = availableIssuers.map(issuer => `
        <li>
            <a class="dropdown-item" href="javascript:void(0)" onclick="addChannelTab('${issuer.code}', '${issuer.name}')">
                ${issuer.name} (${issuer.code})
            </a>
        </li>
    `).join('');
}

// 添加渠道Tab
function addChannelTab(channelCode, channelName) {
    if (!currentCollection) {
        showToast('请先选择一个集合', 'error');
        return;
    }

    // 检查是否已经添加
    const existingTab = document.getElementById(`channel-${channelCode}-tab`);
    if (existingTab) {
        // 直接切换到该tab
        existingTab.click();
        return;
    }

    // 初始化该渠道的节点（复制默认节点）
    if (!channelNodes[channelCode]) {
        // 如果channel_contents中有该渠道的内容，使用它；否则复制默认节点
        const channelContents = currentCollection.channel_contents || {};
        if (channelContents[channelCode] && channelContents[channelCode].nodes) {
            channelNodes[channelCode] = JSON.parse(JSON.stringify(channelContents[channelCode].nodes));
        } else {
            // 从默认节点复制，并过滤掉标记为"不被渠道继承"的节点
            const defaultNodes = currentCollection.nodes || [];
            const filteredNodes = filterInheritableNodes(defaultNodes);
            channelNodes[channelCode] = JSON.parse(JSON.stringify(filteredNodes));
        }
    }

    // 创建Tab按钮
    const tabsContainer = document.getElementById('channelTabs');
    const tabLi = document.createElement('li');
    tabLi.className = 'nav-item';
    tabLi.setAttribute('role', 'presentation');
    tabLi.innerHTML = `
        <button class="nav-link" id="channel-${channelCode}-tab" data-bs-toggle="tab"
                data-bs-target="#channel-${channelCode}-pane" type="button" role="tab"
                onclick="switchChannel('${channelCode}')">
            ${channelName}
        </button>
        <button type="button" class="btn-close channel-close-btn"
                onclick="event.stopPropagation(); removeChannelTab('${channelCode}')"
                title="删除此渠道定制" aria-label="删除渠道"></button>
    `;
    tabsContainer.appendChild(tabLi);

    // 创建Tab内容
    const tabContent = document.getElementById('channelTabContent');
    const tabPane = document.createElement('div');
    tabPane.className = 'tab-pane fade';
    tabPane.id = `channel-${channelCode}-pane`;
    tabPane.setAttribute('role', 'tabpanel');
    tabPane.innerHTML = `
        <div class="alert alert-info py-2 mb-2">
            <i class="fas fa-info-circle me-1"></i>
            此为 <strong>${channelName}</strong> 渠道的定制内容，默认继承自默认内容
        </div>
        <div class="tree-container" id="tree-${channelCode}"></div>
    `;
    tabContent.appendChild(tabPane);

    // 切换到新Tab
    document.getElementById(`channel-${channelCode}-tab`).click();

    // 更新下拉菜单，隐藏已添加的渠道
    renderIssuerDropdown();

    showToast(`已添加渠道：${channelName}`, 'success');
}

// 删除渠道Tab
async function removeChannelTab(channelCode) {
    if (!currentCollection) {
        showToast('请先选择一个集合', 'error');
        return;
    }

    // 检查该渠道是否已保存到数据库
    const channelContents = currentCollection.channel_contents || {};
    const isInDatabase = channelContents.hasOwnProperty(channelCode);

    const confirmMessage = isInDatabase
        ? `确定要删除此渠道定制吗？\n\n此操作将立即从数据库中删除该渠道的所有定制内容，无法撤销！`
        : `确定要删除此渠道定制吗？`;

    if (!confirm(confirmMessage)) {
        return;
    }

    try {
        // 如果已保存到数据库，调用API删除
        if (isInDatabase) {
            const response = await adminFetch(`/api/admin/collections/${currentCollection.id}/channels/${channelCode}`, {
                method: 'DELETE'
            });

            const result = await response.json();

            if (!result.success) {
                showToast(result.message || '删除失败', 'error');
                return;
            }

            showToast('渠道定制已删除', 'success');
        } else {
            showToast('渠道已移除', 'success');
        }

        // 从UI中移除
        const tab = document.getElementById(`channel-${channelCode}-tab`);
        const pane = document.getElementById(`channel-${channelCode}-pane`);

        if (tab) tab.parentElement.remove();
        if (pane) pane.remove();

        // 从缓存中删除
        delete channelNodes[channelCode];

        // 如果当前在这个渠道，切换回默认
        if (currentChannel === channelCode) {
            document.getElementById('default-tab').click();
        }

        // 更新下拉菜单，显示刚删除的渠道
        renderIssuerDropdown();

        // 重新加载集合以更新channel_contents
        if (isInDatabase) {
            await selectCollection(currentCollection.id);
        }
    } catch (error) {
        console.error('删除渠道失败:', error);
        showToast('删除失败', 'error');
    }
}

// 切换渠道
function switchChannel(channelCode) {
    currentChannel = channelCode;

    // 保存当前渠道到localStorage
    if (channelCode) {
        localStorage.setItem('collection_currentChannel', channelCode);
    } else {
        localStorage.removeItem('collection_currentChannel');
    }

    // renderTree会自动根据currentChannel选择正确的容器和节点
    renderTree();
}

// 静默添加渠道tab（不复制默认节点，用于加载已有配置）
function addChannelTabSilent(channelCode, channelName) {
    // 检查是否已经添加
    const existingTab = document.getElementById(`channel-${channelCode}-tab`);
    if (existingTab) return;

    // 创建Tab按钮
    const tabsContainer = document.getElementById('channelTabs');
    const tabLi = document.createElement('li');
    tabLi.className = 'nav-item';
    tabLi.setAttribute('role', 'presentation');
    tabLi.innerHTML = `
        <button class="nav-link" id="channel-${channelCode}-tab" data-bs-toggle="tab"
                data-bs-target="#channel-${channelCode}-pane" type="button" role="tab"
                onclick="switchChannel('${channelCode}')">
            ${channelName}
        </button>
        <button type="button" class="btn-close channel-close-btn"
                onclick="event.stopPropagation(); removeChannelTab('${channelCode}')"
                title="删除此渠道定制" aria-label="删除渠道"></button>
    `;
    tabsContainer.appendChild(tabLi);

    // 创建Tab内容
    const tabContent = document.getElementById('channelTabContent');
    const tabPane = document.createElement('div');
    tabPane.className = 'tab-pane fade';
    tabPane.id = `channel-${channelCode}-pane`;
    tabPane.setAttribute('role', 'tabpanel');
    tabPane.innerHTML = `
        <div class="alert alert-info py-2 mb-2">
            <i class="fas fa-info-circle me-1"></i>
            此为 <strong>${channelName}</strong> 渠道的定制内容
        </div>
        <div class="tree-container" id="tree-${channelCode}"></div>
    `;
    tabContent.appendChild(tabPane);
}
</script>
@endpush