tts/client/static/app.js

const listEl = document.getElementById("tts-list");
const textInput = document.getElementById("text-input");
const saveBtn = document.getElementById("save-btn");
const editBtn = document.getElementById("edit-btn");
const deleteBtn = document.getElementById("delete-btn");
const cancelBtn = document.getElementById("cancel-btn");
const downloadLink = document.getElementById("download-link");

let items = [];
let editMode = false;
const selectedIds = new Set();

function setEditMode(isEdit) {
  editMode = isEdit;
  selectedIds.clear();
  editBtn.classList.toggle("hidden", editMode);
  deleteBtn.classList.toggle("hidden", !editMode);
  cancelBtn.classList.toggle("hidden", !editMode);
  downloadLink.classList.add("hidden");
  renderList();
}

function renderList() {
  listEl.innerHTML = "";
  items.forEach((item) => {
    const li = document.createElement("li");
    li.className = "tts-item";

    if (editMode) {
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.checked = selectedIds.has(item.id);
      checkbox.addEventListener("click", (event) => {
        event.stopPropagation();
        if (checkbox.checked) {
          selectedIds.add(item.id);
        } else {
          selectedIds.delete(item.id);
        }
      });
      li.appendChild(checkbox);
    } else {
      const bullet = document.createElement("span");
      bullet.textContent = "•";
      bullet.className = "bullet";
      li.appendChild(bullet);
    }

    const label = document.createElement("span");
    label.textContent = item.display_time;
    label.className = "item-label";
    li.appendChild(label);

    li.addEventListener("click", () => handleItemClick(item));
    listEl.appendChild(li);
  });
}

async function loadList() {
  const res = await fetch("/api/tts");
  items = await res.json();
  renderList();
}

async function handleSave() {
  const text = (textInput.value || "").trim();
  if (text.length < 11) {
    alert("10개 글자 이상이어야 합니다");
    return;
  }

  const res = await fetch("/api/tts", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ text }),
  });

  if (!res.ok) {
    const err = await res.json().catch(() => ({}));
    alert(err.detail || "저장에 실패했습니다.");
    return;
  }

  const created = await res.json();
  items.unshift(created);
  renderList();
}

async function handleItemClick(item) {
  if (editMode) {
    if (selectedIds.has(item.id)) {
      selectedIds.delete(item.id);
    } else {
      selectedIds.add(item.id);
    }
    renderList();
    return;
  }

  const res = await fetch(`/api/tts/${item.id}`);
  if (!res.ok) {
    alert("항목을 불러오지 못했습니다.");
    return;
  }

  const data = await res.json();
  textInput.value = data.text || "";
  downloadLink.href = data.download_url;
  downloadLink.classList.remove("hidden");
  downloadLink.click();
}

async function handleDelete() {
  const ids = Array.from(selectedIds);
  if (ids.length === 0) {
    alert("삭제할 항목을 선택하세요.");
    return;
  }

  const res = await fetch("/api/tts", {
    method: "DELETE",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ ids }),
  });

  if (!res.ok) {
    alert("삭제에 실패했습니다.");
    return;
  }

  const data = await res.json();
  const deletedSet = new Set(data.deleted || []);
  items = items.filter((item) => !deletedSet.has(item.id));
  setEditMode(false);
}

saveBtn.addEventListener("click", handleSave);
editBtn.addEventListener("click", () => setEditMode(true));
cancelBtn.addEventListener("click", () => setEditMode(false));
deleteBtn.addEventListener("click", handleDelete);

loadList();