// Breakpoint desktop
const desktopQuery = window.matchMedia("(min-width: 1024px)")
const isDesktop = () => desktopQuery.matches

const applyInstaSpacing = (swiper, el) => {
  swiper.params.spaceBetween = 24
  swiper.originalParams.spaceBetween = 24
  swiper.update()
  el.dataset.spaceApplied = "true"
}

const setupInstaFeedSwiper = () => {
  document.querySelectorAll(".elementor-instagram-carousel").forEach((el) => {
    if (!el.swiper) return

    const swiper = el.swiper

    // Toujours réappliquer (resize = reset)
    applyInstaSpacing(swiper, el)

    // Hook Swiper resize (clé)
    if (!el.dataset.resizeBound) {
      swiper.on("resize", () => {
        applyInstaSpacing(swiper, el)
      })

      el.dataset.resizeBound = "true"
    }
  })
}

// Observer Elementor (re-init DOM)
const instaObserver = new MutationObserver(() => {
  setupInstaFeedSwiper()
})

instaObserver.observe(document.body, {
  childList: true,
  subtree: true,
})

// Init
document.addEventListener("DOMContentLoaded", () => {
  setupInstaFeedSwiper()
})

// ========== SETUP DESKTOP ==========
const setupDesktopSwipers = () => {
  if (!isDesktop()) return

  document.querySelectorAll(".swiper-products-carousel").forEach((el) => {
    if (!el.swiper || el.dataset.updated) return

    const swiper = el.swiper

    // Params Swiper desktop
    swiper.params.slidesPerView = "auto"
    swiper.params.spaceBetween = 20

    const pagination = el.querySelector(".swiper-pagination")

    if (!pagination) return

    // Création des flèches
    const prev = document.createElement("div")
    const next = document.createElement("div")

    prev.className =
      "swiper-button-prev swiper-button elementor-swiper-button elementor-swiper-button-prev"
    next.className =
      "swiper-button-next swiper-button elementor-swiper-button elementor-swiper-button-next"
    // Events Swiper
    prev.addEventListener("click", () => swiper.slidePrev())
    next.addEventListener("click", () => swiper.slideNext())

    // Injection dans la pagination
    pagination.prepend(prev)
    pagination.append(next)

    swiper.update()
    el.dataset.updated = "true"
  })
}

// ========== CLEANUP MOBILE ==========
const cleanupDesktopSwipers = () => {
  document.querySelectorAll(".swiper-products-carousel").forEach((el) => {
    if (!el.swiper || !el.dataset.updated) return

    const swiper = el.swiper

    // Reset params (valeurs sûres)
    swiper.params.slidesPerView = 1
    swiper.params.spaceBetween = 0
    swiper.params.speed = 800

    // Supprimer flèches injectées
    el.querySelectorAll(
      ".elementor-swiper-button-prev, .elementor-swiper-button-next"
    ).forEach((btn) => btn.remove())

    delete el.dataset.updated
    swiper.update()
  })
}

// ========== LISTENER BREAKPOINT ==========
desktopQuery.addEventListener("change", (e) => {
  if (e.matches) {
    setupDesktopSwipers()
  } else {
    cleanupDesktopSwipers()
  }
})

// ========== MUTATION OBSERVER ==========
const observer = new MutationObserver(() => {
  if (!isDesktop()) return
  setTimeout(() => {
    setupDesktopSwipers()
  }, 200)
})

observer.observe(document.body, { childList: true, subtree: true })

// ========== INIT ==========
if (isDesktop()) {
  setTimeout(() => {
    setupDesktopSwipers()
  }, 200)
}

// ========== POPUP VIDEO ========== //

const openPopup = document.getElementById("openPopup")
const popup = document.getElementById("popup")
const closePopup = document.getElementById("closePopup")
const video = document.getElementById("popupVideo")

if (openPopup) {
  openPopup.addEventListener("click", () => {
    popup.classList.add("active")
    video.currentTime = 0
    video.play()
  })
}

if (closePopup) {
  closePopup.addEventListener("click", closeVideo)
}

if (popup) {
  popup.addEventListener("click", (e) => {
    if (e.target === popup) {
      closeVideo()
    }
  })
}

function closeVideo() {
  popup.classList.remove("active")
  video.pause()
}

// ========== CUSTOM MENU ========== //

