<template>
  <div class="fullPage">
    <!-- 状态栏占位区域（仅在APP中显示） -->
    <!-- <div v-if="isInAppEnvironment" style="height: 30px"></div> -->
    <img :src="images.pageTop" alt="" width="100%" style="display: block" />
    <div
      style="
        background: linear-gradient(
          180deg,
          #ffcc97 0%,
          #ffa95e 14.99%,
          #ff8e2e 29.99%,
          #fd6500 44.98%,
          #d53f00 59.98%
        );
        min-height: calc(100vh - 93.3vw + 24px);
        border-radius: 24px 24px 0 0;
        margin-top: -24px;
        position: relative;
        z-index: 2;
        padding: 12px;
      "
    >
      <!-- 头部 -->
      <div style="display: flex; gap: 4px; align-items: flex-end; margin: 0 12px 12px">
        <div style="font-size: 0.7em; font-weight: 700">Want To Become A Recharge Agency?</div>
        <div
          style="
            font-size: 0.7em;
            color: #ff3e13;
            font-weight: 700;
            border-bottom: 1px solid #ff3e13;
            padding: 0 4px;
          "
          @click="maskLayerShow = true"
        >
          Contact Us Now!
        </div>
      </div>

      <!-- 代理列表 -->
      <div
        style="
          padding: 12px;

          display: flex;
          flex-direction: column;
          gap: 4px;
          margin-bottom: 8px;

          border-radius: 12px;
          background: rgba(255, 255, 255, 0.4);
          backdrop-filter: blur(32px);
        "
        v-for="FreightAgency in FreightAgencyList?.records"
      >
        <!-- 基本信息 -->
        <div style="display: flex; gap: 4px">
          <div style="width: 15%; display: flex; align-items: center">
            <img
              :src="FreightAgency.userBaseInfo.userAvatar"
              alt=""
              @error="defaultAvatarUrl"
              style="
                display: block;
                width: 100%;
                border-radius: 50%;
                aspect-ratio: 1/1;
                object-fit: cover;
              "
            />
          </div>
          <div
            style="
              width: 80%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              gap: 4px;
            "
          >
            <div style="display: flex; align-items: center; gap: 4px">
              <img :src="FreightAgency.ownNationalFlag" alt="" width="8%" style="display: block" />
              <div style="font-weight: 700">{{ FreightAgency.userBaseInfo.userNickname }}</div>
            </div>
            <div style="display: flex; align-items: center; gap: 4px">
              <div style="position: relative; width: 30%">
                <img :src="images.idBg" alt="" width="100%" style="display: block" />
                <div
                  style="
                    position: absolute;
                    inset: 0;
                    padding: 5% 8% 5% 23%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                  "
                >
                  <div
                    style="
                      font-size: 0.6em;
                      width: 80%;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    {{ FreightAgency.userBaseInfo.account }}
                  </div>
                  <img
                    :src="images.copyWhite"
                    alt=""
                    width="15%"
                    @click="copyPhone(FreightAgency.userBaseInfo.account)"
                  />
                </div>
              </div>
              <img src="../../assets/icon/RA.png" alt="" width="25%" style="display: block" />
            </div>
          </div>
        </div>
        <!-- 代理信息 -->
        <div>
          <!-- 财力展示 -->
          <div style="display: flex; gap: 4px; align-items: center">
            <div style="font-weight: 700">Current balance:</div>
            <div style="width: 5%">
              <img
                src="/src/assets/icon/coin.png"
                alt=""
                width="100%"
                style="aspect-ratio: 1/1; display: block"
              />
            </div>
            <div style="color: #f00; font-weight: 590">{{ maskAmount(FreightAgency.balance) }}</div>
          </div>
          <!-- 老资历 -->
          <div style="font-weight: 600; font-size: 0.8em">
            Has been a coin agency for {{ FreightAgency.becomeDays }} days
          </div>
          <!-- 社交的手腕 -->
          <div>
            <div style="font-weight: 600; font-size: 0.8em; margin-bottom: 4px">
              Available countries:
            </div>
            <div style="display: flex; gap: 4px; align-items: center; flex-wrap: wrap">
              <img
                v-for="imgUrl in FreightAgency.nationalFlag"
                :src="imgUrl"
                alt=""
                width="8%"
                style="display: block"
              />
            </div>
          </div>
          <!-- 实力展示 -->
          <div>{{ FreightAgency.transactionCount }} successful transaction</div>
          <!-- 食人树 -->
          <div
            style="display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.9em"
          >
            <img :src="images.phone" alt="" width="8%" />
            {{ FreightAgency.contactInfo || '' }}
          </div>
        </div>
        <!-- 按钮 -->
        <div style="display: flex; justify-content: space-between">
          <!-- 关注按钮 -->
          <div
            style="
              width: 45%;
              padding: 8px 12px;
              border-radius: 89px;
              background-blend-mode: normal, soft-light, normal;

              display: flex;
              justify-content: center;
              align-items: center;
            "
            :style="{
              background: FreightAgency.isFollow
                ? `radial-gradient(107.94% 107.94% at 15.9% 13.54%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #FFF 0%, #000 100%), #D1D1D1`
                : `radial-gradient(
                  107.94% 107.94% at 15.9% 13.54%,
                  rgba(255, 255, 255, 0.2) 0%,
                  rgba(255, 255, 255, 0) 100%
                ),
                linear-gradient(180deg, #fff 0%, #000 100%), #b464ff`,
            }"
            @click="followBt(FreightAgency.isFollow, FreightAgency.userBaseInfo.id)"
          >
            <div style="font-weight: 500">{{ FollowButtonText(FreightAgency.isFollow) }}</div>
          </div>
          <!-- 私聊按钮 -->
          <div
            style="
              width: 45%;
              padding: 8px 12px;
              text-align: center;
              border-radius: 60px;
              background: radial-gradient(
                  107.94% 107.94% at 15.9% 13.54%,
                  rgba(255, 255, 255, 0.2) 0%,
                  rgba(255, 255, 255, 0) 100%
                ),
                linear-gradient(180deg, #fff 0%, #000 100%), #4ecf5d;
              background-blend-mode: normal, soft-light, normal;

              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <div style="font-weight: 500" @click="gotoPrivateChat(FreightAgency.userBaseInfo.id)">
              Send Message
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗遮罩层 -->
    <maskLayer :maskLayerShow="maskLayerShow" @click="closedPopup">
      <div style="height: 100%; display: flex; justify-content: center; align-items: center">
        <div
          style="
            width: 90%;
            padding: 10px;
            border-radius: 12px;
            background: #fff;

            display: flex;
            gap: 10px;
            flex-direction: column;
          "
          @click.stop
        >
          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800; font-size: 0.9em">
            Contact Likei company's Whatsapp account:
          </div>
          <div style="display: flex; gap: 10px; align-items: center">
            <img :src="images.phone" alt="" width="24px" />
            <div style="color: #000; font-weight: 600">+86 18709616238</div>
            <img :src="images.copy" alt="" width="24px" @click="copyPhone('+86 18709616238')" />
          </div>
          <div style="display: flex; gap: 10px; align-items: center">
            <img :src="images.phone" alt="" width="24px" />
            <div style="color: #000; font-weight: 600">+86 18942503069</div>
            <img :src="images.copy" alt="" width="24px" @click="copyPhone('+86 18942503069')" />
          </div>
        </div>
      </div>
    </maskLayer>

    <!-- 提示弹窗 -->
    <div
      v-show="tipShow"
      style="
        position: fixed;
        top: 50vh;
        display: flex;
        justify-content: center;
        width: 100vw;
        z-index: 1000;
      "
    >
      <div
        style="padding: 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.4); font-weight: 600"
      >
        Copied successfully
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  connectApplication,
  parseAccessOrigin,
  parseHeader,
  setHttpHeaders,
  isInApp,
  gotoPrivateChat,
} from '@/utils/appBridge.js'
import {
  appConnectionManager,
  isAppConnected,
  getAppHeaderInfo,
} from '@/utils/appConnectionManager.js'
import { onMounted, ref } from 'vue'
import { useClipboard } from '@vueuse/core'
import maskLayer from '@/components/MaskLayer.vue'
import { getFreightAgencys } from '@/api/userInfo.js'
import { follow } from '@/api/recruit.js'
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'

