async function fetchAndRenderMembers() {
  try {
    const response = await fetch("/confirm");
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    if (!data || !data.members || !Array.isArray(data.members)) {
      console.error("Invalid member data received:", data);
      return;
    }

    const members = data.members;
    console.log(members);
    const container = document.getElementById("memberCheckboxes");
    container.innerHTML = ""; // 既存の中身を消去

    members.forEach((name) => {
      const newItem = document.createElement("div");
      newItem.className = "flex items-center gap-3 mb-2";
      console.log(name);
      newItem.innerHTML = `
            <input
              type="checkbox"
              name="members"
              value="${name}"
              id="checkbox-${name}"
              class="px-4 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-700 text-white"
            />
            <lavel for="checkbox-${name}" class="text-lg">${name}</label>
          `;

      container.appendChild(newItem);
    });
  } catch (error) {
    console.error("Error fetching members:", error);
  }
}

// メンバー削除ボタンのイベントリスナー（修正箇所）
document.getElementById("reset_btn").addEventListener("click", () => {
  // メンバー送信処理

  const checkboxes = document.querySelectorAll(
    '#memberCheckboxes input[type="checkbox"]:checked'
  );

  const selectedNames = Array.from(checkboxes).map((cb) => cb.value);

  if (selectedNames.length === 0) {
    alert("メンバーを1人以上選択してください。");
    return;
  }

  fetch("/reset_member", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ names: selectedNames }),
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error("送信に失敗しました");
      }
      // サーバーからのJSONレスポンスを期待する
      return response.json();
    })
    .then((data) => {
      alert("選択されたメンバーを削除しました。");
      fetchAndRenderMembers(); // 再描画
    })
    .catch((error) => {
      console.error("送信エラー:", error);
      // エラーメッセージを表示する
      alert(`送信エラー: ${error.message}`);
    });
});

// ページが表示されたときにチェックボックスを生成
window.addEventListener("DOMContentLoaded", fetchAndRenderMembers);

// 「全選択」ボタン処理
document.getElementById("select-all").addEventListener("click", () => {
  const checkboxes = document.querySelectorAll(
    '#memberCheckboxes input[type="checkbox"]'
  );
  checkboxes.forEach((checkbox) => {
    checkbox.checked = true;
  });
});

// 他のページに移動する関数
function showRecorder() {
  window.location.href = "/index";
}