<template>
  <div class="wallet-page">
    <!-- ===== AURORA BACKGROUND ===== -->
    <div class="wallet-aurora-bg" aria-hidden="true">
      <div class="wallet-orb wallet-orb-1"></div>
      <div class="wallet-orb wallet-orb-2"></div>
      <div class="wallet-orb wallet-orb-3"></div>
      <div class="wallet-grid-overlay"></div>
      <div class="wallet-noise-texture"></div>
    </div>

    <!-- ===== MAIN CONTENT ===== -->
    <div class="wallet-content">
      <!-- Wallet Balance Cards -->
      <div class="wallet-list">
        <div class="wallet-card" v-for="(item, index) in 2" :key="index">
          <div class="wallet-card-inner">
            <div class="wallet-card-header">
              <h3 class="wallet-card-title">{{ index == 0 ? $t('common.mibi') : $t('common.baomibi') }} {{ $t('personalCenter.yue') }}</h3>
              <div class="wallet-card-balance">{{ index == 0 ? appStore?.userInfo?.pointsBalance || 0 : appStore?.userInfo?.baoMiBalance || 0 }}</div>
            </div>
            <div class="wallet-card-actions">
              <div @click="show = true" class="wallet-action-btn primary" v-if="index == 1">
                <img src="/src/assets/imgs/my/tixian@2x.png" alt="">
                <span>{{ $t('personalCenter.shenqingtixian') }}</span>
              </div>
              <div @click="changeTransformation(index)" class="wallet-action-btn secondary">
                <img src="/src/assets/imgs/my/zhuanhuan@2x.png" alt="">
                <span>{{ index == 0 ? $t('personalCenter.zhuanhuanbaomibi') : $t('personalCenter.zhuanghuanmibi') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Transaction Tabs -->
      <div class="wallet-tabs">
        <div class="wallet-tabs-header">
          <div 
            v-for="tab in tabs" 
            :key="tab.name" 
            class="wallet-tab"
            :class="{ active: form.changeType == tab.name }"
            @click="form.changeType = tab.name; handleClick({ props: { name: tab.name } })"
          >
            {{ $t(tab.label) }}
          </div>
        </div>
        
        <div class="wallet-tabs-content">
          <div class="wallet-subtabs" v-if="form.changeType != 3">
            <div 
              v-for="(item, index) in 2"
              :key="index"
              @click="changeType(index)" 
              :class="{ active: index + 1 == form.balanceType }" 
              class="wallet-subtab"
            >
              {{ index == 0 ? $t('common.mibi') : $t('common.baomibi') }}{{ $t('personalCenter.details') }}
            </div>
          </div>

          <!-- Withdrawal History -->
          <template v-if="form.changeType == 3">
            <div class="wallet-transaction-list">
              <div class="wallet-transaction-card" v-for="(item, index) in list" :key="index">
                <div class="wallet-transaction-header">
                  <el-tag
                    :type="item.applyStatus == 0 ? 'primary' : item.applyStatus == 1 ? 'success' : item.applyStatus == 2 ? 'danger' : ''"
                    class="wallet-transaction-status"
                  >
                    {{ item.applyStatus == 0 ? $t('personalCenter.daishenhe') : item.applyStatus == 1 ?
                      $t('personalCenter.yitongguo') : $t('personalCenter.weitongguo') }}
                  </el-tag>
                  <div class="wallet-transaction-amount">￥{{ item.applyAmount }}</div>
                </div>

                <div class="wallet-transaction-details">
                  <div class="wallet-transaction-detail-item">
                    <span class="wallet-transaction-label">{{ $t('personalCenter.dingdanhao') }}:</span>
                    <span class="wallet-transaction-value">{{ item.applyNo }}</span>
                  </div>
                  <div class="wallet-transaction-detail-item">
                    <span class="wallet-transaction-label">{{ $t('personalCenter.shouxufei') }}:</span>
                    <span class="wallet-transaction-value">{{ item.feeAmount }}</span>
                  </div>
                  <div class="wallet-transaction-detail-item">
                    <span class="wallet-transaction-label">{{ $t('personalCenter.tixianfangshi') }}:</span>
                    <span class="wallet-transaction-value">{{ item.settleType == 'alipay' ?
                      $t('personalCenter.zhifubao') : item.settleType == 'wechat' ? '微信' : $t('personalCenter.yinhangka')
                      }}</span>
                  </div>
                  <div class="wallet-transaction-detail-item">
                    <span class="wallet-transaction-label">{{ $t('personalCenter.tixianzhanghao') }}:</span>
                    <span class="wallet-transaction-value">{{ item.receiveAccount }}</span>
                  </div>
                  <div class="wallet-transaction-detail-item">
                    <span class="wallet-transaction-label">{{ $t('personalCenter.shenqingshijian') }}:</span>
                    <span class="wallet-transaction-value">{{ item.createTime }}</span>
                  </div>
                  <div v-if="item.applyStatus == 2" class="wallet-transaction-detail-item">
                    <span class="wallet-transaction-label">{{ $t('personalCenter.jujueliyou') }}:</span>
                    <span class="wallet-transaction-value danger">{{ item.auditRemark }}</span>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <!-- Income/Expense History -->
          <template v-else>
            <div class="wallet-transaction-list" v-if="list?.length">
              <div v-for="(item, index) in list" :key="index" class="wallet-transaction-card">
                <div class="wallet-transaction-info">
                  <div class="wallet-transaction-title">{{ item.bizTypeName }}</div>
                  <div class="wallet-transaction-time">{{ item.createTime }}</div>
                </div>
                <div class="wallet-transaction-amount" :class="{ green: form.changeType == 1 }">
                  {{ form.changeType == 1 ? '+' : '' }}{{ item.balanceChange }}
                </div>
              </div>
            </div>
          </template>

          <!-- Empty State -->
          <div v-if="!list?.length" class="wallet-empty-state">
            <el-empty :image-size="120" :description="$t('common.empty')" />
          </div>

          <!-- Pagination -->
          <div v-if="list?.length" class="wallet-pagination">
            <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
              @page-change="handlePageChange" />
          </div>
        </div>
      </div>

      <!-- Conversion Dialog -->
      <el-dialog 
        v-model="dialogVisible"
        :title="`${transformationIndex == 0 ? $t('personalCenter.zhuanhuanbaomibi') : $t('personalCenter.zhuanghuanmibi')}`"
        width="523"
        :lock-scroll="false"
        custom-class="wallet-dialog"
      >
        <div class="wallet-dialog-content">
          <el-form :model="walletForm" label-width="auto" label-position="top" :rules="rules" ref="ruleFormRefs">
            <el-row>
              <el-col :span="24">
                <div class="wallet-input-group">
                  <el-form-item :label="$t('common.use') + $t('common.baomibi')" v-if="transformationIndex" prop="orderAmt">
                    <el-input-number 
                      v-model="walletForm.orderAmt" 
                      :min="1" 
                      :max="appStore?.userInfo?.baoMiBalance || 1"
                      controls-position="right" 
                      size="large" 
                      @change="handleChange" 
                      style="width: 100%;"
                      :placeholder="$t('common.placeholderInput')" 
                      align="left" 
                      :input-style="{ fontSize: '28px' }"
                      class="wallet-input-number" 
                      step-strictly 
                    />
                  </el-form-item>

                  <el-form-item :label="$t('common.use') + $t('common.mibi')" v-else prop="orderAmt">
                    <el-input-number 
                      v-model="walletForm.orderAmt" 
                      :min="1"
                      :max="appStore?.userInfo?.pointsBalance || 1" 
                      :step="Number(configTxt.configValue)"
                      controls-position="right" 
                      size="large" 
                      @change="handleChange" 
                      style="width: 100%;"
                      :placeholder="$t('common.placeholderInput')" 
                      align="left" 
                      :input-style="{ fontSize: '28px' }"
                      class="wallet-input-number" 
                      step-strictly 
                    />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
            
            <div class="wallet-conversion-arrow">
              <img src="/src/assets/imgs/my/arrow-left-right-fill@2x.png" alt="">
            </div>
            
            <el-row>
              <el-col :span="24">
                <div class="wallet-input-group">
                  <el-form-item v-if="transformationIndex"
                    :label="$t('common.available') + $t('common.mibi') + `(${$t('personalCenter.shouxufeilv')}: ${walletForm.feeRate * 100}%)`">
                    <el-input 
                      v-model="walletForm.targetAmount" 
                      :placeholder="$t('common.placeholderInput')" 
                      readonly
                      disabled 
                      :input-style="{ fontSize: '28px' }" 
                      class="wallet-input"
                    />
                  </el-form-item>
                  <el-form-item v-else :label="$t('common.available') + $t('common.baomibi')">
                    <el-input 
                      v-model="walletForm.targetAmount" 
                      :placeholder="$t('common.placeholderInput')" 
                      readonly
                      disabled 
                      :input-style="{ fontSize: '28px' }" 
                      class="wallet-input"
                    />
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <div class="wallet-form-note" style="font-size: 14px;margin-top: 16px;"> 
              <text style="color: #E43434;">*</text> {{ configTxt.configName }}{{ configTxt.configValue }}
            </div>
            
            <el-form-item prop="checked">
              <el-checkbox v-model="walletForm.checked" class="wallet-checkbox">
                <template #default>
                  <div class="">
                    {{ $t('personalCenter.qydbty') }} 
                    <span 
                      @click.stop.prevent="changeShow('currency_conversion_protoco')" 
                      class="wallet-link"
                    >
                      《{{ $t('personalCenter.zhxy') }}》
                    </span> 
                  </div>
                </template>
              </el-checkbox>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="wallet-dialog-footer">
            <el-button @click="dialogVisible = false" class="wallet-dialog-btn secondary">
              {{ $t('common.cancel') }}
            </el-button>
            <el-button type="primary" class="wallet-dialog-btn primary" @click="confirmTransformation(ruleFormRefs)">
              {{ $t('common.confirm') }}
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- Withdrawal Dialog -->
      <el-dialog 
        v-model="show" 
        :lock-scroll="false"
        :title="$t('personalCenter.shenqingtixian')" 
        width="500"
        custom-class="wallet-dialog"
      >
        <div class="wallet-dialog-content">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
            <el-row>
              <el-col :span="24">
                <el-form-item :label="$t('personalCenter.txje')" prop="applyAmount">
                  <el-input 
                    type="number" 
                    :min="1" 
                    :max="appStore?.userInfo?.baoMiBalance" 
                    v-model="ruleForm.applyAmount"
                    :placeholder="$t('personalCenter.qsrtxje')" 
                    class="wallet-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item :label="$t('personalCenter.txfs')" prop="settleType">
                  <el-select 
                    v-model="ruleForm.settleType" 
                    :placeholder="$t('personalCenter.qxztxfs')" 
                    style="width: 100%"
                    class="wallet-select"
                  >
                    <el-option :label="$t('personalCenter.zhifubao')" value="alipay" />
                    <el-option :label="$t('personalCenter.yinhangka')" value="bank_card" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item :label="$t('personalCenter.xm')" prop="withdrawPerson">
                  <el-input 
                    v-model="ruleForm.withdrawPerson" 
                    :placeholder="$t('personalCenter.qsrxm')" 
                    class="wallet-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item :label="$t('personalCenter.txzh')" prop="receiveAccount">
                  <el-input 
                    v-model="ruleForm.receiveAccount" 
                    :placeholder="$t('personalCenter.qsrtxzh')" 
                    class="wallet-input"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item prop="checked1">
              <el-checkbox v-model="ruleForm.checked1" class="wallet-checkbox">
                <template #default>
                  <div class="">
                    {{ $t('personalCenter.qydbty') }} 
                    <span 
                      @click.stop.prevent="changeShow('withdrawal_agreement')" 
                      class="wallet-link"
                    >
                      《{{ $t('personalCenter.txxy') }}》
                    </span> 
                  </div>
                </template>
              </el-checkbox>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <div class="wallet-dialog-footer">
            <el-button @click="show = false" class="wallet-dialog-btn secondary">
              {{ $t('common.cancel') }}
            </el-button>
            <el-button type="primary" class="wallet-dialog-btn primary" @click="submitForm(ruleFormRef)">
              {{ $t('common.confirm') }}
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- Agreement Dialog -->
      <el-dialog 
        v-model="showWithdraw" 
        :title="agreementTitle" 
        width="50%"
        :lock-scroll="false"
        custom-class="wallet-dialog"
      >
        <div class="wallet-agreement-content" style="height: 500px;overflow-y: scroll;" v-html="agreementContent"></div>
        <template #footer> 
          <div class="wallet-dialog-footer">
             <el-button type="primary" class="wallet-dialog-btn primary" @click="confirmAgreement">
              {{ $t('common.confirm') }}
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'

import type { TabsPaneContext } from 'element-plus'

import Pagination from '@/components/Pagination.vue'

import { getUserInfo } from '@/api/auth'

import { payConfigDearch, calRate } from '@/api/order'

import { recordList, applyWithdraw, withdrawList } from '@/api/my'

import { getAgreementType } from '@/api/common.js'

import { createOrder } from '@/api/order.js'

import { useAppStore } from '@/pinia/appStore'

import DGTMessage from '@/utils/message'

import { useI18n } from 'vue-i18n'
import { el } from 'element-plus/es/locale'

const { t } = useI18n()

const appStore = useAppStore();

const tabs = ref([
  { label: 'personalCenter.incomeDetails', name: 1 },
  { label: 'personalCenter.usageRecord', name: 2 },
  { label: 'personalCenter.withdrawHistory', name: 3 },
])
const list = ref([])

const form = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  balanceType: 1,//1-米币 2-暴米币
  changeType: 1,//1-增加 2-减少
  orderByColumn: 'create_time',
  isAsc: 'desc'
})

