<template>
  <div class="transfer gradient-background-circles">
    <MobileHeader title="Available income" />

    <div class="content">
      <!-- 信息部分 -->
      <div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
          "
        >
          <div style="font-weight: 600">Available income</div>
          <div style="display: flex; align-items: center" @click="showDetails">
            <div style="color: rgba(0, 0, 0, 0.4)">Details</div>
            <img src="../../assets/icon/arrow.png" alt="" width="16px" />
          </div>
        </div>
        <div
          style="
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
          "
        >
          <span v-if="loading" class="loading-text">Loading...</span>
          <span v-else style="font-weight: 700; color: #333; font-size: 1.1em">{{
            availableIncome
          }}</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div
        style="
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin-bottom: 12px;
        "
      >
        <button
          v-for="action in actions"
          :key="action.name"
          @click="handleAction(action.name)"
          :style="{
            padding: '8px 12px',
            borderRadius: '8px',
            background:
              activeAction === action.name
                ? 'linear-gradient(135deg, #BB92FF 2.82%, #8B45FF 99.15%)'
                : 'linear-gradient(135deg, #A2A2A2 2.82%, #646464 99.15%)',
            border: 'none',
            color: 'white',
            fontWeight: '600',
            cursor: 'pointer',
            transition: 'all 0.2s',
            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
          }"
        >
          {{ action.name }}
        </button>
      </div>

      <!-- 转账对象 -->
      <div v-if="activeAction === 'Transfer'">
        <div style="font-weight: 600; margin-bottom: 10px">Transfer to others</div>
        <div
          style="
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            margin-bottom: 12px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
          "
        >
          <!-- 用户信息 -->
          <div v-if="selectedPayee.id" style="width: 100%">
            <!-- 头像信息 -->
            <div style="display: flex; align-items: center; margin-bottom: 12px">
              <!-- 头像 -->
              <div
                style="
                  position: relative;
                  width: 50px;
                  height: 50px;
                  border-radius: 25px;
                  background-color: #8b5cf6;
                  color: white;
                  margin-right: 12px;
                  overflow: hidden;
                  font-size: 20px;
                  font-weight: 600;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img
                  v-if="selectedPayee.avatar"
                  :src="selectedPayee.avatar"
                  :alt="selectedPayee.name"
                  style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%"
                />
                <span v-else>{{ selectedPayee.name.charAt(0) }}</span>
              </div>
              <!-- 个人信息 -->
              <div style="flex: 1">
                <div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
                  {{ selectedPayee.name }}
                </div>
                <div style="margin: 0; font-size: 14px; color: #666">
                  ID: {{ selectedPayee.account || selectedPayee.id }}
                </div>
              </div>
              <!-- 换人按钮 -->
              <button
                style="
                  border-radius: 12px;
                  border: 1px solid #e6e6e6;
                  color: rgba(0, 0, 0, 0.4);
                  font-weight: 500;
                  padding: 2px 8px;
                  background: none;
                "
                @click="searchPayee"
              >
                Change
              </button>
            </div>
            <!-- 身份 -->
            <div style="margin-left: 62px; height: 20px; display: flex; gap: 5px">
              <img
                v-if="selectedPayee.isHost"
                src="../../assets/icon/host.png"
                alt=""
                height="100%"
              />
              <img
                v-if="selectedPayee.isAgency"
                src="../../assets/icon/agency.png"
                alt=""
                height="100%"
              />
              <img
                v-if="selectedPayee.hasSalary"
                src="../../assets/icon/RA.png"
                alt=""
                height="100%"
              />
            </div>
          </div>

          <!-- 空状态 - 默认显示 -->
          <div v-else style="display: flex; justify-content: center; align-items: center">
            <div
              style="
                font-weight: 590;
                color: rgba(0, 0, 0, 0.4);
                padding: 16px;
                border-radius: 12px;
                box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
              "
              @click="searchPayee"
            >
              Search
            </div>
          </div>
        </div>
      </div>

      <!-- 转账部分 -->
      <div v-if="activeAction === 'Transfer'">
        <div
          style="
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          "
        >
          <!-- 转账金额选择 -->
          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px">
            <div
              v-for="coin in coinOptions"
              :key="coin.id"
              @click="selectCoin(coin)"
              :style="{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                border: selectedCoin === coin.id ? '2px solid #8b5cf6' : '2px solid #e5e7eb',
                borderRadius: '12px',
                cursor: 'pointer',
                transition: 'all 0.2s',
                backgroundColor: selectedCoin === coin.id ? '#f3f4f6' : 'white',
                aspectRatio: '1/1',
              }"
            >
              <img src="../../assets/icon/coin.png" alt="" style="width: 40%" />
              <div style="font-weight: 500; color: #373232">
                {{ coin.amount }}
              </div>
              <div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
            </div>
          </div>
        </div>

        <!-- 转账按钮 -->
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <button
            style="
              width: 70%;
              padding: 12px;
              background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
              color: white;
              border: none;
              border-radius: 32px;
              font-weight: 600;
              cursor: pointer;
              transition: all 0.2s;
            "
            @click="transfer"
            :disabled="!selectedCoin || !selectedPayee.id"
            :style="{
              background:
                !selectedCoin || !selectedPayee.id
                  ? '#ccc'
                  : 'linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%)',
              opacity: !selectedCoin || !selectedPayee.id ? 0.6 : 1,
            }"
          >
            Transfer
          </button>
        </div>
      </div>

      <!-- Exchange 页面内容 -->
      <div v-if="activeAction === 'Exchange'">
        <div
          style="
            background-color: white;
            padding: 16px;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
          "
        >
          <!-- 兑换金额选择 -->
          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
            <div
              v-for="option in exchangeOptions"
              :key="option.id"
              @click="selectExchangeOption(option)"
              :style="{
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                border:
                  selectedExchangeOption === option.id ? '2px solid #8b5cf6' : '2px solid #e5e7eb',
                borderRadius: '12px',
                cursor: 'pointer',
                transition: 'all 0.2s',
                backgroundColor: selectedExchangeOption === option.id ? '#f3f4f6' : 'white',
                aspectRatio: '1/1',
              }"
            >
              <img src="../../assets/icon/coin.png" alt="" style="width: 40%" />
              <div style="font-weight: 500; color: #373232">
                {{ option.coins }}
              </div>
              <div style="font-weight: 500; color: #131111">
                {{ option.cash }}
              </div>
            </div>
          </div>
        </div>

        <!-- 兑换按钮 -->
        <div style="display: flex; justify-content: center; margin-top: 10px">
          <button
            style="
              width: 70%;
              padding: 12px;
              background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
              color: white;
              border: none;
              border-radius: 32px;
              font-weight: 600;
              cursor: pointer;
              transition: all 0.2s;
            "
            @click="handleExchange"
            :disabled="!selectedExchangeOption"
            :style="{
              background: !selectedExchangeOption
                ? '#ccc'
                : 'linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%)',
              opacity: !selectedExchangeOption ? 0.6 : 1,
            }"
          >
            Exchange
          </button>
        </div>
      </div>

      <!-- Cash out 页面内容 -->
      <div v-if="activeAction === 'Cash out'">
        <!-- 提现资料 -->
        <!-- 银行帐号信息 -->
        <div>
          <!-- 标题 -->
          <div style="display: flex; align-items: center; margin-bottom: 10px">
            <div style="font-weight: 600">KYC</div>
          </div>
          <!-- 银行卡信息 -->
          <div
            style="
              background-color: white;
              padding: 16px;
              border-radius: 12px;
              margin-bottom: 12px;
              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
            "
          >
            <!-- 未上传银行卡信息 -->
            <div
              v-if="!hasBankCard"
              style="display: flex; justify-content: space-between; align-items: center"
              @click="gotoKYC"
            >
              <span style="font-weight: 510; font-size: 1em">Complete information</span>
              <img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" />
            </div>

            <!-- 获取到银行卡信息 -->
            <div v-else style="width: 100%; display: flex; flex-direction: column; gap: 8px">
              <!-- 图片 -->
              <div style="display: flex; justify-content: space-between; align-items: center">
                <span style="font-weight: 510; font-size: 1em"
                  >Passport/ID card:({{ bankCardInfo.cardImages.length }}/3)</span
                >
                <img src="../../assets/icon/arrow.png" alt="" style="width: 6vw" @click="gotoKYC" />
              </div>
              <div style="display: flex; align-items: center; gap: 4px">
                <img
                  :src="imgUrl"
                  alt=""
                  v-for="imgUrl in bankCardInfo.cardImages"
                  style="width: 10vw; aspect-ratio: 1/1; border-radius: 4px"
                />
              </div>

              <!-- 卡号 -->
              <div style="font-weight: 500">Contact number:</div>
              <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
                {{ bankCardInfo.contactNumber }}
              </div>

              <!-- 备注信息 -->
              <div style="font-weight: 500">Other description:</div>
              <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.8em">
                {{ bankCardInfo.description }}
              </div>
            </div>
          </div>
        </div>

        <!-- 提现按钮 -->
        <div style="display: flex; justify-content: center; align-items: center">
          <div
            style="
              margin-top: 10px;
              width: 80%;
              border-radius: 32px;
              padding: 12px;
              color: #fff;
              font-weight: 590;
              text-align: center;
            "
            :style="{
              background: hasBankCard
                ? 'linear-gradient(135deg, #BB92FF 2.82%, #8B45FF 99.15%), linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)'
                : 'linear-gradient(135deg, #D1CED6 2.82%, #7C7882 99.15%)',
            }"
            @click="CashOut"
          >
            Cash out
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗遮罩层 -->
    <maskLayer :maskLayerShow="maskLayerShow" @click="maskLayerShow = false">
      <!-- 输入邀请码模块 -->
      <div
        style="
          width: 100vw;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
        "
        @click="maskLayerShow = false"
      >
        <div
          style="
            width: 80%;
            border-radius: 12px;
            background: #fff;
            padding: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
          "
          @click.stop
        >
          <div style="color: rgba(0, 0, 0, 0.8); font-weight: 800">Tips</div>
          <div style="color: rgba(0, 0, 0, 0.4); font-weight: 600; font-size: 0.7em">
            Cash withdrawals require review. Pleasewait patiently for the cash to arrive afterthe
            review is passed.
          </div>
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              border-radius: 12px;
              background: linear-gradient(
                152deg,
                rgba(198, 112, 255, 0.8) 7.01%,
                rgba(119, 38, 255, 0.8) 92.99%
              );

              color: #fff;
              font-weight: 800;
              padding: 8px 12px;
              width: 50%;
            "
            @click="Receive"
          >
            Receive
          </div>
        </div>
      </div>
    </maskLayer>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import MobileHeader from '@/components/MobileHeader.vue'
