<script setup lang="ts">
import { computed, ref, onMounted, watch } from 'vue'
import { useUserStore } from '../stores/user'
import { useThemeStore } from '../stores/theme'

const userStore = useUserStore()
const themeStore = useThemeStore()
const isAuthenticated = computed(() => userStore.isAuthenticated)
const isDarkTheme = computed(() => themeStore.isDarkTheme)

const emit = defineEmits(['openAuth'])

const openAuthModal = (mode: 'login' | 'register') => {
  emit('openAuth', mode)
}

// 切换主题并添加动画效果
const toggleTheme = () => {
  themeStore.toggleTheme()
}

onMounted(() => {
  // 确保组件挂载时主题已被正确应用
  document.documentElement.setAttribute('data-theme', themeStore.currentTheme)
})

// 监听主题变化更新UI
watch(
  () => themeStore.currentTheme,
  (newTheme) => {
    document.documentElement.setAttribute('data-theme', newTheme)
  },
)

// 平台信息相关
const apiBaseUrl =
  import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'

// 实际数据和显示数据分开管理
const platformInfo = ref({
  user_count: 0,
  question_count: 0,
})
// 用于动画显示的数据
const displayUserCount = ref(0)
const displayQuestionCount = ref(0)
const isLoading = ref(true)
const animationDuration = 1500 // 动画持续时间（毫秒）
const displayMultiplier = 8 // 显示数据的倍数

// 格式化数字显示 - 修改为直接显示完整数字
const formatNumber = (num: number): string => {
  // 将小数部分去除，只显示整数
  return Math.floor(num).toLocaleString('zh-CN')
}

// 开始数字动画
const animateNumbers = () => {
  const startTime = Date.now()
  const initialUserCount = 0
  const initialQuestionCount = 0
  // 显示数据乘以倍数
  const targetUserCount = platformInfo.value.user_count * displayMultiplier
  const targetQuestionCount = platformInfo.value.question_count * displayMultiplier

  // 使用requestAnimationFrame来实现平滑动画
  const updateNumbers = () => {
    const currentTime = Date.now()
    const elapsedTime = currentTime - startTime
    const progress = Math.min(elapsedTime / animationDuration, 1)

    // 使用缓动函数让动画更自然
    const easedProgress = easeOutCubic(progress)

    displayUserCount.value = initialUserCount + (targetUserCount - initialUserCount) * easedProgress
    displayQuestionCount.value =
      initialQuestionCount + (targetQuestionCount - initialQuestionCount) * easedProgress

    if (progress < 1) {
      requestAnimationFrame(updateNumbers)
    } else {
      // 确保最终显示精确的值
      displayUserCount.value = targetUserCount
      displayQuestionCount.value = targetQuestionCount
    }
  }

  updateNumbers()
}

// 缓动函数 - 慢速结束
const easeOutCubic = (x: number): number => {
  return 1 - Math.pow(1 - x, 3)
}

// 获取平台信息
const fetchPlatformInfo = async () => {
  try {
    isLoading.value = true
    const response = await fetch(`${apiBaseUrl}/platform/info`)
    if (response.ok) {
      platformInfo.value = await response.json()
      isLoading.value = false
      // 数据加载完成后启动动画
      animateNumbers()
    }
  } catch (error) {
    console.error('获取平台信息失败:', error)
    isLoading.value = false
  }
}

onMounted(() => {
  fetchPlatformInfo()
})
</script>

<template>
  <div class="home-view">
    <section class="hero-section">
      <!-- 主题切换按钮 -->
      <div class="theme-toggle">
        <button
          class="theme-toggle-button"
          @click="toggleTheme"
          :title="isDarkTheme ? '切换到浅色模式' : '切换到深色模式'"
        >
          <svg
            v-if="isDarkTheme"
            class="theme-icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <!-- 太阳图标 -->
            <circle cx="12" cy="12" r="5"></circle>
            <line x1="12" y1="1" x2="12" y2="3"></line>
            <line x1="12" y1="21" x2="12" y2="23"></line>
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
            <line x1="1" y1="12" x2="3" y2="12"></line>
            <line x1="21" y1="12" x2="23" y2="12"></line>
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
          </svg>
          <svg
            v-else
            class="theme-icon"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <!-- 月亮图标 -->
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
          </svg>
        </button>
      </div>

      <div class="hero-content">
        <h1 class="hero-title">
          <span class="accent">tradus</span>
          <span class="free-tag">测试版</span>
        </h1>
        <p class="hero-subtitle">基于AI大语言模型的投研智能体</p>

        <!-- 平台统计信息 - 只显示调用次数 -->
        <div class="platform-stats">
          <div class="stat-item">
            <div class="stat-value" :class="{ shimmer: isLoading }">
              <span v-if="isLoading">-</span>
              <span v-else class="animated-number">{{ formatNumber(displayQuestionCount) }}</span>
            </div>
            <div class="stat-label">智能体调用次数</div>
          </div>
        </div>

        <div class="hero-actions" v-if="!isAuthenticated">
          <button class="btn btn-primary" @click="openAuthModal('login')">登录</button>
          <button class="btn btn-secondary" @click="openAuthModal('register')">注册</button>
        </div>
        <div class="hero-actions" v-else>
          <RouterLink to="/ai-agents" class="btn btn-primary">开始使用</RouterLink>
        </div>
      </div>
    </section>

    <!-- 页面底部的DeepSeek大模型支持信息 -->
    <footer class="page-footer">
      <div class="deepseek-partnership">
        <div class="partnership-content">
          <span class="powered-text">由</span>
          <div class="deepseek-logo">
            <span class="deepseek-name">DeepSeek</span>
          </div>
          <span class="powered-text">大语言模型提供支持</span>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.home-view {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0));
}

