#!/usr/bin/env python3
"""把 260630 的 comps.html 改成图片/视频直接嵌入，不再依赖 JS fetch media.json。"""
import json
import re
from pathlib import Path

BASE = Path(__file__).parent.resolve()
STAGING = BASE / "vps_staging"
HTML = STAGING / "comps.html"
MEDIA_JSON = STAGING / "media.json"


def render_gallery(slug: str, media: dict) -> str:
    images = media.get("images", [])
    thumbnails = media.get("thumbnails", images)
    videos = media.get("videos", [])
    if not images and not videos:
        return '<p class="placeholder">暂无照片/视频</p>'

    pairs = list(zip(thumbnails, images))
    preview_count = 6
    html = '<div class="gallery gallery-preview">\n'
    for thumb, full in pairs[:preview_count]:
        html += f'            <img src="{thumb}" loading="lazy" alt="" onclick="openLightbox(\'{full}\')">\n'
    html += '          </div>\n'

    if len(pairs) > preview_count:
        html += '          <div class="gallery gallery-more">\n'
        for thumb, full in pairs[preview_count:]:
            html += f'            <img src="{thumb}" loading="lazy" alt="" onclick="openLightbox(\'{full}\')">\n'
        html += '          </div>\n'
        html += f'          <button class="gallery-toggle" onclick="toggleGallery(this)">显示剩余 {len(pairs) - preview_count} 张照片</button>\n'

    if videos:
        html += '          <div class="gallery gallery-videos">\n'
        for src in videos:
            html += f'            <video src="{src}" controls preload="metadata"></video>\n'
        html += '          </div>\n'
    return html


def main():
    with open(MEDIA_JSON, encoding="utf-8") as f:
        media_data = json.load(f)

    html = HTML.read_text(encoding="utf-8")

    # 替换每个 media-gallery div
    def repl(m):
        slug = m.group(1)
        media = media_data.get(slug, {})
        gal = render_gallery(slug, media)
        return f'<div class="media-gallery" data-slug="{slug}">\n          {gal}          </div>'

    html = re.sub(
        r'<div class="media-gallery" data-slug="([^"]+)"></div>',
        repl,
        html,
    )

    # 移除 loadMedia / fetch 相关代码，保留 lightbox、toggle、行点击
    # 把整个 <script>...</script> 替换为精简版
    new_script = """  <script>
    function toggleGallery(btn) {
      const more = btn.previousElementSibling;
      more.classList.toggle('visible');
      const remaining = more.querySelectorAll('img').length;
      btn.textContent = more.classList.contains('visible')
        ? '收起照片'
        : `显示剩余 ${remaining} 张照片`;
    }

    function openLightbox(src) {
      const box = document.getElementById('lightbox');
      document.getElementById('lightbox-img').src = src;
      box.classList.add('active');
    }

    document.querySelectorAll('tbody tr[data-href]').forEach(row => {
      row.addEventListener('click', () => {
        location.hash = row.dataset.href;
      });
    });
  </script>"""

    html = re.sub(r'  <script>.*?</script>', new_script, html, flags=re.DOTALL)

    HTML.write_text(html, encoding="utf-8")
    print(f"已更新 {HTML}")


if __name__ == "__main__":
    main()