<template>
  <view class="wallet-page">
    <!-- 自定义导航栏 -->
     <nav-bar :title="$t('user.subscribe')"></nav-bar>

    <view class="wallet-content">
      <!-- VIP套餐列表 -->
      <view class="package-section">
        <text class="section-title">{{ $t('user.subscribe') }}</text>
        <view class="package-list">
          <view 
            v-for="(pkg, index) in packages" 
            :key="pkg.id"
            :class="['package-item', { active: selectedIndex === index }]"
            @click="selectPackage(index)"
          >
            <view class="package-price">
              <image src="/static/icon/currency.png" class="currency-icon" />
              <text class="price">{{ pkg.dictType }}</text>
              <text class="unit">NZD</text>
            </view>
            <text class="package-duration">{{ getDuration(pkg.remark) }}</text>
          </view>
        </view>
      </view>

      <!-- 支付方式 -->
      <view class="payment-section">
        <text class="section-title">{{ $t('user.paymentMethod') }}</text>
        <radio-group class="payment-group">
          <view class="payment-item">
            <radio :checked="true" color="#54a966" />
            <text>{{ paymentName }}</text>
          </view>
        </radio-group>
      </view>

      <!-- 协议勾选 -->
      <view class="agreement-section">
        <view class="agreement-checkbox" @click="toggleAgreement">
          <view :class="['checkbox', { checked: agreed }]">
            <wd-icon v-if="agreed" name="check" size="16px" color="#fff" />
          </view>
          <text class="agreement-text">
            {{ $t('user.agreeText') }}
            <text class="link" @click.stop="showAgreementModal">{{ $t('user.agreement') }}</text>
          </text>
        </view>
      </view>

      <!-- 订阅按钮 -->
      <view class="subscribe-button">
        <wd-button 
          type="success" 
          block
          @click="handleSubscribe"
        >
          {{ $t('user.subscribe') }}
        </wd-button>
      </view>
    </view>

    <!-- 协议弹窗 -->
    <wd-popup v-model="agreementShow" position="bottom" :closeable="true">
      <view class="agreement-modal">
        <view class="modal-title">{{ agreementData.title }}</view>
        <scroll-view scroll-y class="modal-content">
          <view v-html="agreementData.content"></view>
        </scroll-view>
      </view>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { getVipPackages, createOrder, verifyGooglePay, verifyIAP } from '@/api/modules/user'
import { commonApi } from '@/api/modules/common'
import type { IVipPackage } from '@/types/user'
import { useI18n } from 'vue-i18n'

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

// 导航栏高度
const statusBarHeight = ref(0)
const navbarHeight = ref('44px')

// VIP套餐列表
const packages = ref<IVipPackage[]>([])
const selectedIndex = ref<number | null>(null)
const selectedPackage = computed(() => 
  selectedIndex.value !== null ? packages.value[selectedIndex.value] : null
)

// 平台和支付方式
const platform = ref('')
const paymentMethod = ref(5) // 3-iOS IAP, 5-Google Pay
const paymentName = computed(() => 
  platform.value === 'android' ? 'Google Pay' : 'Apple Pay'
)

// 协议相关
const agreed = ref(false)
const agreementShow = ref(false)
const agreementData = ref({
  title: '',
  content: ''
})

// 订单号
const orderSn = ref('')

/**
 * 获取导航栏高度
 */
const getNavbarHeight = () => {
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
  
  let navBarHeight = 44
  if (systemInfo.model.indexOf('iPhone') !== -1 && parseInt(systemInfo.model.slice(-2)) >= 11) {
    navBarHeight = 48
  }
  
  const totalHeight = statusBarHeight.value + navBarHeight
  navbarHeight.value = totalHeight + 'px'
}

/**
 * 获取平台信息
 */
const getPlatform = () => {
  const systemInfo = uni.getSystemInfoSync()
  platform.value = systemInfo.platform === 'android' ? 'android' : 'ios'
  paymentMethod.value = platform.value === 'android' ? 5 : 3
}

/**
 * 获取VIP套餐列表
 */
const getPackages = async () => {
  try {
    const res = await getVipPackages()

    if (res.sysDictDatas && res.sysDictDatas.length > 0) {
      packages.value = res.sysDictDatas
      
      // 检查是否有缓存的选择
      const cachedIndex = uni.getStorageSync('selectVipCard')
      if (cachedIndex !== null && cachedIndex < packages.value.length) {
        selectedIndex.value = cachedIndex
      } else {
        selectedIndex.value = 0
      }
    }
  } catch (error) {
    console.error('获取套餐列表失败:', error)
  }
}

/**
 * 选择套餐
 */
const selectPackage = (index: number) => {
  selectedIndex.value = index
  uni.setStorageSync('selectVipCard', index)
}

/**
 * 获取时长文本
 */
const getDuration = (remark: string) => {
  const days = parseInt(remark)
  if (days === 30) {
    return t('user.monthCard')
  } else if (days === 90) {
    return t('user.seasonCard')
  } else if (days === 365) {
    return t('user.yearCard')
  }
  return `${days} ${t('user.days')}`
}

/**
 * 切换协议勾选
 */
