const menuToggle = document.querySelector(".menu-toggle");
const navLinks = document.querySelector(".nav-links");
const navItems = document.querySelectorAll(".nav-links a");
const solutionButtons = document.querySelectorAll(".solution-tabs button");
const solutionImage = document.querySelector(".solution-preview img");

function setLanguageOptionState(language) {
  const options = document.querySelectorAll(".language-option");
  const triggerLabel = document.querySelector(".language-trigger-label");
  const current = language || "chinese_simplified";
  const labels = {
    chinese_simplified: "中文",
    english: "English"
  };

  options.forEach((option) => {
    const selected = option.dataset.language === current;
    option.classList.toggle("active", selected);
    option.setAttribute("aria-selected", String(selected));
  });

  if (triggerLabel) {
    triggerLabel.textContent = labels[current] || labels.chinese_simplified;
  }
}

function closeLanguageMenu() {
  const switcher = document.querySelector(".language-switcher");
  const trigger = document.querySelector(".language-trigger");

  switcher?.classList.remove("open");
  trigger?.setAttribute("aria-expanded", "false");
}

function initLanguageSwitcher() {
  const switcher = document.querySelector(".language-switcher");
  const trigger = document.querySelector(".language-trigger");
  const options = document.querySelectorAll(".language-option");

  if (!switcher || !trigger || !options.length) return;

  trigger.addEventListener("click", (event) => {
    event.stopPropagation();
    const open = switcher.classList.toggle("open");
    trigger.setAttribute("aria-expanded", String(open));
  });

  options.forEach((option) => {
    option.addEventListener("click", () => {
      const language = option.dataset.language;

      if (!window.translate || !language) return;

      translate.changeLanguage(language);
      setLanguageOptionState(language);
      closeLanguageMenu();
    });
  });

  document.addEventListener("click", closeLanguageMenu);
  setLanguageOptionState(
    window.translate && typeof translate.language.getCurrent === "function"
      ? translate.language.getCurrent()
      : "chinese_simplified"
  );
}

function initTranslate() {
  if (!window.translate) return;

  translate.selectLanguageTag.show = false;
  translate.language.setLocal("chinese_simplified");
  translate.service.use("client.edge");
  translate.listener.start();
  translate.execute();
}

if (menuToggle && navLinks) {
  menuToggle.addEventListener("click", () => {
    const open = navLinks.classList.toggle("open");
    menuToggle.setAttribute("aria-expanded", String(open));
  });

  navItems.forEach((item) => {
    item.addEventListener("click", () => {
      navLinks.classList.remove("open");
      menuToggle.setAttribute("aria-expanded", "false");
    });
  });
}

navItems.forEach((item) => {
  item.addEventListener("click", () => {
    navItems.forEach((link) => link.classList.remove("active"));
    item.classList.add("active");
  });
});

solutionButtons.forEach((button) => {
  button.addEventListener("click", () => {
    const image = button.dataset.image;

    solutionButtons.forEach((item) => item.classList.remove("active"));
    button.classList.add("active");

    if (solutionImage && image) {
      solutionImage.style.opacity = "0";
      window.setTimeout(() => {
        solutionImage.src = image;
        solutionImage.style.opacity = "1";
      }, 160);
    }
  });
});

if (solutionImage) {
  solutionImage.style.transition = "opacity 0.2s ease";
}

function initFallbackCarousel() {
  const carousel = document.querySelector(".business-swiper");
  const slides = Array.from(document.querySelectorAll(".business-slide"));
  const next = document.querySelector(".business-swiper .swiper-button-next");
  const prev = document.querySelector(".business-swiper .swiper-button-prev");
  let active = 0;
  let autoplayTimer;

  if (!carousel || !slides.length) return;

  function render() {
    slides.forEach((slide, index) => {
      const directDistance = Math.abs(index - active);
      const circularDistance = Math.min(directDistance, slides.length - directDistance);

      slide.classList.toggle("swiper-slide-active", index === active);
      slide.classList.toggle("swiper-slide-prev", index === (active - 1 + slides.length) % slides.length);
      slide.classList.toggle("swiper-slide-next", index === (active + 1) % slides.length);
      slide.style.display = circularDistance <= 1 ? "block" : "none";
    });
  }

  function go(step) {
    active = (active + step + slides.length) % slides.length;
    render();
  }

  function stopAutoplay() {
    window.clearInterval(autoplayTimer);
    autoplayTimer = undefined;
  }

  function startAutoplay() {
    if (slides.length <= 1 || autoplayTimer) return;
    autoplayTimer = window.setInterval(() => go(1), 3500);
  }

  next?.addEventListener("click", () => go(1));
  prev?.addEventListener("click", () => go(-1));
  carousel.addEventListener("mouseenter", stopAutoplay);
  carousel.addEventListener("mouseleave", startAutoplay);
  render();
  startAutoplay();
}

document.addEventListener("DOMContentLoaded", () => {
  initLanguageSwitcher();
  initTranslate();
});

window.addEventListener("load", () => {

  const SwiperCtor = window.Swiper || (typeof Swiper !== "undefined" ? Swiper : undefined);
  const businessCarousel = document.querySelector(".business-swiper");
  const businessSlides = businessCarousel
    ? Array.from(businessCarousel.querySelectorAll(".swiper-wrapper > .business-slide"))
    : [];

  if (SwiperCtor && businessCarousel && businessSlides.length) {
    const shouldAutoplay = businessSlides.length > 1;
    window.Swiper = SwiperCtor;
    new SwiperCtor(businessCarousel, {
      loop: false,
      rewind: shouldAutoplay,
      initialSlide: shouldAutoplay ? 1 : 0,
      centeredSlides: true,
      slidesPerView: "auto",
      spaceBetween: 24,
      speed: 700,
      autoplay: shouldAutoplay
        ? {
            delay: 3500,
            disableOnInteraction: false,
            pauseOnMouseEnter: true
          }
        : false,
      breakpoints: {
        0: {
          spaceBetween: 14
        },
        768: {
          spaceBetween: 22
        },
        1024: {
          spaceBetween: 28
        }
      }
    });
  } else {
    initFallbackCarousel();
  }
});