const walletForm = ref({
  payMethod: '',
  orderType: '',
  productId: '',
  orderNum: null,
  orderAmt: 1,
  feeRate: 0,
  targetAmount: 0,
  checked: false
})

const ruleFormRef = ref()

const configTxt = ref({})

const userInfo = ref({})//用户信息

const dialogVisible = ref(false);

const transformationIndex = ref(0);

const show = ref(false);

const ruleForm = ref({
  applyAmount: null,
  settleType: "alipay",
  withdrawPerson: "",
  receiveAccount: "",
  checked1: false
})

const ruleFormRefs = ref()

const showWithdraw = ref(false);
const agreementContent = ref('');
const agreementTitle = ref('');

const confirmAgreement = () => {
  if (['转换协议','Conversion Agreement'].includes(agreementTitle.value)) {
    console.log('111')
   walletForm.value.checked = true;
  } else {
    ruleForm.value.checked1 = true;
  }
  showWithdraw.value = false;
  
}
// 获取协议
const changeShow = async (type) => {

  agreementTitle.value = t(type == 'withdrawal_agreement' ? 'personalCenter.txxy' : 'personalCenter.zhxy');
  let res = await getAgreementType({ agreementType: type });
  if (res.code === 200) {
    showWithdraw.value = true;
    agreementContent.value = res.data.content || '';
  }
}