document.addEventListener("DOMContentLoaded", () => {
  const DESKTOP_BREAKPOINT = 1024

  const triggers = document.querySelectorAll("[data-submenu-target]")
  const submenus = document.querySelectorAll(".submenu")
  const mainMenu = document.querySelector(".main-menu")
  const mobileTrigger = document.querySelector(".menu-mobile-trigger")

  /* ===============================
     HELPERS
     =============================== */
  const openSubmenu = (submenu, trigger = null) => {
    if (!submenu) return

    submenu.classList.add("is-open")
    document.body.classList.add("submenu-open")

    if (trigger) trigger.setAttribute("aria-expanded", "true")
  }

  const closeAllSubmenus = () => {
    submenus.forEach((menu) => menu.classList.remove("is-open"))
    triggers.forEach((t) => t.setAttribute("aria-expanded", "false"))
    document.body.classList.remove("submenu-open")
  }

  const closeAllMenus = () => {
    closeAllSubmenus()
    if (mainMenu) mainMenu.classList.remove("is-open")
    const userActions = document.querySelector(".mobile-user-actions")
    if (userActions) userActions.classList.remove("show-menu-user-actions")
  }

  /* ===============================
     MOBILE MENU BUTTON
     =============================== */
  if (mobileTrigger && mainMenu) {
    const userActions = document.querySelector(".mobile-user-actions")

    mobileTrigger.addEventListener("click", (e) => {
      e.stopPropagation()
      const isOpen = mainMenu.classList.toggle("is-open") // toggle main-menu
      closeAllSubmenus()

      // Ajouter / retirer la classe show-menu-user-actions sur mobile-user-actions
      if (userActions) {
        if (isOpen) {
          userActions.classList.add("show-menu-user-actions")
        } else {
          userActions.classList.remove("show-menu-user-actions")
        }
      }
    })
  }

  /* ===============================
   MOBILE / TABLET SUBMENU CLICK
   =============================== */
  triggers.forEach((trigger) => {
    trigger.addEventListener("click", (e) => {
      if (window.innerWidth >= DESKTOP_BREAKPOINT) return

      e.preventDefault() // empêche le lien de s'ouvrir sur mobile
      e.stopPropagation() // empêche de déclencher le clic outside

      const submenu = document.querySelector(
        "." + trigger.dataset.submenuTarget
      )
      if (!submenu) return

      const isOpen = submenu.classList.contains("is-open")

      closeAllSubmenus() // ferme les autres sous-menus

      if (!isOpen) {
        openSubmenu(submenu, trigger) // ouvre seulement ce sous-menu
      }
    })
  })

  /* ===============================
     DESKTOP HOVER
     =============================== */
  triggers.forEach((trigger) => {
    const submenu = document.querySelector("." + trigger.dataset.submenuTarget)
    if (!submenu) return

    let hoverTimeout

    trigger.addEventListener("mouseenter", () => {
      if (window.innerWidth < DESKTOP_BREAKPOINT) return
      clearTimeout(hoverTimeout)
      openSubmenu(submenu, trigger)
    })

    trigger.addEventListener("mouseleave", () => {
      if (window.innerWidth < DESKTOP_BREAKPOINT) return
      hoverTimeout = setTimeout(closeAllSubmenus, 200)
    })

    submenu.addEventListener("mouseenter", () => {
      if (window.innerWidth < DESKTOP_BREAKPOINT) return
      clearTimeout(hoverTimeout)
    })

    submenu.addEventListener("mouseleave", () => {
      if (window.innerWidth < DESKTOP_BREAKPOINT) return
      hoverTimeout = setTimeout(closeAllSubmenus, 200)
    })
  })

  /* ===============================
     BOUTON RETOUR (MOBILE)
     =============================== */
  document.querySelectorAll(".submenu-back").forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.stopPropagation()
      closeAllSubmenus()
    })
  })

  /* ===============================
     CLIC EXTERIEUR (MOBILE + DESKTOP)
     =============================== */
  document.addEventListener("click", (e) => {
    // Si on clique à l'extérieur du menu principal et des sous-menus
    if (
      !e.target.closest(".main-menu") &&
      !e.target.closest(".submenu") &&
      !e.target.closest(".menu-mobile-trigger")
    ) {
      closeAllMenus()
    }
  })

  /* ===============================
     RESET AU RESIZE
     =============================== */
  let lastWidth = window.innerWidth

  window.addEventListener("resize", () => {
    const currentWidth = window.innerWidth

    if (
      (lastWidth < DESKTOP_BREAKPOINT && currentWidth >= DESKTOP_BREAKPOINT) ||
      (lastWidth >= DESKTOP_BREAKPOINT && currentWidth < DESKTOP_BREAKPOINT)
    ) {
      closeAllMenus()
    }

    lastWidth = currentWidth
  })
})

// document.getElementById("cart-toogle").addEventListener("click", function () {
//   document.querySelector("._desktop_blockcart-content").classList.toggle("show")
// })