<script setup lang="ts">
const { t } = useI18n();
const mobileMenuOpen = useMobileMenuState();

const closeMenu = () => {
  mobileMenuOpen.value = false;
};

const handleKeydown = (event: KeyboardEvent) => {
  if (event.key === "Escape" && mobileMenuOpen.value) {
    closeMenu();
  }
};

const toggleBodyScroll = (disable: boolean) => {
  if (disable) {
    // Calculate scrollbar width to prevent layout shift
    const scrollbarWidth =
      window.innerWidth - document.documentElement.clientWidth;
    document.body.style.overflow = "hidden";
    document.body.style.paddingRight = `${scrollbarWidth}px`;
  } else {
    document.body.style.overflow = "";
    document.body.style.paddingRight = "";
  }
};

const onEnter = () => {
  toggleBodyScroll(true);
};

const onAfterLeave = () => {
  toggleBodyScroll(false);
};

onMounted(() => {
  document.addEventListener("keydown", handleKeydown);
});

onUnmounted(() => {
  document.removeEventListener("keydown", handleKeydown);
  toggleBodyScroll(false);
});

// Navigation links
const navigationLinks = [
  { to: "/", label: "home" },
  { to: "/our-projects", label: "navigationItems.ourProjects" },
  { to: "/testimonials", label: "testimonials" },
  // { to: "/blogs", label: "blogs" },
  { to: "/about", label: "about" },
  { to: "/join-us", label: "joinus" },
  { to: "/contact", label: "contact" },
];

// Services navigation items
const serviceItems = [
  {
    to: "/services/web-applications",
    label: "navigationItems.webApplications",
  },
  {
    to: "/services/mobile-applications",
    label: "navigationItems.mobileApplications",
  },
  // { to: "/services/digital-marketing", label: "navigationItems.digitalMarketing" },
];
</script>

<template>
  <!-- Mobile Menu -->
  <Transition
    enter-active-class="transition-transform duration-300 ease-in-out"
    enter-from-class="translate-y-[-100%]"
    enter-to-class="translate-y-0"
    leave-active-class="transition-transform duration-300 ease-in-out"
    leave-from-class="translate-y-0"
    leave-to-class="translate-y-[-100%]"
    @enter="onEnter"
    @after-leave="onAfterLeave"
  >
    <div
      v-if="mobileMenuOpen"
      class="bg-gradient-odd fixed inset-0 z-50 min-h-screen"
    >
      <div
        class="relative container mx-auto flex min-h-screen w-full flex-col px-4"
      >
        <div
          class="absolute start-1/2 top-0 hidden h-full -translate-x-1/2 md:block"
        >
          <SvgVerticalSeparator />
        </div>
        <!-- Mobile Menu Header -->
        <div class="flex items-center justify-between py-4">
          <SvgWebstdyLogo class="h-8 w-auto" />

          <div class="flex items-center gap-4">
            <div class="flex items-center gap-4 sm:hidden">
              <ColorModeSelector />
              <LanguageSwitcher />
            </div>

            <button
              class="cursor-pointer"
              aria-label="close icon"
              @click="closeMenu"
            >
              <SvgCloseIcon />
            </button>
          </div>
        </div>
        <SvgHorizontalSeparator />
        <!-- Mobile Menu Body -->
        <div
          class="ws-scrollbar max-h-[calc(100vh-8rem)] flex-grow overflow-y-auto md:flex md:justify-between"
        >
          <div class="ws-scrollbar flex flex-col overflow-y-auto py-4 md:w-1/2">
            <div class="flex flex-col gap-2">
              <!-- Navigation Links -->
              <template v-for="navLink in navigationLinks" :key="navLink.to">
                <NuxtLinkLocale
                  class="group"
                  :to="navLink.to"
                  @click="closeMenu"
                >
                  <span
                    class="text-[24px] font-bold opacity-25 group-[.router-link-active]:opacity-100 md:text-[48px] xl:text-[48px]"
                  >
                    {{ t(navLink.label) }}
                  </span>
                </NuxtLinkLocale>
              </template>
            </div>
          </div>
          <SvgHorizontalSeparator class="h-[2px] md:hidden" />

          <div class="flex flex-col justify-center gap-10 pe-4 pt-4 md:pt-0">
            <div class="flex flex-col gap-4">
              <span class="text-[24px] text-[#828888] md:text-[16px]">
                {{ t("navigationItems.services") }}
              </span>
              <template v-for="service in serviceItems" :key="service.to">
                <NuxtLinkLocale
                  class="group"
                  :to="service.to"
                  @click="closeMenu"
                >
                  <span
                    class="text-[20px] font-semibold opacity-25 group-[.router-link-active]:opacity-100"
                  >
                    {{ t(service.label) }}
                  </span>
                </NuxtLinkLocale>
              </template>
              <NuxtLinkLocale aria-label="contact us" to="/" @click="closeMenu">
                <Button
                  aria-label="contact us"
                  class="mt-4 mb-4 flex rounded-[24px] px-7 py-5 md:hidden"
                >
                  {{ t("startProject") }}
                </Button>
              </NuxtLinkLocale>
            </div>
          </div>
        </div>

        <SvgHorizontalSeparator />
        <!-- Mobile Menu Footer -->
        <div class="flex h-16 items-center">
          <!-- Mobile Menu Footer Content -->
          <p class="text-lg">{{ t("whereYouCreate") }}</p>
        </div>
      </div>
    </div>
  </Transition>
</template>
