{% extends "cms/base.html" %}
{% block title %}{{ page.title }} - 构建器 - ARIFU CMS{% endblock %}
{% set active='pages' %}
{% block content %}
<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;">
  <h2 style="margin:0;">🧱 页面构建器：{{ page.title }}</h2>
  <span class="status-{{ page.status }}">{{ page.status }}</span>
  <span style="color:var(--muted);font-size:13px;">/{{ page.slug }}</span>
  <div style="margin-left:auto;display:flex;gap:8px;">
    <a href="/admin/preview/{{ page.id }}/" target="_blank" class="btn btn-sm btn-gray">👁 预览</a>
    <a href="/admin/page/{{ page.id }}/edit/" class="btn btn-sm btn-gray">✏ 基本信息</a>
    <a href="/admin/pages/" class="btn btn-sm btn-gray">← 页面列表</a>
  </div>
</div>

<!-- 添加区块工具条 -->
<div class="card" style="padding:14px 20px;">
  <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;">
    <span style="font-size:13px;font-weight:600;color:var(--dark);">添加区块：</span>
    {% set block_types = [('text','📝 富文本','#e74c3c'),('heading','📌 大标题','#0066CC'),('image','🖼 单图','#27ae60'),('gallery','📰 图集','#8e44ad'),('video','🎬 视频','#e67e22'),('divider','➖ 分隔线','#95a5a6'),('cta','📞 行动号召','#28A745'),('spacer','↕ 空白间距','#bdc3c7'),('quote','💬 引用/证言','#f39c12'),('stats','📊 数据统计','#16a085')] %}
    {% for bt, bl, bc in block_types %}
    <button class="btn btn-sm" style="background:{{ bc }};color:#fff;border:none;"
      onclick="addBlock({{ page.id }},'{{ bt }}')">{{ bl }}</button>
    {% endfor %}
    <div style="margin-left:auto;font-size:12px;color:var(--muted);">
      拖拽排序，💾 点击保存，🗑 删除区块
    </div>
  </div>
</div>

