<template>
  <button class="language-switcher" @click="toggleLanguage" :title="currentLanguage === 'zh' ? $t('langSwitcher.switchToEn') : $t('langSwitcher.switchToZh')">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
      <path d="M4.16602 12.4998V14.1665C4.16602 15.0452 4.84592 15.765 5.7083 15.8286L5.83268 15.8332H8.33268V17.4998H5.83268C3.99173 17.4998 2.49935 16.0074 2.49935 14.1665V12.4998H4.16602ZM14.9993 8.33317L18.666 17.4998H16.8702L15.8694 14.9998H12.461L11.4618 17.4998H9.66685L13.3327 8.33317H14.9993ZM14.166 10.7375L13.1268 13.3332H15.2035L14.166 10.7375ZM6.66602 1.6665V3.33317H9.99935V9.1665H6.66602V11.6665H4.99935V9.1665H1.66602V3.33317H4.99935V1.6665H6.66602ZM14.166 2.49984C16.0069 2.49984 17.4993 3.99222 17.4993 5.83317V7.49984H15.8327V5.83317C15.8327 4.9127 15.0865 4.1665 14.166 4.1665H11.666V2.49984H14.166ZM4.99935 4.99984H3.33268V7.49984H4.99935V4.99984ZM8.33268 4.99984H6.66602V7.49984H8.33268V4.99984Z" fill="currentColor"/>
    </svg>
    <span class="lang-text">{{ currentLanguage === 'zh' ? '中' : 'EN' }}</span>
  </button>
</template>

<script setup>
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const currentLanguage = computed(() => locale.value)

const toggleLanguage = () => {
  console.log('[LanguageSwitcher] 当前语言:', locale.value)

  // 切换语言
  const newLang = locale.value === 'zh' ? 'en' : 'zh'
  console.log('[LanguageSwitcher] 切换到:', newLang)

  // 直接更新 locale（响应式切换）
  locale.value = newLang

  // 保存到 localStorage 以便下次刷新时使用
  localStorage.setItem('language', newLang)
  console.log('[LanguageSwitcher] localStorage 已保存:', localStorage.getItem('language'))
  console.log('[LanguageSwitcher] 语言切换完成（无刷新）')
}
</script>

<style scoped>
.language-switcher {
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: var(--bg-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-secondary);
}

.language-switcher:hover {
  background: var(--bg-active);
  transform: scale(1.05);
}

.language-switcher:active {
  transform: scale(0.95);
}

.language-switcher svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.lang-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
}
</style>