import { getBankBalance, userBankTransfer } from '@/api/wallet.js'
import { getSelectedPayee, clearSelectedPayee } from '@/utils/payeeStore.js'
import { showError, showSuccess } from '@/utils/toast.js'
import { setApplyInfo, getApplyInfo } from '@/utils/applyStore.js'
import maskLayer from '@/components/MaskLayer.vue'

const router = useRouter()

const availableIncome = ref('$23456')
const selectedCoin = ref(null)
const selectedExchangeOption = ref(null)
const selectedCashOutOption = ref(null)
const activeAction = ref('Transfer')
const loading = ref(false)

const maskLayerShow = ref(false)

// 操作按钮
const actions = ref([{ name: 'Exchange' }, { name: 'Transfer' }, { name: 'Cash out' }])

// 查看历史提现信息
const gotoKYC = () => {
  router.push('/KYC')
}

// 提现按钮
const CashOut = () => {
  if (hasBankCard.value) {
    try {
      maskLayerShow.value = true
    } catch (error) {
      showError(error.errorMsg)
    }
  }
}

// 确认提现
const Receive = () => {
  setApplyInfo()
  maskLayerShow.value = false
}

// 选中的收款人
const selectedPayee = reactive({
  id: null,
  account: '',
  name: '',
  avatar: '',
  type: '',
  isHost: false,
  isAgency: false,
  hasSalary: false,
})

