<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '../stores/user'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()
const isAuthenticated = computed(() => userStore.isAuthenticated)

const goToAIAgent = () => {
  router.push('/ai-agent')
}

const goToAIFeed = () => {
  router.push('/ai-feed')
}
</script>

<template>
  <div class="home-view">
    <section class="hero-section">
      <div class="hero-content">
        <h1 class="hero-title"><span class="accent">AI Agent for Web3</span></h1>
        <p class="hero-subtitle">立刻加入，开启 Web3 + AI 新时代</p>
        <div class="hero-actions">
          <!-- 已登录状态显示两个功能入口 -->
          <template v-if="isAuthenticated">
            <div class="feature-buttons">
              <button @click="goToAIAgent" class="feature-button">
                <div class="feature-icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <path d="M12 2a10 10 0 1 0 10 10H12V2z"></path>
                    <path d="M12 2a10 10 0 0 1 10 10h-10V2z"></path>
                    <path d="M12 22v-10h10"></path>
                  </svg>
                </div>
                <div class="feature-content">
                  <h3>AI Agent</h3>
                  <p>VIP专属：智能 AI 助手</p>
                </div>
              </button>

              <button @click="goToAIFeed" class="feature-button">
                <div class="feature-icon">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  >
                    <line x1="12" y1="20" x2="12" y2="10"></line>
                    <line x1="18" y1="20" x2="18" y2="4"></line>
                    <line x1="6" y1="20" x2="6" y2="16"></line>
                  </svg>
                </div>
                <div class="feature-content">
                  <h3>AI行情分析</h3>
                  <p>专业市场行情分析，深度洞察趋势</p>
                </div>
              </button>
            </div>
          </template>

          <!-- 未登录状态显示登录和注册按钮 -->
          <template v-else>
            <router-link to="/login" class="btn btn-primary"> 登录 </router-link>
            <router-link to="/register" class="btn btn-secondary"> 注册 </router-link>
          </template>
        </div>

        <div class="discord-link">
          <a href="https://discord.gg/8vMDD4kC" target="_blank" class="discord-text">
            <svg class="discord-icon" viewBox="0 0 24 24" width="16" height="16">
              <path
                fill="currentColor"
                d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
              />
            </svg>
            加入Discord社区
          </a>
        </div>
      </div>
    </section>

    <!-- <section class="stats-section">
      <div class="stats-grid">
        <div class="stat-card card">
          <div class="stat-value">1000+</div>
          <div class="stat-label">会员人数</div>
        </div>
        <div class="stat-card card">
          <div class="stat-value">5000+</div>
          <div class="stat-label">Agent服务次数</div>
        </div>
        <div class="stat-card card">
          <div class="stat-value">99.9%</div>
          <div class="stat-label">正常运行时间</div>
        </div>
      </div>
    </section> -->
  </div>
</template>

<style scoped>
.home-view {
  width: 100%;
}

.hero-section {
  text-align: center;
  padding: 4rem 2rem;
  margin-bottom: 4rem;
  background-color: var(--color-bg-secondary);
  border-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 50%);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.accent {
  color: var(--color-accent);
  position: relative;
  display: inline-block;
}

.accent::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: var(--color-accent-light);
  z-index: -1;
  border-radius: 4px;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--color-text-secondary);
  max-width: 700px;
  margin: 0 auto 2.5rem;
}

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

.feature-buttons {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  max-width: 800px;
  justify-content: center;
}

.feature-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 280px;
  text-align: center;
}

.feature-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-color: #3355ff;
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background-color: rgba(51, 85, 255, 0.1);
  border-radius: 50%;
  margin-bottom: 1rem;
  color: #3355ff;
}

.feature-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: white;
}

.feature-content p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.discord-link {
  margin-top: 2rem;
}

.discord-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
  justify-content: center;
}

.discord-text:hover {
  color: var(--color-text-primary);
}

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

.btn {
  padding: 0.8rem 1.6rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  text-decoration: none;
}

.btn-primary {
  background-color: #3355ff;
  color: white;
  font-weight: var(--font-weight-bold);
}

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

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

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

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .feature-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .feature-button {
    width: 100%;
    max-width: 320px;
  }
}

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

  .hero-title {
    font-size: 2rem;
  }
}
</style>
