<template>
  <view class="pay-confirm-page">
    <view class="hero-panel" :style="hero_panel_style">
      <text class="page-title">常住随用</text>

      <view class="amount-card" :style="amount_card_style">
        <text class="amount-label">支付金额：</text>
        <view class="amount-value-group">
          <text class="amount-value">{{ display_amount }}</text>
          <text v-if="has_amount" class="amount-unit">元</text>
        </view>
      </view>

      <text class="blessing-text">感恩随喜~</text>
    </view>

    <view class="footer-area">
      <text v-if="status_text" class="status-text">{{ status_text }}</text>

      <button
        class="pay-button"
        :style="pay_button_style"
        hover-class="pay-button-hover"
        :loading="pay_loading"
        :disabled="!order_id || pay_loading"
        @tap="handlePay"
      >
        立即支付
      </button>
    </view>
  </view>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useLoad } from '@tarojs/taro'
import { useWechatMiniPay } from '@/composables/useWechatMiniPay'
import { getVersionedImageAssetByName, preloadImageAssetVersion } from '@/utils/assetUrl'
import { redirectAfterPaySuccess } from '@/utils/paySuccessRedirect'

const order_id = ref('')
const amount = ref('')
const status_text = ref('')
const navigating_after_pay_success = ref(false)

const {
  pay_loading,
  last_result_text,
  pay_by_order_id,
} = useWechatMiniPay()

const display_amount = computed(() => {
  const normalized_amount = String(amount.value || '').trim().replace(/元$/, '').trim()
  return normalized_amount || '--'
})

const has_amount = computed(() => display_amount.value !== '--')
const hero_panel_style = computed(() => ({
  background: `url('${getVersionedImageAssetByName('bgg@2x.png')}') center top / 100% 100% no-repeat`,
}))
const amount_card_style = computed(() => ({
  background: `url('${getVersionedImageAssetByName('money_bg@2x.png')}') center / 100% 100% no-repeat`,
}))
const pay_button_style = computed(() => ({
  background: `url('${getVersionedImageAssetByName('btnn@2x.png')}') center / 100% 100% no-repeat`,
}))

watch(last_result_text, (value) => {
  if (!pay_loading.value) {
    status_text.value = value
  }
})

const goUserWebviewAfterPaySuccess = async () => {
  if (navigating_after_pay_success.value) return

  navigating_after_pay_success.value = true

  try {
    status_text.value = '支付成功，正在跳转...'

    const redirect_result = await redirectAfterPaySuccess()
    if (redirect_result?.reason === 'missing-user-menu') {
      status_text.value = '支付成功，未找到“我的”菜单，正在返回首页...'
      return
    }

    if (redirect_result?.reason === 'empty-user-link') {
      status_text.value = '支付成功，但“我的”菜单地址为空，正在返回首页...'
      return
    }

    if (redirect_result?.target === 'home') {
      status_text.value = '支付成功，但菜单获取失败，正在返回首页...'
    }
  } catch (error) {
    status_text.value = '支付成功，但菜单获取失败，正在返回首页...'
  } finally {
    navigating_after_pay_success.value = false
  }
}

const handlePay = async () => {
  if (!order_id.value || pay_loading.value) return

  status_text.value = ''

  const pay_res = await pay_by_order_id(order_id.value, {
    auto_auth: true,
    on_status: (text) => {
      status_text.value = text
    },
  })

  if (pay_res?.status === 'success') {
    await goUserWebviewAfterPaySuccess()
  }
}

useLoad((options) => {
  preloadImageAssetVersion().catch((error) => {
    console.error('支付确认页预加载图片版本配置失败:', error)
  })

  order_id.value = String(options?.order_id || '').trim()
  amount.value = String(options?.amount || options?.money || '').trim()

  if (!order_id.value) {
    status_text.value = '缺少订单编号，暂时无法发起支付。'
  }
})
</script>

<style lang="less">
.pay-confirm-page {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 0 0 calc(72rpx + env(safe-area-inset-bottom));
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-panel {
  min-height: 612rpx;
  padding: 132rpx 48rpx 88rpx;
  box-sizing: border-box;
}

.page-title {
  display: block;
  text-align: center;
  font-size: 55rpx;
  line-height: 1.2;
  font-weight: 600;
  color: #2f3133;
}

.amount-card {
  margin-top: 84rpx;
  width: 100%;
  min-height: 145rpx;
  padding: 0 40rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
}

.amount-label {
  flex-shrink: 0;
  font-size: 30rpx;
  color: #353535;
}

.amount-value-group {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  color: #252525;
}

.amount-value {
  max-width: 100%;
  font-size: 72rpx;
  line-height: 1;
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.amount-unit {
  margin-left: 14rpx;
  font-size: 30rpx;
  line-height: 1;
}

.blessing-text {
  display: block;
  margin-top: 72rpx;
  text-align: center;
  font-size: 32rpx;
  line-height: 1.4;
  color: #3a3a3a;
}

.footer-area {
  padding: 0 84rpx;
  box-sizing: border-box;
}

.status-text {
  display: block;
  margin-bottom: 28rpx;
  text-align: center;
  font-size: 22rpx;
  line-height: 1.7;
  color: #8a6b45;
}

.pay-button {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 34rpx;
  font-weight: 500;
  color: #fff6eb;

  &::after {
    border: 0;
  }

  &[disabled] {
    opacity: 0.72;
    color: #fff6eb;
  }
}

.pay-button-hover {
  opacity: 0.92;
}
</style>