<!-- 区块列表 -->
<div id="blockList" data-page-id="{{ page.id }}" style="margin-top:16px;">
  {% if blocks %}
    {% for b in blocks %}
    <div class="block-card" data-id="{{ b.id }}" draggable="true">
      <div class="handle" title="拖拽排序">⋮⋮</div>
      <span class="block-type" style="background:{{ {'text':'#e74c3c','heading':'#0066CC','image':'#27ae60','gallery':'#8e44ad','video':'#e67e22','divider':'#95a5a6','cta':'#28A745','spacer':'#bdc3c7','quote':'#f39c12','stats':'#16a085'}.get(b.type,'#888')} }};">{{ b.type }}</span>
      <div style="flex:1;min-width:0;">
        {% if b.type == 'text' %}
          {% set bcontent = b.content|from_json if b.content.startswith('{') else {'html':b.content} %}
          <textarea class="block-content-editor" style="width:100%;min-height:60px;font-size:12px;padding:6px;border:1px solid #e2e8f0;border-radius:6px;"
            data-id="{{ b.id }}"
            onblur="autoSaveBlock({{ b.id }})">{{ bcontent.get('html', b.content) }}</textarea>
        {% elif b.type == 'image' %}
          {% set bcontent = b.content|from_json if b.content.startswith('{') else {'src':b.content,'alt':''} %}
          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
            <input type="text" class="block-content-editor" data-id="{{ b.id }}" data-key="src"
              value="{{ bcontent.get('src','') }}" placeholder="图片URL"
              style="flex:1;min-width:200px;padding:5px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;"
              onblur="autoSaveBlock({{ b.id }})">
            <input type="text" value="{{ bcontent.get('alt','') }}" placeholder="alt文字"
              style="flex:1;min-width:150px;padding:5px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;"
              data-id="{{ b.id }}" data-key="alt" onblur="autoSaveBlock({{ b.id }})">
          </div>
        {% elif b.type == 'heading' %}
          <input type="text" class="block-content-editor" data-id="{{ b.id }}"
            value="{{ b.content }}" placeholder="输入大标题文字…"
            style="width:100%;padding:6px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;font-weight:bold;"
            onblur="autoSaveBlock({{ b.id }})">
        {% elif b.type == 'divider' %}
          <div style="color:var(--muted);font-size:12px;">—— 分隔线 ——</div>
        {% elif b.type == 'cta' %}
          {% set ct = b.content|from_json if b.content.startswith('{') else {'text':b.content,'url':'/contact/'} %}
          <div style="display:flex;gap:8px;flex-wrap:wrap;">
            <input type="text" data-id="{{ b.id }}" data-key="text"
              value="{{ ct.get('text','') }}" placeholder="按钮文字"
              style="padding:5px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;width:140px;"
              onblur="autoSaveBlock({{ b.id }})">
            <input type="text" data-id="{{ b.id }}" data-key="url"
              value="{{ ct.get('url','') }}" placeholder="链接地址"
              style="flex:1;padding:5px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:12px;"
              onblur="autoSaveBlock({{ b.id }})">
          </div>
        {% elif b.type == 'stats' %}
          {% set sd = b.content|from_json if b.content.startswith('{') else {} %}
          <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;">
            {% for i in range(4) %}
            <div style="border:1px solid #e2e8f0;border-radius:6px;padding:8px;text-align:center;">
              <input type="text" data-id="{{ b.id }}" data-key="val{{ i }}"
                value="{{ sd.get('val'~i,'') }}" placeholder="数值"
                style="width:100%;border:none;font-size:16px;font-weight:bold;text-align:center;"
                onblur="autoSaveBlock({{ b.id }})">
              <input type="text" data-id="{{ b.id }}" data-key="label{{ i }}"
                value="{{ sd.get('label'~i,'') }}" placeholder="标签"
                style="width:100%;border:none;font-size:11px;color:#888;text-align:center;margin-top:2px;"
                onblur="autoSaveBlock({{ b.id }})">
            </div>
            {% endfor %}
          </div>
        {% else %}
          <div style="font-size:12px;color:var(--muted);max-width:500px;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
            {{ b.content[:100] if b.content else '(空)' }}
          </div>
        {% endif %}
      </div>
      <div class="block-actions">
        <button class="btn btn-sm btn-primary" onclick="saveBlockContent({{ b.id }})">💾</button>
        <button class="btn btn-sm btn-danger" onclick="deleteBlock({{ b.id }})">🗑</button>
      </div>
    </div>
    {% endfor %}
  {% else %}
  <div class="empty" style="padding:40px;">
    <div class="icon">🧱</div>
    <p>还没有区块，点击上方按钮添加</p>
  </div>
  {% endif %}
</div>

<!-- 底部保存 -->
<div style="position:sticky;bottom:16px;background:var(--dark);padding:12px 20px;border-radius:12px;
  display:flex;align-items:center;gap:12px;box-shadow:0 -4px 16px rgba(0,0,0,.3);z-index:50;max-width:900px;margin-top:16px;">
  <span style="color:rgba(255,255,255,.6);font-size:13px;">共 {{ blocks|length }} 个区块</span>
  <div style="margin-left:auto;display:flex;gap:8px;">
    <button class="btn btn-green" onclick="location.reload()">🔄 重置</button>
    <a href="/admin/preview/{{ page.id }}/" target="_blank" class="btn btn-gray">👁 预览</a>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 初始化拖拽
initBlockSortable('#blockList');

// 自动保存（编辑框失焦时自动保存）
async function autoSaveBlock(bid) {
  const card = document.querySelector(`.block-card[data-id="${bid}"]`);
  if (!card) return;
  const inputs = card.querySelectorAll('[data-key]');
  const data = {};
  inputs.forEach(inp => { data[inp.dataset.key] = inp.value; });
  // 富文本textarea
  const ta = card.querySelector('textarea.block-content-editor');
  if (ta) {
    // 直接保存原内容（已编辑）
    await fetch(`/admin/api/blocks/${bid}/`, {
      method: 'PUT',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({content: ta.value})
    });
    showToast('已保存');
    return;
  }
  // 其他类型拼成JSON
  if (Object.keys(data).length) {
    await fetch(`/admin/api/blocks/${bid}/`, {
      method: 'PUT',
      headers: {'Content-Type':'application/json'},
      body: JSON.stringify({content: JSON.stringify(data, null, 2)})
    });
    showToast('已保存');
  }
}
</script>
{% endblock %}