//vite动态批量导入图片
const imageModules = import.meta.glob('@/assets/images/RechargeAgency/*.{png,jpg,svg}', {
  eager: true,
})
// 生成文件名映射对象（自动移除路径和扩展名）
const images = Object.fromEntries(
  Object.entries(imageModules).map(([path, module]) => {
    const fileName = path.split('/').pop().split('.')[0]
    return [fileName, module.default]
  })
)
const { copy, isSupported } = useClipboard()

const appConnected = ref(false)
const headerInfo = ref({})
const isInAppEnvironment = ref(false) // 检测是否在APP环境中

const FreightAgencyList = ref([]) //充值代理列表

const maskLayerShow = ref(false) // 控制遮罩层显示隐藏
const tipShow = ref(false) //提示弹窗

const defaultAvatarUrl = (e) => {
  console.log('头像资源出错')
  e.target.onerror = null //防止循环
  e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}

// 获取代理列表
const getAgencyList = async () => {
  const resAgencyList = await getFreightAgencys()
  if (resAgencyList.status && resAgencyList.body) {
    FreightAgencyList.value = resAgencyList.body
  }
}

// 格式化金额
const maskAmount = (number) => {
  let amount = number.toString()
  if (amount.length === 0) return ''
  if (amount.length === 1) return amount
  let firstChar = amount.charAt(0)
  let maskedPart = '*'.repeat(amount.length - 1)
  return firstChar + maskedPart
}

