<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>支付截图上传</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { background: #f5f7fa; padding-bottom: 40px; }
.header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 20px 16px; text-align: center; }
.upload-btn { width: 100%; padding: 18px; font-size: 16px; border-radius: 12px; margin-top: 16px; }
.img-preview { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; margin: 4px; }
.file-card { background: #fff; border-radius: 8px; padding: 8px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.file-card img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }
.file-card .info { flex: 1; min-width: 0; }
.file-card .name { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card .remove { color: #c00; cursor: pointer; padding: 4px 8px; }
.status-msg { text-align: center; padding: 12px; font-size: 14px; }
</style>
</head>
<body>

{% if error %}
<div class="header"><h5>错误</h5><p>{{ error }}</p></div>
{% else %}

<div class="header">
  <h5>📸 支付截图上传</h5>
  <p class="mb-0 opacity-75" style="font-size:13px">拍照或从相册选择图片</p>
</div>

<div class="container" style="max-width:480px">

  <!-- 上传按钮 -->
  <input type="file" id="file-input" accept="image/*" multiple hidden onchange="handleSelect(this)">

  <button class="btn btn-primary upload-btn" onclick="document.getElementById('file-input').click()">
    📷 选择图片 / 拍照
  </button>

  <!-- 上传进度 -->
  <div id="upload-status" class="status-msg mt-3"></div>

  <!-- 已上传图片列表 -->
  <h6 class="mt-3 mb-2">已上传 ({{ server_count | default(0) }})</h6>
  <div id="file-list"></div>

</div>
{% endif %}

<script>
const sessionId = "{{ session_id }}";

// ---- 加载已有文件 ----
async function loadFiles() {
  try {
    const r = await fetch(`/api/files/${sessionId}`);
    const d = await r.json();
    renderList(d.images || []);
  } catch (e) {
    console.error(e);
  }
}

function renderList(images) {
  const box = document.getElementById('file-list');
  if (!images.length) {
    box.innerHTML = '<p class="text-muted text-center" style="font-size:13px">暂无图片</p>';
    return;
  }
  box.innerHTML = images.map(name => `
    <div class="file-card">
      <img src="/api/download/${sessionId}/${encodeURIComponent(name)}#t=image/png" alt="">
      <div class="info"><div class="name">${name}</div></div>
      <span class="remove" onclick="removeFile('${name}')">&times;</span>
    </div>
  `).join('');
}

// ---- 上传 ----
async function handleSelect(input) {
  const files = Array.from(input.files);
  if (!files.length) return;

  const status = document.getElementById('upload-status');
  let done = 0;
  status.innerHTML = `<div class="text-primary">上传中... 0/${files.length}</div>`;

  for (const f of files) {
    try {
      const fd = new FormData();
      fd.append('file', f);
      await fetch(`/api/upload/${sessionId}`, { method: 'POST', body: fd });
      done++;
      status.innerHTML = `<div class="text-primary">上传中... ${done}/${files.length}</div>`;
    } catch (e) {
      status.innerHTML = `<div class="text-danger">${f.name} 上传失败</div>`;
    }
  }

  if (done === files.length) {
    status.innerHTML = `<div class="text-success">✅ ${done} 张图片上传成功</div>`;
  } else {
    status.innerHTML = `<div class="text-warning">${done}/${files.length} 张上传成功</div>`;
  }

  input.value = '';
  loadFiles();
}

// ---- 删除（前端视觉移除，实际保留在服务器）----
function removeFile(name) {
  // 移动端暂不支持删除，提示用户回到 PC 端管理
  if (confirm('文件已上传到服务器。如需删除请回到电脑端操作。')) {
    loadFiles();
  }
}

// ---- 定时刷新列表（同步 PC 端新增的文件）----
setInterval(loadFiles, 5000);
loadFiles();
</script>
</body>
</html>