{% extends "cms/base.html" %}
{% block title %}媒体库 - ARIFU CMS{% endblock %}
{% set active='media' %}
{% block content %}
<div class="card">
  <h2>🖼 媒体库 <span class="badge">{{ media|length }}</span></h2>

  <!-- 上传区 -->
  <div style="border:2px dashed var(--border);border-radius:12px;padding:32px;text-align:center;margin-bottom:20px;cursor:pointer;" id="dropZone">
    <div style="font-size:32px;margin-bottom:8px;">📤</div>
    <div style="font-size:15px;color:var(--dark);font-weight:600;">拖拽文件到此处，或点击选择</div>
    <div style="color:var(--muted);font-size:12px;margin-top:6px;">支持 PNG/JPG/SVG/PDF/MP4，单文件≤32MB</div>
    <input type="file" id="fileInput" multiple accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico,.pdf,.mp4" style="display:none;">
  </div>
  <div id="uploadProgress" style="display:none;margin-bottom:16px;">
    <div style="background:#e2e8f0;border-radius:6px;height:8px;overflow:hidden;">
      <div id="progressBar" style="background:linear-gradient(90deg,var(--blue),var(--green));height:100%;width:0%;transition:.3s;"></div>
    </div>
    <div id="progressText" style="font-size:12px;color:var(--muted);margin-top:4px;"></div>
  </div>
  <div id="uploadResult" style="margin-bottom:16px;"></div>

  <!-- 筛选 -->
  <div class="toolbar">
    <a href="/admin/media/" class="btn btn-sm {{ 'btn-primary' if not filter_type else 'btn-gray' }}">全部</a>
    <a href="/admin/media/?type=image" class="btn btn-sm {{ 'btn-primary' if filter_type=='image' else 'btn-gray' }}">🖼 图片</a>
    <span style="margin-left:auto;color:var(--muted);font-size:12px;">共 {{ media|length }} 个文件</span>
  </div>

  <!-- 媒体网格 -->
  {% if media %}
  <div class="media-grid" id="mediaGrid">
    {% for m in media %}
    <div class="media-item" data-id="{{ m.id }}" data-filename="{{ m.filename }}" data-url="{{ m.url }}">
      {% if m.mime_type.startswith('image') %}
      <img src="{{ m.url }}" alt="{{ m.alt or m.filename }}" loading="lazy">
      {% else %}
      <div style="height:100px;display:flex;align-items:center;justify-content:center;font-size:40px;">
        {% if m.mime_type == 'application/pdf' %}📄{% else %}📎{% endif %}
      </div>
      {% endif %}
      <div class="name" title="{{ m.filename }}">{{ m.filename }}</div>
      <div style="font-size:10px;color:#aaa;padding:0 8px 6px;">{{ (m.size_bytes/1024)|round|int }}KB</div>
      <button class="del-btn" onclick="event.stopPropagation();deleteMedia({{ m.id }},'{{ m.filename }}')">✕</button>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty"><div class="icon">🖼</div><p>还没有上传文件</p></div>
  {% endif %}
</div>

<!-- 编辑弹窗 -->
<div class="modal-overlay" id="editModal">
  <div class="modal">
    <button class="close" onclick="closeModal()">✕</button>
    <h3>📝 编辑媒体信息</h3>
    <input type="hidden" id="editId">
    <div class="form-group">
      <label>替代文字（alt）</label>
      <input type="text" id="editAlt" class="form-control" placeholder="图片描述">
    </div>
    <div class="form-group">
      <label>说明文字（caption）</label>
      <input type="text" id="editCaption" class="form-control" placeholder="可选说明">
    </div>
    <div class="btn-group">
      <button class="btn btn-primary" onclick="saveMediaInfo()">💾 保存</button>
      <button class="btn btn-gray" onclick="closeModal()">取消</button>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const dropZone = document.getElementById('dropZone');
const fileInput = document.getElementById('fileInput');
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.style.borderColor = 'var(--blue)'; });
dropZone.addEventListener('dragleave', () => { dropZone.style.borderColor = ''; });
dropZone.addEventListener('drop', e => {
  e.preventDefault();
  dropZone.style.borderColor = '';
  uploadFiles(e.dataTransfer.files);
});
fileInput.addEventListener('change', () => uploadFiles(fileInput.files));

async function uploadFiles(files) {
  const prog = document.getElementById('uploadProgress');
  const bar  = document.getElementById('progressBar');
  const txt  = document.getElementById('progressText');
  const res  = document.getElementById('uploadResult');
  prog.style.display = 'block';
  res.innerHTML = '';
  let done = 0;
  for (const file of files) {
    txt.textContent = `上传中: ${file.name}`;
    bar.style.width = ((done/files.length)*100) + '%';
    const fd = new FormData();
    fd.append('files[]', file);
    await fetch('/admin/api/media/', { method:'POST', body:fd })
      .then(r => r.json())
      .then(d => {
        if (d.ok) {
          res.innerHTML += `<span style="color:var(--green);font-size:13px;">✅ ${file.name}</span> `;
          setTimeout(() => location.reload(), 500);
        }
      })
      .catch(() => { res.innerHTML += `<span style="color:var(--danger);font-size:13px;">❌ ${file.name}</span> `; });
    done++;
  }
  bar.style.width = '100%';
  txt.textContent = '完成';
}

function deleteMedia(id, filename) {
  if (!confirm(`删除「${filename}」？`)) return;
  fetch(`/admin/api/media/${id}/`, { method:'DELETE' })
    .then(r => r.json())
    .then(d => { if (d.ok) location.reload(); });
}

// 点击媒体项 → 编辑
document.querySelectorAll('.media-item').forEach(item => {
  item.addEventListener('click', () => {
    document.getElementById('editId').value = item.dataset.id;
    document.getElementById('editModal').classList.add('show');
  });
});

function closeModal() {
  document.getElementById('editModal').classList.remove('show');
}

async function saveMediaInfo() {
  const id  = document.getElementById('editId').value;
  const alt = document.getElementById('editAlt').value;
  const cap = document.getElementById('editCaption').value;
  await fetch(`/admin/api/media/${id}/`, {
    method:'PUT',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({alt, caption:cap})
  });
  closeModal();
  location.reload();
}
</script>
{% endblock %}