<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <q-page class="bg-grey-2 sd-page-padding">
    <div class="row no-wrap full-height">
      <!-- 左侧用户信息区域 -->
      <div class="col-3 bg-white q-pa-lg">
        <!-- 用户头像和基本信息 -->
        <div class="column items-center q-mb-xl">
          <q-avatar size="80px" class="q-mb-md">
            <img src="https://via.placeholder.com/80x80/1976d2/ffffff?text=D" alt="User Avatar" />
          </q-avatar>
          <div class="text-h6 text-weight-medium text-center q-mb-md">Defu Ding</div>

          <!-- 余额和积分卡片 -->
          <div class="row q-col-gutter-sm full-width">
            <div class="col-6">
              <q-card flat bordered class="bg-grey-1 q-pa-sm text-center">
                <div class="text-caption text-grey-7">My Balance</div>
                <div class="text-h6 text-weight-bold">$0.00</div>
              </q-card>
            </div>
            <div class="col-6">
              <q-card flat bordered class="bg-grey-1 q-pa-sm text-center">
                <div class="text-caption text-grey-7">My Points</div>
                <div class="text-h6 text-weight-bold">2346</div>
              </q-card>
            </div>
          </div>
        </div>

        <!-- 分割线 -->
        <q-separator class="q-mb-lg" />

        <!-- 导航菜单 -->
        <q-list class="q-gutter-sm">
          <q-item clickable v-ripple class="rounded-borders q-pa-md"
            :class="selectedMenu === 'history' ? 'bg-orange-1 text-orange' : ''" @click="selectedMenu = 'history'">
            <q-item-section avatar>
              <q-icon name="history" size="24px" :color="selectedMenu === 'history' ? 'orange' : 'grey-6'" />
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-weight-medium">Buy History</q-item-label>
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple class="rounded-borders q-pa-md"
            :class="selectedMenu === 'feedback' ? 'bg-blue-1 text-blue' : ''" @click="selectedMenu = 'feedback'">
            <q-item-section avatar>
              <q-icon name="feedback" size="24px" :color="selectedMenu === 'feedback' ? 'blue' : 'grey-6'" />
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-weight-medium">Feedback Records</q-item-label>
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple class="rounded-borders q-pa-md"
            :class="selectedMenu === 'settings' ? 'bg-green-1 text-green' : ''" @click="selectedMenu = 'settings'">
            <q-item-section avatar>
              <q-icon name="settings" size="24px" :color="selectedMenu === 'settings' ? 'green' : 'grey-6'" />
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-weight-medium">Account Settings</q-item-label>
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple class="rounded-borders q-pa-md"
            :class="selectedMenu === 'coupon' ? 'bg-purple-1 text-purple' : ''" @click="selectedMenu = 'coupon'">
            <q-item-section avatar>
              <q-icon name="local_offer" size="24px" :color="selectedMenu === 'coupon' ? 'purple' : 'grey-6'" />
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-weight-medium text-primary">My Coupon</q-item-label>
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple class="rounded-borders q-pa-md"
            :class="selectedMenu === 'help' ? 'bg-teal-1 text-teal' : ''" @click="selectedMenu = 'help'">
            <q-item-section avatar>
              <q-icon name="help" size="24px" :color="selectedMenu === 'help' ? 'teal' : 'grey-6'" />
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-weight-medium">Help Center</q-item-label>
            </q-item-section>
          </q-item>

          <q-item clickable v-ripple class="rounded-borders q-pa-md"
            :class="selectedMenu === 'language' ? 'bg-indigo-1 text-indigo' : ''" @click="selectedMenu = 'language'">
            <q-item-section avatar>
              <q-icon name="language" size="24px" :color="selectedMenu === 'language' ? 'indigo' : 'grey-6'" />
            </q-item-section>
            <q-item-section>
              <q-item-label class="text-weight-medium">Language & Currency</q-item-label>
              <q-item-label caption class="text-grey-6">$USD | EN</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </div>

      <!-- 右侧内容区域 -->
      <div class="col-9 q-pa-lg">
        <!-- 优惠券内容区域 -->
        <div v-if="selectedMenu === 'coupon'" class="full-width">
          <div class="text-h5 text-weight-medium q-mb-lg">My Coupons</div>

          <!-- 优惠券网格 -->
          <div class="row q-col-gutter-md">
            <!-- 优惠券卡片示例 -->
            <div class="col-12 col-md-6 col-lg-4" v-for="n in 6" :key="n">
              <q-card class="coupon-card" flat bordered>
                <q-card-section class="bg-gradient-to-r from-purple-400 to-pink-400 text-white q-pa-md">
                  <div class="row items-center justify-between">
                    <div>
                      <div class="text-h4 text-weight-bold">$10</div>
                      <div class="text-caption">OFF</div>
                    </div>
                    <div class="text-right">
                      <div class="text-body2">Min. $50</div>
                      <div class="text-caption">Valid until</div>
                      <div class="text-caption">2024-12-31</div>
                    </div>
                  </div>
                </q-card-section>
                <q-card-section class="q-pa-md">
                  <div class="text-subtitle2 text-weight-medium q-mb-xs">Game Purchase Discount</div>
                  <div class="text-caption text-grey-6 q-mb-md">Applicable to all game purchases</div>
                  <q-btn color="primary" label="Use Now" size="sm" class="full-width" unelevated />
                </q-card-section>
              </q-card>
            </div>
          </div>
        </div>

        <!-- Account Settings 内容区域 -->
        <div v-else-if="selectedMenu === 'settings'" class="full-width">
          <div class="text-h5 text-weight-medium q-mb-lg">Account Settings</div>

          <!-- Account Information 部分 -->
          <q-card flat bordered class="q-mb-lg">
            <q-card-section class="q-pa-lg">
              <div class="text-h6 text-weight-medium q-mb-lg text-grey-8">Account Information</div>

              <!-- 头像设置 -->
              <div class="row items-center q-mb-lg">
                <div class="col-2">
                  <div class="text-body1 text-grey-7">Avatar</div>
                </div>
                <div class="col-8">
                  <div class="row items-center">
                    <q-avatar size="56px" class="q-mr-md">
                      <img src="https://via.placeholder.com/56x56/1976d2/ffffff?text=D" alt="User Avatar" />
                    </q-avatar>
                    <q-btn flat color="primary" label="Change" size="sm" />
                  </div>
                </div>
              </div>

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

              <!-- 昵称设置 -->
              <div class="row items-center q-mb-lg">
                <div class="col-2">
                  <div class="text-body1 text-grey-7">Nickname</div>
                </div>
                <div class="col-8">
                  <div class="text-body1">U1067514068</div>
                </div>
                <div class="col-2 text-right">
                  <q-btn flat color="primary" label="Modify" size="sm" />
                </div>
              </div>

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

              <!-- 邮箱设置 -->
              <div class="row items-center q-mb-lg">
                <div class="col-2">
                  <div class="text-body1 text-grey-7">Email</div>
                </div>
                <div class="col-8">
                  <div class="text-body1">184*******@qq.com</div>
                </div>
                <div class="col-2 text-right">
                  <q-btn flat color="primary" label="Modify" size="sm" />
                </div>
              </div>

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

              <!-- 密码设置 -->
              <div class="row items-center q-mb-lg">
                <div class="col-2">
                  <div class="text-body1 text-grey-7">Password</div>
                </div>
                <div class="col-8">
                  <div class="text-body1">Go to set up</div>
                </div>
                <div class="col-2 text-right">
                  <q-btn flat color="primary" label="Set" size="sm" />
                </div>
              </div>

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

              <!-- 社交账号绑定 -->
              <div class="social-bindings">
                <!-- Google -->
                <div class="row items-center q-mb-md">
                  <div class="col-2">
                    <div class="text-body1 text-grey-7">Google</div>
                  </div>
                  <div class="col-8">
                    <div class="text-body1 text-grey-8">Defu Ding</div>
                  </div>
                  <div class="col-2 text-right">
                    <q-btn flat color="primary" label="Bind" size="sm" />
                  </div>
                </div>

                <!-- Facebook -->
                <div class="row items-center q-mb-md">
                  <div class="col-2">
                    <div class="text-body1 text-grey-7">Facebook</div>
                  </div>
                  <div class="col-8"></div>
                  <div class="col-2 text-right">
                    <q-btn flat color="primary" label="Bind" size="sm" />
                  </div>
                </div>

                <!-- Line -->
                <div class="row items-center q-mb-md">
                  <div class="col-2">
                    <div class="text-body1 text-grey-7">Line</div>
                  </div>
                  <div class="col-8"></div>
                  <div class="col-2 text-right">
                    <q-btn flat color="primary" label="Bind" size="sm" />
                  </div>
                </div>

                <!-- Twitter -->
                <div class="row items-center q-mb-md">
                  <div class="col-2">
                    <div class="text-body1 text-grey-7">Twitter</div>
                  </div>
                  <div class="col-8"></div>
                  <div class="col-2 text-right">
                    <q-btn flat color="primary" label="Bind" size="sm" />
                  </div>
                </div>

                <!-- Apple -->
                <div class="row items-center q-mb-md">
                  <div class="col-2">
                    <div class="text-body1 text-grey-7">Apple</div>
                  </div>
                  <div class="col-8"></div>
                  <div class="col-2 text-right">
                    <q-btn flat color="primary" label="Bind" size="sm" />
                  </div>
                </div>

                <!-- TikTok -->
                <div class="row items-center q-mb-md">
                  <div class="col-2">
                    <div class="text-body1 text-grey-7">TikTok</div>
                  </div>
                  <div class="col-8"></div>
                  <div class="col-2 text-right">
                    <q-btn flat color="primary" label="Bind" size="sm" />
                  </div>
                </div>

                <!-- VK -->
                <div class="row items-center q-mb-md">
                  <div class="col-2">
                    <div class="text-body1 text-grey-7">VK</div>
                  </div>
                  <div class="col-8"></div>
                  <div class="col-2 text-right">
                    <q-btn flat color="primary" label="Bind" size="sm" />
                  </div>
                </div>

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

                <!-- KYC 验证 -->
                <div class="row items-center">
                  <div class="col-2">
                    <div class="text-body1 text-grey-7">KYC Verification</div>
                  </div>
                  <div class="col-8">
                    <div class="text-caption text-grey-6">
                      Caution! You only get two chances, please make sure your message is truthful and as clear as
                      possible.
                    </div>
                  </div>
                  <div class="col-2 text-right">
                    <q-btn outline color="primary" label="Verify" size="sm" />
                  </div>
                </div>
              </div>
            </q-card-section>
          </q-card>

          <!-- Knivesout Information 部分 -->
          <q-card flat bordered class="q-mb-lg">
            <q-card-section class="q-pa-lg">
              <div class="text-h6 text-weight-medium q-mb-lg text-grey-8">Knivesout Information</div>

              <div class="row items-center">
                <div class="col-2">
                  <div class="text-body1 text-grey-7">Knivesout</div>
                </div>
                <div class="col-8"></div>
                <div class="col-2 text-right">
                  <q-btn flat color="primary" label="Bind" size="sm" />
                </div>
              </div>
            </q-card-section>
          </q-card>

          <!-- Preferences Settings 部分 -->
          <q-card flat bordered>
            <q-card-section class="q-pa-lg">
              <div class="text-h6 text-weight-medium q-mb-lg text-grey-8">Preferences Settings</div>

              <!-- Display Currency -->
              <div class="row items-center q-mb-lg">
                <div class="col-2">
                  <div class="text-body1 text-grey-7">Display Currency</div>
                </div>
                <div class="col-8">
                  <q-select v-model="selectedCurrency" :options="currencyOptions" outlined dense
                    style="max-width: 120px;" class="bg-grey-1" />
                </div>
                <div class="col-2">
                  <q-icon name="keyboard_arrow_down" size="20px" color="grey-6" />
                </div>
              </div>

              <div class="row q-mb-lg">
                <div class="col-2"></div>
                <div class="col-10">
                  <div class="text-caption text-grey-6">
                    Display Currency is for display only, transactions are still in USD.
                  </div>
                </div>
              </div>

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

              <!-- Display Language -->
              <div class="row items-center">
                <div class="col-2">
                  <div class="text-body1 text-grey-7">Display Language</div>
                </div>
                <div class="col-8">
                  <q-select v-model="selectedLanguage" :options="languageOptions" outlined dense
                    style="max-width: 120px;" class="bg-grey-1" />
                </div>
                <div class="col-2">
                  <q-icon name="keyboard_arrow_down" size="20px" color="grey-6" />
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>

        <!-- 其他菜单的占位内容 -->
        <div v-else class="column items-center justify-center" style="min-height: 400px;">
          <q-icon name="construction" size="64px" color="grey-4" class="q-mb-md" />
          <div class="text-h6 text-grey-6">{{ getMenuTitle(selectedMenu) }}</div>
          <div class="text-body2 text-grey-5 q-mt-sm">Content coming soon...</div>
        </div>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'

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

// 响应式数据
const selectedMenu = ref('coupon') // 默认选中优惠券
const selectedCurrency = ref('USD')
const selectedLanguage = ref('English')

// 货币选项
const currencyOptions = [
  'USD', 'EUR', 'GBP', 'JPY', 'CNY', 'KRW'
]

// 语言选项
const languageOptions = [
  'English', '中文', '日本語', '한국어', 'Español', 'Français'
]

// 获取菜单标题
const getMenuTitle = (menu) => {
  const titles = {
    history: 'Buy History',
    feedback: 'Feedback Records',
    settings: 'Account Settings',
    coupon: 'My Coupon',
    help: 'Help Center',
    language: 'Language & Currency'
  }
  return titles[menu] || 'Unknown'
}
</script>

<style scoped>
.coupon-card {
  transition: transform 0.2s ease;
}

.coupon-card:hover {
  transform: translateY(-2px);
}

.bg-gradient-to-r {
  background: linear-gradient(to right, #a855f7, #ec4899);
}

.from-purple-400 {
  --tw-gradient-from: #a855f7;
}

.to-pink-400 {
  --tw-gradient-to: #ec4899;
}
</style>