const searchInput = document.getElementById("searchInput");
const memberSelect = document.getElementById("memberSelect");
const generateBtn = document.getElementById("generateBtn");
const statusText = document.getElementById("statusText");
const resultCard = document.getElementById("resultCard");
const qrImage = document.getElementById("qrImage");
const downloadLink = document.getElementById("downloadLink");
const rawJson = document.getElementById("rawJson");

const metaMemberId = document.getElementById("metaMemberId");
const metaVillage = document.getElementById("metaVillage");
const metaUuid = document.getElementById("metaUuid");
const metaStatus = document.getElementById("metaStatus");
const metaMsg = document.getElementById("metaMsg");
const metaQrPrefix = document.getElementById("metaQrPrefix");
const metaPayloadLen = document.getElementById("metaPayloadLen");
const metaPayloadPrefix = document.getElementById("metaPayloadPrefix");

let allItems = [];

function setStatus(message, isError = false) {
  statusText.textContent = message;
  statusText.classList.toggle("error", isError);
}

function renderOptions(items) {
  memberSelect.innerHTML = "";

  if (!items.length) {
    const option = document.createElement("option");
    option.value = "";
    option.textContent = "没有可选 ID";
    memberSelect.appendChild(option);
    return;
  }

  for (const item of items) {
    const option = document.createElement("option");
    option.value = String(item.member_id);
    option.textContent = item.label;
    memberSelect.appendChild(option);
  }

  if (!memberSelect.value) {
    memberSelect.selectedIndex = 0;
  }
}

function filterItems() {
  const keyword = searchInput.value.trim().toLowerCase();
  if (!keyword) {
    renderOptions(allItems);
    setStatus(`已加载 ${allItems.length} 个 ID`);
    return;
  }

  const filtered = allItems.filter((item) => {
    const idText = String(item.member_id);
    const village = String(item.village_name || "").toLowerCase();
    return idText.includes(keyword) || village.includes(keyword);
  });

  renderOptions(filtered);
  setStatus(`筛选后剩余 ${filtered.length} 个 ID`);
}

async function loadFoundIds() {
  setStatus("正在加载 ID 列表...");
  try {
    const response = await fetch("/api/found-ids");
    const data = await response.json();
    if (!response.ok || !data.ok) {
      throw new Error(data.error || "加载 ID 列表失败");
    }
    allItems = data.items || [];
    renderOptions(allItems);
    setStatus(`已加载 ${allItems.length} 个 ID`);
  } catch (error) {
    setStatus(error.message || "加载失败", true);
  }
}

function showResult(data) {
  resultCard.classList.remove("hidden");
  qrImage.src = data.data_url;
  downloadLink.href = data.data_url;
  downloadLink.download = `member_${data.member_id}.gif`;
  metaMemberId.textContent = data.member_id ?? "-";
  metaVillage.textContent = data.village_name ?? "-";
  metaUuid.textContent = data.uuid ?? "-";
  metaStatus.textContent = data.status ?? "-";
  metaMsg.textContent = data.msg ?? "-";
  metaQrPrefix.textContent = data.qr_prefix ?? "-";
  metaPayloadLen.textContent = data.payload_len ?? "-";
  metaPayloadPrefix.textContent = data.payload_hex_prefix ?? "-";
  rawJson.textContent = JSON.stringify(data, null, 2);
}

async function generateQr() {
  const memberId = memberSelect.value;
  if (!memberId) {
    setStatus("请先选择一个 member_id", true);
    return;
  }

  generateBtn.disabled = true;
  setStatus(`正在为 ${memberId} 生成二维码...`);

  try {
    const response = await fetch("/api/generate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ member_id: Number(memberId) }),
    });
    const data = await response.json();
    if (!response.ok || !data.ok) {
      throw new Error(data.error || "生成二维码失败");
    }
    showResult(data);
    setStatus(`member_id=${memberId} 生成成功`);
  } catch (error) {
    setStatus(error.message || "生成失败", true);
  } finally {
    generateBtn.disabled = false;
  }
}

searchInput.addEventListener("input", filterItems);
generateBtn.addEventListener("click", generateQr);
memberSelect.addEventListener("dblclick", generateQr);

loadFoundIds();