<template>
  <div class="welcome-header">
    <div class="header-content">
      <img src="/logo.svg" alt="LinkMed" class="logo" />
      <h1 class="greeting">{{ currentGreeting }}</h1>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted } from "vue";
import { useI18n } from "vue-i18n";

const { locale } = useI18n();

const currentGreeting = ref("");

const greetings = {
  zh: [
    "今天又有什么灵感呢?",
    "有什么想聊的吗?",
    "告诉我你的想法吧!",
    "今天想探索什么?",
    "有什么问题需要帮助吗?",
    "让我们一起创造吧!",
    "今天有什么新发现?",
    "有什么想分享的吗?",
    "让我们开始对话吧!",
    "今天想学习什么?",
    "有什么想法要讨论吗?",
    "让我们一起思考吧!",
    "今天有什么计划?",
    "有什么需要我帮忙的吗?",
    "让我们开始探索吧!",
    "今天想了解什么?",
    "有什么问题想问吗?",
    "让我们一起成长吧!",
    "今天有什么目标?",
    "有什么想法要表达吗?",
  ],
  en: [
    "What inspiration do you have today?",
    "What would you like to chat about?",
    "Tell me your thoughts!",
    "What would you like to explore today?",
    "Is there anything I can help you with?",
    "Let's create something together!",
    "What new discoveries today?",
    "Anything you'd like to share?",
    "Let's start a conversation!",
    "What would you like to learn today?",
    "Any ideas you'd like to discuss?",
    "Let's think together!",
    "What are your plans for today?",
    "Is there anything I can assist you with?",
    "Let's start exploring!",
    "What would you like to know today?",
    "Any questions you'd like to ask?",
    "Let's grow together!",
    "What are your goals today?",
    "Any thoughts you'd like to express?",
  ],
};

const currentLanguage = computed(() => {
  if (locale.value === "en-US") return "en";
  if (locale.value === "zh-CN") return "zh";
  return "zh"; // 默认返回中文
});

const setRandomGreeting = () => {
  const language = currentLanguage.value;
  const greetingList = greetings[language] || greetings.zh;
  const randomIndex = Math.floor(Math.random() * greetingList.length);
  currentGreeting.value = greetingList[randomIndex] || greetingList[0] || "";
};

// 监听语言变化
watch(currentLanguage, () => {
  setRandomGreeting();
});

onMounted(() => {
  setRandomGreeting();
});
</script>

<style scoped>
.welcome-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.logo {
  width: 100px; /* 减小尺寸，减少像素化 */
  height: auto;
  object-fit: contain;
  margin-bottom: 20px;
  transition: all 0.3s ease;
  /* 针对低分辨率图片的优化 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* 添加轻微锐化效果 */
  filter: contrast(1.1) brightness(1.05);
  /* 确保高质量渲染 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 防止图片模糊 */
  backface-visibility: hidden;
  transform: translateZ(0);
  /* 添加轻微阴影增强视觉效果 */
  filter: contrast(1.1) brightness(1.05)
    drop-shadow(0 2px 8px rgba(51, 153, 255, 0.2));
}

.logo:hover {
  transform: scale(1.05) translateZ(0);
  /* 悬停时增强效果 */
  filter: contrast(1.2) brightness(1.1)
    drop-shadow(0 4px 12px rgba(51, 153, 255, 0.3));
}

.greeting {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text, #eee);
  margin: 0;
  line-height: 1.2;
  transition: all 0.3s ease;
}

/* 移除主题相关的logo过滤器，保持原始清晰度 */
/* 深色主题 */
.theme-dark .logo {
  filter: none;
}

/* 浅色主题 */
.theme-light .logo {
  filter: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    padding: 20px;
  }

  .logo {
    width: 80px; /* 平板端更小尺寸 */
  }

  .greeting {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .header-content {
    padding: 15px;
  }

  .logo {
    width: 60px; /* 手机端更小尺寸 */
  }

  .greeting {
    font-size: 1.2rem;
  }
}
</style>