<template>
  <div class="member-center-page">
    <div class="member-screen">
      <header class="mc-header">
        <h1 class="mc-title">{{ t('memberCenter.title') }}</h1>
      </header>

      <section class="hero-card">
        <div class="hero-row">
          <div class="hero-left">
            <span class="hero-lbl">{{ t('memberCenter.currentLevel') }}</span>
            <span class="hero-lvl">{{ t('memberCenter.vipLabel', { n: displayLevel }) }}</span>
          </div>
          <button type="button" class="btn-recharge" @click="goWallet">
            {{ t('memberCenter.goRecharge') }}
          </button>
        </div>
        <p v-if="nextHint" class="hero-hint">{{ nextHint }}</p>
      </section>

      <section v-if="vipLoading" class="mc-status">{{ t('common.loading') }}</section>
      <section v-else-if="vipLoadError" class="mc-status mc-status--error">
        {{ vipLoadError }}
      </section>

      <section v-else class="explain-block">
        <h2 class="explain-title">{{ t('memberCenter.explainTitle') }}</h2>
        <ul class="explain-list">
          <li
            v-for="row in tierRows"
            :key="row.levelKey"
            class="explain-row"
            :class="{ 'explain-row--current': row.levelNum === displayLevel }"
          >
            <div class="explain-main">
              <p class="explain-desc">{{ row.condition }}</p>
              <p v-if="row.fees" class="explain-fees">{{ row.fees }}</p>
            </div>
            <span class="explain-vip">{{ row.label }}</span>
          </li>
        </ul>
      </section>

      <p class="mc-foot">{{ t('memberCenter.footnote') }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useUserStore } from '@/stores/user'
import { getPmVipLevelPublic, type PmVipLevelItem } from '@/api/vipLevel'

const router = useRouter()
const { t } = useI18n()
const userStore = useUserStore()

const vipLevels = ref<PmVipLevelItem[]>([])
const vipLoading = ref(false)
const vipLoadError = ref<string | null>(null)

onMounted(() => {
  loadVipLevels()
  if (userStore.isLoggedIn) userStore.fetchUserInfo()
})

async function loadVipLevels() {
  vipLoading.value = true
  vipLoadError.value = null
  try {
    const res = await getPmVipLevelPublic()
    if (res.code !== 0 && res.code !== 200) {
      vipLoadError.value = res.msg || t('memberCenter.loadError')
      return
    }
    vipLevels.value = res.data?.list ?? []
  } catch {
    vipLoadError.value = t('memberCenter.loadError')
  } finally {
    vipLoading.value = false
  }
}

const rawUser = computed(() => (userStore.user ?? {}) as Record<string, unknown>)

function resolveVipLevel(user: Record<string, unknown>): number {
  const keys = ['vipLevel', 'memberLevel', 'vip', 'level']
  for (const k of keys) {
    const v = user[k]
    if (typeof v === 'number' && Number.isFinite(v)) {
      return Math.max(0, Math.floor(v))
    }
    if (typeof v === 'string' && v.trim()) {
      const n = parseInt(v.replace(/\D/g, ''), 10)
      if (!Number.isNaN(n)) return Math.max(0, n)
    }
  }
  return 0
}

/**
 * 与订单价格 bps 一致：费率整数 / 10000 为比例，展示为百分比 → 数值 / 100 + '%'
 */
function formatTradingFee(rate: number): string {
  if (!Number.isFinite(rate)) return '--'
  return `${(rate / 10000).toFixed(2)}%`
}

/** 与接口 needDeposit / accumulated 同一套口径：大额按 USDC 6 位小数，否则按美元数值 */
function depositRawToUsd(raw: number): number {
  if (!Number.isFinite(raw) || raw <= 0) return 0
  return raw / 1_000_000
}
function parseUserAccumulatedUsd(user: Record<string, unknown>): number {
  const v = user.accumulated ?? user.Accumulated
  if (typeof v === 'number' && Number.isFinite(v)) return depositRawToUsd(v)
  if (typeof v === 'string' && v.trim()) {
    const n = parseFloat(v.replace(/,/g, ''))
    return Number.isFinite(n) ? depositRawToUsd(n) : 0
  }
  return 0
}

