<template>
  <div class="bank-account-form">
    <div v-if="loading" class="row">
      <div class="col-12 tx-semibold text-center text-default">
        <span class="spinner-border spinner-border-sm"></span>
      </div>
    </div>
    
    <Form v-if="!loading" @submit="onSubmit" :validation-schema="schema" v-slot="{ errors, isSubmitting }" class="row">
      <!-- Hidden fields -->
      <Field name="Id" type="hidden" :value="form.Id" />
      <Field name="UserId" type="hidden" :value="form.UserId" />
      
      <!-- Số tài khoản -->
      <div class="col-12">
        <div class="form-group mb-3">
          <label>Số tài khoản <span class="text-danger">*</span></label>
          <Field 
            v-model="form.AccountNumber" 
            name="AccountNumber" 
            type="text" 
            class="form-control"
            placeholder="Nhập số tài khoản ngân hàng" 
            :class="{ 'is-invalid': errors.AccountNumber }"
            maxlength="64"
          />
          <div class="invalid-feedback">{{ errors.AccountNumber }}</div>
        </div>
      </div>

      <!-- Tên chủ tài khoản -->
      <div class="col-12">
        <div class="form-group mb-3">
          <label>Tên chủ tài khoản <span class="text-danger">*</span></label>
          <Field 
            v-model="form.AccountHolderName" 
            name="AccountHolderName" 
            type="text" 
            class="form-control"
            placeholder="Nhập tên chủ tài khoản" 
            :class="{ 'is-invalid': errors.AccountHolderName }"
            maxlength="256"
          />
          <div class="invalid-feedback">{{ errors.AccountHolderName }}</div>
        </div>
      </div>

      <!-- Ngân hàng -->
      <div class="col-12">
        <div class="form-group mb-3">
          <label>Ngân hàng <span class="text-danger">*</span></label>
          <v-select 
            label="BrandName" 
            :options="bankOptions"
            v-model="selectedBank"
            :reduce="(option) => option"
            @update:modelValue="updateBankInfo"
            @search="onBankSearch"
            :filterable="false"
            :loading="bankLoading"
            placeholder="Chọn hoặc tìm kiếm ngân hàng..."
            :clearable="true"
          >
            <template v-slot:option="option">
              <div>
                <strong>{{ option.BrandName }}</strong>
                <br>
                <small class="text-muted">{{ option.FullName }}</small>
              </div>
            </template>
            <template v-slot:no-options="{ search, searching }">
              <template v-if="searching">
                Không có kết quả cho <em>{{ search }}</em>.
              </template>
              <span v-else style="opacity: 0.8">
                Nhập tên ngân hàng để tìm kiếm 
                ({{ bankOptions.length }} ngân hàng có sẵn)
              </span>
            </template>
          </v-select>
          <Field v-model="form.BankId" name="BankId" type="hidden" />
          <ErrorMessage class="invalid-error" name="BankId" />
        </div>
      </div>

      <!-- Tài khoản mặc định -->
      <div class="col-12">
        <div class="form-group mb-3">
          <div class="form-check">
            <input
              id="isDefault"
              v-model="form.IsDefault"
              type="checkbox"
              class="form-check-input"
            >
            <label for="isDefault" class="form-check-label">
              Đặt làm tài khoản mặc định
            </label>
          </div>
          <small class="text-muted">
            Tài khoản mặc định sẽ được sử dụng trong các giao dịch tự động
          </small>
        </div>
      </div>

      <!-- Ghi chú -->
      <div class="col-12">
        <div class="form-group mb-3">
          <label>Ghi chú</label>
          <textarea
            v-model="form.Note"
            class="form-control"
            rows="3"
            placeholder="Ghi chú thêm về tài khoản này..."
            maxlength="512"
          ></textarea>
          <div class="text-muted small">
            {{ form.Note ? form.Note.length : 0 }}/512 ký tự
          </div>
        </div>
      </div>

      <!-- Form Actions -->
      <div class="col-12">
        <div class="d-flex flex-row-reverse">
          <button @click="cancel" type="button" class="btn btn-main-default mg-l-15">
            Bỏ qua
          </button>
          <button type="submit" class="btn btn-main-primary" :disabled="isSubmitting">
            <span v-show="isSubmitting" class="spinner-border spinner-border-sm"></span>
            {{ form.Id ? 'Cập nhật' : 'Lưu' }}
          </button>
        </div>
      </div>
    </Form>
  </div>
</template>

<script setup>
//#region Imports
import { ref, reactive, computed, watch, onMounted } from 'vue'
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as Yup from 'yup'
//#endregion

//#region Services
import bankService from '@/services/bankService'
//#endregion

//#region Toast
import { useToast } from "vue-toastification"
const toast = useToast()
//#endregion

const loading = ref(false)
const bankLoading = ref(false)
const emit = defineEmits(['cancel', 'save'])