const validatePass = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(t('common.placeholderInput')))
  } else if (Number(value) % Number(configTxt.value.configValue) !== 0 && transformationIndex.value == 0) {
    callback(new Error(`米币数量必须为${configTxt.value.configValue}的整倍数`))
  } else {
    callback()
  }
}

const validatePass1 = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(t('common.placeholderInput')))
    return
  } else if (Number(value) > appStore.userInfo.baoMiBalance) {
    callback(new Error(`余额不足`))
  } else {
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(t('personalCenter.qydbtyzhxy')))
    return
  } else {
    callback()
  }
}
const validatePass3 = (rule: any, value: any, callback: any) => {
  if (!value) {
    callback(new Error(t('personalCenter.qydbtytxxy')))
    return
  } else {
    callback()
  }
}
const rules = ref({
  applyAmount: [
    { required: true, validator: validatePass1, trigger: 'blur' }
  ],
  settleType: [
    { required: true, message: t('common.qingxuanze'), trigger: 'blur' }
  ],
  withdrawPerson: [
    { required: true, message: t('common.placeholderInput'), trigger: 'blur' }
  ],
  receiveAccount: [
    { required: true, message: t('common.placeholderInput'), trigger: 'blur' }
  ],
  orderAmt: [
    { required: true, trigger: 'blur', validator: validatePass },
  ],
  checked: [{
    required: true,
   validator:validatePass2,
    trigger: 'blur',
  }],
  checked1: [{
    required: true,
   validator:validatePass3,
    trigger: 'blur',
  }]
})

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let res = await applyWithdraw(ruleForm.value);
      if (res.code === 200) {
        show.value = false;
        appStore.USERINFO();
        getList()
        ruleForm.value.applyAmount = null;
        DGTMessage.success(t('personalCenter.txsqytj'));
      }
    }
  })
}

