let allData = [];
let currentActive = null;

// 定义一个函数，用于将字符串中的反斜杠替换为正斜杠
function sanitize(str) {
  return str.replaceAll("\\", "/");
}

function renderList(data) {
  const list = document.getElementById("resourceList");
  list.innerHTML = "";

  data.forEach((item, index) => {
    const li = document.createElement("li");
    li.setAttribute("data-index", index);

    const thumb = item.images?.[0] ? sanitize(item.images[0]) : "";
    const name = item.title;
    const assets = item.properties?.Assets || "未知";

    li.innerHTML = `
      <img src="${thumb}" class="thumb" alt="">
      <div>
        <div><strong>${name}</strong></div>
        <div style="font-size:0.85rem; color: #666;">素材量: ${assets}</div>
      </div>
    `;

    li.addEventListener("click", () => showDetails(item, li));
    list.appendChild(li);
  });
}

function showDetails(item, li) {
  if (currentActive) currentActive.classList.remove("active");
  currentActive = li;
  currentActive.classList.add("active");

  document.getElementById("placeholder").classList.add("hidden");
  document.getElementById("details").classList.remove("hidden");

  document.getElementById("detailTitle").textContent = item.title;
  document.getElementById("detailTags").textContent = `分类: ${
    item.properties?.Category?.[0] || "N/A"
  } | 标签: ${(item.properties?.Tags || []).join(", ")}`;

  // 下载链接
  const download = sanitize(item.download);
  document.getElementById(
    "downloadBlock"
  ).innerHTML = `<a class="download-btn" href="${download}" download>⬇️ 下载资源</a>`;

  // 图集
  const gallery = document.createElement("div");
  gallery.id = "gallery";
  item.images?.forEach((img) => {
    img = sanitize(img);
    const a = document.createElement("a");
    a.href = img;
    a.innerHTML = `<img src="${img}" alt="">`;
    gallery.appendChild(a);
  });
  const galleryWrapper = document.getElementById("galleryWrapper");
  galleryWrapper.innerHTML = "";
  galleryWrapper.appendChild(gallery);

  lightGallery(gallery, {
    selector: "a",
    thumbnail: true,
    zoom: true,
  });

  // 版本信息
  const versionBlock = document.getElementById("versionTableWrapper");
  if (item.changelog?.length > 0) {
    let table = `<table><tr><th>日期</th><th>版本</th><th>描述</th></tr>`;
    item.changelog.forEach((row) => {
      table += `<tr><td>${row.date}</td><td>${row.version}</td><td>${
        row.description || ""
      }</td></tr>`;
    });
    table += `</table>`;
    versionBlock.innerHTML = table;
  } else {
    versionBlock.innerHTML = "";
  }
}

function handleSearch() {
  const keyword = document
    .getElementById("searchInput")
    .value.trim()
    .toLowerCase();
  const filtered = allData.filter((item) =>
    item.title.toLowerCase().includes(keyword)
  );
  renderList(filtered);
}

fetch("data/kenney_data_local.json")
  .then((res) => res.json())
  .then((data) => {
    allData = data;
    renderList(data);
    document
      .getElementById("searchInput")
      .addEventListener("input", handleSearch);
  });