<script setup>
import { ref, reactive, onMounted, computed, nextTick, watch } from "vue";
import { useI18n } from "#imports";
import { useRouter, useRoute } from "#imports";
import { useLocalePath, useSwitchLocalePath } from "#i18n";

const { locale, t } = useI18n();
const router = useRouter();
const route = useRoute();
const localePath = useLocalePath();
const switchLocalePath = useSwitchLocalePath();

// 语言显示
const langToShow = computed(() => {
  switch (locale.value) {
    case "en":
      return "English";
    case "cn":
      return "中文";
    default:
      return "English";
  }
});

// 语言列表
const langList = ref([
  { name: "简体中文", code: "cn", checked: false },
  { name: "English", code: "en", checked: true },
]);

// 菜单数据
const menuItems = ref([
  {
    name: t("nav.home"),
    enName: "home",
    path: "/",
    active: false,
  },
  {
    name: t("nav.about"),
    enName: "about",
    path: "/about-us",
    active: false,
  },
  {
    name: t("nav.products"),
    enName: "products",
    path: "/product",
    active: false,
  },
  {
    name: t("nav.contact"),
    enName: "contact",
    path: "/contact-us",
    active: false,
  },
]);

// 监听语言变化，更新菜单名称
watch(() => locale.value, () => {
  menuItems.value.forEach(item => {
    switch (item.enName) {
      case "home":
        item.name = t("nav.home");
        break;
      case "about":
        item.name = t("nav.about");
        break;
      case "products":
        item.name = t("nav.products");
        break;
      case "contact":
        item.name = t("nav.contact");
        break;
    }
  });
}, { immediate: true });

// 移动端菜单控制
const isMobileMenuOpen = ref(false);
const langPopup = ref(false);

// 语言切换
const chooseLanguage = (lang) => {
  if (lang.code === locale.value) {
    langPopup.value = false;
    return;
  }

  // 获取目标路径并跳转
  const targetPath = switchLocalePath(lang.code);
  router.replace(targetPath);
  
  langPopup.value = false;
};

// 菜单点击
const handleMenuClick = (item) => {
  // 使用 localePath 获取当前语言环境下的正确路径
  const targetPath = localePath(item.path);
  
  // 跳转到正确的路径
  router.push(targetPath);
  isMobileMenuOpen.value = false;
};

// 设置当前活跃菜单
const setActiveMenu = () => {
  const currentPath = route.path;
  // 重置所有状态
  menuItems.value.forEach((item) => {
    item.active = false;
  });

  // 根据路径设置激活状态
  if (currentPath === "/" || currentPath === "/cn") {
    const homeItem = menuItems.value.find((item) => item.enName === "home");
    if (homeItem) {
      homeItem.active = true;
    }
  } else if (currentPath.includes("/about-us")) {
    const aboutItem = menuItems.value.find((item) => item.enName === "about");
    if (aboutItem) {
      aboutItem.active = true;
    }
  } else if (currentPath.includes("/product")) {
    const productItem = menuItems.value.find((item) => item.enName === "products");
    if (productItem) {
      productItem.active = true;
    }
  } else if (currentPath.includes("/contact-us")) {
    const contactItem = menuItems.value.find((item) => item.enName === "contact");
    if (contactItem) {
      contactItem.active = true;
    }
  }
};

// 切换移动端菜单
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
};

// 处理logo点击
const handleLogoClick = () => {
  // 使用 localePath 获取当前语言环境下的首页路径
  const homePath = localePath("/");
  router.push(homePath);
  menuItems.value.forEach((menu) => {
    menu.active = menu.enName === "home";
  });
  isMobileMenuOpen.value = false;
};

onMounted(() => {
  // 更新语言列表选中状态
  langList.value.forEach((item) => {
    item.checked = item.code === locale.value;
  });

  // 确保在下一个 tick 中设置激活菜单
  nextTick(() => {
    setActiveMenu();
  });
});

// 监听路由变化，更新激活状态
watch(
  () => route.path,
  (newPath) => {
    setTimeout(() => {
      setActiveMenu();
    }, 50);
  },
  { immediate: true }
);
</script>