function formatNeedDepositUsd(n: number): string {
  const dollars = depositRawToUsd(n)
  if (dollars <= 0) return ''
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    maximumFractionDigits: Number.isInteger(dollars) && dollars >= 100 ? 0 : 2,
  }).format(dollars)
}

function formatUsdcAmountPlain(dollars: number): string {
  if (!Number.isFinite(dollars) || dollars <= 0) return ''
  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(dollars)
}

const sortedLevels = computed(() =>
  [...vipLevels.value].sort(
    (a, b) => parseInt(String(a.levelName), 10) - parseInt(String(b.levelName), 10),
  ),
)

const displayLevel = computed(() => resolveVipLevel(rawUser.value))

const nextHint = computed(() => {
  const list = sortedLevels.value
  if (!list.length) return ''
  const lv = displayLevel.value
  const idx = list.findIndex((x) => parseInt(String(x.levelName), 10) === lv)
  if (idx < 0 || idx >= list.length - 1) return ''
  const nextTier = list[idx + 1]
  if (!nextTier) return ''
  const nextNeedUsd = depositRawToUsd(nextTier.needDeposit)
  if (nextNeedUsd <= 0) return ''
  const accumulatedUsd = parseUserAccumulatedUsd(rawUser.value)
  const remainUsd = Math.max(0, nextNeedUsd - accumulatedUsd)
  const amount = formatUsdcAmountPlain(remainUsd)
  if (!amount) return ''
  return t('memberCenter.hintNeedMoreDeposit', { amount })
})

const FALLBACK_MAX = 4

const tierRows = computed(() => {
  const list = sortedLevels.value
  if (list.length) {
    return list.map((item) => {
      const n = parseInt(String(item.levelName), 10)
      const levelNum = Number.isNaN(n) ? 0 : n
      const condition =
        !item.needDeposit || item.needDeposit <= 0
          ? t('memberCenter.tier0')
          : t('memberCenter.tierNeedDeposit', { amount: formatNeedDepositUsd(item.needDeposit) })
      const fees = t('memberCenter.feesLine', {
        taker: formatTradingFee(item.takerFeeRate),
        maker: formatTradingFee(item.makerFeeRate),
      })
      return {
        levelKey: String(item.levelName),
        levelNum,
        condition,
        fees,
        label: t('memberCenter.vipLabel', { n: levelNum }),
      }
    })
  }
  return Array.from({ length: FALLBACK_MAX + 1 }, (_, i) => ({
    levelKey: `fallback-${i}`,
    levelNum: i,
    condition: t(`memberCenter.tier${i}`),
    fees: '',
    label: t('memberCenter.vipLabel', { n: i }),
  }))
})
function goWallet() {
  router.push('/wallet')
}
</script>

<style scoped>
.member-center-page {
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;
}

.member-screen {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  background: #fcfcfc;
  font-family: Inter, sans-serif;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}

.mc-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mc-back {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: #111827;
  cursor: pointer;
}

.mc-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

.mc-status {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
  padding: 8px 0;
}

.mc-status--error {
  color: #b45309;
}

.hero-card {
  background: #fff7e6;
  border: 1.5px solid #e6a817;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hero-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.hero-lbl {
  color: #78350f;
  font-size: 13px;
  font-weight: 500;
}

.hero-lvl {
  color: #c9970a;
  font-size: 20px;
  font-weight: bold;
}

.btn-recharge {
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #c9970a;
  color: #fffef5;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.hero-hint {
  margin: 0;
  color: #a16207;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.explain-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.explain-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  line-height: 1.2;
}

.explain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.explain-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.explain-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.explain-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #6b7280;
}

.explain-fees {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #9ca3af;
}

.explain-vip {
  flex-shrink: 0;
  min-width: 52px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #111827;
}

.explain-row--current .explain-desc {
  color: #78350f;
  font-weight: bold;
}

.explain-row--current .explain-fees {
  color: #a16207;
  font-weight: 600;
}

.explain-row--current .explain-vip {
  color: #c9970a;
  font-weight: bold;
}

.mc-foot {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: #6b7280;
}
</style>
