let allData = [];

function sanitize(str) {
  return str.replaceAll("\\", "/");
}

function populateFilters(data) {
  const catSet = new Set();
  const tagSet = new Set();

  data.forEach(item => {
    catSet.add(item.properties?.Category?.[0]);
    (item.properties?.Tags || []).forEach(tag => tagSet.add(tag));
  });

  const catFilter = document.getElementById("categoryFilter");
  [...catSet].sort().forEach(cat => {
    const option = document.createElement("option");
    option.value = cat;
    option.textContent = cat;
    catFilter.appendChild(option);
  });

  const tagFilter = document.getElementById("tagFilter");
  [...tagSet].sort().forEach(tag => {
    const option = document.createElement("option");
    option.value = tag;
    option.textContent = tag;
    tagFilter.appendChild(option);
  });
}

function render(data) {
  const gallery = document.getElementById("gallery");
  gallery.innerHTML = ""; // clear

  data.forEach((item, index) => {
    const images = (item.images || []).map(sanitize);
    const tags = (item.properties?.Tags || []).join(', ');
    const category = item.properties?.Category?.[0] || 'Uncategorized';
    const downloadPath = sanitize(item.download);

    const card = document.createElement("div");
    card.className = "card";
    card.setAttribute("data-category", category);
    card.setAttribute("data-tags", tags);

    const galleryGroupId = `gallery-${index}`;
    card.innerHTML = `
      <div class="lg-gallery" id="${galleryGroupId}">
        <a href="${images[0]}" data-lg-size="1400-800">
          <img src="${images[0]}" alt="${item.title}">
        </a>
        ${images.slice(1).map(img => `
          <a href="${img}" data-lg-size="1400-800" style="display:none;"></a>
        `).join("")}
      </div>
      <div class="card-body">
        <div class="card-title">${item.title}</div>
        <div class="card-tags">Tags: ${tags}</div>
        <div class="card-footer">
          <a class="download-btn" href="${downloadPath}" download>⬇️ 下载资源</a>
        </div>
      </div>
    `;
    gallery.appendChild(card);

    // 初始化 lightGallery
    lightGallery(document.getElementById(galleryGroupId), {
      selector: 'a',
      thumbnail: true,
      zoom: true
    });
  });
}

function filterGallery() {
  const cat = document.getElementById("categoryFilter").value;
  const tag = document.getElementById("tagFilter").value;

  const filtered = allData.filter(item => {
    const matchCat = (cat === 'all') || (item.properties?.Category?.[0] === cat);
    const matchTag = (tag === 'all') || (item.properties?.Tags || []).includes(tag);
    return matchCat && matchTag;
  });

  render(filtered);
}

fetch("data/kenney_data_local.json")
  .then(res => res.json())
  .then(data => {
    allData = data;
    populateFilters(data);
    render(data);
    document.getElementById("categoryFilter").addEventListener("change", filterGallery);
    document.getElementById("tagFilter").addEventListener("change", filterGallery);
  });