// 转账金币选项
const coinOptions = reactive([
  { id: 1, amount: 10500, price: 1 },
  { id: 2, amount: 52500, price: 5 },
  { id: 3, amount: 105000, price: 10 },
  { id: 4, amount: 525000, price: 50 },
  { id: 5, amount: 1050000, price: 100 },
  { id: 6, amount: 2100000, price: 200 },
])

// 兑换选项
const exchangeOptions = reactive([
  { id: 1, coins: '10000', cash: '$1' },
  { id: 2, coins: '10000', cash: '$1' },
  { id: 3, coins: '10000', cash: '$1' },
  { id: 4, coins: '10000', cash: '$1' },
  { id: 5, coins: '10000', cash: '$1' },
  { id: 6, coins: '10000', cash: '$1' },
])

const bankCardInfo = ref({})
const hasBankCard = computed(() => {
  return Object.keys(bankCardInfo.value).length > 0
})

// 初始化收款人信息
const initializePayee = () => {
  const savedPayee = getSelectedPayee()
  if (savedPayee) {
    Object.assign(selectedPayee, savedPayee)
  }
}

// 获取银行余额
const fetchBankBalance = async () => {
  loading.value = true

  try {
    const response = await getBankBalance()

    if (response.status && typeof response.body === 'number') {
      availableIncome.value = `$${response.body.toFixed(2)}`
    } else {
      availableIncome.value = '$0.00'
    }
  } catch (error) {
    console.error('Failed to fetch bank balance:', error)
    availableIncome.value = '$0.00'
    showError('Failed to load balance. Please try again.')
  } finally {
    loading.value = false
  }
}