// 确认转换
const confirmTransformation = async (formEl) => {
 
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let res = await createOrder({
        payMethod: walletForm.value.payMethod,
        orderType: walletForm.value.orderType,
        productId: '',
        orderNum: walletForm.value.targetAmount,
        orderAmt: walletForm.value.orderAmt
      })
      if (res.code === 200) {
        if (res.data.paySuccess) {
          dialogVisible.value = false;
          appStore.USERINFO();
          DGTMessage.success(`${transformationIndex.value ? t('personalCenter.zhuanhuanbaomibi') : t('personalCenter.zhuanghuanmibi')}${t('common.success')}`)
        }
      }
    }
  })


}

// 米币暴米币转换
const changeTransformation = async (index: any) => {
  

  transformationIndex.value = index;
  walletForm.value.payMethod = index ? 'BMI' : 'MI';
  walletForm.value.orderType = index ? 'exchange_mi' : 'exchange_bmi';
  let { data } = await payConfigDearch({ id: '03' });

  let result = data.filter((item: any) => item.configCode == 'bmb_to_mb_rate')
  if (result.length) {
    configTxt.value = result[0]
  }
  walletForm.value.orderAmt = index == 0 ? Number(configTxt.value.configValue) : 1
  if(index==0 && appStore?.userInfo?.pointsBalance <= 0){
    DGTMessage.warning(`${t('common.balanceNotEnough')}${t('common.baomibi')}`);
    return;
  }else if(index==1 && appStore?.userInfo?.baoMiBalance <= 0){
    DGTMessage.warning(`${t('common.balanceNotEnough')}${t('common.mibi')}`);
    return;
  }
  handleChange()
  dialogVisible.value = true;
}

