<template>
  <q-page class="game-detail-page">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <div class="nav-container">
        <!-- Logo -->
        <div class="logo-section">
          <img src="/icons/logo.png" alt="Logo" class="logo" />
        </div>
        
        <!-- 导航菜单 -->
        <div class="nav-menu">
          <q-btn flat class="nav-item active">Home</q-btn>
          <q-btn flat class="nav-item">Games</q-btn>
          <q-btn flat class="nav-item">Blog</q-btn>
          <q-btn flat class="nav-item">Help Center</q-btn>
        </div>
        
        <!-- 右侧工具栏 -->
        <div class="nav-tools">
          <!-- 搜索按钮 -->
          <q-btn flat round icon="search" class="tool-btn" />
          <!-- 购物车按钮 -->
          <q-btn flat round class="tool-btn cart-btn">
            <q-icon name="shopping_cart" />
            <q-badge color="red" floating>1</q-badge>
          </q-btn>
          <!-- 语言和货币 -->
          <div class="currency-lang">$USD l EN</div>
          <!-- 用户头像 -->
          <div class="user-avatar">
            <q-avatar size="32px">
              <img src="/icons/avatar.png" alt="User" />
            </q-avatar>
          </div>
          <!-- 通知按钮 -->
          <q-btn flat round icon="notifications" class="tool-btn" />
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 游戏信息卡片 -->
      <div class="game-card">
        <div class="game-image">
          <img src="/images/genshin-impact.jpg" alt="Genshin Impact" />
        </div>
        <div class="game-info">
          <h2 class="game-title">Genshin Impact</h2>
          <div class="game-rating">
            <q-icon name="star" color="yellow" v-for="n in 5" :key="n" />
          </div>
        </div>
      </div>

      <!-- 表单区域 -->
      <div class="form-section">
        <div class="form-container">
          <!-- 错误提示 -->
          <div class="error-message" v-if="showError">
            Please fill out the information correctly
          </div>

          <!-- UID 输入 -->
          <div class="input-group">
            <label class="input-label">*UID</label>
            <q-input
              v-model="uid"
              outlined
              placeholder="Enter your UID"
              class="custom-input"
              :error="uidError"
            />
            <div class="field-error" v-if="uidError">UID is required</div>
          </div>

          <!-- 服务器区域选择 -->
          <div class="input-group">
            <label class="input-label">* Server Region</label>
            <q-select
              v-model="serverRegion"
              :options="serverOptions"
              outlined
              placeholder="Select server region"
              class="custom-input"
              :error="serverError"
            />
            <div class="field-error" v-if="serverError">Server Region is required</div>
          </div>

          <!-- 数量和价格区域 -->
          <div class="quantity-price-section">
            <div class="quantity-group">
              <label class="input-label">Quantity</label>
              <div class="quantity-selector">
                <q-btn flat round icon="remove" @click="decreaseQuantity" class="qty-btn" />
                <span class="quantity-value">{{ quantity }}</span>
                <q-btn flat round icon="add" @click="increaseQuantity" class="qty-btn" />
              </div>
            </div>
            
            <div class="price-group">
              <label class="input-label">Price</label>
              <div class="price-value">${{ totalPrice }}</div>
              <div class="savings-info">
                <q-icon name="local_offer" color="green" />
                Savings ${{ savings }}
              </div>
            </div>
          </div>

          <!-- 购买按钮 -->
          <q-btn
            class="buy-button"
            color="primary"
            size="lg"
            @click="handlePurchase"
          >
            Top-up Now
          </q-btn>

          <!-- 安全保障 -->
          <div class="security-section">
            <div class="security-icon">
              <q-icon name="security" color="blue" size="24px" />
            </div>
            <span class="security-text">Security assurance</span>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'

export default defineComponent({
  name: 'GameDetailPage',
  setup() {
    const uid = ref('')
    const serverRegion = ref(null)
    const quantity = ref(1)
    const basePrice = ref(36.80)
    const showError = ref(false)
    const uidError = ref(false)
    const serverError = ref(false)

    const serverOptions = [
      'Asia Server',
      'Europe Server',
      'America Server',
      'TW/HK/MO Server'
    ]

    const totalPrice = computed(() => {
      return (basePrice.value * quantity.value).toFixed(2)
    })

    const savings = computed(() => {
      return (54.98 * quantity.value).toFixed(2)
    })

    const increaseQuantity = () => {
      quantity.value++
    }

    const decreaseQuantity = () => {
      if (quantity.value > 1) {
        quantity.value--
      }
    }

    const handlePurchase = () => {
      // 验证表单
      uidError.value = !uid.value
      serverError.value = !serverRegion.value
      showError.value = uidError.value || serverError.value

      if (!showError.value) {
        // 处理购买逻辑
        console.log('Purchase:', {
          uid: uid.value,
          serverRegion: serverRegion.value,
          quantity: quantity.value,
          totalPrice: totalPrice.value
        })
      }
    }

    return {
      uid,
      serverRegion,
      quantity,
      serverOptions,
      totalPrice,
      savings,
      showError,
      uidError,
      serverError,
      increaseQuantity,
      decreaseQuantity,
      handlePurchase
    }
  }
})
</script>

<style scoped>
.game-detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 顶部导航栏样式 */
.top-nav {
  background: white;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 0;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.logo {
  height: 32px;
}

.nav-menu {
  display: flex;
  gap: 32px;
}

.nav-item {
  color: #666;
  font-weight: 500;
}

.nav-item.active {
  color: #1976d2;
  font-weight: 600;
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tool-btn {
  color: #666;
}

.cart-btn {
  position: relative;
}

.currency-lang {
  color: #666;
  font-size: 14px;
}

/* 主要内容区域 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 32px;
}

/* 游戏信息卡片 */
.game-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.game-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
}

.game-title {
  font-size: 24px;
  font-weight: 600;
  margin: 16px 0 8px 0;
  color: #333;
}

.game-rating {
  display: flex;
  gap: 4px;
}

/* 表单区域 */
.form-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: fit-content;
}

.error-message {
  background: #ffebee;
  color: #c62828;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.input-group {
  margin-bottom: 20px;
}

.input-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.custom-input {
  width: 100%;
}

.field-error {
  color: #c62828;
  font-size: 12px;
  margin-top: 4px;
}

/* 数量和价格区域 */
.quantity-price-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 12px;
}

.qty-btn {
  min-width: 32px;
  height: 32px;
}

.quantity-value {
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.price-value {
  font-size: 24px;
  font-weight: 600;
  color: #2e7d32;
  margin-bottom: 8px;
}

.savings-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #2e7d32;
  font-size: 14px;
  background: #e8f5e8;
  padding: 4px 8px;
  border-radius: 4px;
}

/* 购买按钮 */
.buy-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* 安全保障 */
.security-section {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  color: #666;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  
  .nav-container {
    padding: 0 16px;
  }
  
  .nav-menu {
    display: none;
  }
  
  .quantity-price-section {
    grid-template-columns: 1fr;
  }
}
</style>