<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <q-page class="bg-grey-2 sd-page-padding" name="ChargePage">
    <!-- 主要内容容器 -->
    <div class="row q-col-gutter-lg q-py-lg">
      <!-- 左侧内容区域 -->
      <div class="col-12 col-md-8">
        <!-- 顶部商品信息 -->
        <q-card class="q-mb-lg" flat bordered>
          <div class="row">
            <!-- 游戏封面 -->
            <div class="col-12 col-sm-4">
              <q-img src="https://via.placeholder.com/300x200/1976d2/ffffff?text=Genshin+Impact" class="rounded-borders"
                style="height: 200px" />
            </div>
            <!-- 游戏信息 -->
            <div class="col-12 col-sm-8 q-pa-md">
              <div class="text-h4 text-weight-bold q-mb-sm">Genshin Impact</div>
              <div class="row items-center q-mb-sm">
                <q-rating v-model="gameRating" readonly size="sm" color="yellow" icon="star" class="q-mr-sm" />
                <span class="text-grey-6">(4.8)</span>
              </div>
              <div class="text-body2 text-grey-7 q-mb-md">
                开放世界冒险RPG游戏，探索提瓦特大陆的奇幻世界
              </div>
              <div class="row items-center">
                <q-chip color="primary" text-color="white" size="sm" class="q-mr-sm">
                  RPG
                </q-chip>
                <q-chip color="secondary" text-color="white" size="sm" class="q-mr-sm">
                  开放世界
                </q-chip>
                <q-chip color="accent" text-color="white" size="sm">
                  冒险
                </q-chip>
              </div>
            </div>
          </div>
        </q-card>

        <!-- Banner 区域 -->
        <q-card class="q-mb-lg" flat bordered>
          <q-card-section class="bg-gradient-primary text-white text-center">
            <div class="text-h6 q-mb-sm">🎉 限时优惠活动</div>
            <div class="text-body2">充值满100元即可获得额外20%奖励！</div>
          </q-card-section>
        </q-card>

        <!-- 商品规格选择 -->
        <q-card class="q-mb-lg" flat bordered>
          <q-card-section>
            <div class="text-h6 q-mb-md">选择充值规格</div>
            <div class="row q-col-gutter-md">
              <div v-for="spec in productSpecs" :key="spec.id" class="col-6 col-sm-4 col-md-3">
                <q-card :class="[
                  'cursor-pointer transition-all',
                  selectedSpec === spec.id ? 'bg-primary text-white' : 'bg-grey-1'
                ]" @click="selectedSpec = spec.id" bordered>
                  <q-card-section class="text-center q-pa-md">
                    <div class="text-h6 q-mb-xs">{{ spec.amount }}</div>
                    <div class="text-caption">{{ spec.bonus }}</div>
                    <div class="text-weight-bold q-mt-sm">${{ spec.price }}</div>
                  </q-card-section>
                </q-card>
              </div>
            </div>
          </q-card-section>
        </q-card>

        <!-- 商品详情 -->
        <q-card class="q-mb-lg" flat bordered>
          <q-card-section>
            <div class="text-h6 q-mb-md">商品详情</div>
            <q-tabs v-model="detailTab" class="text-grey-7" active-color="primary">
              <q-tab name="description" label="商品描述" />
              <q-tab name="rules" label="充值规则" />
              <q-tab name="faq" label="常见问题" />
            </q-tabs>
            <q-separator />
            <q-tab-panels v-model="detailTab" animated>
              <q-tab-panel name="description" class="q-pa-md">
                <div class="text-body2 text-grey-8">
                  <p>原神是一款开放世界冒险RPG游戏，玩家将在这个被称作「提瓦特」的幻想世界中，自由旅行、结识同伴、寻找掌控尘世元素的七神，直到与分离的血亲重聚。</p>
                  <p>游戏内货币可用于：</p>
                  <ul>
                    <li>抽取角色和武器</li>
                    <li>购买体力和材料</li>
                    <li>解锁更多游戏内容</li>
                  </ul>
                </div>
              </q-tab-panel>
              <q-tab-panel name="rules" class="q-pa-md">
                <div class="text-body2 text-grey-8">
                  <p><strong>充值规则：</strong></p>
                  <ul>
                    <li>充值后1-5分钟内到账</li>
                    <li>请确保UID和服务器信息正确</li>
                    <li>充值前请确认游戏账号状态正常</li>
                    <li>如遇问题请联系客服</li>
                  </ul>
                </div>
              </q-tab-panel>
              <q-tab-panel name="faq" class="q-pa-md">
                <div class="text-body2 text-grey-8">
                  <p><strong>Q: 充值多久能到账？</strong></p>
                  <p>A: 通常1-5分钟内到账，如超时请联系客服。</p>
                  <p><strong>Q: 充值失败怎么办？</strong></p>
                  <p>A: 请检查UID和服务器信息是否正确，或联系客服处理。</p>
                </div>
              </q-tab-panel>
            </q-tab-panels>
          </q-card-section>
        </q-card>

        <!-- 用户评论区域 -->
        <q-card flat bordered>
          <q-card-section>
            <div class="text-h6 q-mb-lg">User Reviews</div>

            <!-- 评分统计 -->
            <div class="row q-col-gutter-lg q-mb-lg">
              <!-- 左侧总评分 -->
              <div class="col-12 col-md-4">
                <div class="text-center">
                  <div class="text-h3 text-weight-bold q-mb-sm">5.0</div>
                  <q-rating v-model="overallRating" readonly size="md" color="yellow" icon="star" class="q-mb-sm" />
                  <div class="text-body2 text-grey-6">User Reviews: 32,926</div>
                </div>
              </div>

              <!-- 右侧星级分布 -->
              <div class="col-12 col-md-8">
                <div class="q-gutter-sm">
                  <div v-for="(rating, index) in ratingDistribution" :key="index" class="row items-center no-wrap">
                    <div class="text-body2 text-grey-7 q-mr-md" style="min-width: 60px">
                      {{ 5 - index }} stars
                    </div>
                    <div class="col">
                      <q-linear-progress :value="rating.percentage / 100" :color="rating.color" size="8px" rounded
                        class="q-mr-md" />
                    </div>
                    <div class="text-body2 text-grey-7" style="min-width: 40px">
                      {{ rating.percentage }}%
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <q-separator class="q-mb-lg" />

            <!-- 用户评论列表 -->
            <div class="q-gutter-lg">
              <div v-for="review in userReviews" :key="review.id" class="review-item">
                <div class="row q-col-gutter-md">
                  <!-- 用户头像 -->
                  <div class="col-auto">
                    <q-avatar size="48px">
                      <img :src="review.avatar" :alt="review.username" />
                    </q-avatar>
                  </div>

                  <!-- 评论内容 -->
                  <div class="col">
                    <div class="row items-center q-mb-xs">
                      <div class="text-subtitle2 text-weight-medium q-mr-md">
                        {{ review.username }}
                      </div>
                      <q-rating :model-value="review.rating" readonly size="sm" color="yellow" icon="star"
                        class="q-mr-md" />
                      <div class="text-caption text-grey-6">
                        {{ review.date }}
                      </div>
                    </div>

                    <div class="text-caption text-grey-6 q-mb-sm">
                      {{ review.purchaseInfo }}
                    </div>

                    <div class="text-body2 text-grey-8">
                      {{ review.comment }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 查看更多按钮 -->
            <div class="text-center q-mt-lg">
              <q-btn outline color="primary" label="查看更多评论" @click="loadMoreReviews" :loading="loadingReviews" />
            </div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 右侧下单组件 -->
      <div class="col-12 col-md-4">
        <q-card class="sticky-top" flat bordered>
          <q-card-section>
            <div class="text-h6 q-mb-md">立即充值</div>

            <!-- 错误提示 -->
            <q-banner v-if="showError" class="bg-negative text-white q-mb-md" rounded>
              <template v-slot:avatar>
                <q-icon name="warning" />
              </template>
              请正确填写信息
            </q-banner>

            <!-- UID 输入 -->
            <div class="q-mb-md">
              <q-input v-model="uid" label="*UID" outlined placeholder="请输入游戏UID" :error="uidError"
                error-message="UID是必填项" />
            </div>

            <!-- 服务器选择 -->
            <div class="q-mb-md">
              <q-select v-model="serverRegion" :options="serverOptions" label="*服务器区域" outlined placeholder="请选择服务器"
                :error="serverError" error-message="服务器区域是必填项" />
            </div>

            <!-- 数量和价格 -->
            <div class="row q-col-gutter-md q-mb-md">
              <div class="col-6">
                <div class="text-caption text-grey-7 q-mb-xs">数量</div>
                <div class="row items-center no-wrap">
                  <q-btn flat round icon="remove" size="sm" @click="decreaseQuantity" :disable="quantity <= 1" />
                  <div class="text-h6 q-mx-md">{{ quantity }}</div>
                  <q-btn flat round icon="add" size="sm" @click="increaseQuantity" />
                </div>
              </div>
              <div class="col-6">
                <div class="text-caption text-grey-7 q-mb-xs">价格</div>
                <div class="text-h5 text-green text-weight-bold">${{ totalPrice }}</div>
                <div class="text-caption text-green">
                  <q-icon name="local_offer" size="xs" class="q-mr-xs" />
                  节省 ${{ savings }}
                </div>
              </div>
            </div>

            <!-- 购买按钮 -->
            <q-btn color="primary" size="lg" class="full-width q-mb-md" @click="handlePurchase" :loading="purchasing">
              立即充值
            </q-btn>

            <!-- 安全保障 -->
            <div class="row items-center justify-center text-grey-6">
              <q-icon name="security" size="sm" class="q-mr-xs" />
              <span class="text-caption">安全保障</span>
            </div>
          </q-card-section>
        </q-card>
      </div>

      <!-- 支付方式和语言选择区块 -->
      <div class="col-12 q-mt-lg">
        <FooterComponent />
      </div>

    </div>
  </q-page>
</template>

<script setup>
import { ref, computed } from 'vue'
import FooterComponent from 'src/components/FooterComponent.vue'


// 定义组件名称
defineOptions({
  name: 'ChargePage'
})

// 响应式数据
const gameRating = ref(5)
const selectedSpec = ref(1)
const detailTab = ref('description')
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 purchasing = ref(false)
const loadingReviews = ref(false)
const overallRating = ref(5)

// 商品规格数据
const productSpecs = ref([
  { id: 1, amount: '60 原石', bonus: '+首充双倍', price: '0.99' },
  { id: 2, amount: '300 原石', bonus: '+30 原石', price: '4.99' },
  { id: 3, amount: '980 原石', bonus: '+110 原石', price: '14.99' },
  { id: 4, amount: '1980 原石', bonus: '+260 原石', price: '29.99' },
  { id: 5, amount: '3280 原石', bonus: '+600 原石', price: '49.99' },
  { id: 6, amount: '6480 原石', bonus: '+1600 原石', price: '99.99' }
])

// 服务器选项
const serverOptions = [
  '天空岛',
  '世界树',
  '美服',
  '欧服',
  '亚服',
  '港澳台服'
]

// 评分分布数据 (在模板中的星级分布部分使用)
const ratingDistribution = ref([
  { percentage: 90, color: 'green' },
  { percentage: 10, color: 'light-green' },
  { percentage: 0, color: 'grey-4' },
  { percentage: 0, color: 'grey-4' },
  { percentage: 0, color: 'grey-4' }
])

// 用户评论数据
const userReviews = ref([
  {
    id: 1,
    username: 'Defu Ding',
    rating: 5,
    date: 'Feb 28, 2025',
    purchaseInfo: 'Purchased 1980+260 Genesis Crystal',
    comment: 'that was too quick i like this wesite,that was too quick i like this wesite,that was too quick i like this wesite',
    avatar: 'https://via.placeholder.com/48x48/1976d2/ffffff?text=D'
  },
  {
    id: 2,
    username: 'Alex Chen',
    rating: 5,
    date: 'Feb 27, 2025',
    purchaseInfo: 'Purchased 980+110 Genesis Crystal',
    comment: 'Fast delivery and great service! Highly recommended for all Genshin Impact players.',
    avatar: 'https://via.placeholder.com/48x48/2196f3/ffffff?text=A'
  },
  {
    id: 3,
    username: 'Sarah Kim',
    rating: 4,
    date: 'Feb 26, 2025',
    purchaseInfo: 'Purchased 3280+600 Genesis Crystal',
    comment: 'Good experience overall. The crystals arrived quickly and the process was smooth.',
    avatar: 'https://via.placeholder.com/48x48/9c27b0/ffffff?text=S'
  }
])

// 计算属性
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 = async () => {
  // 表单验证
  uidError.value = !uid.value
  serverError.value = !serverRegion.value
  showError.value = uidError.value || serverError.value

  if (!showError.value) {
    purchasing.value = true
    try {
      // 模拟购买请求
      await new Promise(resolve => setTimeout(resolve, 2000))
      console.log('Purchase:', {
        uid: uid.value,
        serverRegion: serverRegion.value,
        quantity: quantity.value,
        totalPrice: totalPrice.value,
        selectedSpec: selectedSpec.value
      })
      // 这里可以添加成功提示
    } catch (error) {
      console.error('Purchase failed:', error)
    } finally {
      purchasing.value = false
    }
  }
}

const loadMoreReviews = async () => {
  loadingReviews.value = true
  try {
    // 模拟加载更多评论
    await new Promise(resolve => setTimeout(resolve, 1000))
    // 这里可以添加更多评论数据
    console.log('Loading more reviews...')
  } catch (error) {
    console.error('Failed to load reviews:', error)
  } finally {
    loadingReviews.value = false
  }
}
</script>

<style scoped>
.sticky-top {
  position: sticky;
  top: 20px;
}

.bg-gradient-primary {
  background: linear-gradient(135deg, #1976d2 0%, #42a5f5 100%);
}

.transition-all {
  transition: all 0.3s ease;
}

.review-item {
  padding: 16px 0;
  border-bottom: 1px solid #e0e0e0;
}

.review-item:last-child {
  border-bottom: none;
}

.review-item:hover {
  background-color: #fafafa;
  border-radius: 8px;
  padding: 16px;
  margin: 0 -16px;
  transition: all 0.2s ease;
}
</style>