const handleChange = async () => {
  if (walletForm.value.orderAmt) {
    if (transformationIndex.value == 0 && Number(walletForm.value.orderAmt) % Number(configTxt.value.configValue) !== 0) return
    let res = await calRate({
      orderType: walletForm.value.orderType,
      orderNum: walletForm.value.orderAmt
    });
    if (res.code === 200) {
      walletForm.value.feeRate = res.data.feeRate
      walletForm.value.targetAmount = res.data.targetAmount
    }
  }

}
// 米币暴米币切换
const changeType = (index) => {
  form.value.pageNum = 1;
  form.value.balanceType = index + 1;
  getList()
}

const handleClick = (tab: TabsPaneContext) => {
  form.value.pageNum = 1;
  form.value.changeType = tab.props.name;
  getList()
}
const getList = async () => {
  let api = form.value.changeType == 3 ? withdrawList(form.value) : recordList(form.value)
  let res = await api;
  list.value = res.rows;
  form.value.total = res.total;
}

const handlePageChange = (newPage: number, pageSize?: number) => {
  // list.value = []
  form.value.pageNum = newPage;
  if(pageSize)form.value.pageSize = pageSize;
  getList()
}
// 获取用户信息
const getInfo = async () => {
  let res = await getUserInfo();
  userInfo.value = res.user;
}

onMounted(() => {
  getInfo()
  getList()
})
</script>
<style scoped lang="scss">
/* ===== PAGE CONTAINER ===== */
.wallet-page {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(160deg, #eef2ff 0%, #ede9fe 28%, #e8e4ff 52%, #f3e8ff 72%, #fce7f3 100%);
  overflow-x: hidden;
}

/* ===== AURORA BACKGROUND ===== */
.wallet-aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.wallet-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: float 20s ease-in-out infinite;
}

.wallet-orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.15), transparent 70%);
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}

.wallet-orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.12), transparent 70%);
  bottom: -150px;
  left: -100px;
  animation-delay: -7s;
}

.wallet-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.1), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: -14s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

