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

{% block content %}
<div class="container-fluid">

  {# ===== Header ===== #}
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h4 class="mb-0">媒体资料库</h4>
      <p class="text-muted mb-0 small">统一管理产品实拍、宣传素材、案例现场、技术文档、视频资料</p>
    </div>
    <button class="btn btn-primary d-flex align-items-center gap-2" data-bs-toggle="modal" data-bs-target="#uploadModal">
      <i data-feather="upload-cloud" class="feather-sm"></i> 上传文件
    </button>
  </div>

  {# ===== Stats Bar ===== #}
  <div class="row mb-4 g-3">
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm">
        <div class="card-body py-2 d-flex align-items-center gap-3">
          <div class="rounded-3 p-2" style="background:#e3f2fd">
            <i data-feather="image" class="text-primary"></i>
          </div>
          <div>
            <div class="fw-bold" id="stat-image">-</div>
            <div class="text-muted small">图片</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm">
        <div class="card-body py-2 d-flex align-items-center gap-3">
          <div class="rounded-3 p-2" style="background:#fce4ec">
            <i data-feather="video" class="text-danger"></i>
          </div>
          <div>
            <div class="fw-bold" id="stat-video">-</div>
            <div class="text-muted small">视频</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm">
        <div class="card-body py-2 d-flex align-items-center gap-3">
          <div class="rounded-3 p-2" style="background:#fff3e0">
            <i data-feather="file-text" class="text-warning"></i>
          </div>
          <div>
            <div class="fw-bold" id="stat-doc">-</div>
            <div class="text-muted small">文档</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-6 col-md-3">
      <div class="card border-0 shadow-sm">
        <div class="card-body py-2 d-flex align-items-center gap-3">
          <div class="rounded-3 p-2" style="background:#e8f5e9">
            <i data-feather="layers" class="text-success"></i>
          </div>
          <div>
            <div class="fw-bold" id="stat-total">{{ media|length }}</div>
            <div class="text-muted small">全部文件</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  {# ===== Category Filter ===== #}
  <div class="d-flex flex-wrap gap-2 mb-3 align-items-center">
    <span class="text-muted small me-1">分类：</span>
    <button class="btn btn-sm btn-primary cat-btn active" data-cat="all">全部</button>
    <button class="btn btn-sm btn-outline-primary cat-btn" data-cat="product">🖼 产品实拍</button>
    <button class="btn btn-sm btn-outline-primary cat-btn" data-cat="promo">📣 宣传素材</button>
    <button class="btn btn-sm btn-outline-primary cat-btn" data-cat="case">🏭 案例现场</button>
    <button class="btn btn-sm btn-outline-primary cat-btn" data-cat="tech">📐 技术图纸</button>
    <button class="btn btn-sm btn-outline-primary cat-btn" data-cat="cert">📄 资质证书</button>
    <button class="btn btn-sm btn-outline-primary cat-btn" data-cat="video">🎬 视频资料</button>
    <button class="btn btn-sm btn-outline-primary cat-btn" data-cat="training">📚 培训资料</button>
    <button class="btn btn-sm btn-outline-primary cat-btn" data-cat="other">📦 其他</button>
    <div class="ms-auto">
      <input type="text" id="media-search" class="form-control form-control-sm" placeholder="搜索文件名..." style="width:180px">
    </div>
  </div>

  {# ===== Media Grid ===== #}
  <div class="row g-3" id="media-grid">
    {% for m in media %}
    <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2 media-card"
         data-cat="{{ m.category or 'other' }}"
         data-name="{{ m.original or m.filename or '' }}">
      <div class="card h-100 border-0 shadow-sm hover-card">

        {# --- Thumbnail / Icon --- #}
        <div class="position-relative" style="height:120px; background:#f5f5f5; overflow:hidden; border-radius:.375rem .375rem 0 0">

          {# Image preview #}
          {% if m.media_type == 'image' %}
          <img src="{{ m.url or '/' + m.filename }}"
               alt="{{ m.alt or m.original or m.filename }}"
               class="w-100 h-100"
               style="object-fit:cover"
               onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
          <div class="position-absolute top-0 end-0 m-1 d-flex gap-1">
            <button class="btn btn-dark btn-sm rounded-circle copy-url" data-url="{{ m.url or '/' + m.filename }}"
                    title="复制链接" style="width:26px;height:26px;padding:0">
              <i data-feather="copy" class="feather-sm"></i>
            </button>
          </div>
          {% else %}
          {# Non-image icon #}
          <div class="w-100 h-100 d-flex align-items-center justify-content-center" style="display:flex">
            {% if m.media_type == 'video' %}
              <i data-feather="video" style="width:40px;height:40px" class="text-danger"></i>
            {% elif m.media_type == 'document' %}
              <i data-feather="file-text" style="width:40px;height:40px" class="text-warning"></i>
            {% else %}
              <i data-feather="file" style="width:40px;height:40px" class="text-secondary"></i>
            {% endif %}
          </div>
          {% endif %}

          {# Category badge #}
          <div class="position-absolute bottom-0 start-0 m-1">
            <span class="badge bg-dark bg-opacity-75 small">{{ {
              'product':'🖼 产品实拍','promo':'📣 宣传素材','case':'🏭 案例现场',
              'tech':'📐 技术图纸','cert':'📄 资质证书','video':'🎬 视频资料',
              'training':'📚 培训资料','other':'📦 其他'
            }.get(m.category, '📦 其他') }}</span>
          </div>
        </div>

        {# --- Card Body --- #}
        <div class="card-body py-2 px-2">
          <p class="mb-1 text-truncate small fw-semibold" style="font-size:12px"
             title="{{ m.original or m.filename }}">
            {{ m.original or m.filename }}
          </p>
          <div class="d-flex justify-content-between align-items-center small text-muted">
            <span>{{ (m.size_bytes/1024)|round|int }} KB</span>
            {% if m.width and m.height %}
            <span>{{ m.width }}×{{ m.height }}</span>
            {% endif %}
          </div>
          {% if m.uploaded_at %}
          <div class="small text-muted mt-1">{{ m.uploaded_at[:10] }}</div>
          {% endif %}
        </div>

        {# --- Card Footer: Actions --- #}
        <div class="card-footer py-1 px-2 border-0 bg-transparent">
          <div class="d-flex justify-content-between align-items-center">
            <button class="btn btn-xs btn-outline-secondary btn-sm copy-url"
                    data-url="{{ m.url or '/' + m.filename }}"
                    title="复制链接" style="font-size:11px;padding:1px 6px">
              <i data-feather="link" class="feather-sm"></i> 复制
            </button>
            <button class="btn btn-xs btn-outline-danger btn-sm"
                    onclick="delMedia({{ m.id }}, this)"
                    title="删除" style="font-size:11px;padding:1px 6px">
              <i data-feather="trash-2" class="feather-sm"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    {% else %}
    <div class="col-12 text-center py-5 text-muted">
      <i data-feather="image" style="width:60px;height:60px" class="mb-3 opacity-25"></i>
      <p>暂无媒体文件 · <a href="#" data-bs-toggle="modal" data-bs-target="#uploadModal">立即上传</a></p>
    </div>
    {% endfor %}
  </div>
</div>

{# ===== Upload Modal ===== #}
<div class="modal fade" id="uploadModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title d-flex align-items-center gap-2">
          <i data-feather="upload-cloud" class="text-primary"></i> 上传媒体文件
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-info small mb-3">
          <i data-feather="info" class="feather-sm"></i>
          支持 jpg/png/gif/svg/webp/pdf/doc/docx/xls/xlsx/ppt/pptx/txt/mp4/mov 格式，单文件≤32MB
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">文件分类 <span class="text-danger">*</span></label>
          <div class="d-flex flex-wrap gap-2">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="upload_category" value="product" id="cat-product" checked>
              <label class="form-check-label" for="cat-product">🖼 产品实拍</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="upload_category" value="promo" id="cat-promo">
              <label class="form-check-label" for="cat-promo">📣 宣传素材</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="upload_category" value="case" id="cat-case">
              <label class="form-check-label" for="cat-case">🏭 案例现场</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="upload_category" value="tech" id="cat-tech">
              <label class="form-check-label" for="cat-tech">📐 技术图纸</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="upload_category" value="cert" id="cat-cert">
              <label class="form-check-label" for="cat-cert">📄 资质证书</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="upload_category" value="video" id="cat-video">
              <label class="form-check-label" for="cat-video">🎬 视频资料</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="upload_category" value="training" id="cat-training">
              <label class="form-check-label" for="cat-training">📚 培训资料</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="upload_category" value="other" id="cat-other">
              <label class="form-check-label" for="cat-other">📦 其他</label>
            </div>
          </div>
        </div>
        <div class="mb-3">
          <label class="form-label fw-semibold">选择文件</label>
          <input type="file" class="form-control" id="file-input" multiple accept="image/*,video/*,.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt">
          <div id="file-list" class="mt-2 small text-muted"></div>
        </div>
        <div class="progress d-none" id="upload-progress" style="height:6px">
          <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"></div>
        </div>
        <div id="upload-msg" class="small mt-2"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="btn-upload" onclick="doUpload()">
          <i data-feather="upload-cloud" class="feather-sm"></i> 开始上传
        </button>
      </div>
    </div>
  </div>
</div>

{# ===== Edit Modal ===== #}
<div class="modal fade" id="editModal" 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">
        <input type="hidden" id="edit-id">
        <div class="mb-3">
          <label class="form-label">文件名</label>
          <input type="text" class="form-control" id="edit-filename" readonly>
        </div>
        <div class="mb-3">
          <label class="form-label">Alt文字（图片描述）</label>
          <input type="text" class="form-control" id="edit-alt" placeholder="输入图片描述">
        </div>
        <div class="mb-3">
          <label class="form-label">说明备注</label>
          <textarea class="form-control" id="edit-caption" rows="2" placeholder="可选说明"></textarea>
        </div>
      </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="saveEdit()">保存</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
// --- Category filter ---
const catBtns = document.querySelectorAll('.cat-btn');
catBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    catBtns.forEach(b => b.classList.remove('active','btn-primary'));
    catBtns.forEach(b => b.classList.add('btn-outline-primary'));
    btn.classList.add('active','btn-primary');
    btn.classList.remove('btn-outline-primary');
    const cat = btn.dataset.cat;
    document.querySelectorAll('.media-card').forEach(card => {
      card.style.display = (cat === 'all' || card.dataset.cat === cat) ? '' : 'none';
    });
  });
});

// --- Search ---
document.getElementById('media-search').addEventListener('input', e => {
  const q = e.target.value.toLowerCase();
  document.querySelectorAll('.media-card').forEach(card => {
    card.style.display = card.dataset.name.toLowerCase().includes(q) ? '' : 'none';
  });
});

// --- Stats ---
const cards = document.querySelectorAll('.media-card');
const byType = {image:0, video:0, document:0};
cards.forEach(c => {
  const img = c.querySelector('img');
  if (img) byType.image++;
  else {
    const icon = c.querySelector('[data-feather="video"]');
    if (icon) byType.video++;
    else byType.document++;
  }
});
document.getElementById('stat-image').textContent = byType.image;
document.getElementById('stat-video').textContent = byType.video;
document.getElementById('stat-doc').textContent = byType.document;

// --- Copy URL ---
document.querySelectorAll('.copy-url').forEach(btn => {
  btn.addEventListener('click', e => {
    e.stopPropagation();
    navigator.clipboard.writeText(btn.dataset.url).then(() => {
      const orig = btn.innerHTML;
      btn.innerHTML = '<i data-feather="check" class="feather-sm"></i>';
      btn.classList.add('btn-success');
      setTimeout(() => { btn.innerHTML = orig; btn.classList.remove('btn-success'); feather.replace(); }, 1500);
    });
  });
});

// --- File input preview ---
document.getElementById('file-input').addEventListener('change', e => {
  const list = document.getElementById('file-list');
  list.innerHTML = '';
  Array.from(e.target.files).forEach(f => {
    list.innerHTML += '<div>' + f.name + ' <span class="text-muted">(' + Math.round(f.size/1024) + ' KB)</span></div>';
  });
});

// --- Upload ---
async function doUpload() {
  const files = document.getElementById('file-input').files;
  if (!files.length) { alert('请选择文件'); return; }
  const category = document.querySelector('input[name="upload_category"]:checked').value;
  const progress = document.getElementById('upload-progress');
  const msg = document.getElementById('upload-msg');
  const btn = document.getElementById('btn-upload');
  progress.classList.remove('d-none');
  btn.disabled = true;

  let uploaded = 0, failed = 0;
  for (const file of files) {
    const fd = new FormData();
    fd.append('file', file);
    fd.append('category', category);
    try {
      const r = await fetch('/admin/api/media/upload/', {method:'POST', body:fd});
      if (r.ok) uploaded++; else failed++;
    } catch(e) { failed++; }
    progress.querySelector('.progress-bar').style.width = (++uploaded/files.length*100) + '%';
  }

  msg.innerHTML = '<span class="text-' + (failed===0?'success':'warning') + '">上传完成：成功 ' + uploaded + ' 个，失败 ' + failed + ' 个</span>';
  btn.disabled = false;
  setTimeout(() => { location.reload(); }, 1500);
}

// --- Delete ---
function delMedia(id, btn) {
  if (!confirm('确定删除此文件？')) return;
  fetch('/admin/api/media/' + id + '/', {method:'DELETE'})
    .then(r => r.ok ? location.reload() : alert('删除失败'))
    .catch(() => alert('删除失败'));
}

// --- Edit ---
function editMedia(id, filename, alt, caption) {
  document.getElementById('edit-id').value = id;
  document.getElementById('edit-filename').value = filename;
  document.getElementById('edit-alt').value = alt || '';
  document.getElementById('edit-caption').value = caption || '';
  new bootstrap.Modal(document.getElementById('editModal')).show();
}

function saveEdit() {
  const id = document.getElementById('edit-id').value;
  const alt = document.getElementById('edit-alt').value;
  const caption = document.getElementById('edit-caption').value;
  fetch('/admin/api/media/' + id + '/', {
    method:'PUT',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({alt, caption})
  }).then(r => r.ok ? location.reload() : alert('保存失败'));
}
</script>
{% endblock %}