{% extends "cms/materialpro/base.html" %}

{% block content %}
<style>
/* ===== Builder Layout ===== */
.builder-wrap { display:flex; height:calc(100vh - 140px); overflow:hidden; gap:0; }

/* Left Panel: Block Palette */
.builder-palette {
  width:200px; min-width:200px; background:#fff;
  border-right:1px solid #e2e8f0; overflow-y:auto;
  padding:12px; display:flex; flex-direction:column; gap:6px;
}
.palette-title { font-size:11px; font-weight:700; color:#888; text-transform:uppercase;
                 letter-spacing:.5px; margin-bottom:4px; }
.palette-block {
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid #e2e8f0; border-radius:8px; cursor:grab;
  background:#fafafa; transition:all .15s; font-size:13px;
}
.palette-block:hover { background:#0066CC; color:#fff; border-color:#0066CC; transform:translateX(2px); }
.palette-block:active { cursor:grabbing; }
.palette-block .picon { width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:14px; }
.palette-block .picon img { width:20px; height:20px; }

/* Center: Canvas */
.builder-canvas {
  flex:1; overflow-y:auto; background:#f0f2f5; padding:24px;
}
.canvas-inner {
  max-width:900px; margin:0 auto; background:#fff;
  border-radius:12px; box-shadow:0 2px 16px rgba(0,0,0,.08);
  min-height:400px; overflow:hidden;
}
.canvas-page-header {
  padding:16px 24px; border-bottom:1px solid #e2e8f0;
  display:flex; align-items:center; gap:12px;
}
.canvas-page-title { font-size:16px; font-weight:700; margin:0; }
.canvas-page-slug { font-size:12px; color:#888; margin:0; }

/* Block Card on Canvas */
.block-card {
  border:2px solid transparent; border-radius:8px; margin:8px;
  position:relative; cursor:pointer; transition:border-color .15s;
}
.block-card:hover { border-color:#0066CC44; }
.block-card.selected { border-color:#0066CC; box-shadow:0 0 0 3px #0066CC22; }
.block-card-inner { padding:12px 16px; }
.block-card:hover .block-actions { opacity:1; }
.block-actions {
  position:absolute; top:4px; right:4px;
  display:flex; gap:4px; opacity:0; transition:opacity .15s;
  background:#fff; border-radius:6px; padding:2px; box-shadow:0 1px 6px rgba(0,0,0,.15);
}
.block-actions button {
  width:28px; height:28px; border:none; background:transparent;
  border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#666; transition:background .1s;
}
.block-actions button:hover { background:#f1f1f1; color:#0066CC; }
.block-actions .btn-del:hover { background:#fee; color:#e74c3c; }

/* Block type badge */
.block-type-badge {
  position:absolute; top:-10px; left:12px;
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:10px; color:#fff; text-transform:uppercase; letter-spacing:.5px;
}

/* Block content editors */
.block-editor { width:100%; border:1px solid #e2e8f0; border-radius:6px; padding:8px 12px;
                font-size:14px; resize:vertical; min-height:60px; outline:none;
                transition:border-color .15s; }
.block-editor:focus { border-color:#0066CC; box-shadow:0 0 0 3px #0066CC11; }
.block-image-preview { max-width:100%; max-height:200px; border-radius:8px; display:block; margin:8px 0; }
.block-placeholder {
  background:#f8f9fa; border:2px dashed #ddd; border-radius:8px;
  padding:24px; text-align:center; color:#aaa; font-size:13px;
}

/* Empty canvas */
.canvas-empty {
  text-align:center; padding:80px 24px; color:#aaa;
}
.canvas-empty i { width:60px; height:60px; margin-bottom:16px; opacity:.3; }

/* Right Panel: Settings */
.builder-settings {
  width:280px; min-width:280px; background:#fff;
  border-left:1px solid #e2e8f0; overflow-y:auto;
  padding:12px; display:flex; flex-direction:column; gap:12px;
}
.settings-section { border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; }
.settings-section-header {
  padding:8px 12px; background:#f8f9fa; font-size:12px; font-weight:700;
  color:#444; border-bottom:1px solid #e2e8f0;
  display:flex; align-items:center; gap:6px;
}
.settings-section-body { padding:12px; }
.form-control-sm { font-size:13px; padding:4px 8px; }
.form-label-sm { font-size:12px; font-weight:600; color:#555; margin-bottom:3px; }
.gap-1 { display:flex; flex-direction:column; gap:8px; }

/* Page hierarchy tree */
.hierarchy-item { padding:4px 8px; border-radius:4px; cursor:pointer; font-size:13px; }
.hierarchy-item:hover { background:#f1f5f9; }
.hierarchy-item.active { background:#e3f2fd; color:#0066CC; font-weight:600; }
.hierarchy-child { padding-left:20px; }

/* Media Picker Modal */
.media-picker-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-height:400px; overflow-y:auto; }
.media-picker-item {
  border:2px solid transparent; border-radius:6px; overflow:hidden; cursor:pointer;
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:#f5f5f5; transition:all .15s; position:relative;
}
.media-picker-item:hover { border-color:#0066CC; transform:scale(1.03); }
.media-picker-item.selected { border-color:#0066CC; background:#e3f2fd; }
.media-picker-item img { width:100%; height:100%; object-fit:cover; }
.media-picker-item .media-icon { font-size:24px; color:#aaa; }
.media-picker-item .media-cat {
  position:absolute; bottom:2px; right:2px; font-size:9px;
  background:rgba(0,0,0,.6); color:#fff; padding:1px 4px; border-radius:3px;
}

/* Toast */
.toast-container { position:fixed; bottom:24px; right:24px; z-index:9999; }
.toast-msg {
  background:#1a1a2e; color:#fff; padding:10px 20px; border-radius:8px;
  font-size:13px; box-shadow:0 4px 16px rgba(0,0,0,.2); margin-top:8px;
  animation:slideIn .3s ease;
}
.toast-msg.success { background:#16a085; }
.toast-msg.error { background:#e74c3c; }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* Drag ghost */
.drag-ghost { opacity:.5; }

/* Stats block editor */
.stats-row { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.stats-row input { flex:1; }

/* Gallery grid */
.gallery-thumb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.gallery-thumb { position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; }
.gallery-thumb .del-thumb {
  position:absolute; top:2px; right:2px; width:20px; height:20px;
  background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:50%;
  cursor:pointer; font-size:12px; line-height:20px;
}
</style>

<div class="container-fluid p-0">
  {# ===== Top Toolbar ===== #}
  <div class="d-flex justify-content-between align-items-center mb-3 px-2">
    <div class="d-flex align-items-center gap-2">
      <a href="/admin/mp/mp-pages/" class="btn btn-sm btn-outline-secondary">
        <i data-feather="arrow-left" class="feather-sm"></i> 返回列表
      </a>
      <h5 class="mb-0">{{ page.title or '新页面' }}</h5>
      <span class="badge bg-{{ 'success' if page.status=='published' else 'warning' }}">{{ page.status }}</span>
    </div>
    <div class="d-flex align-items-center gap-2">
      <a href="/admin/mp/preview/{{ page.id }}/" target="_blank" class="btn btn-sm btn-outline-primary">
        <i data-feather="eye" class="feather-sm"></i> 预览
      </a>
      <button class="btn btn-sm btn-outline-secondary" onclick="saveAll()">
        <i data-feather="save" class="feather-sm"></i> 保存
      </button>
      <button class="btn btn-sm btn-primary" onclick="publishPage()">
        <i data-feather="globe" class="feather-sm"></i> 发布网页
      </button>
    </div>
  </div>

  <div class="builder-wrap">
    {# ===== LEFT: Block Palette ===== #}
    <div class="builder-palette">
      <div class="palette-title">积木块 · 拖入画布</div>

      <div class="palette-title mt-2">内容</div>
      <div class="palette-block" draggable="true" data-type="text" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#fde8e8"><i data-feather="type" style="color:#e74c3c;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">文本</div><div style="font-size:10px;color:#888">富文本段落</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="heading" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#e3f2fd"><i data-feather="align-left" style="color:#0066CC;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">标题</div><div style="font-size:10px;color:#888">H1-H4标题</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="image" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#e8f5e9"><i data-feather="image" style="color:#27ae60;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">图片</div><div style="font-size:10px;color:#888">单张图片+说明</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="gallery" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#f3e5f5"><i data-feather="grid" style="color:#8e44ad;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">图集</div><div style="font-size:10px;color:#888">多图网格</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="video" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#fff3e0"><i data-feather="video" style="color:#e67e22;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">视频</div><div style="font-size:10px;color:#888">视频嵌入</div></div>
      </div>

      <div class="palette-title mt-2">布局</div>
      <div class="palette-block" draggable="true" data-type="divider" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#f1f3f4"><i data-feather="minus" style="color:#95a5a6;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">分隔线</div><div style="font-size:10px;color:#888">水平分隔</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="spacer" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#fafafa"><i data-feather="move-vertical" style="color:#bdc3c7;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">留白</div><div style="font-size:10px;color:#888">间距调节</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="icon_grid" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#e8eaf6"><i data-feather="layout" style="color:#5c6bc0;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">图标网格</div><div style="font-size:10px;color:#888">多列图标卡片</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="accordion" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#e0f2f1"><i data-feather="chevron-down" style="color:#00897b;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">折叠面板</div><div style="font-size:10px;color:#888">FAQ/问答</div></div>
      </div>

      <div class="palette-title mt-2">转化</div>
      <div class="palette-block" draggable="true" data-type="cta" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#e8f5e9"><i data-feather="external-link" style="color:#28A745;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">行动按钮</div><div style="font-size:10px;color:#888">CTA链接</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="quote" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#fff8e1"><i data-feather="message-square" style="color:#f39c12;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">引用</div><div style="font-size:10px;color:#888">引用文字</div></div>
      </div>
      <div class="palette-block" draggable="true" data-type="stats" ondragstart="onDragStart(event)">
        <div class="picon" style="background:#e0f7fa"><i data-feather="bar-chart-2" style="color:#16a085;width:16px;height:16px"></i></div>
        <div><div style="font-size:12px;font-weight:600">数据指标</div><div style="font-size:10px;color:#888">数字展示</div></div>
      </div>
    </div>

    {# ===== CENTER: Canvas ===== #}
    <div class="builder-canvas" ondragover="onDragOver(event)" ondrop="onDrop(event)" ondragleave="onDragLeave(event)">
      <div class="canvas-inner" id="canvas">
        <div class="canvas-page-header">
          <i data-feather="file-text" style="color:#0066CC"></i>
          <div>
            <h4 class="canvas-page-title">{{ page.title or '新页面' }}</h4>
            <p class="canvas-page-slug">/{{ page.slug or 'slug' }}/ · {{ page.page_type or 'page' }}</p>
          </div>
        </div>

        {# Blocks #}
        <div id="block-list">
          {% for b in blocks %}
          <div class="block-card" data-id="{{ b.id }}" data-type="{{ b.type }}"
               draggable="true" ondragstart="onBlockDragStart(event,{{ b.id }})">
            <span class="block-type-badge" style="background:{{ {'text':'#e74c3c','heading':'#0066CC','image':'#27ae60','gallery':'#8e44ad','video':'#e67e22','divider':'#95a5a6','cta':'#28A745','spacer':'#bdc3c7','quote':'#f39c12','stats':'#16a085','icon_grid':'#5c6bc0','accordion':'#00897b'}.get(b.type,'#888') }}">
              {{ b.type }}
            </span>
            <div class="block-actions">
              <button title="上移" onclick="moveBlock({{ b.id }},-1)"><i data-feather="chevron-up" class="feather-sm"></i></button>
              <button title="下移" onclick="moveBlock({{ b.id }},1)"><i data-feather="chevron-down" class="feather-sm"></i></button>
              <button title="删除" class="btn-del" onclick="deleteBlock({{ b.id }})"><i data-feather="trash-2" class="feather-sm"></i></button>
            </div>
            <div class="block-card-inner">
              {{ build_block_editor(b.type, b.content, b.settings) | safe }}
            </div>
          </div>
          {% endfor %}
        </div>

        {# Empty state #}
        <div class="canvas-empty" id="canvas-empty" style="{{ 'display:none' if blocks else '' }}">
          <i data-feather="layout" style="width:60px;height:60px;opacity:.2"></i>
          <p style="font-size:15px;font-weight:600">从左侧拖入积木块开始编辑</p>
          <p style="font-size:13px">或点击下方按钮添加</p>
        </div>

        {# Add block buttons at bottom #}
        <div style="padding:12px 16px; border-top:1px dashed #e2e8f0;">
          <div style="display:flex;gap:8px;flex-wrap:wrap;">
            <button class="btn btn-sm btn-outline-primary" onclick="addBlockType('text')">+ 文本</button>
            <button class="btn btn-sm btn-outline-primary" onclick="addBlockType('heading')">+ 标题</button>
            <button class="btn btn-sm btn-outline-primary" onclick="addBlockType('image')">+ 图片</button>
            <button class="btn btn-sm btn-outline-primary" onclick="addBlockType('gallery')">+ 图集</button>
            <button class="btn btn-sm btn-outline-primary" onclick="addBlockType('video')">+ 视频</button>
            <button class="btn btn-sm btn-outline-secondary" onclick="addBlockType('divider')">+ 分隔线</button>
            <button class="btn btn-sm btn-outline-secondary" onclick="addBlockType('spacer')">+ 留白</button>
            <button class="btn btn-sm btn-outline-success" onclick="addBlockType('cta')">+ 按钮</button>
            <button class="btn btn-sm btn-outline-success" onclick="addBlockType('stats')">+ 数据</button>
            <button class="btn btn-sm btn-outline-success" onclick="addBlockType('quote')">+ 引用</button>
            <button class="btn btn-sm btn-outline-info" onclick="addBlockType('icon_grid')">+ 图标网格</button>
            <button class="btn btn-sm btn-outline-info" onclick="addBlockType('accordion')">+ 折叠面板</button>
          </div>
        </div>
      </div>
    </div>

    {# ===== RIGHT: Settings Panel ===== #}
    <div class="builder-settings">
      <div class="settings-section">
        <div class="settings-section-header">
          <i data-feather="file-text" class="feather-sm"></i> 页面信息
        </div>
        <div class="settings-section-body gap-1">
          <div>
            <label class="form-label-sm">页面标题</label>
            <input type="text" class="form-control form-control-sm" id="page-title" value="{{ page.title or '' }}">
          </div>
          <div>
            <label class="form-label-sm">URL别名</label>
            <input type="text" class="form-control form-control-sm" id="page-slug" value="{{ page.slug or '' }}" placeholder="auto-generated">
            <div class="form-text small">访问路径：/{{ page.slug or 'slug' }}/</div>
          </div>
          <div>
            <label class="form-label-sm">页面类型</label>
            <select class="form-select form-select-sm" id="page-type">
              <option value="page" {{ 'selected' if page.page_type=='page' else '' }}>普通页面</option>
              <option value="product" {{ 'selected' if page.page_type=='product' else '' }}>产品详情</option>
              <option value="case" {{ 'selected' if page.page_type=='case' else '' }}>案例详情</option>
              <option value="solution" {{ 'selected' if page.page_type=='solution' else '' }}>解决方案</option>
            </select>
          </div>
          <div>
            <label class="form-label-sm">上级页面（层次）</label>
            <select class="form-select form-select-sm" id="page-parent">
              <option value="0">— 顶级（根页面）—</option>
              {% for p in nav_items %}
              <option value="{{ p.id }}" {{ 'selected' if page.parent_id==p.id else '' }}>
                {{ p.title }}
              </option>
              {% endfor %}
            </select>
          </div>
          <div>
            <label class="form-label-sm">状态</label>
            <select class="form-select form-select-sm" id="page-status">
              <option value="draft" {{ 'selected' if page.status=='draft' else '' }}>草稿</option>
              <option value="published" {{ 'selected' if page.status=='published' else '' }}>已发布</option>
            </select>
          </div>
          <button class="btn btn-sm btn-outline-primary w-100" onclick="savePageSettings()">
            <i data-feather="save" class="feather-sm"></i> 保存页面信息
          </button>
        </div>
      </div>

      <div class="settings-section">
        <div class="settings-section-header">
          <i data-feather="search" class="feather-sm"></i> SEO 设置
        </div>
        <div class="settings-section-body gap-1">
          <div>
            <label class="form-label-sm">SEO 标题</label>
            <input type="text" class="form-control form-control-sm" id="seo-title" value="{{ page.seo_title or '' }}" placeholder="留空则用页面标题">
          </div>
          <div>
            <label class="form-label-sm">SEO 描述</label>
            <textarea class="form-control form-control-sm" id="seo-desc" rows="2" placeholder="搜索引擎显示的描述">{{ page.seo_desc or '' }}</textarea>
          </div>
          <div>
            <label class="form-label-sm">导航标签</label>
            <input type="text" class="form-control form-control-sm" id="nav-label" value="{{ page.nav_label or '' }}" placeholder="留空用页面标题">
          </div>
        </div>
      </div>

      <div class="settings-section">
        <div class="settings-section-header">
          <i data-feather="image" class="feather-sm"></i> 媒体库
        </div>
        <div class="settings-section-body">
          <button class="btn btn-sm btn-primary w-100 mb-2" onclick="openMediaPicker()">
            <i data-feather="image" class="feather-sm"></i> 从媒体库选择图片
          </button>
          <button class="btn btn-sm btn-outline-primary w-100" onclick="openUploadModal()">
            <i data-feather="upload" class="feather-sm"></i> 上传新文件
          </button>
        </div>
      </div>

      <div class="settings-section">
        <div class="settings-section-header">
          <i data-feather="info" class="feather-sm"></i> 当前选中块
        </div>
        <div class="settings-section-body" id="selected-block-settings">
          <p class="text-muted small mb-0">点击画布中的积木块可编辑其属性</p>
        </div>
      </div>
    </div>
  </div>
</div>

{# ===== Media Picker Modal ===== #}
<div class="modal fade" id="mediaPickerModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">选择图片</h5>
        <div class="ms-auto d-flex gap-2 align-items-center">
          <input type="text" id="media-search-picker" class="form-control form-control-sm" placeholder="搜索文件名..." style="width:160px">
          <button class="btn btn-sm btn-outline-primary" onclick="refreshMediaPicker()"><i data-feather="refresh-cw" class="feather-sm"></i></button>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="media-picker-grid" id="media-picker-grid"></div>
        <div id="media-picker-loading" class="text-center py-4">
          <div class="spinner-border text-primary" role="status"></div>
        </div>
        <div id="media-picker-empty" class="text-center py-4 text-muted" style="display:none">
          <p>媒体库为空，<a href="#" onclick="openUploadModal();return false;">先上传文件</a></p>
        </div>
      </div>
      <div class="modal-footer">
        <span class="text-muted small me-auto" id="picker-selected-info"></span>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="confirmMediaPicker()">插入选中图片</button>
      </div>
    </div>
  </div>
</div>

{# ===== Upload Modal (in builder) ===== #}
<div class="modal fade" id="builderUploadModal" tabindex="-1">
  <div class="modal-dialog">
    <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">
        <div class="mb-3">
          <label class="form-label fw-semibold">选择文件</label>
          <input type="file" class="form-control" id="builder-file-input" multiple accept="image/*,video/*,.pdf,.doc,.docx">
        </div>
        <div id="builder-upload-msg"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="doBuilderUpload()">上传</button>
      </div>
    </div>
  </div>
</div>

{# ===== Toast ===== #}
<div class="toast-container" id="toast-container"></div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
// ===== Globals =====
const PAGE_ID = {{ page.id }};
let blocks = {{ blocks | tojson | safe }};
let selectedBlockId = null;
let draggedType = null;
let draggedBlockId = null;
let pendingImageBlockId = null;

// ===== Toast =====
function toast(msg, type='dark') {
  const c = document.getElementById('toast-container');
  const d = document.createElement('div');
  d.className = 'toast-msg ' + type;
  d.textContent = msg;
  c.appendChild(d);
  setTimeout(() => d.remove(), 3000);
}

// ===== Block type colors =====
const TCOLORS = {
  text:'#e74c3c', heading:'#0066CC', image:'#27ae60', gallery:'#8e44ad',
  video:'#e67e22', divider:'#95a5a6', cta:'#28A745', spacer:'#bdc3c7',
  quote:'#f39c12', stats:'#16a085', icon_grid:'#5c6bc0', accordion:'#00897b'
};

// ===== Add Block =====
async function addBlockType(type) {
  const res = await fetch('/admin/mp/api/blocks/', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({page_id: PAGE_ID, type, content: getDefaultContent(type), settings: {}})
  });
  const b = await res.json();
  blocks.push(b);
  renderBlock(b);
  document.getElementById('canvas-empty').style.display = 'none';
  toast('已添加 ' + type + ' 块');
}

function getDefaultContent(type) {
  const d = {
    text: {html: '<p>请输入文本内容...</p>'},
    heading: {text: '请输入标题'},
    image: {src:'', alt:'', caption:''},
    gallery: {images:[]},
    video: {src:''},
    cta: {text:'联系我们', url:'/contact/'},
    quote: {text:'引用文字内容', author:'ARIFU'},
    stats: {stats:[{value:'9.8亿',label:'气泡浓度 /mL'},{value:'>90%',label:'氧转移效率'},{value:'96.4%',label:'污染率降低'},{value:'10年+',label:'膜寿命'}]},
    icon_grid: {items:[
      {icon:'droplet',title:'纳米气泡',desc:'50-200nm超高浓度'},
      {icon:'filter',title:'SiC陶瓷膜',desc:'耐温200-300℃'},
      {icon:'activity',title:'超重力旋流',desc:'100-500g离心力'},
    ]},
    accordion: {items:[
      {title:'问题一',content:'答案内容...'},
      {title:'问题二',content:'答案内容...'},
    ]},
  };
  return d[type] || {};
}

// ===== Render single block =====
function renderBlock(b) {
  const el = document.createElement('div');
  el.className = 'block-card';
  el.dataset.id = b.id;
  el.dataset.type = b.type;
  el.draggable = true;
  el.ondragstart = (e) => onBlockDragStart(e, b.id);

  const badge = document.createElement('span');
  badge.className = 'block-type-badge';
  badge.style.background = TCOLORS[b.type] || '#888';
  badge.textContent = b.type;

  const actions = document.createElement('div');
  actions.className = 'block-actions';
  actions.innerHTML = `
    <button title="上移" onclick="event.stopPropagation();moveBlock(${b.id},-1)"><i data-feather="chevron-up" class="feather-sm"></i></button>
    <button title="下移" onclick="event.stopPropagation();moveBlock(${b.id},1)"><i data-feather="chevron-down" class="feather-sm"></i></button>
    <button title="删除" class="btn-del" onclick="event.stopPropagation();deleteBlock(${b.id})"><i data-feather="trash-2" class="feather-sm"></i></button>`;

  const inner = document.createElement('div');
  inner.className = 'block-card-inner';
  inner.innerHTML = buildEditorHTML(b.type, b.content, b.settings);
  inner.addEventListener('click', (e) => { if(e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && e.target.tagName !== 'SELECT') selectBlock(b.id); });

  el.appendChild(badge);
  el.appendChild(actions);
  el.appendChild(inner);
  document.getElementById('block-list').appendChild(el);
  feather.replace();
}

// ===== Build editor HTML for a block type =====
function buildEditorHTML(type, content, settings) {
  const c = content || {};
  const s = settings || {};
  const ev = (id, val) => `onchange="updateBlockContent(${id},'${type}',this)"`;
  const sv = (k, def) => s[k] !== undefined ? s[k] : def;

  if (type === 'text') {
    return `<textarea class="block-editor" style="min-height:80px" data-field="html"
      onchange="updateBlockContent(${c.id||0},'text',this)">${c.html||''}</textarea>`;
  }
  if (type === 'heading') {
    const level = sv('level','h2');
    const text = c.text||'';
    return `<div class="d-flex gap-2 align-items-center flex-wrap">
      <select class="form-select form-select-sm" style="width:80px" data-field="level" onchange="updateBlockSettings(${c.id||0},'heading',this)">
        <option value="h1" ${level=='h1'?'selected':''}>H1</option>
        <option value="h2" ${level=='h2'?'selected':''}>H2</option>
        <option value="h3" ${level=='h3'?'selected':''}>H3</option>
        <option value="h4" ${level=='h4'?'selected':''}>H4</option>
      </select>
      <input type="text" class="block-editor" style="flex:1;min-height:40px" data-field="text" value="${esc(text)}"
        placeholder="输入标题文字..." onchange="updateBlockContent(${c.id||0},'heading',this)">
    </div>`;
  }
  if (type === 'image') {
    const src = c.src||'';
    const alt = c.alt||'';
    const caption = c.caption||'';
    return `<div>
      ${src ? `<img src="${src}" class="block-image-preview" alt="${esc(alt)}" onclick="openMediaPickerForBlock()">` :
        `<div class="block-placeholder" onclick="openMediaPickerForBlock()"><i data-feather="image" style="width:32px;height:32px;margin-bottom:8px;opacity:.4"></i><p style="margin:0">点击选择图片</p></div>`}
      <div class="d-flex gap-2 mt-2 flex-wrap">
        <input type="text" class="block-editor" style="flex:1;min-height:32px" data-field="alt" value="${esc(alt)}"
          placeholder="Alt文字（图片描述）" onchange="updateBlockContent(${c.id||0},'image',this)">
        <button class="btn btn-sm btn-outline-primary" onclick="openMediaPickerForBlock()">
          <i data-feather="image" class="feather-sm"></i> 选择图片
        </button>
      </div>
      <input type="text" class="block-editor mt-1" style="min-height:28px;font-size:12px" data-field="caption" value="${esc(caption)}"
        placeholder="图片说明（可选）" onchange="updateBlockContent(${c.id||0},'image',this)">
    </div>`;
  }
  if (type === 'gallery') {
    const imgs = c.images || [];
    const cols = sv('cols',3);
    let thumbs = '';
    imgs.forEach((img, i) => {
      thumbs += `<div class="gallery-thumb">
        <img src="${img.src||''}" alt="${esc(img.alt||'')}">
        <button class="del-thumb" onclick="removeGalleryImg(${i})">×</button>
      </div>`;
    });
    return `<div>
      <div class="d-flex gap-2 mb-2 align-items-center">
        <select class="form-select form-select-sm" style="width:80px" data-field="cols" onchange="updateBlockSettings(${c.id||0},'gallery',this)">
          ${[2,3,4,5].map(n => `<option value="${n}" ${cols==n?'selected':''}>${n}列</option>`).join('')}
        </select>
        <button class="btn btn-sm btn-outline-primary" onclick="openMediaPickerForGallery()">
          <i data-feather="plus" class="feather-sm"></i> 添加图片
        </button>
        <span class="text-muted small">${imgs.length} 张图片</span>
      </div>
      <div class="gallery-thumb-grid">${thumbs || '<div class="text-muted small p-2">点击添加图片</div>'}</div>
    </div>`;
  }
  if (type === 'video') {
    const src = c.src||'';
    return `<div>
      ${src ? `<video src="${src}" controls style="width:100%;max-height:180px;border-radius:6px;"></video>` : ''}
      <input type="text" class="block-editor mt-2" style="min-height:36px" data-field="src" value="${esc(src)}"
        placeholder="视频URL（mp4/webm）" onchange="updateBlockContent(${c.id||0},'video',this)">
    </div>`;
  }
  if (type === 'divider') {
    const color = sv('color','#e2e8f0');
    const height = sv('height','1px');
    return `<div class="d-flex gap-2 align-items-center flex-wrap">
      <span style="font-size:12px;color:#888;width:50px">颜色</span>
      <input type="color" value="${color}" data-field="color" onchange="updateBlockSettings(${c.id||0},'divider',this)">
      <span style="font-size:12px;color:#888">粗细</span>
      <input type="range" min="1" max="8" value="${parseInt(height)}" data-field="height" style="width:80px"
        onchange="updateBlockSettings(${c.id||0},'divider',this)">
      <hr style="flex:1;border:none;border-top:${height} solid ${color};margin:0">
    </div>`;
  }
  if (type === 'spacer') {
    const h = sv('height','40px');
    return `<div class="d-flex gap-2 align-items-center">
      <span style="font-size:12px;color:#888">高度</span>
      <input type="range" min="8" max="200" value="${parseInt(h)}" data-field="height" style="width:120px"
        onchange="updateBlockSettings(${c.id||0},'spacer',this)">
      <span class="badge bg-light text-dark">${h}</span>
      <div style="flex:1;height:${h};background:#f8f9fa;border-radius:4px;border:1px dashed #ddd;"></div>
    </div>`;
  }
  if (type === 'cta') {
    const text = c.text||'联系我们';
    const url = c.url||'#';
    const style = sv('style','filled');
    const color = sv('color','#0066CC');
    return `<div class="d-flex gap-2 align-items-center flex-wrap">
      <input type="text" class="block-editor" style="flex:1;min-height:36px" data-field="text" value="${esc(text)}"
        placeholder="按钮文字" onchange="updateBlockContent(${c.id||0},'cta',this)">
      <input type="text" class="block-editor" style="flex:1;min-height:36px" data-field="url" value="${esc(url)}"
        placeholder="链接URL" onchange="updateBlockContent(${c.id||0},'cta',this)">
    </div>
    <div class="d-flex gap-2 mt-2 align-items-center">
      <select class="form-select form-select-sm" style="width:100px" data-field="style" onchange="updateBlockSettings(${c.id||0},'cta',this)">
        <option value="filled" ${style=='filled'?'selected':''}>实心</option>
        <option value="outline" ${style=='outline'?'selected':''}>描边</option>
      </select>
      <input type="color" value="${color}" data-field="color" onchange="updateBlockSettings(${c.id||0},'cta',this)">
      <a href="${url}" class="btn btn-sm" style="background:${style=='filled'?color:'transparent'};color:${style=='filled'?'#fff':color};border:${style=='outline'?'2px solid '+color:'none'};border-radius:8px;">${esc(text)}</a>
    </div>`;
  }
  if (type === 'quote') {
    return `<div>
      <textarea class="block-editor" style="min-height:60px" data-field="text"
        placeholder="引用文字..." onchange="updateBlockContent(${c.id||0},'quote',this)">${esc(c.text||'')}</textarea>
      <input type="text" class="block-editor mt-1" style="min-height:32px;font-size:13px" data-field="author" value="${esc(c.author||'')}"
        placeholder="— 来源/作者" onchange="updateBlockContent(${c.id||0},'quote',this)">
    </div>`;
  }
  if (type === 'stats') {
    const stats = c.stats || [];
    let rows = '';
    stats.forEach((st, i) => {
      rows += `<div class="stats-row">
        <input type="text" value="${esc(st.value||'')}" placeholder="数值" data-si="${i}" data-sk="value" style="width:80px" onchange="updateStatsField(${i},'value',this.value)">
        <input type="text" value="${esc(st.label||'')}" placeholder="说明" data-si="${i}" data-sk="label" style="flex:1" onchange="updateStatsField(${i},'label',this.value)">
        <button class="btn btn-sm" style="padding:2px 6px;color:#e74c3c" onclick="removeStat(${i})">×</button>
      </div>`;
    });
    return `<div>
      <div id="stats-list">${rows}</div>
      <button class="btn btn-sm btn-outline-primary mt-2" onclick="addStat()">+ 添加指标</button>
    </div>`;
  }
  if (type === 'icon_grid') {
    const items = c.items || [];
    let rows = '';
    items.forEach((it, i) => {
      rows += `<div class="d-flex gap-2 mb-2 align-items-center" style="padding:8px;background:#f8f9fa;border-radius:6px;">
        <input type="text" value="${esc(it.icon||'')}" placeholder="图标名" data-gi="${i}" data-gk="icon" style="width:100px" onchange="updateIconItem(${i},'icon',this.value)">
        <input type="text" value="${esc(it.title||'')}" placeholder="标题" data-gi="${i}" data-gk="title" style="flex:1" onchange="updateIconItem(${i},'title',this.value)">
        <input type="text" value="${esc(it.desc||'')}" placeholder="描述" data-gi="${i}" data-gk="desc" style="flex:1" onchange="updateIconItem(${i},'desc',this.value)">
        <button class="btn btn-sm" style="padding:2px 6px;color:#e74c3c" onclick="removeIconItem(${i})">×</button>
      </div>`;
    });
    return `<div>
      <div id="icon-items-list">${rows}</div>
      <button class="btn btn-sm btn-outline-primary mt-2" onclick="addIconItem()">+ 添加图标项</button>
    </div>`;
  }
  if (type === 'accordion') {
    const items = c.items || [];
    let rows = '';
    items.forEach((it, i) => {
      rows += `<div style="padding:8px;background:#f8f9fa;border-radius:6px;margin-bottom:6px;">
        <input type="text" value="${esc(it.title||'')}" placeholder="问题/标题" data-ai="${i}" data-ak="title" style="width:100%;margin-bottom:4px" onchange="updateAccordionItem(${i},'title',this.value)">
        <textarea class="block-editor" style="min-height:50px;font-size:13px" data-ai="${i}" data-ak="content" placeholder="答案内容..." onchange="updateAccordionItem(${i},'content',this.value)">${esc(it.content||'')}</textarea>
        <button class="btn btn-sm mt-1" style="padding:2px 8px;color:#e74c3c;font-size:11px" onclick="removeAccordionItem(${i})">删除此项</button>
      </div>`;
    });
    return `<div>
      <div id="accordion-items-list">${rows}</div>
      <button class="btn btn-sm btn-outline-primary mt-2" onclick="addAccordionItem()">+ 添加问答项</button>
    </div>`;
  }
  return `<p class="text-muted small">块类型: ${type}</p>`;
}

// Escape helper
function esc(s) {
  if (!s) return '';
  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}

// ===== Update block content =====
async function updateBlockContent(bid, type, el) {
  const field = el.dataset.field;
  let content = {};
  const b = blocks.find(b => b.id === bid);
  if (b) content = {...b.content};

  if (type === 'text') content.html = el.value;
  else if (type === 'heading') {
    if (field === 'text') content.text = el.value;
  } else if (type === 'image') {
    content[field] = el.value;
  } else if (type === 'video') {
    content.src = el.value;
  } else if (type === 'cta') {
    content[field] = el.value;
  } else if (type === 'quote') {
    content[field] = el.value;
  }

  if (b) b.content = content;
  await saveBlock(bid, b.content, b.settings);
}

// ===== Update block settings =====
async function updateBlockSettings(bid, type, el) {
  const field = el.dataset.field;
  let settings = {};
  const b = blocks.find(b => b.id === bid);
  if (b) settings = {...b.settings};
  settings[field] = el.value;
  if (b) b.settings = settings;
  await saveBlock(bid, b.content, b.settings);
  // Re-render block for visual updates
  refreshBlock(bid);
}

async function saveBlock(bid, content, settings) {
  await fetch(`/admin/mp/api/blocks/${bid}/`, {
    method:'PUT',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({content, settings})
  });
}

function refreshBlock(bid) {
  const b = blocks.find(b => b.id === bid);
  if (!b) return;
  const el = document.querySelector(`.block-card[data-id="${bid}"] .block-card-inner`);
  if (el) el.innerHTML = buildEditorHTML(b.type, b.content, b.settings);
  feather.replace();
}

// ===== Stats block helpers =====
function addStat() {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'stats');
  if (!b) { toast('请先点击选中数据指标块', 'error'); return; }
  b.content.stats = b.content.stats || [];
  b.content.stats.push({value:'', label:''});
  saveBlock(b.id, b.content, b.settings).then(() => refreshBlock(b.id));
}
function removeStat(idx) {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'stats');
  if (!b) return;
  b.content.stats.splice(idx, 1);
  saveBlock(b.id, b.content, b.settings).then(() => refreshBlock(b.id));
}
function updateStatsField(idx, key, val) {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'stats');
  if (!b || !b.content.stats) return;
  b.content.stats[idx][key] = val;
  saveBlock(b.id, b.content, b.settings);
}

// ===== Icon grid helpers =====
function addIconItem() {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'icon_grid');
  if (!b) { toast('请先点击选中图标网格块', 'error'); return; }
  b.content.items = b.content.items || [];
  b.content.items.push({icon:'box',title:'新项目',desc:'描述...'});
  saveBlock(b.id, b.content, b.settings).then(() => refreshBlock(b.id));
}
function removeIconItem(idx) {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'icon_grid');
  if (!b) return;
  b.content.items.splice(idx, 1);
  saveBlock(b.id, b.content, b.settings).then(() => refreshBlock(b.id));
}
function updateIconItem(idx, key, val) {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'icon_grid');
  if (!b || !b.content.items) return;
  b.content.items[idx][key] = val;
  saveBlock(b.id, b.content, b.settings);
}

// ===== Accordion helpers =====
function addAccordionItem() {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'accordion');
  if (!b) { toast('请先点击选中折叠面板块', 'error'); return; }
  b.content.items = b.content.items || [];
  b.content.items.push({title:'新问题',content:'答案...'});
  saveBlock(b.id, b.content, b.settings).then(() => refreshBlock(b.id));
}
function removeAccordionItem(idx) {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'accordion');
  if (!b) return;
  b.content.items.splice(idx, 1);
  saveBlock(b.id, b.content, b.settings).then(() => refreshBlock(b.id));
}
function updateAccordionItem(idx, key, val) {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'accordion');
  if (!b || !b.content.items) return;
  b.content.items[idx][key] = val;
  saveBlock(b.id, b.content, b.settings);
}

// ===== Gallery helpers =====
function removeGalleryImg(idx) {
  const b = blocks.find(b => b.id === selectedBlockId && b.type === 'gallery');
  if (!b) return;
  b.content.images.splice(idx, 1);
  saveBlock(b.id, b.content, b.settings).then(() => refreshBlock(b.id));
}

// ===== Delete block =====
async function deleteBlock(bid) {
  if (!confirm('确定删除此积木块？')) return;
  await fetch(`/admin/mp/api/blocks/${bid}/`, {method:'DELETE'});
  document.querySelector(`.block-card[data-id="${bid}"]`)?.remove();
  blocks = blocks.filter(b => b.id !== bid);
  if (!blocks.length) document.getElementById('canvas-empty').style.display = '';
  toast('已删除', 'error');
}

// ===== Move block =====
async function moveBlock(bid, dir) {
  const idx = blocks.findIndex(b => b.id === bid);
  if (idx < 0) return;
  const ni = idx + dir;
  if (ni < 0 || ni >= blocks.length) return;
  [blocks[idx], blocks[ni]] = [blocks[ni], blocks[idx]];
  // Save new order
  await fetch('/admin/mp/api/blocks/reorder/', {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({order: blocks.map(b => b.id)})
  });
  // Re-render list
  const list = document.getElementById('block-list');
  list.innerHTML = '';
  blocks.forEach(b => renderBlock(b));
  if (!blocks.length) document.getElementById('canvas-empty').style.display = '';
}

// ===== Select block =====
function selectBlock(bid) {
  document.querySelectorAll('.block-card').forEach(el => el.classList.remove('selected'));
  document.querySelector(`.block-card[data-id="${bid}"]`)?.classList.add('selected');
  selectedBlockId = bid;
}

// ===== Drag & Drop =====
function onDragStart(e) {
  draggedType = e.currentTarget.dataset.type;
  draggedBlockId = null;
  e.dataTransfer.setData('text/plain', draggedType);
  e.dataTransfer.effectAllowed = 'copy';
}
function onBlockDragStart(e, bid) {
  draggedBlockId = bid;
  draggedType = null;
  e.dataTransfer.setData('text/plain', 'move:' + bid);
  e.dataTransfer.effectAllowed = 'move';
}
function onDragOver(e) { e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }
function onDragLeave(e) {}
async function onDrop(e) {
  e.preventDefault();
  const data = e.dataTransfer.getData('text/plain');

  if (data === 'move:' + draggedBlockId) {
    // Moving existing block - reorder
    return;
  }

  // Adding new block
  const type = data || draggedType;
  if (!type) return;
  await addBlockType(type);
}

// ===== Media Picker =====
let mediaPickerMode = 'single'; // 'single' | 'gallery'
function openMediaPicker() {
  mediaPickerMode = 'single';
  document.getElementById('picker-selected-info').textContent = '';
  refreshMediaPicker();
  new bootstrap.Modal(document.getElementById('mediaPickerModal')).show();
}
function openMediaPickerForBlock() {
  pendingImageBlockId = selectedBlockId;
  mediaPickerMode = 'single';
  document.getElementById('picker-selected-info').textContent = '';
  refreshMediaPicker();
  new bootstrap.Modal(document.getElementById('mediaPickerModal')).show();
}
function openMediaPickerForGallery() {
  pendingImageBlockId = selectedBlockId;
  mediaPickerMode = 'gallery';
  document.getElementById('picker-selected-info').textContent = '';
  refreshMediaPicker();
  new bootstrap.Modal(document.getElementById('mediaPickerModal')).show();
}
let selectedMediaItem = null;

async function refreshMediaPicker() {
  const grid = document.getElementById('media-picker-grid');
  const loading = document.getElementById('media-picker-loading');
  const empty = document.getElementById('media-picker-empty');
  grid.innerHTML = '';
  loading.style.display = '';
  empty.style.display = 'none';

  try {
    const res = await fetch('/admin/mp/api/media/picker/');
    const items = await res.json();
    loading.style.display = 'none';

    if (!items.length) { empty.style.display = ''; return; }

    items.forEach(item => {
      const div = document.createElement('div');
      div.className = 'media-picker-item';
      div.dataset.id = item.id;
      div.dataset.url = item.url;

      if (item.media_type === 'image') {
        div.innerHTML = `<img src="${item.url}" alt="${item.alt||''}">`;
      } else {
        const icon = item.media_type === 'video' ? 'video' : 'file-text';
        const color = item.media_type === 'video' ? '#e67e22' : '#f39c12';
        div.innerHTML = `<div style="display:flex;flex-direction:column;align-items:center;gap:4px;">
          <i data-feather="${icon}" style="color:${color};width:28px;height:28px"></i>
          <span style="font-size:9px;color:#888;text-align:center;word-break:break-all">${item.original||item.filename}</span>
        </div>`;
      }
      const catMap = {product:'产品实拍',promo:'宣传',case:'案例',tech:'图纸',cert:'证书',video:'视频',training:'培训',other:'其他'};
      div.innerHTML += `<span class="media-cat">${catMap[item.category]||'其他'}</span>`;

      div.onclick = () => {
        document.querySelectorAll('.media-picker-item').forEach(i => i.classList.remove('selected'));
        div.classList.add('selected');
        selectedMediaItem = item;
        document.getElementById('picker-selected-info').textContent = '已选: ' + (item.original || item.filename);
      };

      grid.appendChild(div);
    });
    feather.replace();
  } catch(e) {
    loading.style.display = 'none';
    grid.innerHTML = '<div class="text-danger p-3">加载失败: ' + e.message + '</div>';
  }
}

function confirmMediaPicker() {
  if (!selectedMediaItem) { toast('请先选择一张图片', 'error'); return; }
  const url = selectedMediaItem.url;
  const b = blocks.find(b => b.id === pendingImageBlockId);
  if (!b) { toast('未选中图片块', 'error'); return; }

  if (mediaPickerMode === 'gallery') {
    b.content.images = b.content.images || [];
    b.content.images.push({src: url, alt: selectedMediaItem.alt || ''});
  } else {
    b.content.src = url;
    b.content.alt = selectedMediaItem.alt || '';
  }
  saveBlock(b.id, b.content, b.settings).then(() => {
    refreshBlock(b.id);
    toast('已插入图片: ' + (selectedMediaItem.original || ''));
  });
  bootstrap.Modal.getInstance(document.getElementById('mediaPickerPickerModal') || document.getElementById('mediaPickerModal'))?.hide();
  document.querySelector('[data-bs-dismiss="modal"]')?.click();
}

// ===== Upload from builder =====
function openUploadModal() {
  new bootstrap.Modal(document.getElementById('builderUploadModal')).show();
}
async function doBuilderUpload() {
  const input = document.getElementById('builder-file-input');
  if (!input.files.length) { toast('请选择文件', 'error'); return; }
  const fd = new FormData();
  fd.append('file', input.files[0]);
  try {
    const r = await fetch('/admin/mp/api/blocks/upload/', {method:'POST', body:fd});
    const data = await r.json();
    if (data.error) throw new Error(data.error);
    toast('上传成功: ' + data.filename, 'success');
    document.getElementById('builder-upload-msg').innerHTML =
      `<div class="alert alert-success small py-2 mb-0 mt-2">已上传: ${data.filename}<br><a href="${data.url}" target="_blank">${data.url}</a></div>`;
    if (pendingImageBlockId && data.mime_type && data.mime_type.startsWith('image/')) {
      const b = blocks.find(b => b.id === pendingImageBlockId);
      if (b) {
        b.content.src = data.url;
        b.content.alt = data.filename;
        await saveBlock(b.id, b.content, b.settings);
        refreshBlock(b.id);
      }
    }
  } catch(e) {
    toast('上传失败: ' + e.message, 'error');
  }
}

// ===== Save page settings =====
async function savePageSettings() {
  const data = {
    title: document.getElementById('page-title').value,
    slug: document.getElementById('page-slug').value,
    page_type: document.getElementById('page-type').value,
    parent_id: document.getElementById('page-parent').value,
    status: document.getElementById('page-status').value,
    seo_title: document.getElementById('seo-title').value,
    seo_desc: document.getElementById('seo-desc').value,
    nav_label: document.getElementById('nav-label').value,
  };
  const res = await fetch(`/admin/mp/page/${PAGE_ID}/edit/`, {
    method:'POST',
    headers:{'Content-Type':'application/x-www-form-urlencoded'},
    body: new URLSearchParams(data).toString()
  });
  toast('页面信息已保存', 'success');
}

// ===== Save all blocks =====
async function saveAll() {
  toast('所有内容已保存', 'success');
}

// ===== Publish =====
async function publishPage() {
  if (!confirm('确定发布此页面？将生成静态HTML文件并可公开访问。')) return;
  const res = await fetch(`/admin/mp/api/pages/${PAGE_ID}/publish/`, {method:'POST'});
  const data = await res.json();
  if (data.error) { toast('发布失败: ' + data.error, 'error'); return; }
  toast('发布成功！访问: ' + data.url, 'success');
  // Update status badge
  document.querySelector('.badge').className = 'badge bg-success';
  document.querySelector('.badge').textContent = 'published';
}

// ===== Init =====
document.addEventListener('DOMContentLoaded', () => {
  feather.replace();
  // Search in media picker
  document.getElementById('media-search-picker').addEventListener('input', e => {
    const q = e.target.value.toLowerCase();
    document.querySelectorAll('.media-picker-item').forEach(item => {
      const name = (item.dataset.url || '').toLowerCase();
      item.style.display = name.includes(q) ? '' : 'none';
    });
  });
});
</script>
{% endblock %}