.wallet-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(79, 70, 229, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.5;
}

.wallet-noise-texture {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.03;
  mix-blend-mode: overlay;
}

/* ===== MAIN CONTENT ===== */
.wallet-content {
  position: relative;
  z-index: 1;
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== WALLET BALANCE CARDS ===== */
.wallet-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.wallet-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 
    0 8px 32px rgba(79, 70, 229, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);

  &:hover {
    transform: translateY(-8px);
    box-shadow: 
      0 16px 40px rgba(79, 70, 229, 0.18),
      0 4px 16px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

.wallet-card-inner {
  padding: 32px;
  position: relative;
  z-index: 1;
}

.wallet-card-header {
  margin-bottom: 24px;
}

.wallet-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 8px 0;
  letter-spacing: 0.02em;
}

.wallet-card-balance {
  font-size: 40px;
  font-weight: 800;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  line-height: 1.1;
}

.wallet-card-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.wallet-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;

  img {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }

  &:hover {
    transform: translateY(-2px);

    img {
      transform: scale(1.1);
    }
  }

  &.primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 
      0 4px 12px rgba(79, 70, 229, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);

    &:hover {
      box-shadow: 
        0 6px 16px rgba(79, 70, 229, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
  }

  &.secondary {
    background: rgba(255, 255, 255, 0.8);
    color: #4f46e5;
    border-color: rgba(79, 70, 229, 0.2);
    box-shadow: 
      0 2px 8px rgba(79, 70, 229, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);

    &:hover {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(79, 70, 229, 0.3);
      box-shadow: 
        0 4px 12px rgba(79, 70, 229, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
  }
}

/* ===== TABS ===== */
.wallet-tabs {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 
    0 8px 32px rgba(79, 70, 229, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.wallet-tabs-header {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.wallet-tab {
  padding: 10px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(249, 250, 251, 0.6);
  border: 1px solid rgba(229, 231, 235, 0.5);

  &:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(79, 70, 229, 0.2);
    color: #4f46e5;
  }

  &.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border-color: transparent;
    box-shadow: 
      0 4px 12px rgba(79, 70, 229, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

.wallet-subtabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.wallet-subtab {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(249, 250, 251, 0.6);
  border: 1px solid rgba(229, 231, 235, 0.5);

  &:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(79, 70, 229, 0.2);
    color: #4f46e5;
  }

  &.active {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border-color: transparent;
    box-shadow: 
      0 2px 8px rgba(79, 70, 229, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

/* ===== TRANSACTION LIST ===== */
.wallet-transaction-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.wallet-transaction-card {
  background: rgba(249, 250, 251, 0.6);
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;

  &:hover {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(79, 70, 229, 0.2);
    box-shadow: 
      0 8px 24px rgba(79, 70, 229, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

.wallet-transaction-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.wallet-transaction-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 12px;
}

.wallet-transaction-amount {
  font-size: 18px;
  font-weight: 700;
  color: #f52929;

  &.green {
    color: #1fb362;
  }
}

.wallet-transaction-info {
  flex: 1;
  min-width: 0;
}

.wallet-transaction-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 6px 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-transaction-time {
  font-size: 13px;
  color: #9ca3af;
  margin: 0;
}

.wallet-transaction-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wallet-transaction-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.wallet-transaction-label {
  color: #6b7280;
  font-weight: 500;
}

.wallet-transaction-value {
  color: #374151;
  font-weight: 400;

  &.danger {
    color: #f52929;
  }
}

/* ===== EMPTY STATE ===== */
.wallet-empty-state {
  padding: 60px 20px;
  text-align: center;
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== PAGINATION ===== */
.wallet-pagination {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== DIALOG ===== */
.wallet-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  
  .el-dialog__header {
    padding: 20px 24px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
  }

  .el-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
  }

  .el-dialog__body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .el-dialog__footer {
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
  }
}

.wallet-dialog-content {
  background: #fff;
  padding: 0;
}

.wallet-input-group {
  margin-bottom: 12px;
  
  :deep(.el-form-item__label) {
    font-size: 14px;
    font-weight: 500;
    color: #606266;
    margin-bottom: 8px;
    line-height: 1.5;
  }
}

.wallet-form {
  :deep(.el-form-item) {
    margin-bottom: 16px;
  }
}

.wallet-conversion-arrow {
  height: 40px;
  position: relative;
  margin: 8px 0;

  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    padding: 8px;
    box-shadow: 
      0 2px 8px rgba(79, 70, 229, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }
}

.wallet-form-note {
  color: #6b7280;
  line-height: 1.4;
  margin-bottom: 16px;
}

.wallet-input,
.wallet-input-number {
  :deep(.el-input__wrapper) {
    background-color: #fff;
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
    padding: 8px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset !important;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 1px #409eff inset !important;
    }
  }

  :deep(.el-input__inner) {
    font-size: 14px;
    font-weight: 400;
    color: #606266;
  }

  :deep(.el-input-number__increase),
  :deep(.el-input-number__decrease) {
    display: none;
  }
}

.wallet-select {
  :deep(.el-select__wrapper) {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    &:hover {
      border-color: rgba(79, 70, 229, 0.3);
    }

    &.is-focus {
      border-color: #4f46e5;
      box-shadow: 
        0 0 0 3px rgba(79, 70, 229, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
  }
}

.wallet-checkbox {
  margin-top: 12px;
  
  :deep(.el-checkbox__label) {
    font-size: 14px;
    color: #606266;
    line-height: 1.5;
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #409eff;
    border-color: #409eff;
  }
  
  :deep(.el-checkbox__inner) {
    border-radius: 4px;
  }
}

.wallet-link {
  color: #409eff;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;

  &:hover {
    color: #66b1ff;
    text-decoration: underline;
  }
}

.wallet-dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.wallet-dialog-btn {
  padding: 10px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

  &.primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    border-color: transparent;
    box-shadow: 
      0 4px 12px rgba(79, 70, 229, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);

    &:hover {
      background: linear-gradient(135deg, #4338ca, #6d28d9);
      box-shadow: 
        0 6px 16px rgba(79, 70, 229, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
  }

  &.secondary {
    background: rgba(255, 255, 255, 0.8);
    color: #6b7280;
    border-color: rgba(229, 231, 235, 0.8);

    &:hover {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(79, 70, 229, 0.2);
      color: #4f46e5;
    }
  }
}

.wallet-agreement-content {
  background: rgba(249, 250, 251, 0.6);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(229, 231, 235, 0.5);

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(79, 70, 229, 0.15);
    border-radius: 3px;

    &:hover {
      background: rgba(79, 70, 229, 0.25);
    }
  }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .wallet-content {
    padding: 16px;
  }

  .wallet-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wallet-card-inner {
    padding: 24px;
  }

  .wallet-card-balance {
    font-size: 32px;
  }

  .wallet-card-actions {
    flex-direction: column;
  }

  .wallet-action-btn {
    width: 100%;
    justify-content: center;
  }

  .wallet-tabs {
    padding: 20px;
    border-radius: 20px;
  }

  .wallet-tabs-header {
    flex-direction: column;
    gap: 8px;
  }

  .wallet-tab {
    width: 100%;
    text-align: center;
  }

  .wallet-subtabs {
    flex-wrap: wrap;
  }

  .wallet-subtab {
    flex: 1;
    min-width: 120px;
    text-align: center;
  }

  .wallet-transaction-card {
    padding: 16px;
  }

  .wallet-dialog {
    width: 90% !important;

    .el-dialog__header,
    .el-dialog__body,
    .el-dialog__footer {
      padding: 20px;
    }
  }

  .wallet-dialog-content {
    padding: 20px;
  }

  .wallet-input,
  .wallet-input-number {
    :deep(.el-input__inner) {
      font-size: 24px;
    }
  }
}

@media (max-width: 480px) {
  .wallet-content {
    padding: 12px;
  }

  .wallet-card-inner {
    padding: 20px;
  }

  .wallet-card-balance {
    font-size: 28px;
  }

  .wallet-tabs {
    padding: 16px;
    border-radius: 16px;
  }

  .wallet-transaction-detail-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .wallet-dialog-content {
    padding: 16px;
  }

  .wallet-dialog-footer {
    flex-direction: column;

    .wallet-dialog-btn {
      width: 100%;
    }
  }
}
</style>