<template>
  <view class="add-card-page">
    <view class="form-container">
      <view class="form-item">
        <text class="label">持卡人</text>
        <input class="input" type="text" v-model="form.holder_name" placeholder="请输入持卡人姓名" />
      </view>
      <view class="form-item">
        <text class="label">卡号</text>
        <input class="input" type="number" v-model="form.card_no" placeholder="请输入银行卡号" @input="detectBank" maxlength="19" />
      </view>
      <view class="form-item">
        <text class="label">银行</text>
        <input class="input" type="text" v-model="form.bank_name" placeholder="自动识别或手动输入" />
      </view>
      <view class="form-item">
        <text class="label">手机号</text>
        <input class="input" type="number" v-model="form.phone" placeholder="银行预留手机号" maxlength="11" />
      </view>
      
      <view class="form-item switch-item">
        <text class="label">设为默认卡</text>
        <switch :checked="form.is_default" @change="onSwitchChange" color="#ff5000" />
      </view>
    </view>
    
    <view class="action-section">
      <button class="submit-btn" :class="{ disabled: loading }" :disabled="loading" @click="submit">确认添加</button>
    </view>
  </view>
</template>

<script setup lang="uts">
import { ref, reactive } from 'vue'
import { supabaseService } from '@/utils/supabaseService.uts'

type BankCardForm = {
    holder_name: string
    card_no: string
    bank_name: string
    phone: string
    is_default: boolean
}

const loading = ref(false)
const form = reactive({
  holder_name: '',
  card_no: '',
  bank_name: '',
  phone: '',
  is_default: false
} as BankCardForm)

const onSwitchChange = (e: UniSwitchChangeEvent) => {
  form.is_default = e.detail.value
}

// 模拟卡号识别
const detectBank = (e: any) => {
  const val = form.card_no
  if (val.length >= 6) {
    if (val.startsWith('6222')) form.bank_name = '中国工商银行'
    else if (val.startsWith('6227')) form.bank_name = '中国建设银行'
    else if (val.startsWith('6225')) form.bank_name = '招商银行'
    else if (val.startsWith('6228')) form.bank_name = '中国农业银行'
    // else form.bank_name = '' 
  }
}

const submit = async () => {
    if (form.holder_name == '' || form.card_no == '' || form.bank_name == '') {
        uni.showToast({ title: '请完善卡片信息', icon: 'none' })
        return
    }
    
    loading.value = true
    
    try {
        const cardData = new UTSJSONObject()
        cardData.set('holder_name', form.holder_name)
        cardData.set('bank_name', form.bank_name)
        cardData.set('card_no', form.card_no) // Also save full card no if needed, or just last4
        // 截取后4位
        const last4 = form.card_no.length > 4 ? form.card_no.slice(-4) : form.card_no
        cardData.set('card_no_last4', last4)
        cardData.set('phone', form.phone)
        cardData.set('is_default', form.is_default)
        // 简单推定为储蓄卡
        cardData.set('card_type', 'debit') 
        
        const success = await supabaseService.addBankCard(cardData)
        if (success) {
            uni.showToast({ title: '添加成功' })
            setTimeout(() => {
                uni.navigateBack()
            }, 1000)
        } else {
            uni.showToast({ title: '添加失败', icon: 'none' })
        }
    } catch (e) {
        console.error(e)
        uni.showToast({ title: '系统错误', icon: 'none' })
    } finally {
        loading.value = false
    }
}
</script>

<style>
.add-card-page {
  background-color: #f5f5f5;
    flex: 1;
}

.form-container {
  background-color: #fff;
  padding: 0 15px;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  width: 80px;
  font-size: 15px;
  color: #333;
}

.input {
  flex: 1;
  font-size: 15px;
}

.switch-item {
  justify-content: space-between;
}

.action-section {
  padding: 30px 15px;
}

.submit-btn {
  background-color: #ff5000;
  color: #fff;
  border-radius: 25px;
  font-size: 16px;
}

.submit-btn.disabled {
    opacity: 0.6;
}
</style>
