<template>
  <header class="header-container">
    <!-- Logo -->
    <div class="logo-section">
      <NuxtLink :to="$localePath('/')" class="logo-link">
        <el-image
          class="website-logo"
          src="/jinshen-logo.png"
          alt="Jinshen Logo"
          fit="contain"
        />
      </NuxtLink>
    </div>

    <!-- 桌面菜单 -->
    <div class="header-menu-section">
      <!-- 导航菜单 -->
      <el-menu
        :default-active="activeName"
        class="header-menu"
        mode="horizontal"
        :ellipsis="false"
        :persistent="false"
        router
      >
        <el-menu-item index="products" :route="$localePath('/products')">
          <span class="title">{{ $t('navigation.products') }}</span>
        </el-menu-item>
        <el-menu-item index="solutions" :route="$localePath('/solutions')">
          <span class="title">{{ $t('navigation.solutions') }}</span>
        </el-menu-item>
        <el-menu-item index="support" :route="$localePath('/support')">
          <span class="title">{{ $t('navigation.support') }}</span>
        </el-menu-item>
        <el-menu-item index="about" :route="$localePath('/about')">
          <span class="title">{{ $t('navigation.about-us') }}</span>
        </el-menu-item>
      </el-menu>
    </div>

    <!-- 右侧功能区 -->
    <div class="header-actions">
      <el-link
        class="search-link"
        :underline="false"
        type="info"
        @click="navigateTo(localePath('/search'))"
      >
        <el-icon class="mdi mdi-magnify action-icon" />
      </el-link>

      <el-link
        class="hide-on-mobile"
        type="info"
        :underline="false"
        href="http://cal.jinshen.cn"
        target="_blank"
      >
        <el-icon class="mdi mdi-calculator action-icon" />
      </el-link>

      <el-dropdown class="hide-on-mobile" @command="setLocale">
        <el-link type="info" :underline="false">
          <el-icon class="mdi mdi-translate action-icon" />
        </el-link>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="zh">简体中文</el-dropdown-item>
            <el-dropdown-item command="en">English</el-dropdown-item>
            <el-dropdown-item command="es"
              >Español(Machine Translate)</el-dropdown-item
            >
            <el-dropdown-item command="ru"
              >Русский(Machine Translate)</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>

      <!-- 汉堡按钮（仅移动端显示） -->
      <el-link type="info" :underline="false">
        <el-icon
          class="mdi mdi-menu mobile-menu-button"
          @click="mobileMenuVisible = true"
        />
      </el-link>

      <!-- Drawer 抽屉菜单 -->
      <client-only>
        <el-drawer
          v-model="mobileMenuVisible"
          class="mobile-drawer"
          direction="rtl"
          size="70%"
        >
          <template #header>
            <div class="drawer-header">
              <h1>{{ $t('mobile-menu.title') }}</h1>
            </div>
          </template>
          <div>
            <h2>{{ $t('mobile-menu.navigation') }}</h2>
            <el-menu
              :default-active="activeName"
              class="mobile-menu"
              mode="vertical"
              router
              @select="mobileMenuVisible = false"
            >
              <el-menu-item index="products" :route="$localePath('/products')">
                {{ $t('navigation.products') }}
              </el-menu-item>
              <el-menu-item
                index="solutions"
                :route="$localePath('/solutions')"
              >
                {{ $t('navigation.solutions') }}
              </el-menu-item>
              <el-menu-item index="support" :route="$localePath('/support')">
                {{ $t('navigation.support') }}
              </el-menu-item>
              <el-menu-item index="about" :route="$localePath('/about')">
                {{ $t('navigation.about-us') }}
              </el-menu-item>
            </el-menu>

            <h2>{{ $t('mobile-menu.utilities') }}</h2>
            <el-menu
              :default-active="activeName"
              class="mobile-menu"
              mode="vertical"
              @select="mobileMenuVisible = false"
            >
              <el-menu-item @click="openExternalLink('http://cal.jinshen.cn')">
                {{ $t('navigation.calculator') }}
              </el-menu-item>
            </el-menu>
          </div>

          <template #footer>
            <el-dropdown @command="setLocale">
              <el-link type="info" :underline="false">
                <el-icon class="mdi mdi-translate mobile-menu-button" />
              </el-link>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="zh">简体中文</el-dropdown-item>
                  <el-dropdown-item command="en">English</el-dropdown-item>
                  <el-dropdown-item command="es"
                    >Español(Machine Translate)</el-dropdown-item
                  >
                  <el-dropdown-item command="ru"
                    >Русский(Machine Translate)</el-dropdown-item
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-drawer>
      </client-only>
    </div>
  </header>
