@extends('admin.layouts.admin')

@section('title', '邮件模板管理')
@section('page-title', '邮件模板管理')

@push('styles')
    <!-- Quill.js for rich text editing -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <!-- CodeMirror for HTML editing -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
    <style>
        .status-badge {
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-weight: 500;
        }

        .status-active {
            background-color: #d4edda;
            color: #155724;
        }

        .status-inactive {
            background-color: #f8d7da;
            color: #721c24;
        }

        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        /* 表格响应式 */
        .table-responsive {
            overflow-x: auto;
            min-height: 400px;
        }

        .table {
            min-width: 1200px;
        }

        .table td {
            vertical-align: middle;
        }

        /* 长文本截断 */
        .text-truncate-150 {
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-truncate-200 {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .text-truncate-300 {
            max-width: 300px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* CodeMirror 编辑器样式 */
        .CodeMirror {
            border: 1px solid #ddd;
            border-radius: 4px;
            height: 300px;
        }

        /* 全屏模态框中的CodeMirror */
        .modal-fullscreen .CodeMirror {
            height: calc(100vh - 400px);
            min-height: 400px;
            flex: 1;
        }

        /* 预览窗口样式 */
        .preview-container {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            min-height: 300px;
            background-color: #f8f9fa;
        }

        .preview-iframe {
            width: 100%;
            min-height: 600px;
            height: calc(100vh - 350px);
            border: 1px solid #dee2e6;
            background-color: white;
            border-radius: 4px;
        }

        /* 全屏预览按钮 */
        .fullscreen-preview-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 10;
            opacity: 0.8;
        }

        .fullscreen-preview-btn:hover {
            opacity: 1;
        }

        /* 预览区域容器 */
        .preview-area-container {
            position: relative;
        }

        /* Tab content */
        .tab-content {
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 0.375rem 0.375rem;
            padding: 1rem;
            background-color: white;
        }

        /* 全屏模态框的tab content */
        .modal-fullscreen .tab-content {
            max-height: calc(100vh - 250px);
            overflow-y: auto;
        }

        /* HTML编辑器容器优化 */
        .modal-fullscreen .CodeMirror-wrap {
            min-height: 400px;
        }

        /* 预览tab全屏优化 */
        .modal-fullscreen #edit-preview-pane,
        .modal-fullscreen #create-preview-pane {
            height: calc(100vh - 300px);
            overflow-y: auto;
        }

        .modal-fullscreen #edit-preview-pane .row,
        .modal-fullscreen #create-preview-pane .row {
            height: 100%;
        }

        .modal-fullscreen #edit-preview-pane .col-md-2,
        .modal-fullscreen #create-preview-pane .col-md-2 {
            height: 100%;
            overflow-y: auto;
            padding-right: 15px;
        }

        .modal-fullscreen #edit-preview-pane .col-md-10,
        .modal-fullscreen #create-preview-pane .col-md-10 {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .modal-fullscreen #edit-preview-pane .col-md-10 .form-label,
        .modal-fullscreen #create-preview-pane .col-md-10 .form-label {
            flex-shrink: 0;
        }

        .modal-fullscreen #edit-preview-pane .col-md-10 .mb-2,
        .modal-fullscreen #create-preview-pane .col-md-10 .mb-2 {
            flex-shrink: 0;
        }

        .modal-fullscreen #edit-preview-pane .col-md-10 .d-flex,
        .modal-fullscreen #create-preview-pane .col-md-10 .d-flex {
            flex-shrink: 0;
        }

        .modal-fullscreen #edit-preview-pane .preview-area-container,
        .modal-fullscreen #create-preview-pane .preview-area-container {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .modal-fullscreen #edit-preview-pane .preview-iframe,
        .modal-fullscreen #create-preview-pane .preview-iframe {
            flex: 1;
            min-height: 500px;
            height: auto;
        }

        /* 变量标签样式 */
        .variable-tag {
            display: inline-block;
            background-color: #6f42c1;
            color: white;
            padding: 0.25rem 0.5rem;
            margin: 0.125rem;
            border-radius: 0.25rem;
            font-size: 0.75rem;
            font-family: monospace;
        }

        .variable-input-container {
            margin-bottom: 0.5rem;
        }

        .variable-input-container label {
            font-family: monospace;
            font-weight: bold;
            color: #6f42c1;
        }

        /* 测试邮件发送区域 */
        .test-send-area {
            background-color: #e3f2fd;
            border-radius: 0.375rem;
            padding: 1rem;
            margin-top: 1rem;
        }

        /* 模态框头部提示信息 */
        .modal-header .text-muted {
            font-size: 0.875rem;
            margin-top: 0.25rem;
            display: block;
        }

        .modal-header .text-muted i {
            margin-right: 0.25rem;
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">

        <!-- 搜索和过滤器 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <label for="searchInput" class="form-label">搜索模板</label>
                        <input type="text" class="form-control" id="searchInput" placeholder="搜索模板代码、标题...">
                    </div>
                    <div class="col-md-3">
                        <label for="statusFilter" class="form-label">状态过滤</label>
                        <select class="form-select" id="statusFilter">
                            <option value="">所有状态</option>
                            <option value="1">已启用</option>
                            <option value="0">已禁用</option>
                        </select>
                    </div>
                    <div class="col-md-3 d-flex align-items-end">
                        <div class="btn-group w-100" role="group">
                            <button type="button" class="btn btn-primary" onclick="loadEmailTemplates()">
                                <i class="fas fa-search me-1"></i>搜索
                            </button>
                            <button type="button" class="btn btn-success" onclick="showCreateModal()">
                                <i class="fas fa-plus me-1"></i>新增模板
                            </button>
                            <button type="button" class="btn btn-secondary" onclick="resetFilters()">
                                <i class="fas fa-refresh me-1"></i>重置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载中提示 -->
        <div id="loadingIndicator" class="text-center my-4" style="display: none;">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p class="mt-2">正在加载邮件模板数据...</p>
        </div>

        <!-- 邮件模板列表 -->
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th style="width: 80px;">ID</th>
                                <th style="width: 150px;">模板代码</th>
                                <th style="width: 250px;">邮件标题</th>
                                <th style="width: 100px;">状态</th>
                                <th style="width: 150px;">创建时间</th>
                                <th style="width: 150px;">更新时间</th>
                                <th style="width: 200px;">操作</th>
                            </tr>
                        </thead>
                        <tbody id="emailTemplateTableBody">
                            <!-- 动态内容 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 分页 -->
        <nav aria-label="分页导航" class="mt-4">
            <ul class="pagination justify-content-center" id="pagination">
                <!-- 动态分页 -->
            </ul>
        </nav>
    </div>

    <!-- 编辑邮件模板模态框 -->
    <div class="modal fade" id="editModal" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title">编辑邮件模板</h5>
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i>
                            为防止意外丢失编辑内容，请使用右上角关闭按钮或底部按钮来关闭对话框
                        </small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" id="editId">

                        <!-- 基本信息 -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="editTemplateCode" class="form-label">模板代码 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editTemplateCode" required>
                                <div class="form-text">唯一标识符，如: vsra, dbs, haagen_dazs 等</div>
                            </div>
                            <div class="col-md-6">
                                <label for="editSubject" class="form-label">邮件标题 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="editSubject" required>
                                <div class="form-text">支持变量替换，如: {name}, {otp} 等</div>
                            </div>
                            <div class="col-md-2">
                                <label for="editIsActive" class="form-label">状态</label>
                                <select class="form-select" id="editIsActive">
                                    <option value="1">已启用</option>
                                    <option value="0">已禁用</option>
                                </select>
                            </div>
                        </div>

                        <!-- Tab导航 -->
                        <ul class="nav nav-tabs" id="editTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="edit-preview-tab" data-bs-toggle="tab"
                                    data-bs-target="#edit-preview-pane" type="button" role="tab"
                                    onclick="previewTemplate('edit')">
                                    <i class="fas fa-eye"></i> 预览
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="edit-html-tab" data-bs-toggle="tab"
                                    data-bs-target="#edit-html-pane" type="button" role="tab">
                                    <i class="fas fa-code"></i> HTML内容
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="edit-text-tab" data-bs-toggle="tab"
                                    data-bs-target="#edit-text-pane" type="button" role="tab">
                                    <i class="fas fa-align-left"></i> 纯文本内容
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="edit-parameters-tab" data-bs-toggle="tab"
                                    data-bs-target="#edit-parameters-pane" type="button" role="tab">
                                    <i class="fas fa-cogs"></i> 参数配置
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="edit-test-tab" data-bs-toggle="tab"
                                    data-bs-target="#edit-test-pane" type="button" role="tab">
                                    <i class="fas fa-paper-plane"></i> 测试发送
                                </button>
                            </li>
                        </ul>

                        <!-- Tab内容 -->
                        <div class="tab-content" id="editTabContent">
                            <!-- 预览 -->
                            <div class="tab-pane fade show active" id="edit-preview-pane" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-2">
                                        <label class="form-label">预览变量</label>
                                        <div id="editPreviewVariables">
                                            <!-- 动态生成的变量输入框 -->
                                        </div>
                                        <button type="button" class="btn btn-primary btn-sm w-100"
                                            onclick="previewTemplate('edit')">
                                            <i class="fas fa-refresh"></i> 刷新预览
                                        </button>
                                    </div>
                                    <div class="col-md-10">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <label class="form-label mb-0">邮件预览</label>
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                onclick="toggleFullscreenPreview('editPreviewFrame')">
                                                <i class="fas fa-expand"></i> 全屏预览
                                            </button>
                                        </div>
                                        <div class="mb-2">
                                            <strong>标题:</strong> <span id="editPreviewSubject"
                                                class="text-primary"></span>
                                        </div>
                                        <div class="preview-area-container">
                                            <iframe id="editPreviewFrame" class="preview-iframe"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- HTML内容编辑 -->
                            <div class="tab-pane fade" id="edit-html-pane" role="tabpanel">
                                <label class="form-label">HTML内容 <span class="text-danger">*</span></label>
                                <div class="mb-2">
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle"></i>
                                        支持变量替换: <span class="variable-tag">{otp}</span> <span
                                            class="variable-tag">{email}</span>
                                        <span class="variable-tag">{name}</span> <span
                                            class="variable-tag">{company}</span> 等
                                    </small>
                                </div>
                                <textarea id="editHtmlContent" name="editHtmlContent"></textarea>
                            </div>

                            <!-- 纯文本内容编辑 -->
                            <div class="tab-pane fade" id="edit-text-pane" role="tabpanel">
                                <label for="editTextContent" class="form-label">纯文本内容</label>
                                <div class="mb-2">
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle"></i>
                                        可选字段，用于不支持HTML的邮件客户端。同样支持变量替换。
                                    </small>
                                </div>
                                <textarea class="form-control" id="editTextContent" rows="20"
                                    placeholder="输入纯文本邮件内容..."></textarea>
                            </div>

                            <!-- 参数配置 -->
                            <div class="tab-pane fade" id="edit-parameters-pane" role="tabpanel">
                                <div class="mb-3">
                                    <label class="form-label">模板参数配置</label>
                                    <div class="mb-2">
                                        <small class="text-muted">
                                            <i class="fas fa-info-circle"></i>
                                            配置此邮件模板可接收的参数，设置参数名称、类型和默认值
                                        </small>
                                    </div>
                                </div>

                                <div id="editParametersContainer">
                                    <!-- 动态生成的参数配置项 -->
                                </div>

                                <div class="d-flex gap-2 mt-3">
                                    <button type="button" class="btn btn-success btn-sm" onclick="addParameter('edit')">
                                        <i class="fas fa-plus"></i> 添加参数
                                    </button>
                                    <button type="button" class="btn btn-info btn-sm"
                                        onclick="resetToDefaultParameters('edit')">
                                        <i class="fas fa-refresh"></i> 恢复默认参数
                                    </button>
                                </div>
                            </div>

                            <!-- 测试发送 -->
                            <div class="tab-pane fade" id="edit-test-pane" role="tabpanel">
                                <div class="test-send-area">
                                    <h6><i class="fas fa-paper-plane"></i> 发送测试邮件</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label for="editTestEmail" class="form-label">测试邮箱地址</label>
                                            <input type="email" class="form-control" id="editTestEmail"
                                                placeholder="输入要接收测试邮件的邮箱地址">
                                        </div>
                                        <div class="col-md-6 d-flex align-items-end">
                                            <button type="button" class="btn btn-warning"
                                                onclick="sendTestEmail('edit')">
                                                <i class="fas fa-paper-plane"></i> 发送测试邮件
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <small class="text-muted">
                                            <i class="fas fa-info-circle"></i>
                                            测试邮件将使用当前编辑的内容和预览变量进行发送
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </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="updateEmailTemplate()">保存修改</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 新增邮件模板模态框 -->
    <div class="modal fade" id="createModal" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title">新增邮件模板</h5>
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i>
                            为防止意外丢失编辑内容，请使用右上角关闭按钮或底部按钮来关闭对话框
                        </small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <form id="createForm">
                        <!-- 基本信息 -->
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="createTemplateCode" class="form-label">模板代码 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="createTemplateCode" required>
                                <div class="form-text">唯一标识符，如: vsra, dbs, haagen_dazs 等</div>
                            </div>
                            <div class="col-md-6">
                                <label for="createSubject" class="form-label">邮件标题 <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="createSubject" required>
                                <div class="form-text">支持变量替换，如: {name}, {otp} 等</div>
                            </div>
                            <div class="col-md-2">
                                <label for="createIsActive" class="form-label">状态</label>
                                <select class="form-select" id="createIsActive">
                                    <option value="1">已启用</option>
                                    <option value="0">已禁用</option>
                                </select>
                            </div>
                        </div>

                        <!-- Tab导航 -->
                        <ul class="nav nav-tabs" id="createTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="create-preview-tab" data-bs-toggle="tab"
                                    data-bs-target="#create-preview-pane" type="button" role="tab"
                                    onclick="previewTemplate('create')">
                                    <i class="fas fa-eye"></i> 预览
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="create-html-tab" data-bs-toggle="tab"
                                    data-bs-target="#create-html-pane" type="button" role="tab">
                                    <i class="fas fa-code"></i> HTML内容
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="create-text-tab" data-bs-toggle="tab"
                                    data-bs-target="#create-text-pane" type="button" role="tab">
                                    <i class="fas fa-align-left"></i> 纯文本内容
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="create-parameters-tab" data-bs-toggle="tab"
                                    data-bs-target="#create-parameters-pane" type="button" role="tab">
                                    <i class="fas fa-cogs"></i> 参数配置
                                </button>
                            </li>
                        </ul>

                        <!-- Tab内容 -->
                        <div class="tab-content" id="createTabContent">
                            <!-- 预览 -->
                            <div class="tab-pane fade show active" id="create-preview-pane" role="tabpanel">
                                <div class="row">
                                    <div class="col-md-2">
                                        <label class="form-label">预览变量</label>
                                        <div id="createPreviewVariables">
                                            <!-- 动态生成的变量输入框 -->
                                        </div>
                                        <button type="button" class="btn btn-primary btn-sm w-100"
                                            onclick="previewTemplate('create')">
                                            <i class="fas fa-refresh"></i> 刷新预览
                                        </button>
                                    </div>
                                    <div class="col-md-10">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <label class="form-label mb-0">邮件预览</label>
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                onclick="toggleFullscreenPreview('createPreviewFrame')">
                                                <i class="fas fa-expand"></i> 全屏预览
                                            </button>
                                        </div>
                                        <div class="mb-2">
                                            <strong>标题:</strong> <span id="createPreviewSubject"
                                                class="text-primary"></span>
                                        </div>
                                        <div class="preview-area-container">
                                            <iframe id="createPreviewFrame" class="preview-iframe"></iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- HTML内容编辑 -->
                            <div class="tab-pane fade" id="create-html-pane" role="tabpanel">
                                <label class="form-label">HTML内容 <span class="text-danger">*</span></label>
                                <div class="mb-2">
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle"></i>
                                        支持变量替换: <span class="variable-tag">{otp}</span> <span
                                            class="variable-tag">{email}</span>
                                        <span class="variable-tag">{name}</span> <span
                                            class="variable-tag">{company}</span> 等
                                    </small>
                                </div>
                                <textarea id="createHtmlContent" name="createHtmlContent"></textarea>
                            </div>

                            <!-- 纯文本内容编辑 -->
                            <div class="tab-pane fade" id="create-text-pane" role="tabpanel">
                                <label for="createTextContent" class="form-label">纯文本内容</label>
                                <div class="mb-2">
                                    <small class="text-muted">
                                        <i class="fas fa-info-circle"></i>
                                        可选字段，用于不支持HTML的邮件客户端。同样支持变量替换。
                                    </small>
                                </div>
                                <textarea class="form-control" id="createTextContent" rows="20"
                                    placeholder="输入纯文本邮件内容..."></textarea>
                            </div>

                            <!-- 参数配置 -->
                            <div class="tab-pane fade" id="create-parameters-pane" role="tabpanel">
                                <div class="mb-3">
                                    <label class="form-label">模板参数配置</label>
                                    <div class="mb-2">
                                        <small class="text-muted">
                                            <i class="fas fa-info-circle"></i>
                                            配置此邮件模板可接收的参数，设置参数名称、类型和默认值
                                        </small>
                                    </div>
                                </div>

                                <div id="createParametersContainer">
                                    <!-- 动态生成的参数配置项 -->
                                </div>

                                <div class="d-flex gap-2 mt-3">
                                    <button type="button" class="btn btn-success btn-sm"
                                        onclick="addParameter('create')">
                                        <i class="fas fa-plus"></i> 添加参数
                                    </button>
                                    <button type="button" class="btn btn-info btn-sm"
                                        onclick="resetToDefaultParameters('create')">
                                        <i class="fas fa-refresh"></i> 恢复默认参数
                                    </button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" onclick="createEmailTemplate()">创建模板</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title">确认删除</h5>
                        <small class="text-muted">
                            <i class="fas fa-exclamation-triangle"></i>
                            请仔细确认删除操作，删除后无法恢复
                        </small>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                </div>
                <div class="modal-body">
                    <p>您确定要删除以下邮件模板吗？</p>
                    <p class="fw-bold text-danger" id="deleteConfirmText">模板名称</p>
                    <p class="text-muted">注意：删除后的模板将无法恢复，请谨慎操作。</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"
                        onclick="deleteEmailTemplate()">确认删除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS already loaded in layout -->
    <!-- CodeMirror -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>

    <script>
        // 全局变量
        let currentPage = 1;
        let perPage = 20;
        let searchQuery = '';
        let statusFilter = '';
        let emailTemplateToDelete = null;
        let htmlEditors = {};
        let templateParameters = {
            edit: {},
            create: {}
        };

        let previewVariables = {
            edit: {},
            create: {}
        };

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function () {
            initializeHtmlEditors();
            loadEmailTemplates();

            // 搜索输入框事件
            document.getElementById('searchInput').addEventListener('input', debounce(function () {
                searchQuery = this.value;
                currentPage = 1;
                loadEmailTemplates();
            }, 500));

            // 状态过滤器事件
            document.getElementById('statusFilter').addEventListener('change', function () {
                statusFilter = this.value;
                currentPage = 1;
                loadEmailTemplates();
            });

            // 添加tab切换处理
            document.addEventListener('shown.bs.tab', function (e) {
                const targetId = e.target.getAttribute('data-bs-target');
                console.log('Tab switched to:', targetId);

                // 如果是HTML编辑器tab，刷新CodeMirror
                if (targetId === '#edit-html-pane' || targetId === '#create-html-pane') {
                    const prefix = targetId.includes('edit') ? 'edit' : 'create';
                    setTimeout(() => {
                        if (htmlEditors[prefix]) {
                            htmlEditors[prefix].refresh();
                        }
                    }, 100);
                }
            });
        });

        // 初始化HTML编辑器
        function initializeHtmlEditors() {
            // 编辑模态框的HTML编辑器
            htmlEditors.edit = CodeMirror.fromTextArea(document.getElementById('editHtmlContent'), {
                mode: 'htmlmixed',
                theme: 'default',
                lineNumbers: true,
                lineWrapping: true,
                autoCloseTags: true,
                matchBrackets: true,
                indentUnit: 2,
                tabSize: 2,
                placeholder: '输入HTML邮件内容...',
                viewportMargin: Infinity
            });

            // 创建模态框的HTML编辑器
            htmlEditors.create = CodeMirror.fromTextArea(document.getElementById('createHtmlContent'), {
                mode: 'htmlmixed',
                theme: 'default',
                lineNumbers: true,
                lineWrapping: true,
                autoCloseTags: true,
                matchBrackets: true,
                indentUnit: 2,
                tabSize: 2,
                placeholder: '输入HTML邮件内容...',
                viewportMargin: Infinity
            });

            // 监听窗口大小变化，动态调整编辑器大小
            window.addEventListener('resize', function () {
                setTimeout(function () {
                    htmlEditors.edit.refresh();
                    htmlEditors.create.refresh();
                }, 100);
            });
        }

        // 防抖函数
        function debounce(func, delay) {
            let timeoutId;
            return function (...args) {
                clearTimeout(timeoutId);
                timeoutId = setTimeout(() => func.apply(this, args), delay);
            };
        }

        // 显示加载中
        function showLoading() {
            document.getElementById('loadingIndicator').style.display = 'block';
            document.querySelector('.table-responsive').classList.add('loading');
        }

        // 隐藏加载中
        function hideLoading() {
            document.getElementById('loadingIndicator').style.display = 'none';
            document.querySelector('.table-responsive').classList.remove('loading');
        }

        // 加载邮件模板列表
        function loadEmailTemplates() {
            showLoading();

            const params = new URLSearchParams({
                page: currentPage,
                per_page: perPage,
                search: searchQuery
            });

            if (statusFilter !== '') params.append('is_active', statusFilter);

            fetch(`/api/admin/email-templates/api?${params}`, {
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    hideLoading();
                    if (data.success) {
                        displayEmailTemplates(data.data);
                        displayPagination(data.pagination);
                    } else {
                        showAlert('加载失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    hideLoading();
                    console.error('Error loading email templates:', error);
                    showAlert('加载邮件模板列表失败', 'danger');
                });
        }

        // 显示邮件模板列表
        function displayEmailTemplates(templates) {
            const tbody = document.getElementById('emailTemplateTableBody');
            tbody.innerHTML = '';

            if (templates.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" class="text-center">暂无邮件模板数据</td></tr>';
                return;
            }

            templates.forEach(template => {
                const row = document.createElement('tr');
                row.innerHTML = `
                    <td>${template.id}</td>
                    <td><code>${template.template_code}</code></td>
                    <td class="text-truncate-300" title="${template.subject}">${template.subject}</td>
                    <td>${getStatusBadge(template.is_active)}</td>
                    <td>${formatDateTime(template.created_at)}</td>
                    <td>${formatDateTime(template.updated_at)}</td>
                    <td>
                        <div class="btn-group-vertical" role="group">
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="editEmailTemplate(${template.id})">
                                <i class="fas fa-edit"></i> 编辑
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-info" onclick="duplicateEmailTemplate(${template.id})">
                                <i class="fas fa-copy"></i> 复制
                            </button>

                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="confirmDeleteEmailTemplate(${template.id}, '${template.template_code}')">
                                <i class="fas fa-trash"></i> 删除
                            </button>
                        </div>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }

        // 获取状态徽章
        function getStatusBadge(isActive) {
            return isActive
                ? '<span class="status-badge status-active">已启用</span>'
                : '<span class="status-badge status-inactive">已禁用</span>';
        }

        // 格式化日期时间
        function formatDateTime(datetime) {
            if (!datetime) return '-';
            return new Date(datetime).toLocaleString('zh-CN');
        }

        // 显示分页
        function displayPagination(pagination) {
            const paginationElement = document.getElementById('pagination');
            paginationElement.innerHTML = '';

            if (pagination.last_page <= 1) return;

            // 上一页
            const prevItem = document.createElement('li');
            prevItem.className = `page-item ${pagination.current_page === 1 ? 'disabled' : ''}`;
            prevItem.innerHTML = `<a class="page-link" href="#" onclick="changePage(${pagination.current_page - 1})">上一页</a>`;
            paginationElement.appendChild(prevItem);

            // 页码
            const startPage = Math.max(1, pagination.current_page - 2);
            const endPage = Math.min(pagination.last_page, pagination.current_page + 2);

            for (let i = startPage; i <= endPage; i++) {
                const item = document.createElement('li');
                item.className = `page-item ${i === pagination.current_page ? 'active' : ''}`;
                item.innerHTML = `<a class="page-link" href="#" onclick="changePage(${i})">${i}</a>`;
                paginationElement.appendChild(item);
            }

            // 下一页
            const nextItem = document.createElement('li');
            nextItem.className = `page-item ${pagination.current_page === pagination.last_page ? 'disabled' : ''}`;
            nextItem.innerHTML = `<a class="page-link" href="#" onclick="changePage(${pagination.current_page + 1})">下一页</a>`;
            paginationElement.appendChild(nextItem);
        }

        // 改变页码
        function changePage(page) {
            currentPage = page;
            loadEmailTemplates();
        }

        // 重置过滤器
        function resetFilters() {
            document.getElementById('searchInput').value = '';
            document.getElementById('statusFilter').value = '';
            searchQuery = '';
            statusFilter = '';
            currentPage = 1;
            loadEmailTemplates();
        }

        // 显示新增模态框
        function showCreateModal() {
            // 清空表单
            document.getElementById('createForm').reset();
            htmlEditors.create.setValue('');

            // 初始化默认参数配置
            renderParametersConfig('create', getDefaultParametersConfig());
            clearPreviewContent('create');

            const modal = new bootstrap.Modal(document.getElementById('createModal'), {
                keyboard: false,
                backdrop: 'static'
            });
            modal.show();

            // 模态框显示后刷新编辑器和初始化tab状态
            document.getElementById('createModal').addEventListener('shown.bs.modal', function () {
                setTimeout(function () {
                    htmlEditors.create.refresh();
                    initializeTabState('create');
                }, 100);
            }, { once: true });
        }

        // 初始化tab状态
        function initializeTabState(prefix) {
            // 简单地确保第一个tab是激活的，其他都是非激活的
            const modal = document.getElementById(`${prefix}Modal`);
            if (modal) {
                const allTabs = modal.querySelectorAll('.nav-tabs .nav-link');
                const allPanes = modal.querySelectorAll('.tab-content .tab-pane');

                // 重置所有tab状态
                allTabs.forEach((tab, index) => {
                    if (index === 0) {
                        tab.classList.add('active');
                    } else {
                        tab.classList.remove('active');
                    }
                });

                // 重置所有pane状态
                allPanes.forEach((pane, index) => {
                    if (index === 0) {
                        pane.classList.add('show', 'active');
                    } else {
                        pane.classList.remove('show', 'active');
                    }
                });

                console.log(`Tab state initialized for ${prefix}`);
            }
        }

        // 编辑邮件模板
        function editEmailTemplate(id) {
            fetch(`/api/admin/email-templates/${id}`, {
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        populateEditForm(data.data);
                        const modal = new bootstrap.Modal(document.getElementById('editModal'), {
                            keyboard: false,
                            backdrop: 'static'
                        });
                        modal.show();

                        // 模态框显示后刷新编辑器和初始化tab状态
                        document.getElementById('editModal').addEventListener('shown.bs.modal', function () {
                            setTimeout(function () {
                                htmlEditors.edit.refresh();
                                initializeTabState('edit');
                            }, 100);
                        }, { once: true });
                    } else {
                        showAlert('获取邮件模板详情失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error fetching email template:', error);
                    showAlert('获取邮件模板详情失败', 'danger');
                });
        }

        // 填充编辑表单
        function populateEditForm(template) {
            document.getElementById('editId').value = template.id;
            document.getElementById('editTemplateCode').value = template.template_code || '';
            document.getElementById('editSubject').value = template.subject || '';
            document.getElementById('editIsActive').value = template.is_active ? '1' : '0';
            document.getElementById('editTextContent').value = template.text_content || '';

            htmlEditors.edit.setValue(template.html_content || '');

            // 加载参数配置
            loadTemplateParameters(template.id, 'edit');

            clearPreviewContent('edit');

            // 如果有HTML内容，自动生成预览
            if (template.html_content) {
                setTimeout(() => {
                    previewTemplate('edit');
                }, 500); // 增加延迟以确保参数配置加载完成
            }
        }

        // 创建邮件模板
        function createEmailTemplate() {
            const formData = collectFormData('create');

            if (!validateFormData(formData)) return;

            fetch('/api/admin/email-templates', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('邮件模板创建成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('createModal')).hide();
                        loadEmailTemplates();
                    } else {
                        showAlert('创建失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error creating email template:', error);
                    showAlert('创建邮件模板失败', 'danger');
                });
        }

        // 更新邮件模板
        function updateEmailTemplate() {
            const id = document.getElementById('editId').value;
            const formData = collectFormData('edit');

            if (!validateFormData(formData)) return;

            fetch(`/api/admin/email-templates/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(formData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('邮件模板更新成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('editModal')).hide();
                        loadEmailTemplates();
                    } else {
                        showAlert('更新失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error updating email template:', error);
                    showAlert('更新邮件模板失败', 'danger');
                });
        }

        // 收集表单数据
        function collectFormData(prefix) {
            return {
                template_code: document.getElementById(prefix + 'TemplateCode').value,
                subject: document.getElementById(prefix + 'Subject').value,
                html_content: htmlEditors[prefix].getValue(),
                text_content: document.getElementById(prefix + 'TextContent').value,
                parameters: getParametersConfigData(prefix),
                is_active: document.getElementById(prefix + 'IsActive').value === '1'
            };
        }

        // 验证表单数据
        function validateFormData(formData) {
            if (!formData.template_code) {
                showAlert('请填写模板代码', 'warning');
                return false;
            }
            if (!formData.subject) {
                showAlert('请填写邮件标题', 'warning');
                return false;
            }
            if (!formData.html_content) {
                showAlert('请填写HTML内容', 'warning');
                return false;
            }
            return true;
        }

        // 预览邮件模板
        function previewTemplate(prefix) {
            const templateData = collectFormData(prefix);
            const variables = getPreviewVariables(prefix);

            if (!templateData.html_content) {
                showAlert('请先输入HTML内容', 'warning');
                return;
            }

            // 本地渲染预览（简单的变量替换）
            let renderedSubject = templateData.subject;
            let renderedHtml = templateData.html_content;

            for (const [key, value] of Object.entries(variables)) {
                const placeholder = '{' + key + '}';
                renderedSubject = renderedSubject.replace(new RegExp(placeholder, 'g'), value);
                renderedHtml = renderedHtml.replace(new RegExp(placeholder, 'g'), value);
            }

            // 更新预览
            document.getElementById(prefix + 'PreviewSubject').textContent = renderedSubject;
            const iframe = document.getElementById(prefix + 'PreviewFrame');
            iframe.srcdoc = renderedHtml;
        }

        // 获取预览变量
        function getPreviewVariables(prefix) {
            const variables = {};
            const container = document.getElementById(prefix + 'PreviewVariables');
            const inputs = container.querySelectorAll('input');

            inputs.forEach(input => {
                const varName = input.getAttribute('data-var-name');
                if (varName) {
                    variables[varName] = input.value;
                }
            });

            return Object.keys(variables).length > 0 ? variables : previewVariables[prefix];
        }

        // 重置预览变量
        function resetPreviewVariables(prefix) {
            const container = document.getElementById(prefix + 'PreviewVariables');
            container.innerHTML = '';

            Object.entries(previewVariables[prefix]).forEach(([key, value]) => {
                const div = document.createElement('div');
                div.className = 'variable-input-container';
                div.innerHTML = `
                    <label for="${prefix}PreviewVar${key}" class="form-label">{${key}}</label>
                    <input type="text" class="form-control form-control-sm" 
                           id="${prefix}PreviewVar${key}" 
                           data-var-name="${key}" 
                           value="${value}">
                `;
                container.appendChild(div);
            });
        }

        // 清除预览内容
        function clearPreviewContent(prefix) {
            // 清除预览标题
            const subjectElement = document.getElementById(prefix + 'PreviewSubject');
            if (subjectElement) {
                if (prefix === 'create') {
                    subjectElement.textContent = '请先输入邮件内容，然后点击"刷新预览"';
                } else {
                    subjectElement.textContent = '正在加载预览...';
                }
            }

            // 清除预览iframe内容
            const iframe = document.getElementById(prefix + 'PreviewFrame');
            if (iframe) {
                if (prefix === 'create') {
                    iframe.srcdoc = '<div style="padding: 40px; text-align: center; color: #666; font-family: Arial, sans-serif; line-height: 1.6;"><i class="fas fa-edit" style="font-size: 3em; margin-bottom: 20px; color: #ddd;"></i><br><h5>开始创建您的邮件模板</h5><p>请在"HTML内容"标签页中输入邮件内容，<br>然后返回此处点击"刷新预览"查看效果</p></div>';
                } else {
                    iframe.srcdoc = '<div style="padding: 40px; text-align: center; color: #666; font-family: Arial, sans-serif;"><i class="fas fa-spinner fa-spin" style="font-size: 2em; margin-bottom: 15px;"></i><br>正在加载预览...</div>';
                }
            }
        }

        // 发送测试邮件
        function sendTestEmail(prefix) {
            const id = prefix === 'edit' ? document.getElementById('editId').value : null;
            const testEmail = document.getElementById(prefix + 'TestEmail').value;
            const variables = getPreviewVariables(prefix);

            if (!testEmail) {
                showAlert('请输入测试邮箱地址', 'warning');
                return;
            }

            if (!id && prefix === 'edit') {
                showAlert('请先保存邮件模板', 'warning');
                return;
            }

            // 如果是新建模板，需要先保存
            if (prefix === 'create') {
                showAlert('请先保存邮件模板再进行测试', 'warning');
                return;
            }

            const requestData = {
                test_email: testEmail,
                variables: variables
            };

            fetch(`/api/admin/email-templates/${id}/test-send`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
                body: JSON.stringify(requestData)
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('测试邮件发送成功，请检查邮箱', 'success');
                    } else {
                        showAlert('测试邮件发送失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error sending test email:', error);
                    showAlert('发送测试邮件失败', 'danger');
                });
        }

        // 复制邮件模板
        function duplicateEmailTemplate(id) {
            fetch(`/api/admin/email-templates/${id}/duplicate`, {
                method: 'POST',
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('邮件模板复制成功', 'success');
                        loadEmailTemplates();
                    } else {
                        showAlert('复制失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error duplicating email template:', error);
                    showAlert('复制邮件模板失败', 'danger');
                });
        }

        // 确认删除邮件模板
        function confirmDeleteEmailTemplate(id, templateCode) {
            emailTemplateToDelete = id;
            document.getElementById('deleteConfirmText').textContent = templateCode;

            const modal = new bootstrap.Modal(document.getElementById('deleteModal'), {
                keyboard: false,
                backdrop: 'static'
            });
            modal.show();
        }

        // 删除邮件模板
        function deleteEmailTemplate() {
            if (!emailTemplateToDelete) return;

            fetch(`/api/admin/email-templates/${emailTemplateToDelete}`, {
                method: 'DELETE',
                headers: {
                    'Accept': 'application/json'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('邮件模板删除成功', 'success');
                        bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
                        loadEmailTemplates();
                        emailTemplateToDelete = null;
                    } else {
                        showAlert('删除失败: ' + (data.message || '未知错误'), 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error deleting email template:', error);
                    showAlert('删除邮件模板失败', 'danger');
                });
        }



        // ========== 参数配置相关函数 ==========

        // 获取默认参数配置
        function getDefaultParametersConfig() {
            return {
                otp: {
                    name: 'otp',
                    label: '验证码',
                    type: 'text',
                    default_value: '123456',
                    description: '6位数字验证码'
                },
                email: {
                    name: 'email',
                    label: '邮箱地址',
                    type: 'email',
                    default_value: 'example@example.com',
                    description: '用户邮箱地址'
                },
                name: {
                    name: 'name',
                    label: '用户姓名',
                    type: 'text',
                    default_value: '示例用户',
                    description: '用户的姓名'
                },
                company: {
                    name: 'company',
                    label: '公司名称',
                    type: 'text',
                    default_value: '示例公司',
                    description: '公司或机构名称'
                }
            };
        }

        // 渲染参数配置界面
        function renderParametersConfig(prefix, parameters = null) {
            const container = document.getElementById(prefix + 'ParametersContainer');
            if (!container) return;

            if (!parameters) {
                parameters = getDefaultParametersConfig();
            }

            templateParameters[prefix] = parameters;
            container.innerHTML = '';

            Object.keys(parameters).forEach((key, index) => {
                const param = parameters[key];
                container.appendChild(createParameterItem(prefix, key, param, index));
            });

            updatePreviewVariablesFromParameters(prefix);
        }

        // 创建单个参数配置项
        function createParameterItem(prefix, key, param, index) {
            const div = document.createElement('div');
            div.className = 'border rounded p-3 mb-3 parameter-item';
            div.setAttribute('data-param-key', key);

            div.innerHTML = `
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <h6 class="mb-0">参数 #${index + 1}</h6>
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeParameter('${prefix}', '${key}')">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
                
                <div class="row">
                    <div class="col-md-3">
                        <label class="form-label">参数名称</label>
                        <input type="text" class="form-control form-control-sm" 
                               value="${param.name || ''}" 
                               onchange="updateParameterProperty('${prefix}', '${key}', 'name', this.value)"
                               placeholder="如: otp">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">显示名称</label>
                        <input type="text" class="form-control form-control-sm" 
                               value="${param.label || ''}" 
                               onchange="updateParameterProperty('${prefix}', '${key}', 'label', this.value)"
                               placeholder="如: 验证码">
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">类型</label>
                        <select class="form-select form-select-sm" 
                                onchange="updateParameterProperty('${prefix}', '${key}', 'type', this.value)">
                            <option value="text" ${param.type === 'text' ? 'selected' : ''}>文本</option>
                            <option value="email" ${param.type === 'email' ? 'selected' : ''}>邮箱</option>
                            <option value="number" ${param.type === 'number' ? 'selected' : ''}>数字</option>
                            <option value="date" ${param.type === 'date' ? 'selected' : ''}>日期</option>
                            <option value="textarea" ${param.type === 'textarea' ? 'selected' : ''}>多行文本</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">默认值</label>
                        <input type="text" class="form-control form-control-sm" 
                               value="${param.default_value || ''}" 
                               onchange="updateParameterProperty('${prefix}', '${key}', 'default_value', this.value)"
                               placeholder="默认值">
                    </div>
                </div>
                
                <div class="row mt-2">
                    <div class="col-12">
                        <label class="form-label">描述</label>
                        <input type="text" class="form-control form-control-sm" 
                               value="${param.description || ''}" 
                               onchange="updateParameterProperty('${prefix}', '${key}', 'description', this.value)"
                               placeholder="参数说明">
                    </div>
                </div>
            `;

            return div;
        }

        // 添加新参数
        function addParameter(prefix) {
            const parameters = templateParameters[prefix] || {};
            const newKey = 'param_' + Date.now();

            parameters[newKey] = {
                name: '',
                label: '',
                type: 'text',
                default_value: '',
                description: ''
            };

            renderParametersConfig(prefix, parameters);
        }

        // 删除参数
        function removeParameter(prefix, key) {
            if (confirm('确定要删除这个参数吗？')) {
                const parameters = templateParameters[prefix] || {};
                delete parameters[key];
                renderParametersConfig(prefix, parameters);
            }
        }

        // 更新参数属性
        function updateParameterProperty(prefix, key, property, value) {
            if (!templateParameters[prefix]) templateParameters[prefix] = {};
            if (!templateParameters[prefix][key]) templateParameters[prefix][key] = {};

            templateParameters[prefix][key][property] = value;

            // 如果更新的是name属性，需要重新渲染以更新key
            if (property === 'name' && value) {
                const oldParam = templateParameters[prefix][key];
                delete templateParameters[prefix][key];
                templateParameters[prefix][value] = oldParam;
                templateParameters[prefix][value].name = value;
                renderParametersConfig(prefix, templateParameters[prefix]);
            }

            updatePreviewVariablesFromParameters(prefix);
        }

        // 从参数配置更新预览变量
        function updatePreviewVariablesFromParameters(prefix) {
            const parameters = templateParameters[prefix] || {};
            const variables = {};

            Object.keys(parameters).forEach(key => {
                const param = parameters[key];
                if (param.name && param.default_value !== undefined) {
                    variables[param.name] = param.default_value;
                }
            });

            previewVariables[prefix] = variables;
            resetPreviewVariables(prefix);
        }

        // 重置为默认参数
        function resetToDefaultParameters(prefix) {
            if (confirm('确定要重置为默认参数配置吗？这将覆盖当前的配置。')) {
                renderParametersConfig(prefix, getDefaultParametersConfig());
            }
        }

        // 获取参数配置数据（用于保存）
        function getParametersConfigData(prefix) {
            return templateParameters[prefix] || {};
        }

        // 加载模板的参数配置
        function loadTemplateParameters(templateId, prefix) {
            if (!templateId) {
                renderParametersConfig(prefix, getDefaultParametersConfig());
                return;
            }

            fetch(`/api/admin/email-templates/${templateId}/parameters`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        renderParametersConfig(prefix, data.data.parameters);
                    } else {
                        console.error('Failed to load template parameters:', data.message);
                        renderParametersConfig(prefix, getDefaultParametersConfig());
                    }
                })
                .catch(error => {
                    console.error('Error loading template parameters:', error);
                    renderParametersConfig(prefix, getDefaultParametersConfig());
                });
        }

        // 全屏预览功能
        function toggleFullscreenPreview(iframeId) {
            const iframe = document.getElementById(iframeId);
            if (!iframe) return;

            // 创建全屏预览模态框
            const fullscreenModal = document.createElement('div');
            fullscreenModal.className = 'modal fade';
            fullscreenModal.id = 'fullscreenPreviewModal';
            fullscreenModal.innerHTML = `
                <div class="modal-dialog modal-fullscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">邮件预览 - 全屏模式</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                        </div>
                        <div class="modal-body p-0">
                            <iframe id="fullscreenIframe" style="width: 100%; height: 100%; border: none;"></iframe>
                        </div>
                    </div>
                </div>
            `;

            document.body.appendChild(fullscreenModal);

            // 复制原iframe的内容到全屏iframe
            const fullscreenIframe = fullscreenModal.querySelector('#fullscreenIframe');
            fullscreenIframe.srcdoc = iframe.srcdoc;

            // 显示模态框
            const modal = new bootstrap.Modal(fullscreenModal);
            modal.show();

            // 模态框关闭后移除DOM
            fullscreenModal.addEventListener('hidden.bs.modal', function () {
                fullscreenModal.remove();
            });
        }

        // 显示提示消息
        function showAlert(message, type = 'info') {
            // 移除现有的提示
            const existingAlert = document.querySelector('.alert-dismissible');
            if (existingAlert && !existingAlert.classList.contains('alert-' + document.querySelector('[data-bs-dismiss="alert"]')?.closest('.alert')?.className.split(' ')[1]?.replace('alert-', ''))) {
                existingAlert.remove();
            }

            // 创建新的提示
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x`;
            alertDiv.style.zIndex = '9999';
            alertDiv.style.marginTop = '20px';
            alertDiv.innerHTML = `
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;

            document.body.appendChild(alertDiv);

            // 自动隐藏
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }
    </script>
@endsection

@push('scripts')
    <!-- CodeMirror for HTML editing -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/fold/foldcode.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/fold/foldgutter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/fold/xml-fold.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closetag.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closebrackets.min.js"></script>
    <script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
@endpush