.hero-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 2rem;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: radial-gradient(circle at top right, rgba(51, 85, 255, 0.03), transparent 70%); */
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.3rem;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  letter-spacing: -0.5px;
  display: inline-block;
  position: relative;
}

.accent {
  font-size: 3.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-accent) 0%, #2244ee 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--color-text-secondary);
  font-weight: 400;
  font-family:
    'SF Pro Display',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 auto 1rem;
}

/* 平台统计信息样式 */
.platform-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 2rem;
  max-width: 400px;
  padding: 1rem;
  border-radius: 12px;
  background-color: var(--color-bg-secondary);
}

.stat-item {
  text-align: center;
  padding: 0 1rem;
}

.stat-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
  line-height: 1;
  font-family:
    'SF Pro Display',
    -apple-system,
    sans-serif;
  min-height: 2.2rem; /* 防止高度变化导致布局跳动 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* 加载效果 */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 0%,
    rgba(51, 85, 255, 0.2) 50%,
    var(--color-bg-secondary) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.hero-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
}

.btn {
  padding: 1rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
}

.btn-primary {
  background-color: #3355ff;
  color: white;
  border: none;
  box-shadow: 0 4px 6px rgba(51, 85, 255, 0.1);
}

.btn-primary:hover {
  background-color: #2244ee;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(51, 85, 255, 0.2);
}

.btn-secondary {
  background-color: rgba(51, 85, 255, 0.1);
  color: #3355ff;
  border: none;
}

.btn-secondary:hover {
  background-color: rgba(51, 85, 255, 0.15);
  transform: translateY(-2px);
}

.discord-link {
  margin-top: 4rem;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.discord-link:hover {
  opacity: 1;
}

.discord-text {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #6c757d;
  text-decoration: none;
  font-size: 1rem;
  transition: all 0.3s ease;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background-color: rgba(108, 117, 125, 0.1);
}

.discord-text:hover {
  color: #3355ff;
  background-color: rgba(51, 85, 255, 0.1);
  transform: translateY(-1px);
}

.discord-icon {
  width: 20px;
  height: 20px;
}

.btn-wrapper {
  position: relative;
  display: inline-block;
}

.free-tag {
  position: absolute;
  top: -10px;
  right: -40px;
  background-color: #ff3355;
  color: white;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(255, 51, 85, 0.3);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.animated-number {
  display: inline-block;
  transition: transform 0.2s ease;
}

.animated-number:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .hero-section {
    padding: 4rem 1.5rem;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }

  .platform-stats {
    margin-bottom: 2rem;
  }

  .stat-value {
    font-size: 2.2rem;
  }

  .stat-label {
    font-size: 0.85rem;
  }

  .btn {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    min-width: 140px;
  }

  .home-view {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0));
  }

  .page-footer {
    padding: 0.8rem 0 3rem;
  }

  .partnership-content {
    padding: 0.3rem 0.8rem;
  }

  .powered-text {
    font-size: 0.75rem;
  }

  .deepseek-name {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .hero-section {
    padding: 3rem 1rem;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .hero-subtitle {
    font-size: 0.8rem;
    margin-bottom: 1.2rem;
  }

  .platform-stats {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
  }

  .stat-value {
    font-size: 2rem;
  }

  .stat-label {
    font-size: 0.8rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: 1rem;
  }

  .btn {
    width: 100%;
  }

  .btn-wrapper {
    width: 100%;
  }

  .free-tag {
    top: -8px;
    right: -30px;
    font-size: 0.6rem;
  }

  .home-view {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0));
  }

  .page-footer {
    padding: 0.8rem 0 4rem;
    bottom: env(safe-area-inset-bottom, 1.5rem);
  }

  .partnership-content {
    padding: 0.3rem 0.7rem;
    gap: 0.2rem;
  }

  .powered-text {
    font-size: 0.7rem;
  }

  .deepseek-name {
    font-size: 0.8rem;
  }

  .theme-toggle {
    top: 16px;
    right: 16px;
  }

  .theme-toggle-button {
    width: 32px;
    height: 32px;
    padding: 4px;
  }

  .theme-icon {
    width: 16px;
    height: 16px;
  }
}

/* 删除底部悬浮的模型支持信息样式 */
.model-support-footer {
  display: none;
}

/* 页面底部样式 */
.page-footer {
  width: 100%;
  position: absolute;
  bottom: env(safe-area-inset-bottom, 1rem);
  left: 0;
  right: 0;
  padding: 1rem 0 2rem;
  display: flex;
  justify-content: center;
  z-index: 10;
}

/* Deepseek合作信息样式 - 更小版本 */
.deepseek-partnership {
  display: flex;
  justify-content: center;
  align-items: center;
}

.partnership-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 1rem;
  background-color: rgba(0, 102, 255, 0.05);
  border: 1px solid rgba(0, 102, 255, 0.1);
  border-radius: 6px;
  gap: 0.3rem;
}

.powered-text {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.deepseek-logo {
  display: flex;
  align-items: center;
}

.deepseek-name {
  font-weight: 600;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #00aeff 0%, #0066ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* 主题切换按钮样式 */
.theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

.theme-toggle-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  transition: all 0.3s ease;
  width: 38px;
  height: 38px;
}

.theme-toggle-button:hover {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
}

.theme-icon {
  width: 20px;
  height: 20px;
}

/* 特殊的浏览器兼容处理 */
@supports (padding: max(0px)) {
  .home-view {
    padding-bottom: max(7rem, calc(4rem + env(safe-area-inset-bottom, 1.5rem)));
  }

  .page-footer {
    bottom: max(2rem, env(safe-area-inset-bottom, 2rem));
  }
}
</style>