const toggleAgreement = () => {
  agreed.value = !agreed.value
  uni.setStorageSync('Agreements_agreed', agreed.value)
}

/**
 * 显示协议弹窗
 */
const showAgreementModal = async () => {
  try {
    const res = await commonApi.getAgreement(113)
    if (res) {
      let content = res.content || ''
      content = content.replace(
        /<h5>/g,
        '<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
      )
      content = content.replace(/<\/h5>/g, '</view>')
      
      agreementData.value = {
        title: res.title,
        content: content
      }
      agreementShow.value = true
    }
  } catch (error) {
    console.error('获取协议失败:', error)
  }
}

/**
 * 订阅处理
 */
const handleSubscribe = async () => {
  // 验证是否勾选协议
  if (!agreed.value) {
    uni.showToast({
      title: t('user.agreeFirst'),
      icon: 'none'
    })
    return
  }

  // 验证是否选择套餐
  if (selectedIndex.value === null || !selectedPackage.value) {
    uni.showToast({
      title: t('user.selectPackage'),
      icon: 'none'
    })
    return
  }

  try {
    // 创建订单
    const orderData = {
      paymentMethod: paymentMethod.value,
      orderMoney: selectedPackage.value.money,
      vipBuyConfigId: selectedPackage.value.priceTypeId,
      orderType: 'abroadVip',
      abroadVipId: selectedPackage.value.id
    }

    const orderRes = await createOrder(orderData)
    
    if (orderRes.orderSn) {
      orderSn.value = orderRes.orderSn
      
      // 根据平台调起支付
      if (platform.value === 'android') {
        await initiateGooglePay()
      } else {
        await initiateIAP()
      }
    }
  } catch (error) {
    console.error('创建订单失败:', error)
  }
}

/**
 * Google Pay 支付（Android）
 */
const initiateGooglePay = async () => {
  // TODO: 集成 Google Pay SDK
  // 这里需要使用 sn-googlepay5 插件
  uni.showToast({
    title: 'Google Pay 功能开发中',
    icon: 'none'
  })
}

/**
 * IAP 支付（iOS）
 */
const initiateIAP = async () => {
  // TODO: 集成 IAP SDK
  uni.showToast({
    title: 'IAP 功能开发中',
    icon: 'none'
  })
}

/**
 * 返回上一页
 */
const goBack = () => {
  uni.navigateBack({
    delta: 1
  })
}

onMounted(() => {
  getNavbarHeight()
  getPlatform()
  getPackages()
})

onUnmounted(() => {
  // 清除缓存
  uni.removeStorageSync('selectVipCard')
})
</script>

<style lang="scss" scoped>
$theme-color: #54a966;

.wallet-page {
  min-height: 100vh;
  background-color: #f7faf9;
}

.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;

  .navbar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    position: relative;

    .navbar-left {
      position: absolute;
      left: 10px;
      display: flex;
      align-items: center;
      padding: 10rpx;
    }

    .navbar-title {
      font-size: 16px;
      font-weight: 700;
      color: #333;
    }
  }
}

.wallet-content {
  padding: 20rpx;
}

.section-title {
  display: block;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.package-section {
  background: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.package-list {
  display: flex;
  flex-wrap: wrap;
  margin: -10rpx;
}

.package-item {
  width: calc(33.333% - 20rpx);
  margin: 10rpx;
  padding: 30rpx 0;
  border: 2rpx solid #ebebeb;
  border-radius: 10rpx;
  text-align: center;
  transition: all 0.3s;

  &.active {
    border-color: $theme-color;
    background: rgba(84, 169, 102, 0.1);
  }

  .package-price {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;

    .currency-icon {
      width: 25rpx;
      height: 25rpx;
      margin-right: 8rpx;
    }

    .price {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
    }

    .unit {
      font-size: 26rpx;
      color: #333;
      margin-left: 5rpx;
    }
  }

  .package-duration {
    display: block;
    font-size: 26rpx;
    color: #666;
  }
}

.payment-section {
  background: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.payment-group {
  margin-top: 20rpx;
}

.payment-item {
  display: flex;
  align-items: center;
  padding: 10rpx 0;

  text {
    font-size: 30rpx;
    color: #333;
    margin-left: 10rpx;
  }
}

.agreement-section {
  padding: 20rpx 30rpx;
}

.agreement-checkbox {
  display: flex;
  align-items: flex-start;

  .checkbox {
    width: 36rpx;
    height: 36rpx;
    border: 2rpx solid #ddd;
    border-radius: 4rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15rpx;
    flex-shrink: 0;
    margin-top: 2rpx;

    &.checked {
      background-color: $theme-color;
      border-color: $theme-color;
    }
  }

  .agreement-text {
    flex: 1;
    font-size: 28rpx;
    color: #333;
    line-height: 40rpx;

    .link {
      color: $theme-color;
    }
  }
}

.subscribe-button {
  padding: 40rpx 30rpx 60rpx;
}

.agreement-modal {
  padding: 40rpx 30rpx;
  max-height: 70vh;

  .modal-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .modal-content {
    max-height: 60vh;
    font-size: 28rpx;
    color: #555;
    line-height: 45rpx;
  }
}
</style>
