.al-hdr { text-align:center; padding:40px 24px 16px; }
    .al-hdr h1 { font-size:clamp(24px,4vw,36px); font-weight:700; background:linear-gradient(135deg,#e9e9f5,#a09fb1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:4px; }
    .al-sub { color:var(--noir-text-tertiary); font-size:13px; margin-bottom:8px; }
    .al-bar { max-width:1024px; margin:0 auto 12px; padding:0 24px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    .al-tabs { max-width:1024px; margin:0 auto 12px; padding:0 24px; display:flex; gap:6px; flex-wrap:wrap; }
    .al-tab { padding:6px 16px; border-radius:9999px; font-size:12px; font-weight:500; background:var(--noir-bg-tertiary); border:1px solid var(--noir-border-light); color:var(--noir-text-secondary); cursor:pointer; transition:all .2s; white-space:nowrap; }
    .al-tab:hover { border-color:var(--noir-border-medium); color:var(--noir-text-primary); }
    .al-tab.active { background:var(--noir-accent); color:var(--noir-text-inverse); border-color:var(--noir-accent); }
    .al-btn { padding:6px 16px; border-radius:9999px; font-size:12px; font-weight:500; background:linear-gradient(135deg,rgba(91,135,49,0.4),rgba(124,175,78,0.3)); border:1px solid color-mix(in srgb, var(--text-primary) 12%, transparent); color:var(--noir-text-primary); cursor:pointer; transition:all .2s; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
    .al-btn:hover { background:linear-gradient(135deg,rgba(91,135,49,0.6),rgba(124,175,78,0.5)); }
    .al-grid { max-width:1024px; margin:0 auto; padding:0 24px 48px; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
    .al-photo { position:relative; border-radius:10px; overflow:hidden; background:var(--noir-bg-elevated); border:1px solid var(--noir-border-light); cursor:pointer; aspect-ratio:1; }
    .al-photo img, .al-photo video { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
    .al-photo:hover img, .al-photo:hover video { transform:scale(1.06); }
    .al-photo .ov { position:absolute; bottom:0; left:0; right:0; padding:8px; background:linear-gradient(transparent,rgba(0,0,0,.8)); color:#fff; font-size:11px; opacity:0; transition:opacity .2s; pointer-events:none; }
    .al-photo:hover .ov { opacity:1; }
    .al-photo .play-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; background:rgba(0,0,0,0.6); border-radius:50%; display:flex; align-items:center; justify-content:center; }
    .al-empty { grid-column:1/-1; text-align:center; padding:60px 24px; color:var(--noir-text-tertiary); }
    .lb { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
    .lb.open { display:flex; }
    .lb img, .lb video { max-width:90vw; max-height:85vh; border-radius:8px; object-fit:contain; }
    .lb video { max-height:80vh; }
    .lb .lb-info { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); color:#fff; font-size:12px; opacity:.7; text-align:center; }
    .home-btn { position:fixed; top:16px; left:16px; z-index:100; width:36px; height:36px; border-radius:50%; background:var(--noir-bg-elevated); backdrop-filter:blur(20px); border:1px solid var(--noir-border-light); display:flex; align-items:center; justify-content:center; color:var(--noir-text-primary); text-decoration:none; transition:all .2s; box-shadow:var(--noir-shadow-xs); }
    .home-btn:hover { box-shadow:var(--noir-shadow-md); transform:scale(1.08); }
    /* ---- 上传对话框 ---- */
    .up-overlay { position:fixed; inset:0; z-index:1999; background:rgba(0,0,0,.65); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px; }
    .up-overlay.open { display:flex; }
    .up-box { background:var(--noir-bg-elevated); border:1px solid var(--noir-border-light); border-radius:16px; padding:24px; width:100%; max-width:400px; box-shadow:var(--noir-shadow-lg); }
    .up-box h3 { font-size:16px; font-weight:600; margin:0 0 16px; color:var(--noir-text-primary); }
    .up-preview { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:10px; background:var(--noir-bg-tertiary); margin-bottom:14px; }
    .up-preview img, .up-preview .up-icon { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0; }
    .up-preview .up-icon { display:flex; align-items:center; justify-content:center; background:var(--noir-bg-secondary); color:var(--noir-text-tertiary); font-size:18px; }
    .up-preview .up-fname { font-size:13px; color:var(--noir-text-primary); word-break:break-all; line-height:1.3; }
    .up-preview .up-fsize { font-size:11px; color:var(--noir-text-tertiary); }
    .up-note { width:100%; box-sizing:border-box; padding:10px 14px; border-radius:10px; border:1px solid var(--noir-border-light); background:var(--noir-bg-tertiary); color:var(--noir-text-primary); font-size:13px; outline:none; transition:border-color .2s; margin-bottom:14px; }
    .up-note:focus { border-color:var(--noir-accent); }
    .up-note::placeholder { color:var(--noir-text-tertiary); }
    .up-progress { margin-bottom:14px; display:none; }
    .up-progress.show { display:block; }
    .up-progress .up-bar-track { height:6px; border-radius:3px; background:var(--noir-bg-tertiary); overflow:hidden; }
    .up-progress .up-bar-fill { height:100%; width:0%; border-radius:3px; background:linear-gradient(90deg,#6c63ff,#a78bfa); transition:width .3s; }
    .up-progress .up-bar-text { display:flex; justify-content:space-between; font-size:11px; color:var(--noir-text-tertiary); margin-top:4px; }
    .up-actions { display:flex; gap:8px; justify-content:flex-end; }
    .up-btn { padding:8px 20px; border-radius:9999px; font-size:13px; font-weight:500; border:1px solid var(--noir-border-light); cursor:pointer; transition:all .2s; }
    .up-btn:hover { border-color:var(--noir-border-medium); }
    .up-btn.primary { background:var(--noir-accent); color:var(--noir-text-inverse); border-color:var(--noir-accent); }
    .up-btn.primary:hover { filter:brightness(1.12); }
    .up-btn.primary:disabled { opacity:.5; cursor:not-allowed; filter:none; }
    .up-btn.cancel { background:transparent; color:var(--noir-text-secondary); }
    .up-btn.cancel:hover { color:var(--noir-text-primary); }
    @media(max-width:640px){ .al-grid { grid-template-columns:repeat(2,1fr); gap:8px; padding:0 12px 32px; } .lb img, .lb video { max-width:100vw; max-height:70vh; } }
  </style>
<link rel="stylesheet" href="/mc-theme.css">
<link rel="stylesheet" href="/mc-compat.css">
<script src="/static/site-sync.js"></script>
</head>
<body class="mc-page">
<script src="/static/nav.js"></script>
<script src="/static/auth-check.js"></script>
<a href="/" class="home-btn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></a>
<div class="al-hdr"><h1>班级相册</h1><div class="al-sub" id="loginStatus"></div></div>
<div class="al-bar">
  <button class="al-btn" id="createAlbumBtn"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v8"/><path d="M8 12h8"/></svg> 新建</button>
  <button class="al-btn" id="uploadBtn" style="display:none"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg> 上传</button>
</div>
<div class="al-tabs" id="albumTabs"></div>
<div class="al-grid" id="photoGrid"></div>
<div class="lb" id="lightbox">
  <div id="lbContent"></div>
  <div class="lb-info" id="lbInfo"></div>
</div>
<input type="file" id="fileInput" accept="image/*" style="display:none">
<!-- 上传对话框 -->
<div class="up-overlay" id="upOverlay">
  <div class="up-box">
    <h3>上传到相册</h3>
    <div class="up-preview" id="upPreview">
      <div class="up-icon">📁</div>
      <div><div class="up-fname" id="upFileName">选择文件后显示</div><div class="up-fsize" id="upFileSize"></div></div>
    </div>
    <input class="up-note" id="upNote" placeholder="添加一行描述（可选）" maxlength="100">
    <div class="up-progress" id="upProgress">
      <div class="up-bar-track"><div class="up-bar-fill" id="upBarFill"></div></div>
      <div class="up-bar-text"><span id="upBarLabel">准备上传...</span><span id="upBarPct">0%</span></div>
    </div>
    <div class="up-actions">
      <button class="up-btn cancel" id="upCancel">取消</button>
      <button class="up-btn primary" id="upConfirm">开始上传</button>
    </div>
  </div>
</div>
<script>
// ===== 基础状态 =====
let cu = sessionStorage.getItem('username') || localStorage.getItem('username') || '';
let tk = sessionStorage.getItem('token') || localStorage.getItem('token') || '';
let isRoot = cu === 'root';
let albums = [], curA = null;
let uploading = false;
function isLoggedIn() { return !!cu; }
function updateLoginStatus() {
  const el = document.getElementById('loginStatus');
  el.textContent = isLoggedIn() ? '已登录: ' + cu + (isRoot ? ' (管理员)' : '') : '未登录';
  document.getElementById('uploadBtn').style.display = isLoggedIn() ? 'inline-flex' : 'none';
  document.getElementById('fileInput').accept = isRoot ? 'image/*,video/*' : 'image/*';
}
function esc(s) {
  if (!s) return '';
  return String(s).replace(/[&<>]/g, function(m) {
    if (m === '&') return '&amp;';
    if (m === '<') return '&lt;';
    return '&gt;';
  });
}
// ===== 加载相册 =====
async function loadAlbums() {
  var r = await fetch('/api/album');
  albums = await r.json();
  if (!curA && albums.length) curA = albums[0].albumId;
  renderTabs();
  renderGrid();
}
function renderTabs() {
  var c = document.getElementById('albumTabs');
  if (!albums.length) { c.innerHTML = ''; return; }
  var html = '';
  for (var i = 0; i < albums.length; i++) {
    var a = albums[i];
    html += '<span class="al-tab' + (a.albumId === curA ? ' active' : '') + '" data-id="' + a.albumId + '">' + esc(a.albumName) + ' (' + a.photos.length + ')</span>';
  }
  c.innerHTML = html;
  var tabs = c.querySelectorAll('.al-tab');
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].addEventListener('click', function() {
      curA = Number(this.getAttribute('data-id'));
      renderTabs();
      renderGrid();
    });
  }
}
function renderGrid() {
  var g = document.getElementById('photoGrid');
  var a = null;
  for (var i = 0; i < albums.length; i++) {
    if (albums[i].albumId === curA) { a = albums[i]; break; }
  }
  if (!a || !a.photos.length) {
    var msg = albums.length ? '这个相册还没有内容' : '还没有相册，先新建一个吧';
    g.innerHTML = '<div class="al-empty"><svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="opacity:.4;margin-bottom:10px"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg><p>' + msg + '</p></div>';
    return;
  }
  var html = '';
  for (var i = 0; i < a.photos.length; i++) {
    var p = a.photos[i];
    var media, playIcon = '';
    if (p.type === 'video') {
      media = '<video src="' + p.file + '" muted></video>';
      playIcon = '<div class="play-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><polygon points="8 5 19 12 8 19 8 5"/></svg></div>';
    } else {
      media = '<img src="' + p.file + '" alt="" loading="lazy">';
    }
    var noteHtml = p.note ? '<div>' + esc(p.note) + '</div>' : '';
    // 上传者信息仅在 hover 时通过 .ov 悬浮显示（小字）
    html += '<div class="al-photo" data-album="' + a.albumId + '" data-photo="' + p.id + '">'
          + media + playIcon
          + '<div class="ov">' + noteHtml + '<div class="un">' + esc(p.uploader) + ' ' + p.time + '</div></div>'
          + '</div>';
  }
  g.innerHTML = html;
}
// ===== 新建相册 =====
document.getElementById('createAlbumBtn').addEventListener('click', function() {
  if (!isLoggedIn()) { alert('请先登录'); return; }
  var n = prompt('相册名称：');
  if (!n) return;
  fetch('/api/album/create', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: n, username: cu, token: tk })
  }).then(function(r) { return r.json(); }).then(function(d) {
    if (d.ok) loadAlbums(); else alert(d.msg);
  });
});
// ===== 上传流程：对话框 + XHR 进度 =====
var upOverlay = document.getElementById('upOverlay');
var upFileName = document.getElementById('upFileName');
var upFileSize = document.getElementById('upFileSize');
var upPreview = document.getElementById('upPreview');
var upNote = document.getElementById('upNote');
var upProgress = document.getElementById('upProgress');
var upBarFill = document.getElementById('upBarFill');
var upBarLabel = document.getElementById('upBarLabel');
var upBarPct = document.getElementById('upBarPct');
var upConfirm = document.getElementById('upConfirm');
var upCancel = document.getElementById('upCancel');
var pendingFile = null;
document.getElementById('uploadBtn').addEventListener('click', function() {
  if (!isLoggedIn()) { alert('请先登录'); return; }
  if (!albums.length) { alert('请先创建相册'); return; }
  document.getElementById('fileInput').click();
});
document.getElementById('fileInput').addEventListener('change', function() {
  if (!this.files[0]) return;
  pendingFile = this.files[0];
  this.value = '';
  upFileName.textContent = pendingFile.name;
  upFileSize.textContent = (pendingFile.size / 1024).toFixed(1) + ' KB';
  upNote.value = '';
  if (pendingFile.type.startsWith('image/')) {
    var reader = new FileReader();
    reader.onload = function(e) {
      upPreview.innerHTML = '<img src="' + e.target.result + '" alt=""><div><div class="up-fname">' + esc(pendingFile.name) + '</div><div class="up-fsize">' + (pendingFile.size / 1024).toFixed(1) + ' KB</div></div>';
    };
    reader.readAsDataURL(pendingFile);
  } else {
    upPreview.innerHTML = '<div class="up-icon">🎬</div><div><div class="up-fname">' + esc(pendingFile.name) + '</div><div class="up-fsize">' + (pendingFile.size / 1024).toFixed(1) + ' KB</div></div>';
  }
  upProgress.classList.remove('show');
  upBarFill.style.width = '0%';
  upBarLabel.textContent = '准备上传...';
  upBarPct.textContent = '0%';
  upConfirm.disabled = false;
  upConfirm.textContent = '开始上传';
  uploading = false;
  upOverlay.classList.add('open');
});
upCancel.addEventListener('click', function() {
  if (uploading) return;
  upOverlay.classList.remove('open');
  pendingFile = null;
});
upConfirm.addEventListener('click', function() {
  if (uploading || !pendingFile) return;
  var fd = new FormData();
  fd.append('photo', pendingFile);
  fd.append('albumId', curA || albums[0].albumId);
  fd.append('note', upNote.value.trim());
  fd.append('username', cu);
  fd.append('token', tk);
  uploading = true;
  upConfirm.disabled = true;
  upConfirm.textContent = '上传中...';
  upProgress.classList.add('show');
  upBarLabel.textContent = '正在上传...';
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/album/upload', true);
  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      var pct = Math.round(e.loaded / e.total * 100);
      upBarFill.style.width = pct + '%';
      upBarPct.textContent = pct + '%';
      upBarLabel.textContent = '上传中 ' + (e.loaded / 1024).toFixed(0) + ' KB / ' + (e.total / 1024).toFixed(0) + ' KB';
    }
  };
  xhr.onload = function() {
    uploading = false;
    upOverlay.classList.remove('open');
    pendingFile = null;
    try {
      var d = JSON.parse(xhr.responseText);
      if (!d.ok) alert(d.msg);
    } catch(e) { alert('上传失败：' + e.message); }
    loadAlbums();
  };
  xhr.onerror = function() {
    uploading = false;
    upConfirm.disabled = false;
    upConfirm.textContent = '重试上传';
    upBarLabel.textContent = '上传失败，请重试';
    alert('网络错误，上传失败');
  };
  xhr.send(fd);
});
// ===== 灯箱预览 =====
document.getElementById('photoGrid').addEventListener('click', function(e) {
  var el = e.target.closest('.al-photo');
  if (!el) return;
  var aid = Number(el.getAttribute('data-album'));
  var pid = Number(el.getAttribute('data-photo'));
  var a = null, p = null;
  for (var i = 0; i < albums.length; i++) {
    if (albums[i].albumId === aid) { a = albums[i]; break; }
  }
  if (!a) return;
  for (var i = 0; i < a.photos.length; i++) {
    if (a.photos[i].id === pid) { p = a.photos[i]; break; }
  }
  if (!p) return;
  var cnt = document.getElementById('lbContent');
  if (p.type === 'video') {
    cnt.innerHTML = '<video src="' + p.file + '" controls autoplay style="max-width:90vw;max-height:80vh;border-radius:8px"></video>';
  } else {
    cnt.innerHTML = '<img src="' + p.file + '" alt="">';
  }
  document.getElementById('lbInfo').innerHTML = (p.note ? esc(p.note) + '<br>' : '') + esc(p.uploader) + ' ' + p.time;
  document.getElementById('lightbox').classList.add('open');
});
document.getElementById('lightbox').addEventListener('click', function() {
  this.classList.remove('open');
  document.getElementById('lbContent').innerHTML = '';
});
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    document.getElementById('lightbox').classList.remove('open');
    document.getElementById('lbContent').innerHTML = '';
  }
});
// ===== 启动 =====
updateLoginStatus();
loadAlbums();
</script>
</body>
</html>