<template>
  <div class="mx-auto max-w-3xl px-4 py-8">
    <div class="bg-white rounded-xl shadow-sm p-6">
      <div class="mb-6">
        <h1 class="text-xl font-bold text-gray-800">{{ $t('Account Recharge') }}</h1>
        <p class="text-gray-600 mt-2">{{ $t('Recharge your account balance to pay for your services.') }}</p>
      </div>
      
      <!-- Payment method selection -->
      <div class="mb-6">
        <div class="flex w-full rounded-full bg-gray-100 p-1 text-sm text-gray-800">
          <div
            class="w-1/2 cursor-pointer rounded-full py-2 text-center transition-all"
            :class="{ 'bg-white shadow-sm font-medium text-blue-600': paymentMethod === 'online' }"
            @click="paymentMethod = 'online'"
          >
            {{ $t('Online Recharge') }}
          </div>
          <div
            class="w-1/2 cursor-pointer rounded-full py-2 text-center transition-all"
            :class="{ 'bg-white shadow-sm font-medium text-blue-600': paymentMethod === 'transfer' }"
            @click="paymentMethod = 'transfer'"
          >
            {{ $t('Bank Transfer') }}
          </div>
        </div>
      </div>
      
      <!-- Online recharge form -->
      <div v-if="paymentMethod === 'online'">
        <BuyPrepaidCreditsForm 
          :minimumAmount="minimumAmount"
          @success="onRechargeSuccess"
          @cancel="onRechargeCancel"
        />
      </div>
      
      <!-- Bank transfer information -->
      <div v-else class="space-y-6">
        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4">
          <div class="mb-4">
            <h3 class="font-medium text-gray-900">{{ $t('Bank Account Information') }}</h3>
          </div>
          
          <div class="space-y-3 text-sm">
            <div class="flex justify-between items-center py-1 border-b border-gray-200">
              <span class="text-gray-600">{{ $t('Company Name') }}</span>
              <span class="font-medium text-gray-900">广州市向日葵网络信息科技有限公司</span>
            </div>
            <div class="flex justify-between items-center py-1 border-b border-gray-200">
              <span class="text-gray-600">{{ $t('Bank Name') }}</span>
              <span class="font-medium text-gray-900">中国农业银行股份有限公司广州花都金狮支行</span>
            </div>
            <div class="flex justify-between items-center py-1 border-b border-gray-200">
              <span class="text-gray-600">{{ $t('Account Number') }}</span>
              <span class="font-medium text-gray-900 font-mono">4408 6601 0400 20960</span>
            </div>
          </div>
        </div>
        
        <!-- Important notice -->
        <div class="rounded-lg bg-yellow-50 border border-yellow-200 p-4">
          <div class="flex">
            <i-lucide-alert-circle class="h-5 w-5 text-yellow-600 mr-2 flex-shrink-0" />
            <div>
              <h4 class="font-medium text-yellow-800">{{ $t('Important Notice') }}</h4>
              <ul class="mt-2 text-sm text-yellow-700 space-y-1 list-disc pl-4">
                <li>{{ $t('Please include your team ID in the transfer note:') }}
                  <strong 
                    class="font-mono bg-yellow-100 px-1 rounded cursor-pointer inline-flex items-center gap-1 hover:bg-yellow-200 transition-colors"
                    @click="copyTransferNote"
                    :title="$t('Click to copy')"
                  >
                    {{ $team.pg.name }}
                    <i-lucide-copy class="h-3.5 w-3.5 text-yellow-600" />
                  </strong>
                  <span v-if="showCopiedMessage" class="text-xs text-green-600 ml-1 transition-opacity">{{ $t('Copied!') }}</span>
                </li>
                <li>{{ $t('After successful transfer, please contact customer service for confirmation. Our finance team will process within 1 business day.') }}</li>
                <li>{{ $t('If you have any questions, please contact customer service.') }}</li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- Recharge process explanation -->
        <div class="rounded-lg border border-gray-200 p-4 bg-blue-50">
          <div class="flex">
            <i-lucide-info class="h-5 w-5 text-blue-600 mr-2 flex-shrink-0" />
            <div>
              <h4 class="font-medium text-blue-800">{{ $t('Recharge Process') }}</h4>
              <p class="mt-2 text-sm text-blue-700">
                {{ $t('After completing the bank transfer, our finance team will add the funds to your account balance after confirming receipt. This process usually takes 1 business day. For urgent processing, please contact customer service.') }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Button } from 'jingrow-ui';
import BuyPrepaidCreditsForm from '../components/BuyPrepaidCreditsForm.vue';

export default {
  name: 'RechargeCredits',
  components: {
    BuyPrepaidCreditsForm,
    Button
  },
  data() {
    return {
      paymentMethod: 'online', // Default to online recharge
      minimumAmount: 0,
      showCopiedMessage: false
    };
  },
  created() {
    // Get minimum recharge amount from URL parameter if available
    if (this.$route.query.amount) {
      this.minimumAmount = parseFloat(this.$route.query.amount) || 0;
    }
  },
  methods: {
    onRechargeSuccess() {
      this.$toast.success(this.$t('Recharge successful'));
      
      // If redirected from another page, go back
      if (this.$route.query.redirect) {
        this.$router.push(this.$route.query.redirect);
      } else {
        // Otherwise navigate to billing page
        this.$router.push('/billing');
      }
    },
    onRechargeCancel() {
      // Cancel recharge, go back
      this.$router.back();
    },
    copyTransferNote() {
      const textToCopy = `${this.$team.pg.name}`;
      
      // 使用创建临时元素的方法作为备选
      try {
        // 尝试使用现代API
        if (navigator.clipboard) {
          navigator.clipboard.writeText(textToCopy)
            .then(() => {
              this.showCopiedSuccessMessage();
            })
            .catch(() => {
              this.fallbackCopyTextToClipboard(textToCopy);
            });
        } else {
          this.fallbackCopyTextToClipboard(textToCopy);
        }
      } catch (error) {
        this.fallbackCopyTextToClipboard(textToCopy);
      }
    },
    
    fallbackCopyTextToClipboard(text) {
      // 创建临时文本区域元素
      const textArea = document.createElement('textarea');
      textArea.value = text;
      
      // 设置样式以隐藏元素
      textArea.style.position = 'fixed';
      textArea.style.left = '-999999px';
      textArea.style.top = '-999999px';
      document.body.appendChild(textArea);
      
      // 选择文本并复制
      textArea.focus();
      textArea.select();
      
      let successful = false;
      try {
        successful = document.execCommand('copy');
      } catch (err) {
        console.error('复制失败:', err);
      }
      
      // 移除临时元素
      document.body.removeChild(textArea);
      
      if (successful) {
        this.showCopiedSuccessMessage();
      } else {
        this.$toast.error(this.$t('Copy failed, please copy manually'));
      }
    },
    
    showCopiedSuccessMessage() {
      this.showCopiedMessage = true;
      setTimeout(() => {
        this.showCopiedMessage = false;
      }, 2000);
    }
  }
};
</script> 