let currentPen = null;

/* ---------------- VIDEO MAP ---------------- */
const videoMap = {
  1: { z1: "https://i.imgur.com/naNXpH5.mp4", z2: "https://i.imgur.com/HxMG4UN.mp4", z3: "https://i.imgur.com/jk1mFKn.mp4" },
  2: { z1: "https://i.imgur.com/xe9spze.mp4", z2: "https://i.imgur.com/nWqmOZ9.mp4", z3: "https://i.imgur.com/41egEJC.mp4" },
  3: { z1: "https://i.imgur.com/ZK4Ky4H.mp4", z2: "https://i.imgur.com/x35iuH2.mp4", z3: "https://i.imgur.com/kZS93Pp.mp4" },
  4: { z1: "https://i.imgur.com/gyzl7aw.mp4", z2: "https://i.imgur.com/9CNO3xP.mp4", z3: "https://i.imgur.com/NbG9QMv.mp4" },
  5: { z1: "https://i.imgur.com/OFiE0Xa.mp4", z2: "https://i.imgur.com/kS1WrEE.mp4", z3: "https://i.imgur.com/YhnR7CY.mp4" },
  6: { z1: "https://i.imgur.com/IWEeFTe.mp4", z2: "https://i.imgur.com/INwFf1y.mp4", z3: "https://i.imgur.com/6y9t0xZ.mp4" },
  7: { z1: "https://i.imgur.com/7i0ILFk.mp4", z2: "https://i.imgur.com/6g83hJm.mp4", z3: "https://i.imgur.com/hwCW4nQ.mp4" },
  8: { z1: "https://i.imgur.com/8lXNwiZ.mp4", z2: "https://i.imgur.com/APgStoo.mp4", z3: "https://i.imgur.com/niMswp1.mp4" },
  9: { z1: "https://i.imgur.com/bnsNoLp.mp4", z2: "https://i.imgur.com/SBlUQll.mp4", z3: "https://i.imgur.com/ax1KIeu.mp4" }
};

/* ---------------- BUTTON LABEL MAP ---------------- */
const buttonLabelMap = {
  1: { z1: "찍", z2: "찍찍", z3: "찍찍찍" },
  2: { z1: "톡", z2: "톡톡", z3: "톡톡톡" },
  3: { z1: "둘", z2: "둘둘", z3: "둘둘둘" },
  4: { z1: "삭", z2: "사악", z3: "사아악" },
  5: { z1: "도록", z2: "도로록", z3: "도로로록" },
  6: { z1: "지직", z2: "지지직", z3: "지지지직" },
  7: { z1: "덜걱", z2: "덜그덕", z3: "덜그덕그덕" },
  8: { z1: "휙", z2: "휘릭", z3: "휘리릭" },
  9: { z1: "딱", z2: "딱딱", z3: "딱딱딱" }
};

/* ---------------- PEN SELECT ---------------- */
document.querySelectorAll(".pen-wrap").forEach((wrap) => {
  wrap.addEventListener("click", () => {
    document.querySelectorAll(".pen-wrap").forEach(w => w.classList.remove("selected"));
    wrap.classList.add("selected");

    currentPen = wrap.dataset.pen;

    const labels = buttonLabelMap[currentPen];
    if (labels) {
      document.querySelector('[data-type="z1"]').textContent = labels.z1;
      document.querySelector('[data-type="z2"]').textContent = labels.z2;
      document.querySelector('[data-type="z3"]').textContent = labels.z3;
    }
  });
});

/* ---------------- BUTTON ACTIONS ---------------- */
document.querySelectorAll(".action-btn").forEach((btn) => {
  btn.addEventListener("click", () => {

    /* 이미지 저장 */
    if (btn.classList.contains("export")) {
      exportAsOneImage();
      return;
    }

    /* 실행 취소 */
    if (btn.classList.contains("undo")) {
      const videos = document.querySelectorAll(".video-stack video");
      if (videos.length > 0) videos[videos.length - 1].remove();
      return;
    }

    /* 펜 선택 안 했을 때만 경고 */
    if (!currentPen) {
      alert("먼저 펜을 선택하세요!");
      return;
    }

    const type = btn.dataset.type;
    const url = videoMap[currentPen]?.[type];

    /* ❌ 경고 제거 → 없으면 그냥 무시 */
    if (!url) return;

    const video = document.createElement("video");
    video.src = url;
    video.autoplay = true;
    video.muted = true;
    video.playsInline = true;

    const stack = document.querySelector(".video-stack");
    stack.appendChild(video);

    /* 🔥 자동 스크롤 */
    stack.scrollLeft = stack.scrollWidth;
  });
});