document.addEventListener("DOMContentLoaded", () => {
  const hourList = document.getElementById("hourList");
  const minList = document.getElementById("minList");
  const hourPicker = document.getElementById("hourPicker");
  const minPicker = document.getElementById("minPicker");

  for (let i = 1; i <= 12; i++) {
    const val = i.toString().padStart(2, "0");
    hourList.innerHTML += `<div class="picker-item snap-center text-[#898989] text-[20px] font-medium h-[40px] flex items-center justify-center transition-all duration-300" data-val="${val}">${val}</div>`;
  }

  for (let i = 0; i < 60; i++) {
    const val = i.toString().padStart(2, "0");
    minList.innerHTML += `<div class="picker-item snap-center text-[#898989] text-[20px] font-medium h-[40px] flex items-center justify-center transition-all duration-300" data-val="${val}">${val}</div>`;
  }

  function updateHighlight(picker) {
    const items = picker.querySelectorAll(".picker-item");
    const pickerRect = picker.getBoundingClientRect();
    const center = pickerRect.top + pickerRect.height / 2;

    items.forEach((item) => {
      const rect = item.getBoundingClientRect();
      const itemCenter = rect.top + rect.height / 2;

      if (Math.abs(itemCenter - center) < 25) {
        item.classList.add("text-white", "text-[32px]");
        item.classList.remove("text-[#898989]", "text-[20px]");
      } else {
        item.classList.remove("text-white", "text-[32px]");
        item.classList.add("text-[#898989]", "text-[20px]");
      }
    });
  }

  hourPicker.addEventListener("scroll", () => updateHighlight(hourPicker));
  minPicker.addEventListener("scroll", () => updateHighlight(minPicker));

  setTimeout(() => {
    updateHighlight(hourPicker);
    updateHighlight(minPicker);
  }, 100);
});

function toggleActive() {
  const toggle = document.getElementById("reminderToggle");
  const isActive = toggle.classList.contains("justify-end");

  if (isActive) {
    toggle.classList.remove("justify-end", "bg-[#743FFE]");
    toggle.classList.add("justify-start", "bg-[#333333]");
  } else {
    toggle.classList.remove("justify-start", "bg-[#333333]");
    toggle.classList.add("justify-end", "bg-[#743FFE]");
  }
}

function setPeriod(period) {
  const amBtn = document.getElementById("amBtn");
  const pmBtn = document.getElementById("pmBtn");

  const activeClass =
    "inline-flex h-[40px] px-[18px] py-[4px] justify-center items-center gap-[10px] rounded-[8px] bg-[#2D2050] text-white font-['Roboto'] text-[16px] font-normal";
  const deactiveClass =
    "inline-flex h-[40px] px-[18px] py-[4px] justify-center items-center gap-[10px] rounded-[8px] bg-[#2D2050] text-[#626262] font-['Roboto'] text-[16px] font-normal";

  if (period === "AM") {
    amBtn.className = activeClass;
    pmBtn.className = deactiveClass;
  } else {
    pmBtn.className = activeClass;
    amBtn.className = deactiveClass;
  }
}

function toggleDay(btn) {
  if (btn.classList.contains("day-btn-active")) {
    btn.classList.remove("day-btn-active");
    btn.classList.add("day-btn-deactive");
  } else {
    btn.classList.remove("day-btn-deactive");
    btn.classList.add("day-btn-active");
  }
}