<template>
  <ClientOnly>
    <header class="navbar">
      <div class="navbar-container">
        <!-- Logo -->
        <div class="navbar-logo" @click="handleLogoClick">
          <img src="/logo.png" alt="明阳良光" class="logo-image" />
        </div>

        <!-- 右侧区域：菜单+语言切换 -->
        <div class="navbar-right">
          <!-- 桌面端菜单 -->
          <nav class="navbar-menu desktop-menu">
            <ul class="menu-list">
              <li
                v-for="item in menuItems"
                :key="item.enName"
                class="menu-item"
                :class="{ active: item.active }"
                @click="handleMenuClick(item)"
              >
                {{ item.name }}
              </li>
            </ul>
          </nav>

          <!-- 语言切换和移动端按钮 -->
          <div class="navbar-actions">
            <!-- 语言切换 -->
            <div class="language-selector" @click="langPopup = !langPopup">
              <img
                class="lang-earth-icon"
                src="/static/home/earch.png"
                :alt="langToShow"
                :title="langToShow"
              />
              <span class="lang-text">{{ langToShow }}</span>
              <svg
                class="lang-icon"
                :class="{ rotate: langPopup }"
                width="12"
                height="12"
                viewBox="0 0 12 12"
              >
                <path
                  d="M2 4l4 4 4-4"
                  stroke="currentColor"
                  stroke-width="2"
                  fill="none"
                />
              </svg>

              <!-- 语言下拉菜单 -->
              <div class="lang-dropdown" v-show="langPopup">
                <div
                  v-for="lang in langList"
                  :key="lang.code"
                  class="lang-option"
                  :class="{ active: lang.checked }"
                  @click.stop="chooseLanguage(lang)"
                >
                  {{ lang.name }}
                </div>
              </div>
            </div>

            <!-- 移动端菜单按钮 -->
            <button class="mobile-menu-btn" @click="toggleMobileMenu">
              <span
                class="hamburger-line"
                :class="{ active: isMobileMenuOpen }"
              ></span>
              <span
                class="hamburger-line"
                :class="{ active: isMobileMenuOpen }"
              ></span>
              <span
                class="hamburger-line"
                :class="{ active: isMobileMenuOpen }"
              ></span>
            </button>
          </div>
        </div>
      </div>

      <!-- 移动端菜单 -->
      <div class="mobile-menu" :class="{ open: isMobileMenuOpen }">
        <ul class="mobile-menu-list">
          <li
            v-for="item in menuItems"
            :key="item.enName"
            class="mobile-menu-item"
            :class="{ active: item.active }"
            @click="handleMenuClick(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <!-- 移动端背景遮罩 -->
      <div
        class="mobile-overlay"
        :class="{ show: isMobileMenuOpen }"
        @click="isMobileMenuOpen = false"
      ></div>
    </header>
  </ClientOnly>
</template>

<style lang="scss" scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e0e0e0;
  z-index: 1000;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  &-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 50px;
    gap: 60px;

    @media (max-width: 768px) {
      padding: 0 20px;
      height: 50px;
      gap: 30px;
    }
  }

  &-logo {
    cursor: pointer;
    transition: transform 0.2s ease;

    &:hover {
      transform: scale(1.02);
    }

    .logo-image {
      height: 36px;
      width: auto;
      object-fit: contain;

      @media (max-width: 768px) {
        height: 32px;
      }
    }
  }

  &-right {
    display: flex;
    align-items: center;
    gap: 40px;
  }

  &-menu {
    &.desktop-menu {
      @media (max-width: 768px) {
        display: none;
      }
    }
  }

  &-actions {
    display: flex;
    align-items: center;
    gap: 20px;

    @media (max-width: 768px) {
      gap: 16px;
    }
  }
}

// 菜单样式
.menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
  align-items: center;
}

.menu-item {
  position: relative;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;

  // 下划线样式
  &::after {
    content: "";
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #000000;
    transition: all 0.3s ease;
  }

  &:hover {
    color: #000000;
    
    &::after {
      width: 30px;
    }
  }

  &.active {
    color: #000000;
    font-weight: 600;

    // 激活时显示下划线
    &::after {
      width: 25px;
    }
  }

  @media (max-width: 1024px) {
    padding: 14px 16px;
    font-size: 14px;
  }

  @media (max-width: 768px) {
    padding: 12px 14px;
    font-size: 13px;
  }
}

// 语言选择器
.language-selector {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1001;

  &:hover {
    background: rgba(0, 0, 0, 0.02);
  }

  .lang-earth-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0.6);
  }

  .lang-text {
    font-size: 15px;
    color: #333333;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .lang-icon {
    color: #666666;
    transition: transform 0.3s ease;
    pointer-events: none;
    width: 12px;
    height: 12px;

    &.rotate {
      transform: rotate(180deg);
    }
  }

  @media (max-width: 768px) {
    padding: 8px 12px;
    gap: 6px;

    .lang-earth-icon {
      width: 16px;
      height: 16px;
    }

    .lang-text {
      font-size: 14px;
    }
  }
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  min-width: 140px;
  z-index: 1002;
}

.lang-option {
  padding: 10px 14px;
  font-size: 12px;
  color: #000000;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #000000;
  }

  &.active {
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    font-weight: 600;
  }
}

// 移动端菜单按钮
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;

  @media (max-width: 768px) {
    display: flex;
  }

  .hamburger-line {
    width: 20px;
    height: 2px;
    background: #000000;
    border-radius: 1px;
    transition: all 0.3s ease;
    margin: 2px 0;

    &:nth-child(1).active {
      transform: rotate(45deg) translate(5px, 5px);
    }

    &:nth-child(2).active {
      opacity: 0;
    }

    &:nth-child(3).active {
      transform: rotate(-45deg) translate(7px, -6px);
    }
  }
}

// 移动端菜单
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;

  &.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  &-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  &-item {
    padding: 16px 20px;
    font-size: 16px;
    color: #000000;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(0, 0, 0, 0.04);
      color: #000000;
    }

    &.active {
      color: #000000;
      background: rgba(0, 0, 0, 0.06);
    }

    &:last-child {
      border-bottom: none;
    }
  }
}

// 移动端背景遮罩
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: -1;

  &.show {
    opacity: 1;
    visibility: visible;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .navbar {
    &-container {
      .logo-image {
        height: 34px;
      }
    }
  }
}
</style>
