{% extends "cms/base.html" %}
{% block title %}导入页面 - ARIFU CMS{% endblock %}
{% set active='import' %}
{% block content %}
<div class="card">
  <h2>📥 导入已有 HTML 页面</h2>
  <p style="color:var(--muted);margin-bottom:16px;font-size:13px;">
    将服务器上已有的 HTML 页面解析入库，变成后台可编辑区块。已导入的页面会显示绿色 ✅。
  </p>

  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">
    <div class="form-group">
      <label>输入页面路径</label>
      <input type="text" id="importSlug" class="form-control" value="index.html" placeholder="如：index.html、products.html、cases/index.html">
      <div class="form-hint">相对于网站根目录 /www/wwwroot/airifu/ 的路径</div>
    </div>
    <div style="padding-top:22px;">
      <button class="btn btn-primary" onclick="importPage(document.getElementById('importSlug').value, this)">▶ 导入此页面</button>
    </div>
  </div>
</div>

<div class="card">
  <h2>📁 可导入的页面 <span class="badge" id="fileCount">-</span></h2>
  <div class="toolbar">
    <input type="text" id="searchFiles" class="form-control" placeholder="🔍 搜索页面文件名…" style="max-width:280px;">
    <div style="margin-left:auto;font-size:12px;color:var(--muted);">
      共 <strong id="totalFiles">0</strong> 个 HTML 文件
    </div>
  </div>
  <div class="file-list" id="fileList">
    <div style="padding:24px;text-align:center;color:var(--muted);">加载中…</div>
  </div>
</div>

<div class="card" style="background:#fffbeb;">
  <h2>💡 导入说明</h2>
  <ul style="line-height:2;font-size:13px;color:#856404;">
    <li>导入会将 HTML 解析为文字区块和图片区块，适合内容迁移</li>
    <li>导入后请到「页面构建器」完善排版和样式</li>
    <li>重复导入会覆盖已有内容（保留页面ID，更新区块）</li>
    <li>建议先导入核心页面：首页、产品中心、解决方案</li>
  </ul>
</div>
{% endblock %}

{% block scripts %}
<script>
async function loadFileList() {
  const res = await fetch('/admin/api/files/list/');
  const d = await res.json();
  const container = document.getElementById('fileList');
  const countEl = document.getElementById('totalFiles');
  countEl.textContent = d.files.length;
  if (!d.files.length) {
    container.innerHTML = '<div style="padding:24px;text-align:center;color:var(--muted);">未找到 HTML 文件</div>';
    return;
  }
  container.innerHTML = d.files.map(f => `
    <div class="file-item" data-name="${f.name}">
      <span class="fn">${f.path}</span>
      <span style="font-size:11px;color:#aaa;">${f.size}</span>
      <button class="btn btn-sm ${f.imported ? 'btn-green' : 'btn-primary'} import-btn"
        onclick="importPage('${f.slug}', this)"
        ${f.imported ? '✅ 已导入' : '▶ 导入'}>
        ${f.imported ? '✅ 已导入' : '▶ 导入'}
      </button>
    </div>
  `).join('');

  // 搜索过滤
  document.getElementById('searchFiles').addEventListener('input', e => {
    const q = e.target.value.toLowerCase();
    container.querySelectorAll('.file-item').forEach(item => {
      item.style.display = item.dataset.name.toLowerCase().includes(q) ? '' : 'none';
    });
  });
}
loadFileList();
</script>
{% endblock %}