<template>
  <div class="bank-account-form">
    <Form @submit="onSubmit" :validation-schema="schema" :initial-values="initialFormData" v-slot="{ errors }" class="row">
      <!-- Số tài khoản -->
      <div class="col-md-6 mb-3">
        <label class="form-label">Số tài khoản <span class="text-danger">*</span></label>
        <Field name="AccountNumber" v-model="formData.AccountNumber" type="text" class="form-control"
          placeholder="Nhập số tài khoản..." :class="{ 'is-invalid': errors.AccountNumber }" />
        <div class="invalid-feedback">{{ errors.AccountNumber }}</div>
      </div>

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

      <!-- Ngân hàng -->
      <div class="col-md-6 mb-3">
        <label class="form-label">Ngân hàng <span class="text-danger">*</span></label>
        <v-select 
          v-model="formData.BankId"
          label="BrandName" 
          :options="banks"
          :reduce="(option) => option.Id"
          placeholder="Chọn ngân hàng..." 
          :clearable="true">
          <template #no-options="{ search, searching, loading }">
            Không có ngân hàng nào
          </template>
          <template v-slot:option="option">
            <div>
              <div class="fw-bold">{{ option.BrandName }}</div>
              <div class="text-muted small">{{ option.FullName }}</div>
            </div>
          </template>
        </v-select>
        <Field v-model="formData.BankId" name="BankId" type="hidden" />
        <ErrorMessage class="invalid-feedback d-block" name="BankId" />
      </div>

      <!-- Tài khoản mặc định -->
      <div class="col-md-6 mb-3 d-flex align-items-center">
        <div class="form-check">
          <Field name="IsDefault" v-model="formData.IsDefault" type="checkbox" class="form-check-input"
            id="isDefaultCheck" />
          <label class="form-check-label" for="isDefaultCheck">
            Đặt làm tài khoản mặc định
          </label>
        </div>
      </div>

      <!-- Ghi chú -->
      <div class="col-md-12 mb-3">
        <label class="form-label">Ghi chú</label>
        <Field as="textarea" rows="3" name="Note" v-model="formData.Note" class="form-control"
          placeholder="Nhập ghi chú (tùy chọn)..." :class="{ 'is-invalid': errors.Note }" />
        <div class="invalid-feedback">{{ errors.Note }}</div>
      </div>

      <!-- Buttons -->
      <div class="col-12 d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-secondary" @click="handleCancel" :disabled="isSubmitting">
          Hủy
        </button>
        <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
          <span v-if="isSubmitting" class="spinner-border spinner-border-sm me-2"></span>
          {{ isEdit ? 'Cập nhật' : 'Tạo mới' }}
        </button>
      </div>
    </Form>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive, watch } from 'vue'
import { Form, Field, ErrorMessage } from 'vee-validate'
import * as Yup from 'yup'
import myBankAccountService from '@/services/myBankAccountService'
import bankService from '@/services/bankService'

const props = defineProps({
  id: {
    type: [Number, String],
    default: 0
  },
  isSubmitting: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['submit', 'cancel'])

// Data
const banks = reactive([])
const formData = reactive(myBankAccountService.createDefaultBankAccountModel())
const loading = ref(false)

// Computed
const isEdit = computed(() => {
  const id = props.id
  console.log('isEdit computed - props.id:', id, 'type:', typeof id)
  const result = id && Number(id) !== 0 && id !== '' && id !== 'null' && id !== 'undefined'
  console.log('isEdit computed - result:', result)
  return result
})

// Initial form data for vee-validate
const initialFormData = computed(() => {
  return {
    ...formData,
    BankId: formData?.BankId || null
  }
})

// Validation schema
const schema = Yup.object().shape({
  AccountNumber: Yup.string()
    .required('Số tài khoản không được để trống')
    .matches(/^\d+$/, 'Số tài khoản chỉ được chứa số')
    .max(64, 'Số tài khoản không 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 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 hợp lệ'),
  Note: Yup.string()
    .nullable()
    .max(512, 'Ghi chú không vượt quá 512 ký tự'),
  IsDefault: Yup.boolean()
})

// Methods
const loadBanks = async () => {
  try {
    banks.splice(0, banks.length)
    const result = await bankService.getAll()
    
    console.log('Bank API result:', result)
    
    if (result && Array.isArray(result) && result.length > 0) {
      result.forEach(bank => {
        banks.push(bank)
      })
      console.log('Loaded banks:', banks.length, banks)
    } else if (result && result.Data && Array.isArray(result.Data)) {
      // Handle case where result is wrapped in Data property
      result.Data.forEach(bank => {
        banks.push(bank)
      })
      console.log('Loaded banks from Data property:', banks.length, banks)
    } else {
      console.warn('No banks found or invalid format:', result)
    }
  } catch (error) {
    console.error('Error loading banks:', error)
  }
}

const loadBankAccountData = async () => {
  if (!isEdit.value) {
    // Tạo mới - reset về mặc định
    const defaultData = myBankAccountService.createDefaultBankAccountModel()
    Object.assign(formData, defaultData)
    return
  }

  try {
    loading.value = true
    const bankAccount = await myBankAccountService.getById(props.id)
    
    if (bankAccount) {
      Object.assign(formData, bankAccount)
    } else {
      const defaultData = myBankAccountService.createDefaultBankAccountModel()
      Object.assign(formData, defaultData)
    }
  } catch (error) {
    console.error('Error loading bank account data:', error)
    const defaultData = myBankAccountService.createDefaultBankAccountModel()
    Object.assign(formData, defaultData)
  } finally {
    loading.value = false
  }
}


const onSubmit = async (values, { setFieldError }) => {
  try {
    // Use values from Form instead of formData
    const submitData = { ...values }
    
    // Set Id for edit mode
    if (isEdit.value) {
      submitData.Id = Number(props.id)
    } else {
      submitData.Id = 0
    }
    
    emit('submit', submitData)
  } catch (error) {
    console.error('Error in onSubmit:', error)
  }
}

const handleCancel = () => {
  emit('cancel')
}

// Watch for changes in props.id to reload data
watch(() => props.id, async (newId, oldId) => {
  if (newId !== oldId) {
    await loadBankAccountData()
  }
})

// Lifecycle
onMounted(async () => {
  // Load danh sách ngân hàng
  await loadBanks()
  
  // Load dữ liệu bank account (nếu edit mode)
  await loadBankAccountData()
})
</script>

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

.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #495057;
}

.text-danger {
  color: #dc3545 !important;
}

.is-invalid {
  border-color: #dc3545;
}

.invalid-feedback {
  display: block;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.btn {
  font-size: 0.875rem;
}

.form-check-input:checked {
  background-color: #0d6efd;
  border-color: #0d6efd;
}
</style>