// Props
const props = defineProps({
  account: {
    type: Object,
    default: () => ({
      Id: 0,
      UserId: 0,
      AccountNumber: '',
      AccountHolderName: '',
      BankId: 0,
      IsDefault: false,
      Note: ''
    })
  },
  userId: {
    type: Number,
    required: true
  }
})

//#region Models
let form = reactive({
  Id: 0,
  UserId: 0,
  AccountNumber: '',
  AccountHolderName: '',
  BankId: 0,
  IsDefault: false,
  Note: ''
})
//#endregion

//#region Bank Options
const bankOptions = reactive([])
let searchTimeout = null

const selectedBank = computed({
  get() {
    return bankOptions.find(bank => bank.Id === form.BankId) || null
  },
  set(bank) {
    if (bank) {
      form.BankId = bank.Id || 0
    } else {
      form.BankId = 0
    }
  }
})
//#endregion

//#region Validations
const schema = Yup.object().shape({
  Id: Yup.number(),
  UserId: Yup.number().required('UserId không được để trống').min(1, 'UserId phải lớn hơn 0'),
  AccountNumber: Yup.string()
    .required('Số tài khoản không được để trống')
    .matches(/^[0-9]+$/, 'Số tài khoản chỉ được chứa các chữ số')
    .max(64, 'Số tài khoản không được vượt quá 64 ký tự'),
  AccountHolderName: Yup.string()
    .required('Tên chủ tài khoản không được để trống')
    .max(256, 'Tên chủ tài khoản không được vượt quá 256 ký tự'),
  BankId: Yup.number()
    .required('Vui lòng chọn ngân hàng')
    .min(1, 'Vui lòng chọn ngân hàng')
})
//#endregion

//#region Methods
const updateBankInfo = (bank) => {
  console.log('updateBankInfo called with:', bank)
  if (bank) {
    form.BankId = bank.Id || 0
    console.log('Updated form:', { BankId: form.BankId })
  } else {
    form.BankId = 0
    console.log('Cleared form bank info')
  }
}

const onBankSearch = (search, loading) => {
  if (searchTimeout) {
    clearTimeout(searchTimeout)
  }
  
  searchTimeout = setTimeout(async () => {
    if (search.length) {
      loading(true)
      try {
        console.log('Searching banks with keyword:', search)
        const banks = await bankService.sugBank(search)
        console.log('Search banks response:', banks)
        
        if (Array.isArray(banks)) {
          console.log('Banks from search:', banks)
          bankOptions.splice(0, bankOptions.length, ...banks)
        } else {
          console.warn('Search banks response is not an array:', banks)
        }
      } catch (error) {
        console.error('Error searching banks:', error)
        toast.error('Lỗi khi tìm kiếm ngân hàng')
      } finally {
        loading(false)
      }
    }
  }, 300)
}

const loadInitialBanks = async () => {
  try {
    bankLoading.value = true
    console.log('Loading initial banks...')
    const banks = await bankService.sugBank('')
    console.log('Banks response:', banks)
    
    if (Array.isArray(banks) && banks.length > 0) {
      console.log('Initial banks:', banks)
      bankOptions.splice(0, bankOptions.length, ...banks)
    } else {
      console.warn('No banks found or response is not an array:', banks)
      // Try with a common keyword to get some banks
      const fallbackBanks = await bankService.sugBank('vietin')
      if (Array.isArray(fallbackBanks) && fallbackBanks.length > 0) {
        bankOptions.splice(0, bankOptions.length, ...fallbackBanks)
        console.log('Loaded fallback banks:', fallbackBanks)
      }
    }
  } catch (error) {
    console.error('Error loading banks:', error)
    toast.error('Lỗi khi tải danh sách ngân hàng')
  } finally {
    bankLoading.value = false
  }
}

async function onSubmit() {
  try {
    loading.value = true
    emit('save', { ...form })
  } catch (error) {
    console.error('Error submitting form:', error)
    toast.error('Có lỗi xảy ra khi lưu dữ liệu')
  } finally {
    loading.value = false
  }
}

function cancel() {
  emit('cancel')
}
//#endregion

//#region Lifecycle
onMounted(async () => {
  // Load initial banks
  await loadInitialBanks()
  
  // Set UserId from props
  form.UserId = props.userId
  
  if (props.account) {
    Object.assign(form, props.account)
    // Ensure UserId is always set correctly
    form.UserId = props.userId
  }
})

// Watch for prop changes
watch(() => props.account, (newAccount) => {
  if (newAccount) {
    Object.assign(form, newAccount)
    // Ensure UserId is always set correctly
    form.UserId = props.userId
  }
}, { immediate: true })

// Watch for userId changes
watch(() => props.userId, (newUserId) => {
  form.UserId = newUserId
})
//#endregion
</script>

<style scoped>
.bank-account-form {
  padding: 0;
}

.invalid-error {
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25rem;
}
</style>
