// Card Carousel Logic (User Request)
const cardCarousel = document.getElementById("card-carousel");
const cardDots = [
  document.getElementById("dot-0"),
  document.getElementById("dot-1"),
  document.getElementById("dot-2"),
];

if (cardCarousel && cardDots.every(Boolean)) {
  cardCarousel.addEventListener("scroll", () => {
    const scrollLeft = cardCarousel.scrollLeft;
    // Card width + gap (24px matching gap-6)
    const cardWidth = cardCarousel.querySelector("div").offsetWidth + 24;
    const activeIndex = Math.round(scrollLeft / cardWidth);

    cardDots.forEach((dot, index) => {
      if (index === activeIndex) {
        dot.classList.add("bg-primary", "w-6");
        dot.classList.remove("bg-white/20", "w-2");
      } else {
        dot.classList.remove("bg-primary", "w-6");
        dot.classList.add("bg-white/20", "w-2");
      }
    });
  });

  // Dot click: scroll to card
  cardDots.forEach((dot, index) => {
    dot.style.cursor = "pointer";
    dot.addEventListener("click", () => {
      const cardWidth = cardCarousel.querySelector("div").offsetWidth + 24;
      cardCarousel.scrollTo({
        left: index * cardWidth,
        behavior: "smooth",
      });
    });
  });

  // Center the card on load
  window.addEventListener("load", () => {
    const cards = cardCarousel.children;
    if (cards.length > 1) {
      const secondCard = cards[1];
      const offset =
        secondCard.offsetLeft -
        cardCarousel.offsetWidth / 2 +
        secondCard.offsetWidth / 2;
      cardCarousel.scrollLeft = offset;
    }
  });
}
const carousel = document.getElementById("carousel");
const track = document.getElementById("dot-track");
const indicator = document.getElementById("active-indicator");

let isDragging = false;

carousel.addEventListener("scroll", () => {
  if (isDragging) return;
  updateIndicatorFromScroll();
});

function updateIndicatorFromScroll() {
  const scrollFraction =
    carousel.scrollLeft / (carousel.scrollWidth - carousel.clientWidth);
  const maxLeft = track.clientWidth - indicator.clientWidth;
  indicator.style.left = scrollFraction * maxLeft + "px";
}

const drag = (e) => {
  if (!isDragging) return;

  let clientX = e.type.includes("touch") ? e.touches.clientX : e.clientX;
  const rect = track.getBoundingClientRect();
  let x = clientX - rect.left - indicator.clientWidth / 2;

  const maxLeft = track.clientWidth - indicator.clientWidth;

  if (x < 0) x = 0;
  if (x > maxLeft) x = maxLeft;

  indicator.style.left = x + "px";

  const scrollFraction = x / maxLeft;
  carousel.scrollLeft =
    scrollFraction * (carousel.scrollWidth - carousel.clientWidth);

  carousel.style.scrollBehavior = "auto";
};

const startDrag = () => {
  isDragging = true;
};
const stopDrag = () => {
  isDragging = false;
  carousel.style.scrollBehavior = "smooth";
};

indicator.addEventListener("mousedown", startDrag);
window.addEventListener("mousemove", drag);
window.addEventListener("mouseup", stopDrag);

indicator.addEventListener("touchstart", startDrag);
window.addEventListener("touchmove", drag);
window.addEventListener("touchend", stopDrag);

track.addEventListener("click", (e) => {
  if (e.target === indicator) return;
  isDragging = true;
  drag(e);
  stopDrag();
});

function toggleLocalBookmark(imgElement, event) {
  event.stopPropagation();
  event.preventDefault();

  const outlineIcon = "../assets/icons/bookmark-select.svg";
  const filledIcon = "../assets/icons/bookmark-fill.svg";

  const isBookmarked = imgElement.getAttribute("data-bookmarked") === "true";

  if (isBookmarked) {
    imgElement.src = outlineIcon;
    imgElement.setAttribute("data-bookmarked", "false");
  } else {
    imgElement.src = filledIcon;
    imgElement.setAttribute("data-bookmarked", "true");
  }
}