// 方法
const showDetails = () => {
  router.push('/income-details')
}

const searchPayee = () => {
  router.push('/search-payee')
}

// 处理操作按钮点击
const handleAction = (actionName) => {
  activeAction.value = actionName
  // 重置所有选择
  selectedCoin.value = null
  selectedExchangeOption.value = null
  selectedCashOutOption.value = null
}

// 清除当前选中的收款人
const clearPayee = () => {
  Object.assign(selectedPayee, {
    id: null,
    account: '',
    name: '',
    avatar: '',
    type: '',
    isHost: false,
    isAgency: false,
    hasSalary: false,
  })
  clearSelectedPayee()
}

const selectCoin = (coin) => {
  if (selectedCoin.value === coin.id) {
    selectedCoin.value = null
  } else {
    selectedCoin.value = coin.id
  }
}

const selectExchangeOption = (option) => {
  if (selectedExchangeOption.value === option.id) {
    selectedExchangeOption.value = null
  } else {
    selectedExchangeOption.value = option.id
  }
}

const selectCashOutOption = (option) => {
  if (selectedCashOutOption.value === option.id) {
    selectedCashOutOption.value = null
  } else {
    selectedCashOutOption.value = option.id
  }
}

const transfer = async () => {
  if (!selectedCoin.value) {
    showError('Please select an amount first')
    return
  }

  if (!selectedPayee.id) {
    showError('Please select a payee first')
    return
  }

  const selectedCoinData = coinOptions.find((coin) => coin.id === selectedCoin.value)

  const transferData = {
    amount: selectedCoinData.price,
    acceptUserId: selectedPayee.id,
    acceptMethod: 'BANK_TRANSFER',
  }

  try {
    const response = await userBankTransfer(transferData)
    if (response.status) {
      showSuccess(`Successfully transferred $${selectedCoinData.price} to ${selectedPayee.name}`)
    } else {
      showError(`Failed to transfer $${selectedCoinData.price}`)
    }

    selectedCoin.value = null
    await fetchBankBalance()
  } catch (error) {
    console.error('Transfer failed:', error)
    if (error.errorCode === 5000) {
      showError('Insufficient balance')
    } else if (error.errorCode === 5010 || error.errorCode === 5009) {
      showError('Payment password error')
    } else {
      showError('Transfer failed, please try again later')
    }
  }
}

const handleExchange = () => {
  if (!selectedExchangeOption.value) {
    showError('Please select an amount first')
    return
  }

  const selectedOption = exchangeOptions.find(
    (option) => option.id === selectedExchangeOption.value
  )
  showSuccess(`Exchanging ${selectedOption.coins} coins for ${selectedOption.cash}`)
  selectedExchangeOption.value = null
}

const handleCashOut = () => {
  if (!selectedCashOutOption.value) {
    showError('Please select an amount first')
    return
  }

  const selectedOption = cashOutOptions.find((option) => option.id === selectedCashOutOption.value)
  showSuccess(`Cashing out ${selectedOption.coins} coins for ${selectedOption.cash}`)
  selectedCashOutOption.value = null
}

// 页面加载时获取银行余额和初始化收款人
onMounted(() => {
  fetchBankBalance()
  initializePayee()
  if (getApplyInfo()) {
    bankCardInfo.value =
      { ...getApplyInfo(), cardImages: JSON.parse(getApplyInfo().cardImages) } || {}
  }
})

onUnmounted(() => {
  clearPayee()
  setApplyInfo()
})
</script>

<style scoped>
* {
  color: rgba(0, 0, 0, 0.8);
  font-family: 'SF Pro Text';
}

.transfer {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.content {
  padding: 16px;
  position: relative;
  z-index: 2;
}

.loading-text {
  font-weight: 500;
  color: #8b5cf6;
  font-style: italic;
}

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

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

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