</template>

<script setup lang="ts">
  const router = useRouter();
  const localePath = useLocalePath();

  const { setLocale } = useI18n();

  const activeName = ref<string | undefined>(undefined);
  const mobileMenuVisible = ref(false);

  const refreshMenu = () => {
    const path = router.currentRoute.value.path;
    if (path.startsWith('/products')) {
      activeName.value = 'products';
    } else if (path.startsWith('/solutions')) {
      activeName.value = 'solutions';
    } else if (path.startsWith('/support')) {
      activeName.value = 'support';
    } else if (path.startsWith('/about')) {
      activeName.value = 'about';
    } else {
      activeName.value = undefined; // 默认不激活任何菜单项
    }
  };

  const openExternalLink = (url: string) => {
    window.open(url, '_blank');
  };

  onMounted(() => {
    refreshMenu();
    // 监听路由变化以更新激活状态
    router.afterEach(() => {
      refreshMenu();
    });
  });
</script>

<style scoped>
  .header-container {
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 20px;
    border-bottom: 1px solid #e0e0e0;
  }

  .logo-section {
    display: flex;
    flex: 1;
    margin-left: 20px;
  }

  .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
  }

  .website-logo {
    height: 64px;
    width: auto;
  }

  .header-menu-section {
    flex: 2;
    display: flex;
    justify-content: center;
    height: 100%;
  }

  .header-menu {
    margin-right: 40px;
    border-bottom: none !important;
    width: auto;
    --el-menu-horizontal-height: 100%;
  }

  .header-menu .el-menu-item {
    font-size: 16px;
    background-color: transparent !important;
  }

  .header-menu .el-menu-item.is-active {
    border-bottom: 2.5px solid var(--el-color-primary-dark-2);
    color: var(--el-color-primary);
  }

  .header-menu .el-menu-item:hover {
    border-bottom: 2.5px solid var(--el-color-primary);
  }

  .header-actions {
    flex: 1;
    justify-content: flex-end;
    display: flex;
    gap: 16px;
  }

  .action-icon {
    font-size: 24px;
  }

  .mobile-menu-button {
    display: none; /* 默认隐藏汉堡按钮 */
  }

  .drawer-header {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.el-drawer__header) {
    margin-bottom: 0;
  }

  :deep(.el-drawer__body) {
    padding: 20px;
  }

  .mobile-drawer h1 {
    font-size: 24px;
    font-weight: bold;
  }

  .mobile-drawer h2 {
    font-size: 20px;
    margin-bottom: 16px;
    font-weight: bold;
  }

  .mobile-menu {
    border: none;
    margin-bottom: 24px;
  }

  .mobile-menu .el-menu-item {
    font-size: 16px;
    background-color: transparent !important;
  }

  .mobile-menu .el-menu-item.is-active {
    color: var(--el-color-primary);
  }

  .mobile-menu .el-menu-item:hover {
    color: var(--el-color-primary);
  }

  @media (max-width: 1024px) {
    .header-container {
      height: 70px;
      padding: 0 16px;
    }

    .website-logo {
      height: 48px;
    }

    .header-menu-section .header-menu .el-menu-item {
      font-size: 14px;
    }
  }

  @media (max-width: 768px) {
    .header-menu-section {
      display: none; /* 隐藏横向菜单 */
    }

    .hide-on-mobile {
      display: none; /* 隐藏部分图标 */
    }

    .header-actions {
      gap: 12px;
    }

    .mobile-menu-button {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      cursor: pointer;
    }
  }
</style>