// 格式化关注按钮
const FollowButtonText = (isFollow) => {
  return isFollow ? 'Following' : 'Follow'
}

// 点击关注按钮
const followBt = async (isFollow, userId) => {
  if (isFollow) return
  let data = {
    userId,
  }
  try {
    const resFollow = await follow(data)
    if (resFollow.status) {
      getAgencyList() // 获取代理列表
    }
  } catch (error) {
    showError(error.errorMsg)
  }
}

// 关闭弹窗
const closedPopup = () => {
  maskLayerShow.value = false
}

// 复制到剪贴板（原生方法）
const copyPhone = (text) => {
  if (isSupported.value) {
    copy(text)
  } else {
    // 降级方案
    const textArea = document.createElement('textarea')
    textArea.value = text
    document.body.appendChild(textArea)
    textArea.select()
    document.execCommand('copy')
    document.body.removeChild(textArea)
  }

  tipShow.value = true
  setTimeout(() => {
    tipShow.value = false
  }, 2000)
}

/**
 * 连接APP并获取认证信息（优化版 - 仅专注连接）
 */
const connectToApp = async () => {
  console.group('🔗 APP Connection Process')
  console.debug('🚀 Starting APP connection...')

  try {
    // 检查是否在APP环境中
    if (!isInApp()) {
      console.debug('🌐 Browser environment detected')
      appConnected.value = true
      console.groupEnd()

      // 触发连接成功回调
      getAgencyList() // 获取代理列表

      return { success: true, environment: 'browser' }
    }

    // 检查是否已经连接且未过期
    if (isAppConnected()) {
      console.debug('✅ APP already connected and valid')
      appConnected.value = true

      // 使用缓存的头部信息
      const cachedHeaderInfo = getAppHeaderInfo()
      if (cachedHeaderInfo) {
        headerInfo.value = cachedHeaderInfo
        console.debug('🔧 Using cached HTTP headers')
      }

      console.groupEnd()

      // 触发连接成功回调
      getAgencyList() // 获取代理列表

      return { success: true, environment: 'app', fromCache: true }
    }

    // 检查是否有正在进行的连接
    if (appConnectionManager.isConnecting()) {
      console.debug('⏳ Connection already in progress, waiting...')
      await appConnectionManager.getConnectionPromise()
      appConnected.value = true
      console.debug('✅ Connected via existing process')
      console.groupEnd()

      // 触发连接成功回调
      getAgencyList() // 获取代理列表

      return { success: true, environment: 'app', fromCache: true }
    }

    // 建立新的APP连接
    console.debug('📱 Establishing new APP connection...')

    const connectionResult = await new Promise((resolve, reject) => {
      const connectionPromise = new Promise((connectResolve, connectReject) => {
        connectApplication(async (access) => {
          try {
            const result = parseAccessOrigin(access)

            if (result.success) {
              // 解析头部信息
              headerInfo.value = parseHeader(result.data)

              // 设置HTTP请求头
              console.debug('🔧 Setting HTTP headers...')
              await setHttpHeaders(headerInfo.value)

              // 标记连接成功
              appConnected.value = true
              appConnectionManager.setConnected(headerInfo.value)

              console.debug('🎉 APP connection established successfully')
              connectResolve({ success: true, environment: 'app', fromCache: false })
            } else {
              console.error('❌ Failed to parse access origin:', result.error)
              appConnectionManager.reset()
              connectReject(new Error(result.error))
            }
          } catch (error) {
            console.error('❌ Connection process failed:', error)
            appConnectionManager.reset()
            connectReject(error)
          }
        })
      })

      // 设置连接状态
      appConnectionManager.setConnecting(connectionPromise)

      connectionPromise.then(resolve).catch(reject)
    })

    console.debug('✅ Connection completed successfully')
    console.groupEnd()

    // 触发连接成功回调
    getAgencyList() // 获取代理列表

    return connectionResult
  } catch (error) {
    console.error('❌ Connection failed:', error)
    appConnected.value = false
    console.groupEnd()

    // 触发连接失败回调
    // if (onConnectionFailed) {
    //   onConnectionFailed(error)
    // }

    // 连接失败的特殊处理
    if (error.message && error.message.includes('parse access')) {
      router.push({ path: '/not_app', query: { message: error.message } })
    }

    return { success: false, error: error.message }
  }
}

onMounted(() => {
  connectToApp()
  isInAppEnvironment.value = isInApp()
})
</script>

<style lang="scss" scoped>
* {
  color: #fff;
  font-family: 'SF Pro Text';
}

.fullPage {
  width: 100vw;
  min-height: 100vh;
  background-color: #220447;
  position: relative;
}

@media screen and (max-width: 360px) {
  * {
    font-size: 12px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 16px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>
